/* SJA Learning — homepage motion layer (9 Sep 2026). Loaded only by index.html, after theme.css.
   Rules: animate transform / opacity only (gradients re-paint only when the cursor moves); cursor effects run
   on fine pointers; everything switches off under prefers-reduced-motion; loops pause while the hero is
   off-screen (.hero.off). Bump ?v= on index.html whenever this file changes. */

/* ---- 0. scroll-progress bar — CSS scroll-driven where supported, motion.js drives it elsewhere ---- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--blue);transform-origin:0 50%;transform:scaleX(0);z-index:65;pointer-events:none}
@supports (animation-timeline:scroll()){
  .scroll-progress{animation:sp-grow linear both;animation-timeline:scroll(root)}
}
@keyframes sp-grow{to{transform:scaleX(1)}}

/* ---- 1. page-wide cursor background: one fixed layer behind everything — a radial light centred on --mx/--my
        (viewport px, six lines of motion.js) and a faint dot grid masked by the same variables, so the grid lights up
        around the cursor anywhere on the page. Section tints below are made translucent so the layer shows through. ---- */
.fx{position:fixed;inset:0;z-index:-1;pointer-events:none;--mx:50vw;--my:40vh;background:radial-gradient(560px 560px at var(--mx) var(--my),rgba(30,79,216,.16),transparent 62%)}
.fx:after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(11,31,53,.26) 1px,transparent 1.6px);background-size:26px 26px;
  -webkit-mask:radial-gradient(340px 340px at var(--mx) var(--my),#000 0%,transparent 70%);mask:radial-gradient(340px 340px at var(--mx) var(--my),#000 0%,transparent 70%)}
body{background:transparent}                     /* the white canvas comes from html; the .fx layer sits just above it */
html{background:var(--bg)}
.sec.tint{background:rgba(30,79,216,.045)}       /* same grey-blue as var(--bg3) on white, but see-through */
.site-footer{background:transparent}
@media(hover:none),(prefers-reduced-motion:reduce){.fx{display:none}}

/* ---- 3. hero: aurora blobs (the hero-only spotlight/dot layers were replaced by .fx above) ---- */
.hero:before{display:none}
.hero .aur{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.hero .aur i{position:absolute;display:block;left:50%;top:50%;width:680px;height:680px;margin:-340px 0 0 -340px;border-radius:50%;will-change:transform}
.hero .aur .b1{background:radial-gradient(closest-side,rgba(30,79,216,.17) 0%,rgba(30,79,216,.08) 50%,transparent 100%);animation:aur1 18s ease-in-out infinite alternate}
.hero .aur .b2{background:radial-gradient(closest-side,rgba(123,226,200,.30) 0%,rgba(123,226,200,.12) 50%,transparent 100%);animation:aur2 22s ease-in-out infinite alternate}
.hero .aur .b3{background:radial-gradient(closest-side,rgba(255,209,102,.30) 0%,rgba(255,209,102,.12) 50%,transparent 100%);animation:aur3 26s ease-in-out infinite alternate}
@keyframes aur1{0%{transform:translate(-44vw,-36%) scale(1)}50%{transform:translate(-14vw,-6%) scale(1.18)}100%{transform:translate(-34vw,18%) scale(.94)}}
@keyframes aur2{0%{transform:translate(38vw,-14%) scale(1)}50%{transform:translate(10vw,26%) scale(1.22)}100%{transform:translate(30vw,-36%) scale(1.05)}}
@keyframes aur3{0%{transform:translate(2vw,58%) scale(1)}50%{transform:translate(-16vw,40%) scale(1.12)}100%{transform:translate(18vw,66%) scale(.9)}}
.hero .wrap{position:relative;z-index:1}

/* ---- 4. rotating word in the headline (motion.js injects the extra words, cycles .on/.out, sets the width) ---- */
.rot{display:inline-grid;vertical-align:top;overflow:hidden;line-height:inherit;text-align:left;padding-bottom:.14em;margin-bottom:-.14em;transition:width .3s cubic-bezier(.2,.7,.2,1)}
.rot>span{grid-area:1/1;justify-self:start;white-space:nowrap;opacity:0;transform:translateY(110%);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.rot:not(.live)>span:first-child{opacity:1;transform:none}   /* no JS / reduced motion: "day" simply stays */
.rot>span.on{opacity:1;transform:none}
.rot>span.out{opacity:0;transform:translateY(-110%);transition:opacity .22s,transform .45s cubic-bezier(.2,.7,.2,1)}

/* ---- 6. magnetic button (motion.js sets --tx/--ty when the cursor is near) ---- */
.mag{transform:translate(var(--tx,0px),var(--ty,0px));transition:transform .2s cubic-bezier(.2,.7,.2,1),background .18s,box-shadow .18s}
.mag:hover{transform:translate(var(--tx,0px),var(--ty,0px)) translateY(-1px)}

/* ---- 2 + 5. hero screenshot: three lights orbiting the image, a beam travelling round its edge, 3-D tilt toward the cursor ---- */
@property --o1{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --o2{syntax:"<angle>";inherits:false;initial-value:120deg}
@property --o3{syntax:"<angle>";inherits:false;initial-value:240deg}
.hero-shot{perspective:1400px;container-type:inline-size}
.hero-shot .glows{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-shot .glows i{position:absolute;display:block;left:50%;top:50%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;will-change:transform}
.hero-shot .glows .g1{background:radial-gradient(closest-side,rgba(122,162,255,.95) 0%,rgba(122,162,255,.45) 45%,transparent 100%);transform:translate(-110%,-60%);animation:orb1 18s linear infinite}
.hero-shot .glows .g2{background:radial-gradient(closest-side,rgba(123,226,200,.9) 0%,rgba(123,226,200,.4) 45%,transparent 100%);width:340px;height:340px;margin:-170px 0 0 -170px;transform:translate(110%,40%);animation:orb2 24s linear infinite}
.hero-shot .glows .g3{background:radial-gradient(closest-side,rgba(255,209,102,.8) 0%,rgba(255,209,102,.35) 45%,transparent 100%);width:280px;height:280px;margin:-140px 0 0 -140px;transform:translate(60%,-120%);animation:orb3 30s linear infinite}
/* the real orbit: an ellipse hugging the screenshot's edges, measured in container units */
@supports (width:calc(cos(1deg) * 1cqw)){
  .hero-shot .glows .g1{transform:translate(calc(cos(var(--o1)) * 50cqw),calc(sin(var(--o1)) * 34cqw))}
  .hero-shot .glows .g2{transform:translate(calc(cos(var(--o2)) * 52cqw),calc(sin(var(--o2)) * 36cqw))}
  .hero-shot .glows .g3{transform:translate(calc(cos(var(--o3)) * 48cqw),calc(sin(var(--o3)) * 32cqw))}
}
@keyframes orb1{to{--o1:360deg}}@keyframes orb2{to{--o2:480deg}}@keyframes orb3{to{--o3:600deg}}
/* beam: an oversized conic square (150% ≥ the frame diagonal) spins behind the screenshot inside an overflow-hidden 2px frame → only the edge shows */
.hero-shot .beam{position:relative;z-index:1;border-radius:16px;padding:2px;overflow:hidden;background:#dfe6f3;box-shadow:var(--shadow-lg);transform:rotateY(var(--rx,0deg)) rotateX(var(--ry,0deg));transition:transform .18s ease-out;will-change:transform}
.hero-shot .beam:before{content:"";position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(0deg);background:conic-gradient(from 0deg,transparent 0 60%,#9db8ff 76%,var(--blue) 86%,transparent 100%);animation:spin 6s linear infinite}
.hero-shot .beam .shot{position:relative;border-color:transparent;border-radius:14px;box-shadow:none}
/* the beam's glow: same wedge, same speed, outside the frame, softened by a radial mask (no filters) */
.hero-shot .bglow{position:absolute;left:50%;top:50%;width:136%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(0deg);border-radius:50%;background:conic-gradient(from 0deg,transparent 0 58%,rgba(30,79,216,.4) 84%,transparent 100%);-webkit-mask:radial-gradient(closest-side,#000 0 45%,transparent 100%);mask:radial-gradient(closest-side,#000 0 45%,transparent 100%);animation:spin 6s linear infinite;pointer-events:none;z-index:0;will-change:transform}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.hero-shot .phone{z-index:2}
@media(max-width:700px){.hero-shot .bglow{display:none}}
/* pause every hero loop while the hero is scrolled away */
.hero.off .aur i,.hero.off .glows i,.hero.off .beam:before,.hero.off .bglow{animation-play-state:paused}

/* ---- 7. spotlight cards (every card on the page: numbers, Why, founder, plans, subjects, Trust): a light and a glowing border that follow the cursor ---- */
.spot{position:relative;isolation:isolate}
.spot:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(260px 260px at var(--x,50%) var(--y,50%),rgba(30,79,216,.13),transparent 62%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:-1}
.spot:after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:radial-gradient(220px 220px at var(--x,50%) var(--y,50%),var(--blue),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none}
.spot:hover:before,.spot:hover:after{opacity:1}

/* ---- 8. numbers: count-up (motion.js) + pop-in driven by the scroll timeline ---- */
.num b{font-variant-numeric:tabular-nums}
@supports (animation-timeline:view()){
  .num{animation:pop linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  .num:nth-child(2){animation-range:entry 5% entry 60%}.num:nth-child(3){animation-range:entry 10% entry 65%}.num:nth-child(4){animation-range:entry 15% entry 70%}
}
@keyframes pop{from{opacity:0;transform:translateY(26px) scale(.95)}to{opacity:1;transform:none}}

/* ---- 9. sticky scrollytelling — the screenshot stays pinned while three steps scroll past and swap it ---- */
.story{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:start;margin-top:8px}
.story .sstep{min-height:60vh;display:flex;flex-direction:column;justify-content:center;opacity:.32;transition:opacity .45s;padding:8px 0}
.story .sstep.on{opacity:1}
.story .sstep .n{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-weight:800;font-size:13px;letter-spacing:.06em}
.story .sstep h3{margin-top:14px;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.025em}
.story .sstep p{margin-top:10px;color:var(--mut);font-size:16.5px;line-height:1.6;max-width:440px}
.story .sstep .mimg{display:none}
.story .pin{position:sticky;top:calc(var(--nav-h) + 24px);border-radius:16px;border:1px solid var(--line);overflow:hidden;background:#fff;box-shadow:var(--shadow-lg);aspect-ratio:1200/680}
.story .pin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:scale(1.04);transition:opacity .55s,transform .8s}
.story .pin img.on{opacity:1;transform:none}
.story .pin .cap{position:absolute;left:14px;bottom:14px;background:rgba(11,31,53,.88);color:#fff;font-size:12.5px;font-weight:700;border-radius:999px;padding:6px 12px;backdrop-filter:blur(6px)}
@media(max-width:860px){
  .story{grid-template-columns:1fr}.story .pin{display:none}
  .story .sstep{min-height:0;opacity:1;padding:18px 0}
  .story .sstep .mimg{display:block;margin-top:16px;aspect-ratio:1200/680;overflow:hidden;border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
  .story .sstep .mimg img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
}

/* ---- 10. dark "Why SJA" band with the constellation canvas ---- */
#why.why-sec{padding-top:0;background:#fff}
#why .band{position:relative;background:var(--ink);color:#fff;padding:clamp(56px,7vw,92px) 0;overflow:hidden;isolation:isolate;margin-bottom:clamp(28px,4vw,48px)}
#why .band canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
#why .band .wrap{position:relative;z-index:1}
#why .band .kicker{color:#8fb0ff}
#why .band h2{color:#fff}
#why .band .lead{color:#b9c6d8}
#why .band .sec-head{margin-bottom:0}

/* ---- 11. dynamic island — the ₹9,999 pill morphs open on hover / keyboard focus ---- */
#mcta{transition:transform .45s var(--ease),opacity .3s,border-radius .35s var(--ease),padding .35s var(--ease)}
#mcta .more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1)}
#mcta .more>div{overflow:hidden;width:0;min-width:100%;font-size:12px;color:var(--mut);font-weight:600;line-height:1.45;white-space:normal}
#mcta .more>div span{display:block;padding-top:6px}
#mcta:hover,#mcta:focus-within{border-radius:22px;padding-top:12px;padding-bottom:12px}
#mcta:hover .more,#mcta:focus-within .more{grid-template-rows:1fr}
@media(max-width:600px){#mcta .more{display:none}}

/* ---- accessibility + touch ---- */
@media(prefers-reduced-motion:reduce){
  .scroll-progress,.hero .aur i,.hero-shot .glows i,.hero-shot .beam:before,.hero-shot .bglow,.num{animation:none!important}
  .scroll-progress{display:none}
  .rot,.rot>span{transition:none}
  .hero-shot .beam{transform:none!important;transition:none}
  .mag{transform:none!important}
  .story .sstep,.story .pin img{transition:none}
  .num{opacity:1;transform:none}
  #mcta .more{transition:none}
}
@media(hover:none){.spot:before,.spot:after{display:none}}