/* Purpose: Cinematic hero — letterbox opening, word-mask headline, drifting key light, film grain and the curated product reel. */

.hero {
  position: relative;
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: calc(64px + 36px) 0 0;
  background: var(--color-primary-dark);
  isolation: isolate;
}

/* Background plate */
.hero-bg {
  position: absolute;
  inset: -4%;
  z-index: -3;
  transform: scale(1.12);
  opacity: 0;
  transition: opacity 2.2s var(--ease), transform 9s var(--ease-zoom);
}
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.hero.go .hero-bg { opacity: .9; transform: scale(1); }

.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--gradient-hero-overlay); }

/* Slow drifting key light */
.beam {
  position: absolute;
  z-index: -1;
  width: 70vmax;
  height: 70vmax;
  left: 40%;
  top: -30%;
  border-radius: var(--radius-full);
  background: var(--gradient-beam);
  filter: blur(10px);
  animation: hero-drift 22s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes hero-drift {
  0%   { transform: translate(-8%, 0) scale(1); }
  100% { transform: translate(10%, 18%) scale(1.15); }
}

/* Film grain */
.grain {
  position: absolute;
  inset: -50%;
  z-index: 3;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: var(--texture-grain);
  animation: hero-grain 1.2s steps(6) infinite;
}
@keyframes hero-grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -4%); }
  60%  { transform: translate(-4%, -1%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* Letterbox opening */
.lb { position: absolute; left: 0; right: 0; height: 8vh; background: var(--color-primary-night); z-index: 6; transition: transform 1.6s var(--ease-cinema) .15s; pointer-events: none; }
.lb.t { top: 0; transform-origin: top; }
.lb.b { bottom: 0; transform-origin: bottom; }
.hero.go .lb { transform: scaleY(0); }

/* Copy */
.hero-copy { position: relative; z-index: 4; max-width: none; }
.hero .lede { margin-top: var(--space-6); }

/* Word-mask reveal (words are wrapped by animations.js) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; transform: translateY(105%); transition: transform 1.25s var(--ease-expo); }
.hero.go .w > span { transform: none; }

.hero .flourish::before, .hero .flourish::after { transform: scaleX(0); transition: transform 1.4s var(--ease) .9s; }
.hero .flourish::before { transform-origin: right; }
.hero .flourish::after { transform-origin: left; }
.hero .flourish i { opacity: 0; transition: opacity 1s var(--ease) .7s; }
.hero.go .flourish::before, .hero.go .flourish::after { transform: scaleX(1); }
.hero.go .flourish i { opacity: 1; }

.rise { opacity: 0; transform: translateY(18px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.rise--d1 { transition-delay: 1.25s; }
.rise--d2 { transition-delay: 1.45s; }
.rise--d3 { transition-delay: 1.65s; }
.hero.go .rise { opacity: 1; transform: none; }

.hero-ctas { display: grid; gap: var(--space-3); margin-top: var(--space-10); max-width: none; }
.hero-ctas .btn { width: 100%; }

.or { display: flex; align-items: center; gap: var(--space-4); font-family: var(--font-heading); font-style: italic; font-size: var(--text-body-sm); color: var(--color-ivory-soft); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--color-accent-faint); }

.hero-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-accent-faint);
  max-width: none;
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  color: var(--color-ivory-soft);
}
.hero-meta img { width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--color-white); padding: 2px; flex: none; }
.hero-meta strong { display: block; font-weight: var(--weight-regular); color: var(--color-ivory); }

/* Curation reel — browsing columns drift, the centre column is curated */
.reel-stage {
  position: relative;
  z-index: 2;
  width: auto;
  height: 460px;
  margin: var(--space-12) calc(var(--pad) * -1) 0;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  overflow: hidden;
  -webkit-mask-image: var(--gradient-reel-mask);
  mask-image: var(--gradient-reel-mask);
  opacity: 0;
  transition: opacity 2s var(--ease) .5s;
}
.hero.go .reel-stage { opacity: 1; }

.col { position: relative; overflow: visible; }
.track { display: flex; flex-direction: column; gap: 10px; will-change: transform; }
.track .pc { aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-secondary); }
.track .pc img { width: 100%; height: 100%; object-fit: cover; }
.col.a .track { animation: reel-up 70s linear infinite; }
.col.c .track { animation: reel-down 80s linear infinite; }
@keyframes reel-up   { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
@keyframes reel-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.col.b .track { transition: transform 1.6s var(--ease-step); }

/* Spotlight window: everything outside the frame falls into shadow */
.spot {
  position: absolute;
  z-index: 3;
  left: calc(100% / 3 + 10px / 3);
  width: calc((100% - 20px) / 3);
  pointer-events: none;
  box-shadow: 0 0 0 200vmax var(--color-spot-shade);
  transition: box-shadow 1.6s var(--ease);
}
.spot::before { content: ""; position: absolute; inset: -10px; border: 1px solid var(--color-accent); opacity: .9; }
.spot::after { content: ""; position: absolute; inset: -14px; border: 1px solid var(--color-accent-faint); }
.spot i { position: absolute; width: 12px; height: 12px; border-color: var(--color-accent); border-style: solid; z-index: 1; }
.spot i:nth-child(1) { top: -14px; left: -14px; border-width: 1px 0 0 1px; }
.spot i:nth-child(2) { top: -14px; right: -14px; border-width: 1px 1px 0 0; }
.spot i:nth-child(3) { bottom: -14px; left: -14px; border-width: 0 0 1px 1px; }
.spot i:nth-child(4) { bottom: -14px; right: -14px; border-width: 0 1px 1px 0; }

.sheen { position: absolute; inset: 0; overflow: hidden; }
.sheen::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60%; left: -80%; background: var(--gradient-sheen); transform: skewX(-18deg); }
.spot.flash .sheen::after { animation: reel-sheen 1.4s var(--ease); }
@keyframes reel-sheen { to { left: 130%; } }

.spot-cap { position: absolute; left: 50%; top: calc(100% + 26px); transform: translateX(-50%); width: max-content; max-width: 260px; text-align: center; }
.spot-cap small { display: block; font-size: var(--text-xs); letter-spacing: var(--tracking-label); color: var(--color-accent); }
.spot-cap b {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--weight-regular);
  font-style: italic;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-ivory);
  margin-top: var(--space-1);
  transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);
}
.spot-cap b.swap { opacity: 0; transform: translateY(6px); }

