/* ==========================================================================
   SCROLLYTELLING — "The Circle Widens"
   A scroll-scrubbed frame sequence rendered to <canvas>, driven by GSAP
   ScrollTrigger. Sits on the home page just above "A Decade of Impact".

   Layout contract:
     .iei-scrolly          tall scroll container (--scrolly-depth)
     .iei-scrolly__stage   position:sticky, 100svh — the pinned viewport
     .iei-scrolly__canvas  fills the stage; letterbox is painted per-frame
                           with that frame's own paper tone (see JS), so the
                           bars read as artwork margin, not as a black box.
   ========================================================================== */

.iei-scrolly {
  --scrolly-depth: 400vh;
  --scrolly-paper: #e7e0d5; /* updated per-frame from JS */

  position: relative;
  height: var(--scrolly-depth);
  background: var(--scrolly-paper);
  /* The paper tone changes slowly; ease it so the seam never pops. */
  transition: background-color 0.35s linear;
}

/* The section's accessible name. Visible to assistive tech only — the visual
   heading role is carried by the three chapter headings. */
.iei-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------- stage -- */

/* The site header is `position: sticky` and stays on screen throughout, so the
   stage parks *below* it rather than at the viewport top — otherwise the nav
   band permanently clips the top of the artwork. --iei-nav-h is measured and
   written by scrollytelling.js, since the header's height differs between the
   desktop two-tier layout and the collapsed mobile bar. */
.iei-scrolly__stage {
  position: sticky;
  top: var(--iei-nav-h, 0px);
  height: calc(100svh - var(--iei-nav-h, 0px));
  overflow: hidden;
  display: grid;
  place-items: center;
}

.iei-scrolly__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Soft scrim so overlay copy stays legible over the artwork.
   Painted in the *live* paper tone and faded out with a mask, rather than a
   hardcoded rgba gradient — the artwork's paper drifts from #e7e0d5 to
   #efe8df across the sequence, and a fixed colour would show a seam. */
.iei-scrolly__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--scrolly-paper);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 22%, rgba(0, 0, 0, 0.82) 38%, transparent 62%);
  mask-image: linear-gradient(to top, #000 0%, #000 22%, rgba(0, 0, 0, 0.82) 38%, transparent 62%);
}

/* ------------------------------------------------------------ progress -- */

.iei-scrolly__loader {
  position: absolute;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%);
  width: 132px;
  height: 2px;
  background: rgba(53, 53, 53, 0.14);
  overflow: hidden;
  transition: opacity 0.5s ease;
}

.iei-scrolly__loader::after {
  content: '';
  display: block;
  height: 100%;
  width: var(--load, 0%);
  background: var(--paprika);
  transition: width 0.2s linear;
}

.iei-scrolly.is-ready .iei-scrolly__loader {
  opacity: 0;
}

/* ------------------------------------------------------------ chapters -- */

.iei-scrolly__chapters {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0 36px 6svh;
  pointer-events: none;
  display: grid; /* all chapters stacked in one cell so they cross-fade */
}

.iei-scrolly__chapter {
  grid-area: 1 / 1;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}

/* `flex` (not inline-flex) so the chapter label holds its own line — the
   count below it is inline-flex and would otherwise flow up beside it. */
.iei-scrolly__no {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: var(--paprika);
}

.iei-scrolly__no::after {
  content: '';
  width: 46px;
  height: 2px;
  background: currentColor;
  opacity: 0.4;
}

.iei-scrolly__chapter--2 .iei-scrolly__no { color: var(--primary-text); }
.iei-scrolly__chapter--3 .iei-scrolly__no { color: var(--secondary-text); }

/* Number and its label sit side by side rather than stacked — the copy block
   overlays a fixed band at the bottom of the stage, so vertical space is the
   scarce dimension here. */
