/* The student signup's playful layer: the Mifumo bars as a mascot with eyes, a striped brand-colour
   progress track with the bars riding along it, springy step changes and confetti at the end.
   Loaded only on /students. Everything moving switches off under prefers-reduced-motion. */
.fun{--b:#1f6fd1;--o:#f08a24;--g:#2e9e4f;position:relative}

/* Drifting bars behind the page */
.fun-sky{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.fun-sky i{position:absolute;bottom:-80px;width:10px;border-radius:5px;opacity:.13;animation:fun-drift linear infinite}
.fun-sky i:nth-child(3n+1){background:var(--b)} .fun-sky i:nth-child(3n+2){background:var(--o)} .fun-sky i:nth-child(3n){background:var(--g)}
@keyframes fun-drift{from{transform:translateY(0) rotate(0)}to{transform:translateY(-120vh) rotate(200deg)}}
.fun main{position:relative;z-index:1}

/* The mascot: three big bars with eyes */
.mascot{display:flex;align-items:flex-end;justify-content:center;gap:10px;height:96px;margin:var(--preview-s4) auto var(--preview-s2);cursor:pointer;user-select:none;width:max-content}
.mascot .bar{position:relative;width:26px;border-radius:13px;transform-origin:50% 100%;animation:fun-sway 2.4s ease-in-out infinite}
.mascot .bar:nth-child(1){height:70px;background:var(--b)}
.mascot .bar:nth-child(2){height:92px;background:var(--o);animation-delay:.18s}
.mascot .bar:nth-child(3){height:80px;background:var(--g);animation-delay:.36s}
.mascot .eyes{position:absolute;top:12px;left:50%;display:flex;gap:4px;transform:translateX(-50%)}
.mascot .eye{width:8px;height:9px;border-radius:50%;background:#fff;position:relative;animation:fun-blink 4.2s infinite}
.mascot .bar:nth-child(2) .eye{animation-delay:.4s} .mascot .bar:nth-child(3) .eye{animation-delay:.9s}
.mascot .eye::after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:#111;
  left:calc(2px + var(--px,0px));top:calc(2.5px + var(--py,0px));transition:left .12s,top .12s}
.mascot .mouth{position:absolute;top:27px;left:50%;width:10px;height:5px;border:2px solid rgba(0,0,0,.55);border-top:0;border-radius:0 0 8px 8px;transform:translateX(-50%);transition:all .2s}
.mascot.sad .mouth{border:2px solid rgba(0,0,0,.55);border-bottom:0;border-radius:8px 8px 0 0;top:30px}
.mascot.wow .mouth{width:8px;height:8px;border-radius:50%;border:2px solid rgba(0,0,0,.55)}
@keyframes fun-sway{0%,100%{transform:scaleY(1) rotate(0)}25%{transform:scaleY(.9) rotate(-3deg)}50%{transform:scaleY(1.05) rotate(0)}75%{transform:scaleY(.95) rotate(3deg)}}
@keyframes fun-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}

/* Reactions, retriggered from JS by toggling the class */
.mascot.hop .bar{animation:fun-hop .45s cubic-bezier(.3,1.6,.5,1) both}
.mascot.hop .bar:nth-child(2){animation-delay:.05s} .mascot.hop .bar:nth-child(3){animation-delay:.1s}
@keyframes fun-hop{0%{transform:translateY(0) scale(1,1)}30%{transform:translateY(0) scale(1.15,.8)}60%{transform:translateY(-26px) scale(.9,1.12)}100%{transform:translateY(0) scale(1,1)}}
.mascot.nope .bar{animation:fun-nope .5s ease-in-out both}
@keyframes fun-nope{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px) rotate(-6deg)}40%{transform:translateX(8px) rotate(6deg)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.mascot.party .bar{animation:fun-party .5s cubic-bezier(.3,1.6,.5,1) 3 both}
.mascot.party .bar:nth-child(2){animation-delay:.08s} .mascot.party .bar:nth-child(3){animation-delay:.16s}
@keyframes fun-party{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-34px) rotate(14deg)}}
.mascot-say{text-align:center;font-size:var(--preview-t13);color:var(--preview-muted);min-height:1.4em;margin-bottom:var(--preview-s3);transition:opacity .2s}