.glints { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

/* md */
@media (min-width: 641px) {
  .hero { padding-top: calc(72px + 40px); }
  .hero-ctas, .hero-meta { max-width: 420px; }
  .reel-stage { height: 520px; gap: 14px; }
  .track { gap: 14px; }
  .spot { left: calc(100% / 3 + 14px / 3); width: calc((100% - 28px) / 3); }
  .spot::after { inset: -18px; }
  .spot i:nth-child(1) { top: -18px; left: -18px; }
  .spot i:nth-child(2) { top: -18px; right: -18px; }
  .spot i:nth-child(3) { bottom: -18px; left: -18px; }
  .spot i:nth-child(4) { bottom: -18px; right: -18px; }
  .spot-cap { top: calc(100% + 34px); }
  .spot-cap b { font-size: var(--text-md); }
}

/* lg */
@media (min-width: 901px) {
  .hero {
    min-height: max(100svh, 700px);
    flex-direction: row;
    align-items: center;
    padding-bottom: 88px;
  }
  .lb { height: 14vh; }
  .hero-copy { max-width: 520px; }
  .reel-stage {
    position: absolute;
    top: 0;
    bottom: 0;
    right: max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));
    width: min(40%, 500px);
    height: auto;
    margin: 0;
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .w > span, .rise, .hero-bg, .reel-stage { transform: none !important; opacity: 1 !important; }
  .lb { display: none; }
}