/* ══════════════════════════════════════════════════════════
   DUNNALLY — SHARED HERO SLIDER
   Extracted from the homepage luxury redesign (v20260811) so every
   page with a hero gets IDENTICAL mechanics: contain + blurred-backdrop
   treatment for portrait media on desktop, one-directional Ken Burns
   zoom (images only — video never scales), and the same fade/timing.
   Reference: Rolex.com — restraint, cinematic, confident.
   Depends on tokens already defined in style.css (--primary-dark,
   --gold, --gold-light, --white, --display, --mono) plus one
   hero-only easing token defined below.
══════════════════════════════════════════════════════════ */

:root {
  --ease-luxury: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── HERO — FULL SCREEN CINEMATIC ───────────────────────── */
#hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: var(--primary-dark);
}
/* Secondary pages (about, contact, gallery, wholesale, shop, shipping,
   returns) use a shorter hero than the homepage/product page — full-screen
   reads right as a landing moment, but feels heavy on a page whose job is
   to get people into content quickly. Applied via <section id="hero"
   class="hero-compact">; homepage and product.html don't carry this class,
   so they stay full height. */
#hero.hero-compact {
  height: 78vh;
  min-height: 500px;
}
#full-hero-slider {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Each slide stacks absolutely — full screen */
.fhs-slide {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
  z-index: 0;
}
.fhs-slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

/* Photo fills the ENTIRE slide — behind text */
.fhs-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  flex: none !important;
  z-index: 0;
  overflow: hidden;
}
.fhs-photo img,
.fhs-photo video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
/* Backdrop copy — same media type (img or video) as the foreground, see
   components.js. Desktop-only — hidden by default so mobile stays
   full-bleed. */
.fhs-photo .fhs-backdrop { display: none; }

/* Desktop: portrait source media (image OR video — both get identical
   treatment, since either can be swapped in from the Sheet at any time)
   is shown UNCROPPED (contain) so no part of the composition is lost.
   The duplicated .fhs-backdrop element fills the pillarbox space with a
   soft, darkened, scaled-up blur of the same media — an ambient wash
   rather than a hard crop. */
@media (min-width: 769px) {
  .fhs-photo .fhs-fg {
    object-fit: contain;
    object-position: center;
    z-index: 1;
  }

  .fhs-photo .fhs-backdrop {
    display: block;
    object-fit: cover;
    object-position: center;
    filter: blur(60px) brightness(0.55) saturate(1.15);
    transform: scale(1.18);
    z-index: 0;
  }
}
/* Ken Burns — a slow, one-directional zoom IN (never zooms back out).
   IMAGE slides only — video already has its own inherent motion, so it
   never gets scaled at all (selectors below are scoped to `img.fhs-fg` /
   `img.fhs-backdrop`, not the bare classes, specifically to exclude
   <video>). The animation itself is always present on the element
   (animation-name never changes), and is simply PAUSED or RUNNING
   depending on .fhs-slide.active — toggling animation-play-state
   freezes/resumes the current value in place and never causes a jump,
   unlike adding/removing the animation entirely (which is what caused
   the old snap-on-deactivate glitch). Each slide zooms in fresh from
   scratch every time it becomes active — see resetKenBurns() in
   components.js, which rewinds a slide back to its start scale, but
   only after its opacity fade has fully finished (i.e. only while it's
   already invisible), so the rewind itself never shows.
   Duration is --kb-dur, set inline per slide in components.js from the
   ACTUAL hero-duration Sheet setting — not a guessed constant.
   Since every deactivation rewinds the zoom back to the start, a fixed
   duration much longer than the real dwell time would reset itself away
   long before it ever built up anything visible. Tying it to the real
   dwell means the push-in actually completes across one viewing. */
.fhs-photo img.fhs-fg {
  animation: kbzoom var(--kb-dur, 9s) ease-out forwards;
  animation-play-state: paused;
}
.fhs-slide.active .fhs-photo img.fhs-fg {
  animation-play-state: running;
}
@keyframes kbzoom {
  from { transform: scale(1.0); }
  to   { transform: scale(1.06); }
}
@media (min-width: 769px) {
  .fhs-photo img.fhs-backdrop {
    animation: kbzoomBackdrop var(--kb-dur, 9s) ease-out forwards;
    animation-play-state: paused;
  }
  .fhs-slide.active .fhs-photo img.fhs-backdrop {
    animation-play-state: running;
  }
  @keyframes kbzoomBackdrop {
    from { transform: scale(1.18); }
    to   { transform: scale(1.24); }
  }
}
/* Dark gradient veil over photo — heavier at bottom for text */
.fhs-photo::before { display: none; }
.fhs-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,20,6,0.18) 0%,
    rgba(10,20,6,0.08) 35%,
    rgba(10,20,6,0.62) 72%,
    rgba(10,20,6,0.90) 100%
  );
  z-index: 1;
  pointer-events: none;
}
/* Desktop-only override of the veil above — this MUST come after the
   base .fhs-photo::after rule (same selector/specificity) so the wider
   wash actually wins on desktop instead of being silently overridden by
   the base rule's later source position. Only `background` changes;
   content/position/inset/z-index/pointer-events are inherited from the
   base rule above. */