/* Progress: striped brand-colour track, three checkpoints, and the little mark riding the edge */
.fun .race{position:relative;margin:var(--preview-s8) 0 var(--preview-s8)}
.fun .race .progress{height:12px;border-radius:999px;background:var(--preview-raised);overflow:visible;position:relative}
.fun .race .progress>i{position:relative;border-radius:999px;transition:width .7s cubic-bezier(.3,1.4,.5,1);
  background:repeating-linear-gradient(-45deg,var(--b) 0 12px,var(--o) 12px 24px,var(--g) 24px 36px);background-size:51px 51px;animation:fun-stripes 1.1s linear infinite}
@keyframes fun-stripes{to{background-position:51px 0}}
.fun .rider{position:absolute;top:-26px;left:var(--at,33%);transform:translateX(-50%);transition:left .7s cubic-bezier(.3,1.4,.5,1);display:flex;gap:2px;align-items:flex-end;height:22px}
.fun .rider i{width:5px;border-radius:3px;animation:fun-run .36s ease-in-out infinite alternate}
.fun .rider i:nth-child(1){height:14px;background:var(--b)} .fun .rider i:nth-child(2){height:20px;background:var(--o);animation-delay:.12s} .fun .rider i:nth-child(3){height:17px;background:var(--g);animation-delay:.24s}
@keyframes fun-run{from{transform:translateY(0)}to{transform:translateY(-5px)}}
.fun .rider.zoom i{animation-duration:.12s}
.fun .stops{position:absolute;inset:0;pointer-events:none}
.fun .stop{position:absolute;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--preview-surface);border:3px solid var(--preview-raised);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--preview-muted);transition:all .3s}
.fun .stop.done{border-color:var(--c);background:var(--c);color:#fff;animation:fun-pop .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes fun-pop{0%{transform:scale(.4)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
.fun .stop-l{position:absolute;top:18px;transform:translateX(-50%);font-size:var(--preview-t12);color:var(--preview-muted);white-space:nowrap}
.fun .stop-l[data-stop-l="3"]{transform:translateX(-85%)}
.fun .stop-l.on{color:var(--preview-text);font-weight:600}

/* Springy step changes */
.fun section[data-step].in-fwd{animation:fun-in-fwd .45s cubic-bezier(.3,1.3,.5,1) both}
.fun section[data-step].in-back{animation:fun-in-back .45s cubic-bezier(.3,1.3,.5,1) both}
@keyframes fun-in-fwd{from{opacity:0;transform:translateX(60px) rotate(1.5deg)}to{opacity:1;transform:none}}
@keyframes fun-in-back{from{opacity:0;transform:translateX(-60px) rotate(-1.5deg)}to{opacity:1;transform:none}}
.fun .field{animation:fun-rise .5s cubic-bezier(.3,1.3,.5,1) both}
.fun section .field:nth-of-type(2){animation-delay:.05s} .fun section .field:nth-of-type(3){animation-delay:.1s} .fun section .field:nth-of-type(4){animation-delay:.15s}
@keyframes fun-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fun .input:focus-visible,.fun select:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--o) 45%,transparent);border-color:var(--o)}
.fun .btn.primary,.fun #next{transition:transform .15s cubic-bezier(.3,1.6,.5,1)}
.fun .btn.primary:hover,.fun #next:hover{transform:translateY(-2px) rotate(-1deg)}
.fun .btn.primary:active,.fun #next:active{transform:scale(.95)}
.preview .fun .btn.primary,.preview .fun .btn.primary:hover{background:linear-gradient(90deg,var(--b),var(--o),var(--g),var(--o),var(--b));background-size:200% 100%;color:#fff;border-color:transparent;opacity:1;animation:fun-shine 3s linear infinite}
@keyframes fun-shine{to{background-position:200% 0}}
.fun .uni-badge{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:var(--preview-t12);color:var(--g);font-weight:600;animation:fun-pop .5s cubic-bezier(.3,1.8,.5,1)}

/* Confetti canvas */
.fun-confetti{position:fixed;inset:0;pointer-events:none;z-index:50}

@media (prefers-reduced-motion:reduce){
  .fun *,.fun *::before,.fun *::after{animation:none!important;transition:none!important}
  .fun-sky,.fun-confetti{display:none}
}