/* ==========================================================================
   Workflow Studio — showreel
   hero.css
   The hero: the reel it is set on, the entrance and the scroll cue.
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  /* One screenful, less the bar above it. svh, so the mobile URL bar
     collapsing does not resize the hero mid-scroll. */
  min-height: calc(100svh - var(--nav-h));
  padding: 40px 0 96px;
  /* Deliberately not hidden: the reel runs up past this box to get behind the
     navbar (see .hero-media). Its own overflow still holds the drift. */
}

/* --- Hero footage ----------------------------------------------------------
   The reel is the ground the hero is set on: it fills the section and the
   words are read over it.

   No aspect-ratio and no height cap — both belonged to a framed plate sized off
   a copy column. A background is cut to the section instead, which is what
   object-fit: cover below is for: the clip keeps its own 16/9 and loses
   whatever the section cannot hold, rather than being squashed to fit a window
   nobody's is shaped like.
   -------------------------------------------------------------------------- */

.hero-media {
  position: absolute;
  /* Cale sous la barre de nav : le hero commence ou la navbar finit, donc
     inset: 0 suffit. Le fondu du haut (mask-image) allait avec le
     debordement derriere la barre — sans debordement il mangeait le haut
     de l'image. */
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
}

/* An unhurried drift, so a two-second loop still feels like a moving image
   rather than a stutter on repeat. Held on its own element: the entrance
   animates the image, and two animations cannot share a transform. */
.hero-media-inner {
  width: 100%;
  height: 100%;
  /* drift retire : son scale(1.07) recadrait l'image. */
}

/* img as well as video: the frame is the reel now, but the same box has to
   hold a still the day the clip is swapped back out. */
.hero-media img,
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* The reel is graded dark — a lit object on black — and behind a scrim it
     read as murk. brightness lifts it; the contrast bump goes with it because
     brightness raises the blacks by the same amount it raises the subject, and
     without it the black stops being black. This is the knob: everything else
     about the frame follows from these two numbers. */
  filter: brightness(1.4) contrast(1.08) saturate(1.05);
  /* object-fit: contain : l'image entiere est visible, donc le lockup
     WORKFLOW STUDIO incruste en haut a gauche du film l'est aussi — il double
     celui de la barre de nav. Le scale(1.18) qui le rognait a ete retire. */
  transform: none;
}

/* Nothing is read over the footage any more, so the plate that used to hold
   the headline legible is off — it was dimming the reel for the sake of words
   that are no longer there. What is left is the two edges.

   The top is the mask's job now, not this one's. What is left here is the
   bottom, so a bright frame does not butt straight up against the flat surface
   of the section below, and a radial that keeps the corners from competing
   with the middle of the frame. */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(15, 15, 15, 0.16) 0%,
      rgba(15, 15, 15, 0.08) 16%,
      rgba(15, 15, 15, 0.08) 68%,
      rgba(15, 15, 15, 0.7) 100%
    ),
    radial-gradient(
      ellipse 92% 82% at 50% 50%,
      rgba(15, 15, 15, 0) 48%,
      rgba(15, 15, 15, 0.3) 100%
    );
}

/* --- Hero entrance ---------------------------------------------------------
   Armed only under .js (the closed state must never be left on screen without
   a script to open it) and released by .intro-done, so it starts as the
   curtain lifts rather than behind it.

   The whole entrance is over at 1.8 s: the footage and the scroll cue are what
   is left of it, and they are timed to land together.
   -------------------------------------------------------------------------- */

.js .hero-media :is(img, video),
.js .hero-scroll {
  opacity: 0;
}


.js.intro-done .hero-media :is(img, video) {
  animation: hero-media-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}


.js.intro-done .hero-scroll {
  animation: hero-rise 0.79s ease 1.01s both;
}

@keyframes hero-media-in {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* The cue is centred with translateX(-50%); a keyframe that only says
   translateY would drop that and let it jump left when the animation hands
   the transform back to the stylesheet. Carry the centring through. */
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}

/* --- Scroll cue ------------------------------------------------------------ */

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.hero-scroll:hover {
  color: var(--text);
}

.hero-scroll i {
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: hero-cue 2.2s ease-in-out infinite;
}

@keyframes hero-cue {
  0%,
  100% {
    transform: scaleY(0.5);
    transform-origin: top;
    opacity: 0.4;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
  }
}

/* --- Landing furniture, gone once the page moves ----------------------------
   The scroll cue belongs to the first screen: past the top it drops and fades.
   The bar used to leave with it; it stays now, transparent, and re-inks itself
   per section instead (nav.css). Selectors are pitched above the entrance rules (.js.intro-done ...)
   on purpose — those set animation, opacity and transform with fill: both, so a
   weaker rule would never be seen.
   -------------------------------------------------------------------------- */

/* Set by the script when the entrance animation ends, which is what releases
   opacity and transform back to the stylesheet. */
.js.intro-done .hero-scroll.is-settled {
  animation: none;
  opacity: 1;
  transform: translateX(-50%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.js.intro-done.is-scrolled .hero-scroll {
  animation: none;
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-media-inner,
  .hero-scroll i {
    animation: none;
  }

  .nav {
    transition: none;
  }

  .js.intro-done .hero-scroll.is-settled {
    transition: none;
  }

  .js .hero-media :is(img, video),
  .js .hero-scroll {
    opacity: 1;
  }


  .js.intro-done .hero-media :is(img, video),
  .js.intro-done .hero-scroll {
    animation: none;
  }
}

/* Le halo dore du hero (.hero::before) et son grain (.hero::after) ont ete
   retires : le header reste sur le noir de fond. */

/* Still named for the hero it was written in: the CTA and the pitch band both
   use this row, and renaming it would touch three files to say the same
   thing. */
.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 30px;
}