/* ==========================================================
   Westchester — scroll story (home page + course pages). Builds on index.css.
   Everything that moves is switched on by story.js (classes .has-story / .is-live), so with no script or with
   "reduce motion" these sections are ordinary, fully visible blocks.
   ========================================================== */

/* ---------- Home: depth behind and inside the hero ---------- */
.hero{position:relative}
.word-field{position:absolute;inset:-70px calc(50% - 50vw);z-index:-1;overflow:hidden;pointer-events:none}
.word-field span{position:absolute;left:var(--x);top:var(--y);font-family:var(--serif);font-size:var(--s,28px);font-style:italic;line-height:1;white-space:nowrap;color:rgba(19,35,63,.075);transform:translate3d(0,calc(var(--hp,0) * var(--dz,1) * -240px),0)}
.word-field span:nth-child(3n){color:transparent;-webkit-text-stroke:1px rgba(194,59,63,.3)}
.word-field span:nth-child(4n){color:transparent;-webkit-text-stroke:1px rgba(19,35,63,.16)}
/* the copy, arch, note and visual are moved by story.js with direct style writes (no custom property on .hero) */

/* ---------- Ribbon of skills, moves sideways while you scroll ---------- */
.ribbon{margin:0 calc(50% - 50vw) 0;padding:20px 0 16px;overflow:hidden;background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.marquee{overflow:hidden;white-space:nowrap}
.marquee+.marquee{margin-top:4px}
.marquee-track{display:inline-flex;will-change:transform}
/* story.js measures one copy of the words and sets --shift (minus its width) and --dur; the strip then slides by itself,
   forever. The first line goes to the left, the outlined line to the right. */
@keyframes marqueeLeft{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--shift,-50%),0,0)}}
@keyframes marqueeRight{from{transform:translate3d(var(--shift,-50%),0,0)}to{transform:translate3d(0,0,0)}}
.marquee-track.is-auto{animation:marqueeLeft var(--dur,30s) linear infinite}
.marquee-rev .marquee-track.is-auto{animation-name:marqueeRight}
.marquee.is-offscreen .marquee-track{animation-play-state:paused}
.marquee-track span{display:inline-flex;align-items:center;gap:34px;padding-right:34px;font-family:var(--serif);font-size:clamp(34px,6vw,76px);font-style:italic;line-height:1.15;color:var(--navy)}
.marquee-track span::after{content:'\2726';font-style:normal;font-size:.32em;color:var(--red)}
.marquee-rev .marquee-track span{color:transparent;-webkit-text-stroke:1px var(--navy)}
.course-ribbon{margin-bottom:56px}
.course-ribbon .marquee-track span{font-size:clamp(28px,4.4vw,52px)}