.iei-scrolly__count {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.iei-scrolly__count small {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.iei-scrolly__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 32px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 22ch;
  margin: 12px 0 10px;
}

.iei-scrolly__text {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 46ch;
  margin: 0;
}

/* ---------------------------------------------------------------- intro -- */

.iei-scrolly__intro {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 36px;
  pointer-events: none;
}

.iei-scrolly__cue {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  position: absolute;
  bottom: 4svh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: opacity 0.4s ease;
}

.iei-scrolly__cue i {
  display: block;
  width: 1px;
  height: 26px;
  background: linear-gradient(var(--muted), transparent);
  animation: iei-scrolly-breathe 2.4s ease-in-out infinite;
}

@keyframes iei-scrolly-breathe {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

.iei-scrolly.is-scrubbing .iei-scrolly__cue {
  opacity: 0;
}

/* --------------------------------------------------------------- mobile -- */

@media (max-width: 900px) {
  .iei-scrolly {
    --scrolly-depth: 340vh;
  }

  /* Extra bottom padding keeps the copy clear of the scroll cue, which shares
     the bottom of the stage and has far less room to give here. */
  .iei-scrolly__chapters {
    padding: 0 22px 11svh;
  }

  .iei-scrolly__heading {
    max-width: 20ch;
  }

  .iei-scrolly__text {
    font-size: 14.5px;
  }

  /* Taller scrim on mobile: the copy block occupies more of the stage. */
  .iei-scrolly__scrim {
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.9) 30%, transparent 58%);
    mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.9) 30%, transparent 58%);
  }
}

/* --------------------------------------------------- static fallbacks -- */

/* Three ways the scrub can be unavailable, one layout between them:
     .no-js      markup default; also re-applied if the manifest fails to load
     .is-static  JS ran but cannot scrub (reduced motion, or GSAP unreachable)
     the media query covers the window before JS has executed
   In every case the section must collapse out of its 400vh scroll container,
   unpin the stage, and lay the three chapters out in normal flow — otherwise
   the page carries a tall void with all three chapters piled in one grid cell. */

.iei-scrolly.no-js,
.iei-scrolly.is-static {
  height: auto;
}

/* `relative`, not `static`: the canvas is absolutely positioned and needs the
   stage as its containing block, or it stretches over the whole section and
   covers the chapter copy. */
/* The stage stops being a fixed-size viewport and becomes an ordinary block:
   `overflow: visible` and `display: block` matter as much as the height here —
   the chapters are children of the stage, and a ratio-locked, clipped grid
   cell would cut every one of them off. */
.iei-scrolly.no-js .iei-scrolly__stage,
.iei-scrolly.is-static .iei-scrolly__stage {
  position: relative;
  top: auto;
  height: auto;
  overflow: visible;
  display: block;
}

/* .is-static paints a real frame, so the ratio moves onto the canvas itself,
   which now sits in flow above the copy instead of behind it. */
.iei-scrolly.is-static .iei-scrolly__canvas {
  position: relative;
  inset: auto;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Without JS nothing is ever painted — an empty 16:9 paper rectangle would
   just be a hole in the page, so drop it and let the copy stand alone. */
.iei-scrolly.no-js .iei-scrolly__canvas {
  display: none;
}

.iei-scrolly.no-js .iei-scrolly__scrim,
.iei-scrolly.no-js .iei-scrolly__cue,
.iei-scrolly.no-js .iei-scrolly__loader,
.iei-scrolly.is-static .iei-scrolly__scrim,
.iei-scrolly.is-static .iei-scrolly__cue,
.iei-scrolly.is-static .iei-scrolly__loader {
  display: none;
}

.iei-scrolly.no-js .iei-scrolly__chapters,
.iei-scrolly.is-static .iei-scrolly__chapters {
  position: static;
  display: block;
  padding: 40px 36px 56px;
  max-width: 1180px;
  margin: 0 auto;
}

.iei-scrolly.no-js .iei-scrolly__chapter,
.iei-scrolly.is-static .iei-scrolly__chapter {
  opacity: 1;
  transform: none;
  margin-bottom: 44px;
}

/* ------------------------------------------------------ reduced motion -- */

/* Layout is handled by .is-static above (JS adds it on the same signal); this
   only has to hold the line for the window before JS runs. */
@media (prefers-reduced-motion: reduce) {
  .iei-scrolly {
    height: auto;
  }

  .iei-scrolly__stage {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
    display: block;
  }

  .iei-scrolly__canvas {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .iei-scrolly__cue {
    display: none;
  }

  .iei-scrolly__cue i {
    animation: none;
  }
}