/* ==========================================================================
   FILE: assets/css/hero-banner.css
   PURPOSE: Hero carousel — auto-slide, Ken Burns zoom, product preview.
   Dark overlay hero with WHITE accents (no gold — gold is announcement-bar
   only). PHP: template-parts/hero-banner.php | JS: assets/js/hero-banner.js
   ========================================================================== */

/* Remove GeneratePress's default content-area spacing on the front page
   so the hero sits flush against the header with no gap */
#main, #content, #primary, .site-main, .inside-article, .site-content {
	margin: 0 !important;
	padding: 0 !important;
}

.dc-hero {
	position: relative;
	width: 100%;
	height: clamp(540px, 68vh, 740px);
	overflow: hidden;
	background: #0a0a0a;
	isolation: isolate;
	display: block;
}

.dc-hero-h1, .dc-hero-live {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.dc-hslides { position: absolute; inset: 0; }
.dc-hslide {
	position: absolute; inset: 0; display: flex; align-items: flex-end;
	opacity: 0; visibility: hidden;
	transition: opacity .9s ease, visibility 0s linear .9s;
}
.dc-hslide.is-on {
	opacity: 1; visibility: visible; z-index: 1;
	transition: opacity .9s ease, visibility 0s;
}

.dc-hmedia { position: absolute; inset: 0; overflow: hidden; }
.dc-himg {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transform: scale(1.02);
}
.dc-hslide.is-on .dc-himg { animation: dcKen calc(var(--dc-dur) * 2.4) ease-out forwards; }
.dc-hvid {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@keyframes dcKen { from { transform: scale(1.02); } to { transform: scale(1.14); } }

.dc-tone-1 .dc-hmedia { background: radial-gradient(115% 92% at 22% 18%, #1a1a1a, #101010 46%, #0a0a0a); }
.dc-tone-2 .dc-hmedia { background: radial-gradient(115% 92% at 78% 20%, #1a1a1a, #101010 48%, #0a0a0a); }
.dc-tone-3 .dc-hmedia { background: radial-gradient(120% 95% at 30% 80%, #1a1a1a, #101010 50%, #0a0a0a); }

.dc-hscrim {
	position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.20) 40%, rgba(0,0,0,0) 70%),
		linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,.10) 46%, rgba(0,0,0,.70) 84%, rgba(0,0,0,.94) 100%);
}

.dc-hfoot {
	position: relative; z-index: 3; width: 100%;
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: clamp(20px, 4vw, 48px);
	padding: 0 clamp(20px, 5vw, 72px) 60px;
}

.dc-hbody { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 560px; min-width: 0; }
.dc-heyebrow { font-family: var(--dc-font-body); font-size: 11px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: #ffffff; }

.dc-hcta {
	position: relative; display: inline-flex; align-items: center; gap: 9px; overflow: hidden;
	padding: 14px 26px; border-radius: 2px;
	text-decoration: none; /* removes the browser's default underline on <a> */
	background: #ffffff;
	color: #111111; font-family: var(--dc-font-body); font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
	box-shadow: 0 12px 30px rgba(0,0,0,.34);
	transition: box-shadow .3s ease, transform .18s ease, background .25s ease;
}
.dc-hcta-txt { position: relative; z-index: 1; }
/* Shimmer sweep — a soft diagonal highlight that slides across the button
   on a loop, drawing the eye without any color/gold (still white/black). */
.dc-hcta-shine {
	position: absolute; top: 0; left: -60%; width: 40%; height: 100%; z-index: 1;
	background: linear-gradient(115deg, transparent, rgba(0,0,0,.16), transparent);
	transform: skewX(-18deg);
	animation: dcCtaShine 3.2s ease-in-out infinite;
	animation-delay: 1s;
}
@keyframes dcCtaShine {
	0%   { left: -60%; }
	28%  { left: 130%; }
	100% { left: 130%; }
}
.dc-hcta svg { position: relative; z-index: 1; width: 17px; height: 17px; stroke: #111111; stroke-width: 2; fill: none; transition: transform .3s ease; }
@media (hover: hover) {
	.dc-hcta:hover { background: #eeeeee; box-shadow: 0 16px 38px rgba(0,0,0,.4); }
	.dc-hcta:hover svg { transform: translateX(4px); }
}
.dc-hcta:active { transform: scale(.985); }

.dc-heyebrow, .dc-hcta { opacity: 0; transform: translateY(20px); }
.dc-hslide.is-on .dc-heyebrow, .dc-hslide.is-on .dc-hcta {
	opacity: 1; transform: none;
	transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1);
}
.dc-hslide.is-on .dc-heyebrow { transition-delay: .14s; }
.dc-hslide.is-on .dc-hcta     { transition-delay: .3s; }

.dc-harrow {
	position: absolute; top: 44%; transform: translateY(-50%); z-index: 5;
	width: 46px; height: 46px; border-radius: 50%; cursor: pointer; padding: 0;
	display: flex; align-items: center; justify-content: center;
	background: rgba(10,10,10,.34); border: 1px solid rgba(255,255,255,.38);
	backdrop-filter: blur(6px);
	opacity: 0; transition: opacity .3s ease, background .25s ease;
}
.dc-harrow svg { width: 19px; height: 19px; stroke: #ffffff; stroke-width: 1.7; fill: none; }
.dc-hprev { left: 20px; }
.dc-hnext { right: 20px; }
.dc-hero:hover .dc-harrow, .dc-harrow:focus-visible { opacity: 1; }
@media (hover: hover) {
	.dc-harrow:hover { background: #ffffff; }
	.dc-harrow:hover svg { stroke: #111111; }
}

.dc-hbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 0 clamp(20px, 5vw, 72px) 16px; }
.dc-hbars { flex: 1 1 auto; display: flex; gap: 5px; min-width: 0; }
.dc-hb { flex: 1 1 0; position: relative; height: 3px; padding: 0; border: 0; border-radius: 3px; background: rgba(255,255,255,.22); cursor: pointer; }
.dc-hb i { position: absolute; inset: 0; width: 0; border-radius: 3px; background: #ffffff; box-shadow: 0 0 8px rgba(255,255,255,.5); }
.dc-hero.dc-auto .dc-hb.is-on i { animation: dcFill var(--dc-dur) linear forwards; }
.dc-hero.dc-paused .dc-hb.is-on i { animation-play-state: paused; }
@keyframes dcFill { to { width: 100%; } }

.dc-hplay { position: relative; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; }
.dc-hplay svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 2; fill: none; }
.dc-i-play { fill: #fff; stroke: none; }
.dc-hero.dc-paused .dc-i-pause { display: none; }
.dc-hero:not(.dc-paused) .dc-i-play { display: none; }

@media (max-width: 749px) {
	.dc-hero { height: 78vh; height: 78svh; min-height: 480px; max-height: 660px; }
	.dc-harrow { display: none; }
	.dc-hfoot { flex-direction: column; align-items: flex-start; gap: 18px; padding: 0 20px 58px; }
	.dc-hbar { padding: 0 20px 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.dc-hslide.is-on .dc-himg { animation: none; transform: none; }
	.dc-hcta-shine { animation: none; display: none; }
	.dc-heyebrow, .dc-hcta,
	.dc-hslide.is-on .dc-heyebrow, .dc-hslide.is-on .dc-hcta {
		opacity: 1; transform: none; transition: none;
	}
}