/* ===========================================================
   Avanor Capital — scroll-scrubbed cinematic intro
   The brand film is PINNED to the viewport and advances frame
   by frame as the user scrolls (it never plays on its own),
   then releases into the page. Modeled on the zero.university
   scroll entrance.
   =========================================================== */

@keyframes av-stage-hint { 0%,100% { transform: translateY(0); opacity:.9 } 50% { transform: translateY(6px); opacity:.45 } }

/* ---------- tall scroll track; its height is the scrub length ---------- */
.av-stage {
  position: relative;
  height: 320vh;            /* JS may tune this from the clip duration */
  background: #07101C;
}

/* the pinned viewport that holds the film.
   NOTE: position:sticky is unreliable in this harness (the window scrolls,
   not the stage's overflow ancestor), so we pin with position:fixed and
   toggle .is-done from JS once the scrub completes. The tall .av-stage
   above reserves the scroll runway. */
.av-stage__sticky {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100vh; overflow: hidden;
  background: #07101C; z-index: 1;
}
.av-stage__sticky.is-done { position: absolute; top: auto; bottom: 0; }

.av-stage__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  background: #07101C;
  pointer-events: none;
}

/* brief loader while the first frames decode */
.av-stage__loader {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: #07101C;
  transition: opacity .5s ease;
}
.av-stage__loader.is-hidden { opacity: 0; pointer-events: none; }
.av-stage__loadbar {
  width: 132px; height: 2px; border-radius: 2px;
  background: rgba(255,255,255,.12); overflow: hidden;
}
.av-stage__loadbar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg,#9A7B2E,#C9A84C 55%,#EBD9A0);
  transition: width .3s ease;
}
.av-stage__loadlabel {
  font-family: Montserrat, sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase; color: #6E7787;
}

/* warm cinematic vignette so chrome stays legible over any frame */
.av-stage__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 85% at 50% 40%, transparent 50%, rgba(5,10,18,.6) 100%),
    linear-gradient(to top, rgba(5,10,18,.6) 0%, transparent 26%);
}
.av-stage__grain {
  position: absolute; inset: -20px; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px 170px; opacity: .05; mix-blend-mode: overlay;
}

/* ---------- overlay chrome ---------- */
.av-stage__chrome {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

/* headline held over the opening frames (paper flat), fades as we scrub in */
.av-stage__headline {
  position: relative;
  max-width: 15ch; margin: 0; padding: 0 .4em; text-align: center;
  font-family: Montserrat, sans-serif; font-weight: 800;
  font-size: clamp(34px, 5vw, 66px); line-height: 1.04;
  letter-spacing: -0.01em; text-transform: uppercase; color: #FBF8F0;
  text-shadow: 0 2px 10px rgba(5,10,18,.85), 0 6px 40px rgba(5,10,18,.7);
}
/* soft dark halo so the text reads over any frame without a hard box */
.av-stage__headline::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 150%; height: 230%;
  background: radial-gradient(60% 56% at 50% 50%, rgba(5,10,18,.72) 0%, rgba(5,10,18,.42) 45%, transparent 75%);
}
.av-stage__headline em {
  font-style: normal;
  color: #EBD9A0;
}

/* eyebrow chip, top-centre, fades out as the film advances */
.av-stage__eyebrow {
  position: absolute; top: 112px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 11px;
  border: 1px solid rgba(201,168,76,0.32); background: rgba(201,168,76,0.07);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 8px 16px; border-radius: 999px; white-space: nowrap;
}
.av-stage__eyebrow span.dot { width: 6px; height: 6px; border-radius: 50%; background: #C9A84C; box-shadow: 0 0 0 3px rgba(201,168,76,0.18); }
.av-stage__eyebrow span.txt {
  font-family: Montserrat, sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase; color: #D8C079;
}

/* scroll cue, bottom-centre, fades out as the film advances */
.av-stage__hint {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 9px;
  font-family: Montserrat, sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: #E8E1D2;
}
.av-stage__hint svg { width: 17px; height: 17px; animation: av-stage-hint 1.7s ease-in-out infinite; }

/* thin gold scrub line at the very bottom of the pinned frame */
.av-stage__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.08); }
.av-stage__bar { height: 100%; width: 0%; background: linear-gradient(90deg,#9A7B2E,#C9A84C 55%,#EBD9A0); box-shadow: 0 0 12px rgba(201,168,76,.6); }

/* ---------- reduced motion: no scrub, just rest on the final logo frame ---------- */
@media (prefers-reduced-motion: reduce) {
  .av-stage { height: 100vh; }
  .av-stage__sticky { position: absolute; }
  .av-stage__hint { display: none; }
}

@media (max-width: 600px) {
  .av-stage { height: 260vh; }
  .av-stage__eyebrow { top: 88px; }
  .av-stage__eyebrow span.txt { font-size: 10.5px; letter-spacing: 0.16em; }
}