/* Story pages: everything after the welcome. styles.css owns the frame, intro, chrome and start screen.
   sections.js writes the markup for each page; this file gives those pages their look and motion.

   Motion. Every .fx element spawns when its page opens, idles while the page is showing and
   despawns when the page is left (during the slide transition). Mix one of each:
     spawn    fade (default)  rise  pop  zoom  drop  slide-l  slide-r   or set --spawn
     idle     drift (default) float  sway  breathe                     or set --idle
     despawn  out (default)                                            or set --despawn
   --d delays the spawn; the idle starts when the spawn ends. Numbers are .wheel reels (slides.js). */

.story,.finale-bg{
  --cream:#F1F6FC; --paper:#F4F7FB; --ink:#0A1E38;
  --navy:#002E5D; --navy-deep:#0B2A52; --royal:#0062B8; --royal-deep:#003F80;
  --chalk:#F1EDE1;
  --accent:#3D93EA; --accent-deep:#0B4F94; --accent-hi:#A9D1FA;
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.3,1.5,.55,1);
  --exit:cubic-bezier(.35,0,.7,.4);
  --flash:var(--accent-hi);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E");
  place-items:stretch;color:var(--cream);font-weight:500;
}
.story .body{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
             padding:max(74px,10.5cqh) 30px max(74px,9.5cqh) 24px}
.story .body.center{align-items:center;justify-content:center;text-align:center}
:where(.story) :where(h2,h3,p,ul,ol,dl,dd,figure,blockquote){margin:0;padding:0}
:where(.story) :where(ul,ol){list-style:none}
:where(.story) .cond{font-stretch:62%;font-weight:900;text-transform:uppercase;line-height:.84;letter-spacing:0}
:where(.story) .eyebrow{display:block;font-stretch:125%;font-weight:700;font-size:.62rem;line-height:1.25;letter-spacing:.24em;text-transform:uppercase}
:where(.story) .eyebrow.center{text-align:center}
:where(.story) .script{font-family:"Yellowtail","Brush Script MT",cursive;font-weight:400;line-height:1;text-transform:none;letter-spacing:0}

/* ---------- Motion system ---------- */
:where(.story .fx,.finale-bg .fx){--spawn:fx-fade;--sd:.8s;--se:var(--ease);--idle:fx-drift;--id:5.5s;--ie:ease-in-out;--idir:alternate;--despawn:fx-out;--od:.36s}
.slide.story.active .fx,.frame.finale .finale-bg .fx{
  animation-name:var(--spawn),var(--idle);
  animation-duration:var(--sd),var(--id);
  animation-timing-function:var(--se),var(--ie);
  animation-delay:var(--d,0s),calc(var(--d,0s) + var(--sd));
  animation-iteration-count:1,infinite;
  animation-direction:normal,var(--idir);
  animation-fill-mode:backwards,none;
}
/* --o staggers the despawn; slides.js cascades it through each page's elements */
.slide.story:not(.active) .fx,.frame:not(.finale) .finale-bg .fx{animation:var(--despawn) var(--od) var(--exit) var(--o,0s) both}
.frame.paused .story *,.frame.paused .story *::before,.frame.paused .story *::after,.frame.paused .finale-bg *{animation-play-state:paused!important}

.story .rise{--spawn:fx-rise}
.story .pop{--spawn:fx-pop;--sd:.75s;--se:cubic-bezier(.25,.8,.35,1)}
.story .zoom{--spawn:fx-zoom;--sd:1.1s}
.story .drop{--spawn:fx-drop;--sd:1.1s;--se:linear}
.story .slide-l{--spawn:fx-slide-l}
.story .slide-r{--spawn:fx-slide-r}
.story .float{--idle:fx-float;--id:4.2s}
.story .sway{--idle:fx-sway;--id:6s}
.story .breathe{--idle:fx-breathe;--id:2.6s}

@keyframes fx-fade{from{opacity:0}}
@keyframes fx-rise{from{opacity:0;translate:0 3.5cqh}}
@keyframes fx-pop{0%{opacity:0;scale:.4}55%{opacity:1;scale:1.08}78%{scale:.98}100%{scale:1}}
@keyframes fx-zoom{from{opacity:0;scale:1.16}}
@keyframes fx-drop{
  0%{opacity:0;translate:0 -24cqh;animation-timing-function:cubic-bezier(.55,0,1,.45)}
  45%{opacity:1;translate:0 0;animation-timing-function:cubic-bezier(0,.55,.45,1)}
  64%{translate:0 -2.6cqh;animation-timing-function:cubic-bezier(.55,0,1,.45)}
  80%{translate:0 0;animation-timing-function:cubic-bezier(0,.55,.45,1)}
  90%{translate:0 -.6cqh;animation-timing-function:cubic-bezier(.55,0,1,.45)}
  100%{translate:0 0}}
@keyframes fx-slide-l{from{opacity:0;translate:-9cqw 0}}
@keyframes fx-slide-r{from{opacity:0;translate:9cqw 0}}
/* Idles animate `transform` only. Spawns use translate/scale/rotate/opacity, so the two never share a
   property, which is what lets Chrome run both on the GPU compositor instead of the main thread. */
