/* ===========================================================
   Avanor Capital — "How It Works" scroll-scrubbed video stage
   The clip is PINNED to the viewport and scrubs frame-by-frame
   as the user scrolls (it never plays on its own). One step
   card rises into view per quarter of the scroll runway; once
   all four have passed, the pin releases into the page.
   Mirrors the intro stage pin (position:fixed + .is-done).
   =========================================================== */

/* ---------- tall scroll track — its height is the scrub length ---------- */
.av-hiw {
  position: relative;
  height: 460vh;
  background: #0B1726;
}

/* pinned viewport. position:sticky is unreliable here (the window scrolls,
   not an overflow ancestor), so we pin with fixed and toggle classes from JS.
   DEFAULT is parked at the top of its own section (absolute) so it never
   overlays sections above it; JS switches to fixed only while in range. */
.av-hiw__sticky {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100vh; overflow: hidden;
  background: #0B1726; z-index: 1;
}
.av-hiw__sticky.is-pinned { position: fixed; top: 0; }
.av-hiw__sticky.is-done { position: absolute; top: auto; bottom: 0; }

.av-hiw__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: #0B1726;
  pointer-events: none;
}

/* legibility scrim — bottom-up + edge vignette, brand "protection gradient" */
.av-hiw__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(7,14,24,.92) 0%, rgba(7,14,24,.55) 30%, rgba(7,14,24,.42) 60%, rgba(7,14,24,.74) 100%),
    radial-gradient(120% 80% at 50% 42%, transparent 46%, rgba(7,14,24,.6) 100%);
}
.av-hiw__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: .045; mix-blend-mode: overlay;
}

/* brief loader while the clip's first frame decodes */
.av-hiw__loader {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: #0B1726; transition: opacity .5s ease;
}
.av-hiw__loader.is-hidden { opacity: 0; pointer-events: none; }
.av-hiw__loadbar { width: 132px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.av-hiw__loadbar i { display: block; height: 100%; width: 28%; background: linear-gradient(90deg,#9A7B2E,#C9A84C 55%,#EBD9A0);
  animation: av-hiw-load 1.1s ease-in-out infinite; }
@keyframes av-hiw-load { 0%{transform:translateX(-120%)} 100%{transform:translateX(460%)} }
.av-hiw__loadlabel { font-family: Montserrat, sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: #6E7787; }

/* ---------- persistent header ---------- */
.av-hiw__head {
  position: absolute; top: 13vh; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 720px; padding: 0 32px; text-align: center; z-index: 4; pointer-events: none;
}
.av-hiw__eyebrow {
  font-family: Montserrat, sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: 0.22em; text-transform: uppercase; color: #C9A84C; margin-bottom: 14px;
}
.av-hiw__title {
  font-family: Montserrat, sans-serif; font-weight: 800; font-size: clamp(30px,4.2vw,44px);
  line-height: 1.1; letter-spacing: -0.01em; color: #F4F1E9; margin: 0; text-wrap: balance;
  text-shadow: 0 2px 22px rgba(5,10,18,.7);
}

/* ---------- stacked step cards ---------- */
.av-hiw__cards {
  position: absolute; left: 50%; top: 56%; transform: translate(-50%,-50%);
  width: 100%; max-width: 520px; height: 320px; padding: 0 24px; z-index: 5;
  perspective: 1150px;
}
.av-hiw__card {
  position: absolute; left: 24px; right: 24px; top: 50%;
  transform: translateY(-50%);
  transform-origin: 50% 50%;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  opacity: 0; will-change: opacity, transform;
}
.av-hiw__panel {
  position: relative; overflow: hidden;
  background: rgba(11,23,38,.62);
  -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(201,168,76,0.34);
  border-radius: 20px; padding: 38px 36px 34px;
  box-shadow: 0 30px 80px rgba(4,9,18,0.62);
}
.av-hiw__panel::before { /* gold top-rule */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #C9A84C 35%, #EBD9A0 55%, transparent);
}
.av-hiw__watermark {
  position: absolute; right: 22px; top: 8px;
  font-family: Montserrat, sans-serif; font-weight: 900; font-size: 110px;
  line-height: 1; color: rgba(201,168,76,0.10); pointer-events: none; user-select: none;
}
.av-hiw__steplabel {
  font-family: Montserrat, sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase; color: #C9A84C; margin: 0 0 20px;
}
.av-hiw__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 14px;
  background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.34); margin-bottom: 22px;
}
.av-hiw__icon svg { width: 26px; height: 26px; }
.av-hiw__card h3 {
  font-family: Montserrat, sans-serif; font-weight: 700; font-size: 23px;
  color: #F4F1E9; margin: 0 0 11px; letter-spacing: -0.005em;
}
.av-hiw__card p {
  font-family: Inter, sans-serif; font-size: 15.5px; line-height: 1.62;
  color: #C3CBD4; margin: 0;
}

/* ---------- step rail + progress ---------- */
.av-hiw__rail {
  position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 14px; z-index: 4;
}
.av-hiw__pip {
  width: 38px; height: 4px; border-radius: 4px;
  background: rgba(255,255,255,0.16); transition: background .4s ease, box-shadow .4s ease;
}
.av-hiw__pip.is-active { background: linear-gradient(90deg,#C9A84C,#EBD9A0); box-shadow: 0 0 14px rgba(201,168,76,.55); }
.av-hiw__pip.is-past { background: rgba(201,168,76,0.5); }

.av-hiw__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.08); z-index: 4; }
.av-hiw__bar { height: 100%; width: 0%; background: linear-gradient(90deg,#9A7B2E,#C9A84C 55%,#EBD9A0); box-shadow: 0 0 12px rgba(201,168,76,.6); }

.av-hiw__hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 7px; z-index: 4;
  font-family: Montserrat, sans-serif; font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase; color: #E8E1D2; transition: opacity .4s ease;
}
.av-hiw__hint svg { width: 16px; height: 16px; animation: av-hiw-hint 1.7s ease-in-out infinite; }
@keyframes av-hiw-hint { 0%,100%{transform:translateY(0);opacity:.9} 50%{transform:translateY(5px);opacity:.45} }

@media (max-width: 640px) {
  .av-hiw { height: 420vh; }
  .av-hiw__head { top: 9vh; }
  .av-hiw__panel { padding: 30px 26px 28px; }
  .av-hiw__card h3 { font-size: 20px; }
  .av-hiw__watermark { font-size: 84px; }
  .av-hiw__rail { bottom: 78px; }
}

/* ---------- reduced motion: no pin, no scrub — static stacked grid ---------- */
@media (prefers-reduced-motion: reduce) {
  .av-hiw { height: auto; padding: 96px 0; }
  .av-hiw__sticky { position: relative !important; height: auto; padding: 0 0 40px; }
  .av-hiw__video { position: absolute; opacity: .18; }
  .av-hiw__head { position: relative; top: auto; transform: none; margin: 0 auto 48px; }
  .av-hiw__cards { position: relative; left: auto; top: auto; transform: none; max-width: 1100px;
    display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
  .av-hiw__card { position: relative !important; left: auto !important; right: auto !important; top: auto !important;
    transform: none !important; opacity: 1 !important; }
  .av-hiw__rail, .av-hiw__progress, .av-hiw__hint, .av-hiw__loader { display: none; }
}