/* ============================================================
   Homepage hero — textless fashion film banner (index.html only)
   - full-bleed photography, no captions or type over the image
   - slow Ken Burns push-in on the active slide
   - cinematic crossfade
   - hairline frame + minimal line indicators
   Loaded after style.css and scroll-effects.css.
   ============================================================ */

.hero.hero-fashion {
  position: relative;
  display: block;
  text-align: left;
  min-height: 100vh;
  min-height: 100svh;
  background: #050505;
  overflow: hidden;
  isolation: isolate;
}
/* the base .hero draws a silver rule at the bottom; the frame replaces it */
.hero.hero-fashion::after { display: none; }

.hero-fashion .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #050505;
}

.hero-fashion .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(var(--hf-zoom, 1.08));
  transition: opacity 1.6s ease;
  will-change: opacity, transform;
}
.hero-fashion .slide.active {
  opacity: 1;
  animation: hfKenBurns 12s cubic-bezier(.25, .45, .3, 1) forwards;
}
/* the first (concert) frame gets a slightly stronger push-in on phones */
@media (max-width: 900px) {
  .hero-fashion .slide:nth-child(1) { --hf-zoom: 1.05; }
}

@keyframes hfKenBurns {
  from { transform: scale(1.01); }
  to   { transform: scale(var(--hf-zoom, 1.08)); }
}

/* ---------- Soft cinema vignette (edges only) ---------- */
.hero-fashion .hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(125% 105% at 50% 48%, transparent 56%, hsla(0, 0%, 0%, .26) 100%),
    linear-gradient(180deg,
      hsla(0, 0%, 0%, .26) 0%,
      transparent 16%,
      transparent 84%,
      hsla(0, 0%, 0%, .3) 100%);
}

/* ---------- Hairline frame ---------- */
.hf-frame {
  position: absolute;
  inset: clamp(10px, 1.4vw, 20px);
  z-index: 3;
  border: 1px solid hsla(0, 0%, 100%, .16);
  pointer-events: none;
}

/* ---------- Slide indicators (no text) ---------- */
.hf-dots {
  position: absolute;
  left: 50%;
  bottom: clamp(22px, 3.2vw, 38px);
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
}

.hf-dot {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: clamp(26px, 3vw, 42px);
  height: 18px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.hf-dot i {
  display: block;
  position: relative;
  width: 100%;
  height: 1px;
  overflow: hidden;
  background: hsla(0, 0%, 100%, .3);
  transition: background .3s ease;
}
.hf-dot i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent), #fff);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.hf-dot:hover i { background: hsla(0, 0%, 100%, .55); }
.hf-dot.is-active i::after { transform: scaleX(1); }
.hf-dot:focus-visible { outline: 1px solid hsla(0, 0%, 100%, .65); outline-offset: 5px; }

/* ---------- Entrance ---------- */
@keyframes hfFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hf-frame,
.hf-dots {
  opacity: 0;
  animation: hfFadeIn 1.2s ease .35s forwards;
}

/* ---------- Tablet / mobile ----------
   Every phone and tablet gets the same tall, full-bleed portrait hero used by
   taylorswift.com: the banner fills the width edge to edge and always keeps a
   3:5 portrait ratio (the reference site's mobile image is 900x1500). Height
   is derived purely from the viewport width, so the crop and framing stay
   identical on every device instead of changing with screen height.
   The photograph is allowed to crop; it no longer has to fit whole.

   Face-tracked crop: --face-kx is derived from each source photo's detected
   face position and its aspect ratio. The clamp keeps the image covering the
   frame, so the face stays centred whenever the crop has room for it and
   otherwise settles against the nearest edge. */
@media (max-width: 900px) {
  .hero.hero-fashion {
    --hero-h: calc(100vw * 5 / 3);
    min-height: 0;
    height: var(--hero-h);
  }

  .hero-fashion .slide {
    background-size: cover;
    background-position: center center;
    background-position-x: 50%;
    background-position-x: clamp(100%, calc(50% + var(--hero-h) * var(--face-kx, 0)), 0px);
  }

  .hero-fashion .slide:nth-child(1) { --face-kx: 0.56072; }
  .hero-fashion .slide:nth-child(2) { --face-kx: 0.00546; }
  .hero-fashion .slide:nth-child(3) { --face-kx: 0.02927; }
  .hero-fashion .slide:nth-child(4) { --face-kx: -0.19662; }
  .hero-fashion .slide:nth-child(5) { --face-kx: 0.43760; }

  /* full-bleed photo like the reference site — drop the inset hairline */
  .hf-frame { display: none; }
  .hf-dots { bottom: 20px; gap: 8px; }
  .hf-dot { width: 24px; height: 14px; }
}

@media (max-width: 480px) {
  .hf-dot { width: 20px; }
}

/* Landscape phones: a 3:5 portrait banner would be taller than the screen, so
   keep the same full-bleed, face-tracked crop but fill the available height. */
@media (max-width: 900px) and (orientation: landscape) {
  .hero.hero-fashion {
    --hero-h: 90svh;
    --hero-h: 90dvh;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-fashion .slide {
    transition: none;
    transform: none !important;
    animation: none !important;
    will-change: auto;
  }
  .hf-frame,
  .hf-dots {
    opacity: 1 !important;
    animation: none !important;
  }
}