@keyframes fx-drift{to{transform:translateY(-.45cqh)}}
@keyframes fx-float{to{transform:translateY(-1cqh)}}
@keyframes fx-sway{0%{transform:rotate(0deg)}25%{transform:rotate(1.5deg)}75%{transform:rotate(-1.5deg)}100%{transform:rotate(0deg)}}
@keyframes fx-breathe{to{transform:scale(1.035)}}
@keyframes fx-spin{to{transform:rotate(360deg)}}
@keyframes fx-out{to{opacity:0;scale:.92}}
@keyframes fx-out-up{to{opacity:0;translate:0 -6cqh}}
@keyframes fx-sheen{0%{translate:-120% 0}32%,100%{translate:120% 0}}

/* ---------- Number reels (slides.js builds the digits) ---------- */
.story .wheel{--spawn:fx-wheel;--se:linear;--idle:fx-breathe;--id:2.4s;--despawn:none;
              position:relative;display:inline-flex;vertical-align:top;font-variant-numeric:tabular-nums;transform-origin:50% 60%}
@keyframes fx-wheel{to{--wheel:1}}
.wheel-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wheel-vis{display:flex;align-items:flex-start;height:var(--cell,1em);line-height:var(--cell,1em)}
.wheel-digit{position:relative;display:block;height:var(--cell,1em);overflow:hidden}
.wheel-digit::before{content:"0";visibility:hidden}
.wheel-strip{position:absolute;inset:0 0 auto;display:flex;flex-direction:column}
.slide.active .wheel-strip{will-change:transform}
.wheel-glyph{display:block;flex:none;height:var(--cell,1em);text-align:center}
.wheel-comma{display:block;width:.22em;text-align:center}
.slide.active .wheel-vis{animation:fx-impact var(--pulse,.5s) linear var(--d,0s) backwards}
@keyframes fx-impact{
  25%{scale:var(--impact,1.06);color:var(--flash);filter:drop-shadow(0 0 .07em var(--flash))}
  50%{scale:calc(1 + (var(--impact,1.06) - 1) * .6);color:var(--flash);filter:drop-shadow(0 0 .04em var(--flash));animation-timing-function:ease-out}}
.slide.story:not(.active) .wheel-strip{animation:fx-roll-out .34s var(--exit) calc(var(--o,0s) + var(--i,0) * 45ms) both}
.slide.story:not(.active) .wheel-comma{animation:fx-out .3s var(--exit) var(--o,0s) both}
@keyframes fx-roll-out{to{translate:0 -33.34%}}

/* ---------- Stadium lights (the relationship page) ---------- */
/* slides.js draws each lamp rack. Here: placement, a turn in perspective toward the field, and
   power on/off. --bank-w sizes the banks per page. */
.bank{position:absolute;top:max(58px,7.4cqh);width:var(--bank-w,26cqw);perspective:360px;
      --spawn:none;--sd:.5s;--idle:fx-hum;--id:3.2s}
.bank.l{left:4cqw;rotate:4deg;--turn:28deg}
.bank.r{right:4cqw;rotate:-4deg;--turn:-28deg;--id:3.7s}
.bank svg{position:relative;display:block;width:100%;height:100%;overflow:visible;transform:rotateX(16deg) rotateY(var(--turn,0deg))}
.bank .glow{mix-blend-mode:plus-lighter}
.bank::after{content:"";position:absolute;z-index:1;inset:-70% -55%;border-radius:50%;pointer-events:none;mix-blend-mode:plus-lighter;
             background:radial-gradient(closest-side,rgba(255,236,196,.32),rgba(255,224,165,.13) 40%,rgba(255,210,140,.04) 70%,transparent)}
.slide.active .bank .light,.slide.active .bank::after{animation:fx-flicker 2s ease-in-out calc(var(--d,0s) + .2s) backwards}
.slide.story:not(.active) .bank .light,.slide.story:not(.active) .bank::after{animation:fx-dim .3s var(--exit) both}
@keyframes fx-flicker{0%{opacity:0}16%{opacity:.8}28%{opacity:0}48%{opacity:1}58%{opacity:.65}74%,100%{opacity:1}}
@keyframes fx-dim{to{opacity:0}}
@keyframes fx-hum{to{opacity:.93}}

