.pre body{visibility:hidden}
.m .btn:hover{transform:none}
.m .btn{transition:background .18s,color .18s,border-color .18s}
.m .reason,.m .subject{will-change:transform}

/* Split text */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .03em .16em;margin:-.1em -.03em -.16em}
.wi,.c{display:inline-block;will-change:transform}

/* Intro */
#intro{position:fixed;inset:0;z-index:300;background:#fff;display:grid;place-items:center;overflow:hidden;cursor:pointer}
#intro .sweep{position:absolute;inset:0;background:var(--sky);transform:translateY(100%)}
#intro .in{position:relative;display:grid;justify-items:center;gap:20px;width:min(380px,70vw)}
#intro .mk{width:36%}
#intro .wd{width:100%}

/* Canvas sparkles */
.spark-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero,#robot,#contact,#finder{position:relative;overflow:hidden}
.hero>.wrap,#robot>.wrap,#contact>.wrap,#finder>.wrap{position:relative;z-index:1}

/* Flying sparks */
.spk{position:fixed;left:0;top:0;pointer-events:none;z-index:250;fill:var(--sky)}

/* Journey line */
.path:before{opacity:.25}
.path-fill{position:absolute;left:4%;right:4%;top:30px;height:4px;background:var(--navy);border-radius:2px;transform:scaleX(0);transform-origin:left}
.path-bus{position:absolute;left:0;top:-48px;width:50px;height:50px;color:var(--navy);z-index:2;pointer-events:none}
.path-bus svg{width:100%;height:100%;stroke-width:1.6;fill:#fff}
.m-pin #journey{padding:34px 0 30px}
.m-pin #journey .head.split{margin-bottom:20px}
.m-pin #journey h2{font-size:clamp(1.9rem,3.2vw,2.9rem)}
.m-pin #journey .path{margin:58px 0 20px}
.m-pin #journey .grade-card{min-height:190px}

/* Steps line */
.steps li:not(:last-child):after{transform:scaleX(var(--p,1));transform-origin:left}

/* Robot */
.bot svg{animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px) rotate(-5deg)}}
.cell.goal svg{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(.84) rotate(-7deg)}}

/* Hover life */
.quick a svg,.reason svg,.subject svg,.contact-grid svg{transition:transform .3s cubic-bezier(.3,1.8,.5,1)}
.quick a:hover svg,.reason:hover svg,.subject:hover svg,.contact-grid>*:hover svg{transform:scale(1.25) rotate(-8deg)}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s}
.btn:hover:after{transform:translateX(120%)}

/* Footer finale */
.finale{overflow:hidden;background:#fff;padding:clamp(30px,5vw,60px) 0 0}
.finale img{width:min(1240px,100% - 48px);margin:auto;display:block}

/* Learning layer */
.wd-box{position:relative;width:100%}
.intro-pen{position:absolute;top:-34px;margin-left:-4px;width:40px!important;height:40px!important;color:var(--navy);transform-origin:0 100%}
.under{position:relative}
.under-pen{position:absolute;bottom:.02em;margin-left:-.05em;width:.62em!important;height:.62em!important;color:var(--navy);stroke-width:2.2;pointer-events:none}
.doodles{position:absolute;inset:0;z-index:0;pointer-events:none}
.doodle{position:absolute;color:var(--sky);stroke-width:1.7}
.plane{position:absolute;left:0;top:0;width:34px!important;height:34px!important;color:var(--navy);fill:var(--sky);z-index:2;pointer-events:none}
.plane-big{width:46px!important;height:46px!important}
.plane-lane{position:relative;overflow:hidden}
.plane-lane>.wrap{position:relative;z-index:1}
.spk-t{font:700 1em var(--head);color:var(--sky)}
.step-pen{position:absolute;top:2px;width:26px!important;height:26px!important;color:var(--navy);stroke-width:2.2;z-index:2;pointer-events:none}
#steps{position:relative}
.has-ruled{position:relative;overflow:hidden}
.has-ruled>.wrap{position:relative;z-index:1}
.ruled{position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 37px,var(--sky-20) 37px 39px);pointer-events:none}
.ruled:before{content:"";position:absolute;top:0;bottom:0;left:6%;width:2px;background:var(--sky)}
.big-cap{display:block;width:62px!important;height:62px!important;margin:0 auto 26px;color:var(--navy);stroke-width:1.7}
.toss-cap{position:fixed;left:0;top:0;z-index:260;pointer-events:none;stroke-width:1.8}
.stat-ic{display:block;width:40px!important;height:40px!important;padding:9px;margin-bottom:12px;border-radius:50%;background:var(--sky-20);color:var(--navy)}
.stats b{display:block;width:fit-content;transform-origin:left bottom;font-variant-numeric:tabular-nums}
.stat-bar{display:block;height:5px;background:var(--sky-10);border-radius:3px;margin-top:12px;overflow:hidden}
.stat-bar i{display:block;height:100%;background:var(--sky);transform-origin:left;transform:scaleX(0)}

@media (max-width:640px){
  .path-bus,.path-fill{display:none}
  .doodle{opacity:.5}
  .finale img{width:calc(100% - 32px)}
}
@media (prefers-reduced-motion:reduce){
  .pre body{visibility:visible}
}

/* Motion mode: the animation library owns these properties */
.m .stop,.m .pad button,.m .shot img{transition:none}
h1{font-size:clamp(2.35rem,4.9vw,4.5rem)}
.m .under{white-space:nowrap}
.ruled:before{left:2.2%}
@media (max-width:1320px){.ruled:before{display:none}}
@media (max-width:640px){.doodles{display:none}}