@media (min-width: 769px) {
  .fhs-photo::after {
    background:
      radial-gradient(120% 90% at 0% 100%, rgba(10,20,6,0.85) 0%, rgba(10,20,6,0.5) 30%, rgba(10,20,6,0.15) 55%, rgba(10,20,6,0) 72%),
      linear-gradient(to bottom, rgba(10,20,6,0.05) 0%, rgba(10,20,6,0) 32%, rgba(10,20,6,0.35) 72%, rgba(10,20,6,0.72) 100%);
  }
}

/* Text panel — absolute, sits over image at bottom left */
.fhs-text {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  min-width: unset !important;
  background: transparent !important;
  z-index: 2;
  padding: 0 6vw 5rem !important;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  max-width: 760px;
}
.fhs-text::before,
.fhs-text::after { display: none !important; }

/* Text elements — animated in on slide activation */
.fhs-eyebrow {
  font-family: var(--mono) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase;
  color: var(--gold) !important;
  margin-bottom: 1.25rem !important;
  display: flex !important;
  align-items: center;
  gap: 0.625rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease-luxury) 0.2s,
              transform 0.7s var(--ease-luxury) 0.2s;
}
.fhs-eyebrow::before {
  content: '';
  display: block;
  width: 18px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}
.fhs-slide.active .fhs-eyebrow {
  opacity: 1;
  transform: translateY(0);
}

.fhs-headline {
  font-family: var(--display) !important;
  font-size: clamp(2.6rem, 5.5vw, 5rem) !important;
  font-weight: 300 !important;
  line-height: 1.05 !important;
  color: var(--white) !important;
  margin-bottom: 1.25rem !important;
  text-shadow: none !important;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease-luxury) 0.35s,
              transform 0.9s var(--ease-luxury) 0.35s;
}
.fhs-headline em {
  font-style: italic !important;
  color: var(--gold-light) !important;
  font-weight: 300 !important;
}
.fhs-slide.active .fhs-headline {
  opacity: 1;
  transform: translateY(0);
}

.fhs-sub {
  font-family: var(--body) !important;
  font-size: 0.9rem !important;
  font-weight: 300 !important;
  font-style: normal !important;
  color: rgba(255,255,255,0.72) !important;
  line-height: 1.8 !important;
  margin-bottom: 2.25rem !important;
  border-left: none !important;
  padding-left: 0 !important;
  max-width: 440px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s var(--ease-luxury) 0.52s,
              transform 0.9s var(--ease-luxury) 0.52s;
}
.fhs-slide.active .fhs-sub {
  opacity: 1;
  transform: translateY(0);
}

/* CTA — Rolex-style: text + underline, no background */
.fhs-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono) !important;
  font-size: 0.65rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: var(--white) !important;
  text-decoration: none !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 0 0.4rem 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.35) !important;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s var(--ease-luxury) 0.68s,
              transform 0.8s var(--ease-luxury) 0.68s,
              border-color 0.3s ease,
              color 0.3s ease !important;
}
.fhs-btn:hover {
  background: none !important;
  border-bottom-color: var(--gold) !important;
  color: var(--gold) !important;
  transform: translateY(0) !important;
}
.fhs-slide.active .fhs-btn {
  opacity: 1;
  transform: translateY(0);
}

/* Progress dots → Rolex-style thin bars */
.fhs-dots {
  position: absolute;
  bottom: 2rem;
  right: 4vw;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.fhs-dot {
  width: 28px;
  height: 1.5px;
  background: rgba(255,255,255,0.25);
  border-radius: 0;
  cursor: pointer;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}
.fhs-dot.active {
  width: 52px;
  background: rgba(255,255,255,0.2);
}
.fhs-dot.active::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: var(--white);
  animation: progbar 7s linear forwards;
}
@keyframes progbar {
  from { width: 0%; }
  to   { width: 100%; }
}

/* ── MOBILE HERO ────────────────────────────────────────── */
@media (max-width: 768px) {
  #hero { height: 100svh; min-height: 560px; }
  #hero.hero-compact { height: 72svh; min-height: 460px; }
  .fhs-text {
    padding: 0 5vw 3.5rem !important;
  }
  .fhs-headline { font-size: clamp(2rem, 9vw, 3rem) !important; }
  .fhs-sub { font-size: 0.82rem !important; margin-bottom: 1.75rem !important; }
  .fhs-dots { bottom: 1.25rem; right: 1.5rem; }
}

/* ── REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fhs-eyebrow, .fhs-headline, .fhs-sub, .fhs-btn { opacity: 1 !important; transform: translateY(0) !important; transition: none !important; }
  .fhs-photo img.fhs-fg, .fhs-photo img.fhs-backdrop { animation: none; }
  .fhs-dot.active::after { animation: none; width: 100%; }
}