/* ---------- The path A1 -> C2: plays by itself when it comes into view ---------- */
.path{margin:0 calc(50% - 50vw);padding:80px 0 88px;background:var(--navy);color:#fff}
.path-stage{display:grid;gap:44px;max-width:1200px;margin:0 auto;padding:0 32px}
.path-head .hero-badge{margin-bottom:18px;color:#f0a0a3}
.path-head .hero-badge::before{background:#f0a0a3}
.path-title{max-width:520px;margin-bottom:0;font-family:var(--serif);font-size:clamp(28px,3.6vw,46px);font-weight:400;line-height:1.12;letter-spacing:-.01em;color:#fff}
.path-code{display:none}
.path-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;list-style:none}
.path-level{padding:24px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius)}
.path-level::before{content:attr(data-code);display:block;margin-bottom:6px;font-family:var(--serif);font-size:36px;line-height:1.1;color:#f0a0a3}
.path-level h3{margin-bottom:8px;font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.path-level p{max-width:470px;font-size:16px;line-height:1.7;color:#b6c0d1}
.path-level .path-more{margin-top:14px;font-size:14px;color:#b6c0d1}
.path-level .path-more a{color:#fff;text-decoration:none;border-bottom:1px solid var(--red);transition:color .2s}
.path-level .path-more a:hover{color:#f0a0a3}
.path-dots,.path-replay{display:none}
.path-stairs{min-width:0}
.stairs-svg{display:block;width:100%;height:auto;overflow:visible}
.stair-line{fill:none;stroke:rgba(255,255,255,.24);stroke-width:1.5;transition:stroke .5s,stroke-width .5s}
.stair-fill{fill:url(#stairFill);opacity:var(--on,1)}
.stair-cap{fill:var(--red);opacity:var(--cap,0)}
.stair-code{fill:#fff;font-family:var(--serif);font-size:26px;text-anchor:middle;opacity:calc(.4 + var(--on,1) * .6)}
.stair-exam{fill:#c8d2e4;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.02em;text-anchor:middle;opacity:calc(.3 + var(--on,1) * .7)}
.trail-base{fill:none;stroke:rgba(255,255,255,.26);stroke-width:2;stroke-dasharray:3 9;stroke-linecap:round}
.trail-live{fill:none;stroke:#f0a0a3;stroke-width:3;stroke-linecap:round}
.climber-halo{fill:rgba(194,59,63,.28)}
.climber-dot{fill:var(--red);stroke:#fff;stroke-width:3}
.burst{fill:#f0a0a3;opacity:0}

/* live: a normal-height stage; the script walks the student up the steps on its own */
.path.is-live{padding:84px 0 92px}
.path.is-live .path-stage{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);grid-template-areas:"head stairs" "code stairs" "levels stairs";grid-template-rows:auto auto auto;align-content:center;align-items:start;column-gap:56px;row-gap:14px}
.path.is-live .path-head{grid-area:head}
.path.is-live .path-code{grid-area:code;display:block;height:1em;overflow:hidden;font-family:var(--serif);font-size:clamp(104px,15.5vw,208px);line-height:1;color:#fff;text-shadow:0 0 60px rgba(194,59,63,.35)}
.path-code-roll{display:flex;flex-direction:column;will-change:transform}   /* story.js writes its transform */
.path-code-roll span{display:block;height:1em;line-height:1}
.path.is-live .path-info{grid-area:levels}
.path.is-live .path-levels{position:relative;display:block;height:clamp(170px,26vh,230px)}
.path.is-live .path-level{position:absolute;inset:0 0 auto 0;padding:0;border:0;opacity:0;pointer-events:none;will-change:transform,opacity}
.path.is-live .path-level::before{display:none}
.path.is-live .path-stairs{grid-area:stairs;align-self:center}
.path.is-live .path-dots{display:flex;align-items:center;gap:8px;margin-top:6px}
.path-dot{position:relative;width:10px;height:10px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.28);cursor:pointer;transition:width .35s cubic-bezier(.2,.7,.2,1),background .3s}
.path-dot::before{content:'';position:absolute;inset:-10px -4px}
.path-dot.is-on{width:32px;background:var(--red)}
@media (hover:hover){.path-dot:not(.is-on):hover{background:rgba(255,255,255,.65)}}
.path.is-live .path-replay{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:10px 16px;background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:6px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s;animation:mFade .5s ease}
.path.is-live .path-replay[hidden]{display:none}
@media (hover:hover){.path.is-live .path-replay:hover{background:rgba(255,255,255,.1);border-color:#fff}}
.path.is-complete .stair.is-top .stair-line{stroke:#f0a0a3;stroke-width:2.5}
.path.is-complete .burst{animation:mBurst 1.3s ease-out}
/* The columns are clickable: a click sends the climber there (story.js jump). Hover only brightens the outline. */
.path.is-live .stair{cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.path.is-live .stair-line{pointer-events:all}
.climber-dot,.climber-halo{transform-box:fill-box;transform-origin:center}
.land-ring{fill:none;stroke:#f0a0a3;stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center;pointer-events:none}
@media (hover:hover){
  .path.is-live .stair:hover .stair-line{stroke:#fff;stroke-width:2.25;transition-duration:.12s}
  .path.is-live .stair:hover .stair-code{opacity:1}
}
@keyframes mBurst{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}

/* ---------- Programs: a book that opens ---------- */
/* Closed: only the cover is seen, in the middle. Open: the cover turned over to the left and became the left page;
   the three programs are on the right page and turn one after another like pages. */
.path+.features{padding-top:72px}
.book{position:relative;overflow-x:clip}
.book-stage{position:relative}
.book-cover{display:none}
.book-cover-front,.book-cover-back{position:absolute;inset:0;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.book-cover-front{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:32px;border-radius:3px 14px 14px 3px;text-align:center;color:#fff;background:radial-gradient(circle at 72% 16%,rgba(194,59,63,.42),transparent 52%),linear-gradient(160deg,#27416b,#13233f 72%);box-shadow:0 34px 60px -30px rgba(19,35,63,.75),inset 0 0 0 1px rgba(255,255,255,.08)}
.book-cover-front::before{content:'';position:absolute;inset:18px;border:1px solid rgba(240,160,163,.45);border-radius:2px 10px 10px 2px}
.book-cover-front::after{content:'';position:absolute;left:0;top:0;bottom:0;width:36px;background:linear-gradient(90deg,rgba(0,0,0,.42),transparent)}
.book-mark{width:58px;height:52px;margin-bottom:8px;filter:invert(1) brightness(1.7)}
.book-name{font-family:var(--serif);font-size:clamp(30px,4.2vw,54px);line-height:1;letter-spacing:-.01em}
.book-name i{font-style:normal;color:#f0a0a3}
.book-sub{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#b6c0d1}
.book-rule{width:84px;height:1px;margin:16px 0 8px;background:linear-gradient(90deg,transparent,#f0a0a3,transparent)}
.book-title{font-family:var(--serif);font-size:clamp(20px,2.3vw,30px);font-style:italic;color:#f0a0a3}
.book-levels{font-size:13px;letter-spacing:.32em;color:#b6c0d1}
/* the back of the cover is the left page of the open book */
.book-cover-back{transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:36px;border-radius:14px 3px 3px 14px;text-align:center;color:var(--ink);background:linear-gradient(90deg,#efe7da,#f8f4ec 5%,#f8f4ec 88%,#e9dfcf);border:1px solid var(--line);box-shadow:inset -26px 0 40px -34px rgba(19,35,63,.5),0 36px 56px -34px rgba(19,35,63,.45)}
.book-mark-dark{width:52px;height:47px;opacity:.9}
.book-quote{max-width:340px;font-family:var(--serif);font-size:clamp(22px,2.6vw,34px);font-style:italic;line-height:1.2}
.book-cite{font-size:13px;letter-spacing:.04em;color:var(--text-muted)}
.book-ladder{margin-top:10px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;font-weight:600;letter-spacing:.3em;color:var(--red)}

/* ---------- Closing band: words light up, a ring fills (plays when it comes into view) ---------- */
.finale{position:relative;margin:24px 0 0;padding:clamp(52px,8vw,108px) clamp(24px,6vw,84px);overflow:hidden;background:var(--navy);border-radius:14px;color:#fff;text-align:center}
.finale-inner{position:relative;z-index:2;max-width:860px;margin:0 auto}
.finale .hero-badge{margin-bottom:26px;color:#f0a0a3}
.finale .hero-badge::before{background:#f0a0a3}
.finale-text{margin-bottom:40px;font-family:var(--serif);font-size:clamp(28px,4.6vw,58px);font-weight:400;line-height:1.16;letter-spacing:-.015em;color:#fff}
.finale-text .w{display:inline-block;opacity:.26;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1),color .5s;transform:translateY(8px)}
.finale-text .w.is-on{opacity:1;transform:none}
.finale-text .w.is-accent.is-on{color:#f0a0a3;font-style:italic}
.finale-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 28px;border:1px solid rgba(255,255,255,.4);border-radius:4px;color:#fff;font-size:16px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .2s,border-color .2s,transform .2s}
@media (hover:hover){.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;transform:translateY(-2px)}}
.finale-ring{position:absolute;z-index:1;top:50%;left:50%;width:min(92vw,760px);height:auto;transform:translate(-50%,-50%) rotate(-90deg);pointer-events:none}
.finale-ring circle{fill:none;stroke-width:1.5}
.finale-ring .ring-base{stroke:rgba(255,255,255,.1)}
.finale-ring .ring-live{stroke:var(--red);stroke-width:3;stroke-linecap:round}
.finale-sparks{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.finale-sparks i{position:absolute;bottom:-12px;width:4px;height:4px;border-radius:50%;background:#f0a0a3;opacity:0;animation:mSpark linear infinite}
@keyframes mSpark{0%{opacity:0;transform:translateY(0)}12%{opacity:.7}100%{opacity:0;transform:translateY(-420px)}}

/* ---------- Course pages ---------- */
.course-hero{position:relative}
.course-hero::before{content:attr(data-bg);position:absolute;right:-1%;top:46%;z-index:-1;font-family:var(--serif);font-size:clamp(88px,15vw,210px);font-style:italic;line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(19,35,63,.13);transform:translate3d(calc(var(--hp,0) * -150px),calc(-50% + var(--hp,0) * 40px),0);pointer-events:none}
.has-story .course-hero-icon{rotate:calc(var(--hp,0) * 45deg);scale:calc(1 - var(--hp,0) * .22)}
.has-story .course-hero h1{transform:translate3d(0,calc(var(--hp,0) * -22px),0)}
.has-story .learn-list li::after{content:'';position:absolute;top:-1px;left:0;height:2px;width:calc(var(--lp,0) * 100%);background:var(--red)}
.has-story .learn-list li::before{transform:scale(calc(.55 + var(--lp,0) * .45));opacity:calc(.35 + var(--lp,0) * .65)}
.has-story .learn-list li{color:rgba(61,74,95,calc(.55 + var(--lp,0) * .45))}
.has-story .section-heading::after{content:'';display:block;width:64px;height:2px;margin-top:12px;background:var(--red);transform:scaleX(var(--lp,1));transform-origin:left}
.teacher-stat .count{display:inline-block;min-width:1.2ch;font-variant-numeric:tabular-nums}

/* ---------- Hero picture: medium, always-on motion ---------- */
/* A slow blue light drifts across the arch, phonetic symbols rise through it, the quote glows now and then,
   a red dot circles the thin ring, a sheen crosses the note card and its cap tips. Gentle on purpose. */
@keyframes mAurora{0%{transform:translate3d(-6%,0,0) scale(1)}100%{transform:translate3d(46%,-30%,0) scale(1.25)}}
@keyframes mSymbol{0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}14%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translate3d(14px,-440px,0) rotate(14deg)}}
@keyframes mHalo{0%,100%{opacity:0;transform:scale(.92)}50%{opacity:1;transform:scale(1.04)}}
@keyframes mNoteShine{0%,68%{transform:translateX(-150%) skewX(-18deg)}100%{transform:translateX(380%) skewX(-18deg)}}
@keyframes mCap{0%,66%,100%{transform:rotate(0) translateY(0)}76%{transform:rotate(-14deg) translateY(-4px)}88%{transform:rotate(9deg) translateY(-1px)}}

.hero-arch::after{content:'';position:absolute;left:-14%;top:44%;width:72%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(86,140,225,.34),transparent 66%);pointer-events:none;animation:mAurora 15s ease-in-out infinite alternate}
.hero-arch .hero-quote{z-index:2}
.arch-symbols{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.arch-symbols span{position:absolute;bottom:-34px;left:var(--x);font-family:var(--serif);font-size:var(--s,26px);font-style:italic;line-height:1;color:rgba(255,255,255,var(--a,.2));opacity:0;animation:mSymbol var(--t,12s) var(--d,0s) linear infinite}
.hero-ring{animation:mFade 1s .9s ease backwards,mSpin 26s linear 1.9s infinite}
.hero-ring::after{content:'';position:absolute;top:-5px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px rgba(194,59,63,.16)}
/* the quote's glow is a soft pink light behind it that fades in and out (opacity only: it costs the page nothing) */
.hero-quote::before{content:'';position:absolute;inset:-18% -14%;z-index:-1;background:radial-gradient(closest-side,rgba(240,160,163,.30),transparent);opacity:0;pointer-events:none;animation:mHalo 7s 3.2s ease-in-out infinite}
.hero-quote .qw{display:inline-block;animation:mRise .8s calc(.8s + var(--i,0) * .1s) cubic-bezier(.2,.7,.2,1) backwards}
.hero-note{overflow:hidden}
.hero-note::after{content:'';position:absolute;top:0;left:0;width:38%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);pointer-events:none;animation:mNoteShine 8s 3.4s ease-in-out infinite}
.hero-note-icon{animation:mPop .7s 1.5s cubic-bezier(.2,.8,.3,1.4) backwards,mCap 6s 3s ease-in-out infinite}

/* ---------- Narrow screens ---------- */
@media(max-width:900px){
  .path.is-live{padding:60px 0 68px}
  .path.is-live .path-stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stairs" "code" "levels";row-gap:14px;padding:0 20px}
  .path.is-live .path-head .hero-badge{margin-bottom:10px;font-size:11px}
  .path.is-live .path-title{font-size:clamp(24px,6vw,32px)}
  .path.is-live .path-stairs{align-self:start}
  .path.is-live .path-code{font-size:clamp(84px,24vw,130px)}
  .path.is-live .path-levels{height:clamp(150px,24vh,200px)}
  .path-level p{font-size:15px;line-height:1.6}
  .path-stage{padding:0 20px}
}
@media(max-width:640px){
  .path{padding:56px 0 64px}
  .word-field span:nth-child(n+9){display:none}
  .finale{padding:48px 22px}
  .course-hero::before{top:30%}
}