/* ---------- Shared backgrounds and type ---------- */
.story .bg .paper{position:absolute;inset:-2%;background:var(--grain),radial-gradient(110% 70% at 50% 0%,#FFFFFF,transparent 65%)}
.story .bg.royal{background:radial-gradient(110% 60% at 90% 45%,#1B74C8,transparent 65%),linear-gradient(#0B62B5,#004A8F)}
.story .bg.deep{background:radial-gradient(90% 50% at 50% 0%,rgba(61,147,234,.28),transparent 70%),linear-gradient(#071A33,#030A16)}
/* faint Y marks drifting up-left forever (one tile per loop, so it never jumps); multiply drops the tile's white into the paper */
.logo-tile{position:absolute;left:0;top:0;width:calc(100% + 280px);height:calc(100% + 279px);
           background:url(logo-tile.webp) 0 0/280px 279px repeat;mix-blend-mode:multiply;
           animation-name:tile-drift;animation-duration:30s;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes tile-drift{to{transform:translate(-280px,-279px)}}
.spot{position:absolute;left:50%;top:47%;width:140cqw;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
      background:radial-gradient(closest-side,rgba(61,147,234,.32),rgba(61,147,234,.07) 55%,transparent);
      --sd:1.2s;--idle:fx-breathe;--id:3.6s}
.rays{position:absolute;left:50%;top:35%;width:96cqh;aspect-ratio:1;translate:-50% -50%;
      background:repeating-conic-gradient(rgba(61,147,234,.11) 0 3deg,transparent 3deg 12deg);
      -webkit-mask:radial-gradient(closest-side,#000 10.6%,transparent 97.4%);mask:radial-gradient(closest-side,#000 10.6%,transparent 97.4%);
      --spawn:fx-burst-in;--sd:1.5s;--idle:fx-spin;--ie:linear;--idir:normal;--id:80s}
@keyframes fx-burst-in{from{opacity:0;scale:.5}}
.lattice{position:absolute;inset:0;
         background:repeating-linear-gradient(60deg,rgba(61,147,234,.07) 0 1px,transparent 1px 34px),
                    repeating-linear-gradient(-60deg,rgba(61,147,234,.07) 0 1px,transparent 1px 34px);
         -webkit-mask:linear-gradient(transparent 5%,#000 50%,transparent 95%);mask:linear-gradient(transparent 5%,#000 50%,transparent 95%)}
.panels{position:absolute;inset:-2%;
        background:var(--grain),repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 2px,transparent 2px 16.6%),
                   repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 7px)}
.section-title{font-size:min(8cqh,14.5cqw);line-height:.86;max-width:9em}
.section-title em{font-style:normal;color:var(--accent)}
.tagline{max-width:19em;font-stretch:105%;font-weight:700;font-size:min(2.6cqh,4.7cqw);line-height:1.3;text-wrap:balance}
.footnote{margin-top:auto;padding-top:1.4cqh;max-width:34em;font-size:min(1.55cqh,2.9cqw);line-height:1.38;opacity:.74;text-wrap:pretty}
.badge{display:inline-block;margin-right:.5em;padding:.25em .6em;border-radius:999px;vertical-align:middle;
       font-stretch:125%;font-weight:800;font-size:.78em;letter-spacing:.14em;text-transform:uppercase;background:rgba(61,147,234,.2);color:var(--accent-hi)}
.story[data-tone=light] .badge{background:rgba(0,98,184,.1);color:var(--royal)}

/* ---------- Your relationship with BYU ---------- */
.s-relationship{background:#030303;--flash:#fff;--bank-w:min(36cqw,17.5cqh)}
.s-relationship .bg{background:linear-gradient(#000 35%,#06101F)}
.s-relationship .body{align-items:center;justify-content:safe center;text-align:center;gap:2.6cqh;
                      padding-top:calc(max(58px,7.4cqh) + var(--bank-w) * .64 + 4cqh)}
.cover-title{display:flex;flex-direction:column;align-items:center}
.cover-kicker{display:block;max-width:88cqw;margin-bottom:1.5cqh;color:var(--accent);text-wrap:balance;
              font-stretch:125%;font-weight:800;font-size:min(2.6cqh,4.3cqw);line-height:1.2;letter-spacing:.18em;text-transform:uppercase}
.cover-kicker span{margin-right:-.2em}
.big-years{display:flex;align-items:baseline;gap:.14em;font-size:min(15cqh,27cqw);color:var(--cream);--cell:.9em;text-shadow:0 .6cqh 2cqh rgba(0,0,0,.6)}
.big-years em{font-style:normal;font-size:.36em;color:var(--accent-hi)}
.cover-title .script{font-size:min(8.6cqh,14.5cqw);color:var(--accent);margin-top:-.2em;rotate:-6deg;position:relative;
                     text-shadow:0 .05em 0 #000,0 .1em .3em rgba(0,0,0,.6)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:1cqh 2cqw;max-width:88cqw}
.chips li{padding:.55em .95em;border-radius:999px;border:1.5px solid rgba(61,147,234,.6);background:rgba(61,147,234,.12);
          font-weight:700;font-size:min(1.9cqh,3.5cqw);line-height:1.15;color:var(--cream)}

/* ---------- Quotes: an athlete's story, a coach's perspective ---------- */
.s-athlete{background:#050505;--flash:#fff}
.s-coach,.s-recognition{background:var(--royal);--flash:var(--accent-hi)}
.name-rows{position:absolute;inset:-12% -20%;display:flex;flex-direction:column;justify-content:space-around;rotate:-12deg;
           --spawn:fx-fade;--sd:1.6s;--idle:none}
.name-rows span{display:flex;width:max-content;white-space:nowrap;font-stretch:62%;font-weight:900;font-size:15cqh;line-height:.9;
                text-transform:uppercase;color:transparent;-webkit-text-stroke:1.2px rgba(61,147,234,.22)}
.name-rows b{font-weight:900}
.name-rows span{animation:fx-marquee 30s linear infinite}
.name-rows .r2,.name-rows .r4{animation-direction:reverse}
@keyframes fx-marquee{to{translate:-50% 0}}
.s-athlete .body,.s-coach .body{justify-content:center;gap:1.4cqh}
.s-athlete .eyebrow,.s-coach .eyebrow{color:var(--accent-hi);font-size:min(1.6cqh,2.9cqw);letter-spacing:.22em;margin-right:-.22em}
.quote{position:relative;z-index:2}
.quote p{font-weight:600;font-size:min(3cqh,5.3cqw);line-height:1.3;text-wrap:pretty;color:var(--cream)}
.quote p::before{content:"“";display:block;font-family:"Yellowtail",cursive;font-size:3.4em;line-height:.35;color:var(--accent);margin:.2em 0 .3em}
.quote footer{display:flex;flex-direction:column;gap:.5cqh;margin-top:1.8cqh}
.quote footer b{font-size:min(3.8cqh,6.8cqw);color:var(--accent-hi)}
.quote footer span{font-stretch:105%;font-weight:700;font-size:min(1.8cqh,3.3cqw);opacity:.82}
.facts{display:grid;gap:.3cqh;margin-top:1.4cqh;padding:1cqh 3.6cqw;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.facts li{position:relative;padding:.55cqh 0 .55cqh 1.4em;font-weight:600;font-size:min(1.95cqh,3.6cqw);line-height:1.3}
.facts li::before{content:"";position:absolute;left:0;top:.95em;width:.55em;height:.55em;border-radius:50%;background:var(--accent)}
.facts.light{background:rgba(0,46,93,.06);border-color:rgba(10,30,56,.1)}
.facts.light li::before{background:var(--royal)}
.goal{margin-top:1.8cqh;padding:1.4cqh 4cqw;border-left:3px solid var(--accent-hi);background:rgba(255,255,255,.1)}
.goal .eyebrow{color:var(--accent-hi)}
.goal p{margin-top:.6cqh;font-weight:700;font-size:min(2.3cqh,4.2cqw);line-height:1.3}

/* ---------- Then and now ---------- */
.s-thennow{background:#050505;--flash:#fff}
.s-thennow .body{justify-content:center;gap:1cqh}
.s-thennow .eyebrow{color:var(--accent-hi)}
.compare{display:grid;gap:1.6cqh;margin-top:1.6cqh}
.compare-card{padding:1.6cqh 4cqw 1.2cqh;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.compare-card:nth-child(2){background:rgba(61,147,234,.16);border-color:rgba(61,147,234,.5)}
.compare-card .eyebrow{color:var(--accent-hi)}
.compare-card h3{margin:.5cqh 0 .8cqh;font-size:min(4.2cqh,7.6cqw)}
.compare-card li{padding:.6cqh 0;font-weight:600;font-size:min(1.9cqh,3.5cqw);line-height:1.3;border-top:1px dashed rgba(255,255,255,.14)}

/* ---------- Project progress ---------- */
.s-progress-project{background:#040A16;--flash:#fff}
.s-progress-project .body{justify-content:center;gap:1cqh}
.s-progress-project .eyebrow{color:var(--accent-hi)}
.status{align-self:flex-start;padding:.5em .9em;border-radius:999px;background:rgba(61,147,234,.2);color:var(--accent-hi);
        font-stretch:125%;font-weight:800;font-size:min(1.45cqh,2.7cqw);letter-spacing:.14em;text-transform:uppercase}
.meter{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:.6cqh 3cqw;margin-top:.6cqh}
.meter b{display:flex;align-items:flex-end;font-size:min(9cqh,17cqw);line-height:.85;color:var(--accent-hi);--cell:.9em}
.meter b small{font-size:.38em;margin:0 0 .12em .06em}
.meter>span{padding-bottom:1cqh;font-weight:700;font-size:min(2cqh,3.7cqw);opacity:.85}
.meter-bar{grid-column:1/-1;position:relative;display:block;height:1.3cqh;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.12)}
.meter-bar::after{content:"";position:absolute;inset:0;border-radius:inherit;transform-origin:left;
                  background:linear-gradient(90deg,var(--accent-deep),var(--accent));scale:calc(var(--v) / 100) 1}
.slide.active .meter-bar::after{animation:fx-fill-bar 1.2s var(--ease) 1.1s backwards}
.slide.story:not(.active) .meter-bar::after{animation:fx-empty-bar .3s var(--exit) both}
@keyframes fx-fill-bar{from{scale:0 1}}
@keyframes fx-empty-bar{to{scale:0 1}}
.milestones{display:grid;gap:.1cqh;margin-top:1cqh}
.milestones li{position:relative;display:grid;grid-template-columns:5.4em 1fr;gap:3cqw;padding:.7cqh 0 .7cqh 1.6em;font-size:min(1.9cqh,3.5cqw)}
.milestones li::before{content:"";position:absolute;left:0;top:1em;width:.7em;height:.7em;border-radius:50%;border:2px solid rgba(255,255,255,.4)}
.milestones li.done::before{background:var(--accent);border-color:var(--accent)}
.milestones li.next::before{border-color:var(--accent-hi);box-shadow:0 0 0 4px rgba(169,209,250,.25)}
.milestones li::after{content:"";position:absolute;left:calc(.35em - 1px + 1px);top:1.9em;bottom:-.6em;width:2px;background:rgba(255,255,255,.15)}
.milestones li:last-child::after{display:none}
.milestones span{font-stretch:125%;font-weight:800;font-size:.78em;letter-spacing:.1em;text-transform:uppercase;opacity:.75;padding-top:.2em}
.milestones b{font-weight:700}
.milestones li.next b{color:var(--accent-hi)}

/* ---------- Verified fund results (paper, like the Bees stats bubble) ---------- */
.s-progress-fund,.s-moments,.s-activations,.s-legacy,.s-thanks{background:var(--paper);color:var(--ink);--flash:var(--royal)}
.s-progress-fund .body{align-items:center;justify-content:center;gap:2.4cqh;text-align:center}
.att-title{display:flex;flex-direction:column;align-items:center;line-height:.8}
.att-title .script{position:relative;z-index:1;margin-bottom:.1em;font-size:min(5.6cqh,10cqw);color:var(--royal);rotate:-5deg}
.att-title .cond{font-size:min(7.6cqh,13.4cqw);max-width:8em}
.att-recap{width:100%;max-width:min(84cqw,47cqh);display:grid;gap:.2cqh;padding:1.4cqh 4cqw 1.6cqh;border-radius:14px;
           background:var(--navy);box-shadow:0 1.6cqh 4cqh rgba(10,30,56,.28)}
.att-recap li{display:grid;grid-template-columns:28% 1fr;align-items:baseline;gap:3cqw;padding:.8cqh 0;text-align:left;
              border-bottom:1px dashed rgba(241,246,252,.16)}
.att-recap li:last-child{border-bottom:0}
.att-recap b{justify-self:end;display:flex;font-size:min(5cqh,8.8cqw);line-height:.9;color:var(--accent-hi)}
.att-recap li>span{font-stretch:105%;font-weight:700;font-size:min(2.3cqh,4.1cqw);line-height:1.2;color:var(--cream)}
.s-progress-fund .facts.light{width:100%;max-width:min(84cqw,47cqh);text-align:left;margin-top:0}

/* ---------- Season moments ---------- */
.s-moments .body{justify-content:center;gap:1cqh}
.timeline{display:grid;gap:.2cqh;margin-top:1.4cqh}
.timeline li{display:grid;grid-template-columns:5.6em 1fr;gap:3.5cqw;align-items:start;padding:1.3cqh 0;border-bottom:1px solid rgba(10,30,56,.12)}
.timeline .when{font-size:min(3.8cqh,6.6cqw);color:var(--royal);white-space:nowrap;padding-top:.1em}
.timeline .what{display:flex;flex-direction:column;gap:.3cqh;font-weight:700;font-size:min(2.2cqh,4cqw);line-height:1.3}
.timeline small{font-stretch:125%;font-weight:800;font-size:.62em;letter-spacing:.14em;text-transform:uppercase;opacity:.6}

/* ---------- The keepsake (legacy family) ---------- */
.s-legacy .body{justify-content:center;gap:1cqh}
.keepsake{position:relative;z-index:2;padding:3.2cqh 5cqw 2.6cqh;text-align:center;background:var(--grain),#fff;
          box-shadow:0 1.6cqh 4cqh rgba(10,30,56,.14);border:1px solid rgba(10,30,56,.1);outline:1px solid rgba(0,46,93,.25);outline-offset:-1.2cqh}
.keepsake .eyebrow{color:var(--royal)}
.keepsake .script{font-size:min(9.5cqh,16cqw);color:var(--navy);margin:.5cqh 0 .1cqh;rotate:-4deg}
.keepsake-years{font-stretch:125%;font-weight:800;font-size:min(1.6cqh,3cqw);letter-spacing:.18em;text-transform:uppercase;color:var(--royal)}
.keepsake-story{margin-top:2cqh;font-weight:600;font-size:min(2.3cqh,4.2cqw);line-height:1.42;text-wrap:pretty}
.keepsake-foot{display:flex;justify-content:space-between;gap:2cqw;margin-top:2.4cqh;padding-top:1.4cqh;border-top:1px solid rgba(10,30,56,.12);
               font-stretch:125%;font-weight:800;font-size:min(1.4cqh,2.6cqw);letter-spacing:.12em;text-transform:uppercase;opacity:.7;text-align:left}

/* ---------- Partnership results (the scoreboard) ---------- */
.s-results{background:var(--navy-deep);color:var(--chalk);--flash:var(--accent-hi)}
.s-results .bg{background:linear-gradient(#0E3566,#082447)}
.s-results .body{justify-content:center}
.board-title{position:relative;margin:3cqh 0 .8cqh;padding:1.6cqh 0 1.4cqh;text-align:center;border-block:2px solid rgba(241,237,225,.85)}
.board-title .cond{font-size:min(7.4cqh,13.4cqw);letter-spacing:.02em}
.board-title::before,.board-title::after{content:"";position:absolute;left:0;right:0;height:6px;
  background:radial-gradient(circle at 6px 50%,#FFF2C2 0 2px,transparent 2.7px) 0 0/36px 6px repeat-x,
             radial-gradient(circle at 18px 50%,rgba(255,226,150,.32) 0 1.8px,transparent 2.4px) 0 0/36px 6px repeat-x,
             radial-gradient(circle at 30px 50%,rgba(255,226,150,.32) 0 1.8px,transparent 2.4px) 0 0/36px 6px repeat-x}
.board-title::before{top:-10px}
.board-title::after{bottom:-10px}
.slide.active .board-title::before,.slide.active .board-title::after{animation:fx-chase .9s steps(3) infinite}
@keyframes fx-chase{to{background-position:36px 0,36px 0,36px 0}}
.s-results .eyebrow{margin-bottom:1.6cqh;color:var(--accent-hi)}
.board li{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4cqw;padding:1.3cqh 0;border-bottom:1px solid rgba(241,237,225,.15)}
.plates{display:flex;align-items:center;font-size:min(5cqh,8.8cqw);--cell:1.2em;perspective:300px}
.plates .wheel-vis{gap:3px}
.plates .wheel-digit{padding:0 .13em;border-radius:3px;background:linear-gradient(#061B38,#0A2A52);transform-origin:50% 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 0 rgba(0,0,0,.35),0 2px 3px rgba(0,0,0,.25)}
.plates .wheel-digit.empty{opacity:.5}
.plates .wheel-comma{display:none}
.slide.active .plates .wheel-digit{animation:fx-hang .6s var(--spring) calc(var(--d) + var(--i,0) * 70ms) backwards}
@keyframes fx-hang{from{opacity:0;rotate:x -95deg}}
.board .label{font-weight:600;font-size:min(1.9cqh,3.5cqw);line-height:1.25;color:rgba(241,237,225,.92)}
.board li.gold .wheel-digit{background:var(--accent);color:var(--ink);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2),0 0 1.4cqh rgba(61,147,234,.45)}
.board li.gold .label{font-weight:800;color:var(--accent-hi)}

/* ---------- Activations ---------- */
.s-activations .body{justify-content:center;gap:1cqh}
.activations{display:grid;gap:1cqh;margin-top:1.4cqh}
.activations li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:3cqw;align-items:center;
                padding:1.2cqh 3.6cqw;border-radius:12px;background:#fff;box-shadow:0 .6cqh 2cqh rgba(10,30,56,.08)}
.activations .pill{grid-row:1/3;padding:.45em .7em;border-radius:999px;background:rgba(0,98,184,.1);color:var(--royal);
                   font-stretch:125%;font-weight:800;font-size:min(1.3cqh,2.4cqw);letter-spacing:.14em;text-transform:uppercase}
.activations .scheduled .pill{background:rgba(10,30,56,.08);color:#5B6B80}
.activations b{font-size:min(2.2cqh,4cqw);line-height:1.2}
.activations small{font-weight:600;font-size:min(1.7cqh,3.1cqw);opacity:.7}

/* ---------- You were there (event passes dealt out in a fan) ---------- */
.s-events{background:#050505;--flash:#fff}
.s-events .bg{background:radial-gradient(80% 45% at 50% 35%,rgba(61,147,234,.2),transparent 70%)}
.s-events .body{align-items:center;justify-content:center;text-align:center;gap:2.4cqh}
.dc-hero{display:flex;flex-direction:column;align-items:center}
.dc-num{font-size:min(19cqh,36cqw);--cell:.9em;margin-bottom:.02em;filter:drop-shadow(0 0 2cqh rgba(61,147,234,.35))}
.dc-num .wheel-glyph{color:transparent;background:linear-gradient(#EAF4FF,#A9D1FA 30%,#3D93EA 62%,#0B4F94);-webkit-background-clip:text;background-clip:text}
.diamond-title{display:flex;flex-direction:column;align-items:center;font-size:min(6.4cqh,11.6cqw);line-height:.86}
.diamond-title span{color:transparent;background:linear-gradient(100deg,#0B4F94,#A9D1FA 30%,#EAF4FF 45%,#3D93EA 60%,#0B4F94) 0 0/200% 100%;
                    -webkit-background-clip:text;background-clip:text}
.slide.active .diamond-title span{animation:fx-foil 3.6s ease-in-out 1.6s infinite alternate}
@keyframes fx-foil{to{background-position:100% 0}}
.diamond-title em{margin-top:.12em;margin-right:-.42em;font-style:normal;font-stretch:125%;font-weight:800;font-size:.38em;letter-spacing:.42em;color:var(--cream)}
.passes{display:flex;align-items:flex-end;justify-content:center;gap:3cqw;margin-top:.2cqh}
.pass{position:relative;width:min(24cqw,12.5cqh);aspect-ratio:5/6.4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7cqh;
      padding-top:2.2cqh;border:1.5px solid transparent;border-radius:1.4cqh;overflow:hidden;rotate:var(--tilt,0deg);
      background:var(--grain) padding-box,linear-gradient(160deg,#111A2A,#070B12) padding-box,
                 linear-gradient(135deg,#A9D1FA,#0B4F94 30%,#EAF4FF 50%,#1565B5 70%,#8FC2F7) border-box;
      box-shadow:0 1.2cqh 2.6cqh rgba(0,0,0,.6);
      --spawn:fx-deal;--sd:1s;--se:cubic-bezier(.2,.9,.25,1.04);--idle:fx-hover;--id:4.6s;--despawn:fx-out-up}
.pass:nth-child(2){margin-bottom:1.6cqh;--id:5.2s}
@keyframes fx-deal{from{opacity:0;translate:0 42cqh;rotate:20deg}}
@keyframes fx-hover{to{transform:translateY(-.9cqh) rotate(1.2deg)}}
.pass::before{content:"";position:absolute;top:1.1cqh;left:50%;width:34%;height:.75cqh;translate:-50% 0;border-radius:99px;
              background:#000;box-shadow:inset 0 1px 2px rgba(0,0,0,.9),0 1px 0 rgba(234,244,255,.14)}
.pass i{width:26%;aspect-ratio:1;border-radius:50%;background:linear-gradient(160deg,#EAF4FF,#3D93EA 55%,#083B70)}
.pass small{font-stretch:125%;font-weight:700;font-size:min(1.25cqh,2.3cqw);line-height:1;letter-spacing:.2em;text-transform:uppercase;color:rgba(241,246,252,.7);white-space:nowrap}
.pass b{font-size:min(6cqh,11cqw);line-height:.8;color:var(--cream)}
.pass::after{content:"";position:absolute;inset:-2px;pointer-events:none;translate:-135% 0;mix-blend-mode:screen;
             background:linear-gradient(105deg,transparent 30%,rgba(169,209,250,.18) 42%,rgba(244,249,255,.75) 50%,rgba(169,209,250,.18) 58%,transparent 70%)}
.slide.active .pass::after{animation:fx-glint 3.4s cubic-bezier(.45,.05,.4,1) calc(var(--d) + 1.05s) infinite}
@keyframes fx-glint{0%{translate:-135% 0}28%,100%{translate:135% 0}}
.event-list{display:grid;gap:.2cqh;width:100%;max-width:min(84cqw,47cqh);text-align:left}
.event-list li{display:flex;flex-direction:column;gap:.2cqh;padding:.9cqh 0;border-bottom:1px dashed rgba(241,246,252,.16)}
.event-list li:last-child{border-bottom:0}
.event-list b{font-size:min(2.2cqh,4cqw);line-height:1.2}
.event-list small{font-stretch:125%;font-weight:700;font-size:min(1.4cqh,2.6cqw);letter-spacing:.12em;text-transform:uppercase;opacity:.65}

/* ---------- Recognition ---------- */
.s-recognition .eyebrow{color:var(--accent-hi);font-size:min(1.8cqh,3.3cqw);letter-spacing:.3em;margin-right:-.3em}
.recog-name{margin-top:1.4cqh;font-size:min(9cqh,16cqw);max-width:8em;line-height:.86;color:#fff;text-shadow:0 .6cqh 2cqh rgba(0,0,0,.35)}
.recog-where{margin-top:2cqh;max-width:18em;font-stretch:105%;font-weight:700;font-size:min(2.4cqh,4.4cqw);line-height:1.3;color:var(--accent-hi)}
.s-recognition .footnote{margin-top:4cqh}

/* ---------- A personal thank-you (a letter) ---------- */
.s-thanks .body{justify-content:center;gap:1cqh}
.letter{padding:3cqh 5cqw 2.6cqh;border-radius:6px;background:var(--grain),#fff;box-shadow:0 1.6cqh 4cqh rgba(10,30,56,.14);border:1px solid rgba(10,30,56,.08)}
.letter .eyebrow{color:var(--royal)}
.letter-body{margin-top:1.4cqh;font-weight:600;font-size:min(2.45cqh,4.4cqw);line-height:1.42;text-wrap:pretty}
.letter-sign{display:flex;flex-direction:column;gap:.6cqh;margin-top:2.2cqh;padding-top:1.6cqh;border-top:1px solid rgba(10,30,56,.1)}
.letter-sign b{font-size:min(5.4cqh,9.6cqw);color:var(--royal);line-height:1}
.letter-sign span{font-stretch:105%;font-weight:700;font-size:min(1.75cqh,3.2cqw);line-height:1.3;opacity:.75}

/* ---------- The night sky behind the last two pages ---------- */
.frame{isolation:isolate}   /* keeps the backdrop's z-index:-1 inside the frame, above its black background */
.finale-bg{position:absolute;inset:0;z-index:-1;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s .6s;
           background:radial-gradient(90% 55% at 50% 100%,rgba(0,98,184,.38),transparent 70%),radial-gradient(60% 40% at 50% 0%,rgba(61,147,234,.12),transparent 70%),linear-gradient(#030A16,#010208)}
.frame.finale .finale-bg{opacity:1;visibility:visible;transition:opacity .6s var(--ease)}
.frame.snap .finale-bg{transition:none}   /* app.js: jumping back to the start */
.ballpark{position:absolute;inset:0;--spawn:fx-reveal;--sd:2.4s;--idle:fx-push;--id:16s;--despawn:fx-dim}
.ballpark>*{position:absolute;inset:0;width:100%;height:100%}
.ballpark-veil,.fireworks .soft{opacity:0}
.ballpark-veil{background:#000}
.ballpark-veil,.fireworks,.fireworks>canvas{will-change:opacity}
.fireworks>canvas{position:absolute;inset:0;width:100%;height:100%}
.fireworks .soft{mix-blend-mode:plus-lighter}
@keyframes fx-reveal{from{opacity:0;scale:1.08}}
@keyframes fx-push{to{transform:scale(1.035)}}

/* ---------- What's next ---------- */
.s-next,.s-end{--flash:#fff}
.s-next .eyebrow{color:var(--accent-hi);font-size:min(1.8cqh,3.3cqw);letter-spacing:.3em;margin-right:-.3em}
.next-when{margin-top:2cqh;font-size:min(4.2cqh,7.4cqw);color:var(--accent-hi)}
.next-title{margin-top:1.2cqh;font-size:min(8.4cqh,15cqw);max-width:9em;line-height:.86;color:var(--cream);text-shadow:0 .5cqh 0 rgba(0,0,0,.45),0 .8cqh 3cqh rgba(0,0,0,.9)}
.s-next .tagline{margin-top:2.4cqh;color:rgba(241,246,252,.85)}

/* ---------- Thank you (held: stays up, no progress bar) ---------- */
.frame.hold .progress{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.s-end .body{align-items:center;text-align:center}
.final-title{display:flex;flex-direction:column;align-items:center;line-height:.8;margin-top:2cqh}
.final-title .script{position:relative;z-index:1;margin-bottom:.02em;font-size:min(7cqh,12.5cqw);color:var(--accent);rotate:-6deg;
                     text-shadow:0 .05em 0 #000,0 .1em .35em rgba(0,0,0,.9),0 0 .7em rgba(0,0,0,.6)}
.final-title .cond{font-size:min(9cqh,16cqw);max-width:7em;color:var(--cream);text-shadow:0 .5cqh 0 rgba(0,0,0,.45),0 .8cqh 3cqh rgba(0,0,0,.9)}
.next-ctas{--idle:none;display:flex;flex-direction:column;gap:1.3cqh;width:min(82cqw,46cqh);margin-top:3.6cqh}
.cta{--idle:none;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:.55em;padding:.95em 1.3em;border-radius:999px;
     border:1.5px solid rgba(61,147,234,.75);background:rgba(6,10,18,.66);color:var(--cream);
     font-family:"Archivo",sans-serif;font-stretch:105%;font-weight:800;font-size:min(2.1cqh,4.1cqw);line-height:1;text-decoration:none;cursor:pointer;
     -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 1cqh 3cqh rgba(0,0,0,.45);
     -webkit-tap-highlight-color:transparent;transition:transform .4s var(--ease),background .25s,color .25s}
.cta svg{width:1.15em;height:1.15em;flex:none}
.cta.primary{border-color:var(--accent);background:var(--accent);color:var(--ink);box-shadow:0 0 2.6cqh rgba(61,147,234,.45),0 1cqh 3cqh rgba(0,0,0,.45)}
.cta.primary::after{content:"";position:absolute;inset:-20%;pointer-events:none;translate:-120% 0;
                    background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%)}
.slide.active .cta.primary::after{animation:fx-sheen 4.2s ease-in-out 1.4s infinite}
.cta:active{transform:scale(.94)}
.cta:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
@media (hover:hover){
  .cta:hover{background:rgba(61,147,234,.18)}
  .cta.primary:hover{background:#5AA6F0}
}
.portal{margin-top:3cqh}
.portal .eyebrow{color:rgba(241,246,252,.7)}
.portal ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.6cqh 1.2cqw;margin-top:.9cqh}
.portal li{padding:.4em .8em;border-radius:999px;border:1px solid rgba(241,246,252,.25);font-weight:700;font-size:min(1.55cqh,2.9cqw);opacity:.8}
.again{display:flex;gap:4cqw;margin-top:2cqh}
.link{padding:.4em .3em;border:0;background:none;color:var(--accent-hi);font:700 min(1.8cqh,3.3cqw)/1 "Archivo",sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link:hover,.link:focus-visible{color:#fff;outline:none}
.signoff{display:flex;flex-direction:column;align-items:center;gap:.9cqh;margin-top:auto;filter:drop-shadow(0 .4cqh 1.4cqh rgba(0,0,0,.85))}
.signoff .wordmark{width:min(40cqw,22cqh)}
.signoff .eyebrow{color:rgba(241,246,252,.85)}

/* Short frames (small phones) */
@container (max-height:720px){
  .cover-kicker{font-size:4.4cqw}
  .quote p{font-size:min(2.8cqh,5cqw)}
  .facts li{padding:.35cqh 0 .35cqh 1.4em}
  .milestones li{padding:.4cqh 0 .4cqh 1.6em}
  .timeline li{padding:.9cqh 0}
  .next-ctas{margin-top:2.2cqh}
  .letter-body,.keepsake-story{font-size:min(2.2cqh,4cqw)}
}

@media (prefers-reduced-motion:reduce){
  .slide.story *,.slide.story *::before,.slide.story *::after,.finale-bg *{
    animation-duration:1ms!important;animation-delay:0s!important;animation-iteration-count:1!important}
}