/* TeoriBoost motion layer.
   One language everywhere: things arrive with a soft spring, press down like rubber, and the
   characters and cars are never quite still. Every loop is slow, small and pauses when the
   tab is hidden. "Bevægelse" off or the device's reduced-motion setting turns all of it off. */

:root{
  --spring:cubic-bezier(.2,1.45,.4,1);
  --spring-soft:cubic-bezier(.25,1.25,.45,1);
  --out:cubic-bezier(.16,1,.3,1);
  --in-out:cubic-bezier(.65,0,.35,1);
}
@property --p{syntax:'<number>';inherits:true;initial-value:0}

/* ---------- arrive: page and content ---------- */
.reveal{animation:reveal .5s var(--out) backwards;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes reveal{from{opacity:0;translate:0 14px;scale:.985}}
.page-head h1{animation:title-in .55s var(--out) both}
@keyframes title-in{from{opacity:0;translate:0 10px;letter-spacing:.02em}}

/* page swaps use the View Transitions API where it exists: the old page drifts away, the new one rises */
::view-transition-old(root){animation:vt-out .18s var(--in-out) both}
::view-transition-new(root){animation:vt-in .34s var(--out) both}
@keyframes vt-out{to{opacity:0;translate:0 -6px}}
@keyframes vt-in{from{opacity:0;translate:0 12px}}
.topbar{view-transition-name:topbar}
#mobile-nav{view-transition-name:tabbar}
::view-transition-group(topbar),::view-transition-group(tabbar){animation:none}

/* ---------- touch: everything presses like rubber ---------- */
:where(button,.btn,.home-cta,.journey-jump,.mission-card,.chapter-card,.nav-item,#mobile-nav a,.mybil-item,.mybil-base,.mybil-tab,.mybil-swatch,.booster-chip,.icon-btn,.answer,.statement label){
  transition:scale .16s var(--spring),translate .16s var(--spring),box-shadow .16s ease,background-color .2s ease,border-color .2s ease}
:where(button,.btn,.home-cta,.journey-jump,.mission-card,.chapter-card,.mybil-item,.mybil-base,.mybil-tab,.booster-chip,.icon-btn):active{scale:.96}
.mybil-swatch:active{scale:.86}
@media (hover:hover){
  :where(.home-cta,.journey-jump,.mission-card,.chapter-card,.mybil-item,.mybil-base):hover{translate:0 -2px}
  .mybil-swatch:hover{scale:1.12}
}
.mybil-swatch.is-on{animation:swatch-on .4s var(--spring)}
@keyframes swatch-on{from{scale:.7}}
.mybil-tab.is-active{animation:tab-on .35s var(--spring)}
@keyframes tab-on{from{scale:.9}}
.mybil-item.is-on{animation:item-on .45s var(--spring)}
@keyframes item-on{0%{scale:.94}60%{scale:1.03}}

/* tab bar: the chosen icon hops */
#mobile-nav a.active svg,#desktop-nav a.active svg{animation:nav-hop .5s var(--spring)}
@keyframes nav-hop{0%{translate:0 0;scale:1}35%{translate:0 -5px;scale:1.12}100%{translate:0 0;scale:1}}

/* home CTA: a slow shine reminds you where to go next */
.home-cta{position:relative;overflow:hidden;isolation:isolate}
.home-cta::after{content:"";position:absolute;inset:-20% auto -20% -40%;width:30%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg);animation:shine 4.5s 1.2s var(--in-out) infinite}
@keyframes shine{0%{left:-40%}35%,100%{left:120%}}
.home-cta b{display:inline-block;animation:nudge 1.8s 1s var(--in-out) infinite}
@keyframes nudge{0%,60%,100%{translate:0 0}75%{translate:5px 0}}

/* progress ring fills up instead of appearing full */
.home-ring{animation:ring-fill 1.1s .25s var(--out) both}
@keyframes ring-fill{from{--p:0}}
.home-ring span{animation:pop-in .5s .9s var(--spring) both}
@keyframes pop-in{from{scale:.6;opacity:0}}

/* ---------- characters: each one breathes in its own way ---------- */
.cast-img{transform-origin:50% 92%}
.cast .cast-img{animation:cast-in .45s var(--spring) both,var(--idle,idle-breathe) var(--idle-t,3.2s) .5s var(--in-out) infinite}
.cast--wrong .cast-img{animation:cast-in .45s var(--spring) both,cast-wobble 1.6s .45s ease-in-out 1,var(--idle,idle-breathe) var(--idle-t,3.2s) 2.1s var(--in-out) infinite}
.cast--correct .cast-img{animation:cast-in .45s var(--spring) both,cast-cheer .7s .45s var(--spring) 1,var(--idle,idle-breathe) var(--idle-t,3.2s) 1.2s var(--in-out) infinite}
.cast[data-cast="sneglen"]{--idle:idle-sway;--idle-t:4.6s}
.cast[data-cast="kegle"]{--idle:idle-wobble;--idle-t:3.4s}
.cast[data-cast="blink"]{--idle:idle-blink;--idle-t:3.8s}
.cast[data-cast="bobbel"]{--idle:idle-bounce;--idle-t:1.9s}
.cast[data-cast="krabbe"]{--idle:idle-scuttle;--idle-t:3s}
.cast[data-cast="daek"]{--idle:idle-roll;--idle-t:3.6s}
@keyframes idle-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.015,.985)}}
@keyframes idle-sway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg) translateY(-2px)}}
@keyframes idle-wobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-3deg)}40%{transform:rotate(2.5deg)}55%{transform:rotate(0)}}
@keyframes idle-blink{0%,100%{transform:scale(1)}44%{transform:scale(1)}48%{transform:scale(1.04,.94)}52%{transform:scale(.98,1.03)}56%{transform:scale(1)}}
@keyframes idle-bounce{0%,100%{transform:translateY(0) scale(1.03,.97)}45%{transform:translateY(-7px) scale(.98,1.02)}55%{transform:translateY(-7px) scale(.98,1.02)}}
@keyframes idle-scuttle{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px) rotate(-1deg)}40%{transform:translateX(3px) rotate(1deg)}60%{transform:translateX(0)}}
@keyframes idle-roll{0%,100%{transform:rotate(-2deg) translateX(-2px)}50%{transform:rotate(3deg) translateX(3px)}}
@keyframes cast-cheer{0%{transform:translateY(0)}30%{transform:translateY(-14px) scale(1.05,.96)}55%{transform:translateY(0) scale(1.06,.92)}75%{transform:translateY(-4px)}100%{transform:none}}
.cast-bubble{animation:bubble-in .5s .18s var(--spring) both;transform-origin:10% 100%}
@keyframes bubble-in{from{opacity:0;scale:.7;translate:-6px 6px}}

/* ---------- answers ---------- */
.feedback,.journey-feedback-tray,.turn-feedback{animation:tray-up .45s var(--spring) both}
@keyframes tray-up{from{opacity:0;translate:0 24px}}
.feedback.wrong,.journey-feedback-tray.repair,.turn-feedback--repair{animation:tray-up .45s var(--spring) both,nope .45s .1s ease-in-out}
@keyframes nope{20%{translate:-7px 0}40%{translate:6px 0}60%{translate:-4px 0}80%{translate:2px 0}}
.statement.correct,.journey-feedback-tray .right{animation:good-pop .5s var(--spring)}
.statement.incorrect,.journey-feedback-tray .wrong{animation:nope .4s ease-in-out}
@keyframes good-pop{0%{scale:1}40%{scale:1.03;box-shadow:0 0 0 6px color-mix(in srgb,var(--good) 25%,transparent)}100%{scale:1}}
.result-mark{animation:stamp .7s .2s var(--spring) both}
@keyframes stamp{0%{opacity:0;scale:2.2;rotate:-12deg}60%{opacity:1;scale:.92;rotate:2deg}100%{scale:1;rotate:0deg}}

/* ---------- toast + dialog ---------- */
.toast{transition:opacity .25s ease,transform .45s var(--spring)!important}
dialog[open]{animation:dialog-in .4s var(--spring)}
dialog[open]::backdrop{animation:fade-in .3s ease}
@keyframes dialog-in{from{opacity:0;scale:.92;translate:0 16px}}
@keyframes fade-in{from{opacity:0}}

/* ---------- Boosters ---------- */
.booster-icon{transform-origin:50% 50%}
.booster-chip .booster-icon{animation:bolt-glint 6s 2s var(--in-out) infinite}
@keyframes bolt-glint{0%,88%,100%{rotate:0deg;scale:1;filter:none}92%{rotate:-14deg;scale:1.18;filter:drop-shadow(0 0 4px #FFD60A)}96%{rotate:8deg;scale:1}}
.booster-chip{position:relative}
.booster-chip.is-earned{animation:chip-earn .8s var(--spring)}
.booster-chip.is-earned .booster-icon{animation:bolt-spin .8s var(--spring)}
.booster-chip.is-spent{animation:chip-spend .5s var(--spring)}
@keyframes chip-earn{0%{scale:1}25%{scale:1.18;box-shadow:0 0 0 6px rgba(255,214,10,.6),0 3px 0 var(--line)}100%{scale:1}}
@keyframes chip-spend{0%{scale:1}30%{scale:.9;translate:0 2px}100%{scale:1}}
@keyframes bolt-spin{from{rotate:-360deg;scale:.4}}

/* sparks: little bursts from whatever just got better */
.fx-sparks{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:40}
.fx-sparks i{position:absolute;width:8px;height:8px;margin:-4px;border-radius:2px;background:var(--h);
  animation:spark .85s var(--out) both}
.fx-sparks i:nth-child(3n){border-radius:50%;width:6px;height:6px}
.fx-sparks i:nth-child(3n+1){clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);width:12px;height:12px;margin:-6px}
@keyframes spark{0%{opacity:1;transform:translate(0,0) scale(.4) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 30px)) scale(1) rotate(200deg)}}

/* ---------- Min bil: the garage is alive ---------- */
.mybil-stage{position:relative}
.mybil-floor{position:absolute;left:8%;right:8%;bottom:12%;height:16%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(31,35,40,.16),rgba(31,35,40,.06) 60%,transparent);
  animation:floor-breathe 2.8s var(--in-out) infinite}
@keyframes floor-breathe{0%,100%{scale:1 1}50%{scale:.96 .9}}
.mybil-stage::before{content:"";position:absolute;inset:-20%;z-index:-2;pointer-events:none;opacity:.7;
  -webkit-mask:radial-gradient(closest-side,#000 30%,transparent 72%);mask:radial-gradient(closest-side,#000 30%,transparent 72%);
  background:conic-gradient(from 0deg at 50% 60%,transparent 0 40deg,rgba(255,214,10,.28) 55deg,transparent 70deg 170deg,rgba(20,224,240,.16) 185deg,transparent 200deg 300deg,rgba(255,95,162,.16) 315deg,transparent 330deg);
  animation:spot-turn 18s linear infinite}
@keyframes spot-turn{to{rotate:360deg}}
/* the body rides its springs over the wheels; the whole rig floats a hair */
.mybil-body.is-sprung{animation:suspension 2.8s var(--in-out) infinite}
@keyframes suspension{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(.7%) rotate(-.25deg)}}
.mybil-neon{animation:neon-breathe 2.4s var(--in-out) infinite,neon-on .6s steps(1) 1}
@keyframes neon-breathe{0%,100%{opacity:.75;scale:1 1}50%{opacity:1;scale:1.06 1.25}}
@keyframes neon-on{0%{opacity:0}15%{opacity:.9}25%{opacity:.1}40%{opacity:1}}
/* a light sweep glides over the paint now and then, cut to the car's own silhouette */
.mybil-sheen{position:absolute;inset:0;z-index:35;pointer-events:none;mix-blend-mode:soft-light;
  -webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat;
  background:linear-gradient(105deg,transparent 0 38%,rgba(255,255,255,.95) 46%,rgba(255,255,255,.4) 50%,transparent 58%) no-repeat;
  background-size:250% 100%;background-position:120% 0;animation:sheen 5.5s 1s var(--in-out) infinite}
@keyframes sheen{0%,55%{background-position:120% 0}100%{background-position:-60% 0}}
/* rev: the engine shakes the car, it squats back, exhaust puffs out the back */
.mybil-stage.is-revving .mybil-rig{animation:rev-shake 1.5s linear}
.mybil-stage.is-revving .mybil-body.is-sprung{animation:rev-squat 1.5s var(--in-out)}
@keyframes rev-shake{
  0%,100%{transform:none}
  5%,15%,25%{transform:translate(.3%,-.2%)}10%,20%,30%{transform:translate(-.3%,.2%)}
  32%,36%,40%,44%,48%,52%{transform:translate(.5%,-.3%) rotate(.3deg)}34%,38%,42%,46%,50%,54%{transform:translate(-.5%,.3%) rotate(-.3deg)}
  60%,70%,80%{transform:translate(.2%,0)}65%,75%,85%{transform:translate(-.2%,0)}}
@keyframes rev-squat{0%,100%{transform:none}30%,55%{transform:translateY(1%) rotate(-1.2deg)}70%{transform:translateY(-.4%) rotate(.4deg)}}
.fx-puffs{position:absolute;left:10%;top:62%;width:0;height:0;pointer-events:none;z-index:2}
.fx-puffs i{position:absolute;width:40px;height:40px;margin:-20px;border-radius:50%;
  background:radial-gradient(circle at 42% 40%,rgba(255,255,255,.95),rgba(214,218,222,.8) 45%,rgba(200,204,208,0) 70%);opacity:0;animation:puff 1s var(--out) both}
@keyframes puff{0%{opacity:.95;transform:translate(0,0) scale(calc(var(--s) * .4))}100%{opacity:0;transform:translate(-70px,-26px) scale(calc(var(--s) * 2.2))}}
/* tuned: the car settles on its springs, the new part pops in with a flash */
.mybil-stage.is-tuned .mybil-rig{animation:settle .8s var(--spring)}
@keyframes settle{0%{transform:translateY(-3%) scale(1.02,.98)}40%{transform:translateY(1%) scale(.99,1.02)}100%{transform:none}}
.mybil-stage [data-layer].is-new,.mybil-stage [data-layer].is-new + .mybil-shade{animation:layer-pop .7s var(--spring)}
@keyframes layer-pop{0%{opacity:0;scale:1.12;filter:brightness(2.2)}50%{opacity:1;filter:brightness(1.4)}100%{scale:1;filter:none}}
.mybil-grid,.mybil-colors{animation:panel-in .4s var(--out)}
@keyframes panel-in{from{opacity:0;translate:0 8px}}
.mybil-grid > *{animation:reveal .45s var(--out) backwards}
.mybil-grid > :nth-child(2){animation-delay:30ms}.mybil-grid > :nth-child(3){animation-delay:60ms}.mybil-grid > :nth-child(4){animation-delay:90ms}
.mybil-grid > :nth-child(5){animation-delay:120ms}.mybil-grid > :nth-child(6){animation-delay:150ms}.mybil-grid > :nth-child(n+7){animation-delay:180ms}

/* ---------- Home: your car out on the road (a seamless loop) ---------- */
.road-loop{position:relative;display:block;height:170px;margin:0 0 18px;border-radius:24px;overflow:hidden;isolation:isolate;
  border:2px solid var(--line);box-shadow:0 4px 0 var(--line);color:var(--ink);text-decoration:none;
  background:linear-gradient(#BFF3FF 0,#E9FBFF 58%,#fff 58%)}
.road-loop > span{position:absolute;display:block}
/* time of day: --n 0 (noon) -> 1 (night), set from the scroll position by motion.js */
.road-loop{--n:0;--sunset:0;--dusk:0;--dark:0;--moon:0;--lamps:0}
.road-dusk{inset:0 0 42% 0;background:linear-gradient(#5B4BB7 0,#E86A8E 45%,#FFB36B 85%,#FFD38A 100%);opacity:var(--dusk)}
.road-night{inset:0 0 42% 0;background:linear-gradient(#0B1330 0,#1B2752 55%,#2E3B6E 100%);opacity:var(--dark)}
.road-stars{inset:0 0 50% 0;opacity:calc(var(--dark) * var(--dark));
  background:radial-gradient(1.6px 1.6px at 12% 22%,#fff 99%,transparent),radial-gradient(1.2px 1.2px at 28% 48%,#fff 99%,transparent),radial-gradient(1.8px 1.8px at 41% 14%,#fff 99%,transparent),
    radial-gradient(1.2px 1.2px at 57% 36%,#fff 99%,transparent),radial-gradient(1.6px 1.6px at 69% 18%,#fff 99%,transparent),radial-gradient(1.2px 1.2px at 83% 44%,#fff 99%,transparent),
    radial-gradient(1.4px 1.4px at 92% 12%,#fff 99%,transparent),radial-gradient(1.2px 1.2px at 6% 58%,#fff 99%,transparent),radial-gradient(1.4px 1.4px at 50% 62%,#fff 99%,transparent);
  animation:twinkle 3.2s var(--in-out) infinite}
@keyframes twinkle{50%{filter:brightness(.55)}}
/* the sun: a warm halo that grows and reddens as it sinks behind the hills */
.road-sun{right:12%;top:calc(14px + var(--sunset) * 96px);width:calc(46px + var(--sunset) * 10px);height:calc(46px + var(--sunset) * 10px);border-radius:50%;
  background:color-mix(in oklab,#FFE14D,#FF4E3A calc(var(--sunset) * 100%));
  box-shadow:0 0 0 calc(7px + var(--sunset) * 4px) color-mix(in oklab,rgba(255,229,110,.45),rgba(255,110,60,.4) calc(var(--sunset) * 100%)),
    0 0 calc(34px + var(--sunset) * 26px) calc(12px + var(--sunset) * 10px) color-mix(in oklab,rgba(255,214,77,.6),rgba(255,90,50,.55) calc(var(--sunset) * 100%));
  animation:sun-pulse 4.5s var(--in-out) infinite}
.road-sun::before{content:"";position:absolute;inset:-120%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in oklab,rgba(255,236,140,.55),rgba(255,120,70,.5) calc(var(--sunset) * 100%)),transparent);animation:sun-halo 4.5s var(--in-out) infinite}
@keyframes sun-pulse{50%{scale:1.04}}
@keyframes sun-halo{50%{scale:1.12;opacity:.8}}
/* the moon: rises on the left with a cooler, smaller glow */
.road-moon{right:7%;top:calc(132px - var(--moon) * 112px);width:30px;height:30px;border-radius:50%;opacity:calc(.25 + var(--moon) * .75);
  background:radial-gradient(5px 5px at 62% 34%,#D9D4BF 99%,transparent),radial-gradient(4px 4px at 36% 62%,#D9D4BF 99%,transparent),radial-gradient(3px 3px at 66% 70%,#DCD7C3 99%,transparent),#F6F2DE;
  box-shadow:0 0 0 5px rgba(220,230,255,.18),0 0 22px 7px rgba(205,220,255,.42)}
.road-moon::before{content:"";position:absolute;inset:-90%;border-radius:50%;background:radial-gradient(closest-side,rgba(200,215,255,.32),transparent);animation:sun-halo 6s var(--in-out) infinite}
/* the land darkens; the asphalt goes deep blue-grey */
.road-clouds,.road-hills,.road-trees{filter:brightness(calc(1 - var(--dark) * .55)) saturate(calc(1 - var(--dark) * .35))}
.road-clouds{opacity:calc(.95 - var(--dark) * .55)}
.road-asphalt{filter:brightness(calc(1 - var(--dark) * .45))}
.road-speed{opacity:calc(.55 - var(--dark) * .3)}
.road-car .mybil-rig{filter:brightness(calc(1 - var(--dark) * .38)) saturate(calc(1 - var(--dark) * .2))}
/* lamps: they fade on as it gets dark; the beams reach forward over the road */
.road-lamps{position:absolute;inset:0;z-index:40;pointer-events:none;opacity:var(--lamps)}
.road-lamps i{position:absolute;display:block}
.rl-head{width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle,#FFFDF0 0 30%,rgba(255,240,170,.9) 45%,rgba(255,226,120,0) 72%);
  box-shadow:0 0 14px 6px rgba(255,236,150,.55);animation:lamp-on .9s steps(1) 1}
.rl-beam{width:130px;height:46px;margin:-23px 0 0 0;mix-blend-mode:screen;
  background:linear-gradient(90deg,rgba(255,244,190,.85),rgba(255,236,160,.35) 55%,rgba(255,236,160,0));
  clip-path:polygon(0 42%,100% 0,100% 100%,0 58%);filter:blur(1.5px);transform-origin:0 50%;rotate:6deg}
.rl-tail{width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:radial-gradient(circle,#FF6B6B 0 30%,rgba(255,40,40,0) 72%);box-shadow:0 0 12px 5px rgba(255,50,50,.45)}
@keyframes lamp-on{0%{opacity:0}30%{opacity:1}45%{opacity:.2}60%{opacity:1}}
.road-clouds{inset:0 0 auto;height:70px;opacity:.95;
  background:radial-gradient(18px 10px at 20px 30px,#fff 98%,transparent),radial-gradient(26px 14px at 44px 24px,#fff 98%,transparent),radial-gradient(16px 9px at 70px 31px,#fff 98%,transparent);
  background-size:260px 70px;background-repeat:repeat-x;animation:scroll-x 40s linear infinite;--w:260px}
.road-hills{left:0;right:0;bottom:42%;height:62px;background-repeat:repeat-x}
.road-hills--far{background-image:radial-gradient(90px 44px at 90px 62px,#9BE07A 98%,transparent),radial-gradient(70px 30px at 220px 62px,#B2E98F 98%,transparent);background-size:300px 62px;animation:scroll-x 24s linear infinite;--w:300px;opacity:.9}
.road-hills--near{height:40px;background-image:radial-gradient(60px 30px at 50px 40px,#6FCB55 98%,transparent),radial-gradient(44px 24px at 150px 40px,#7ED562 98%,transparent),
  linear-gradient(#6FCB55,#6FCB55);background-size:200px 40px,200px 40px,8px 12px;background-position:0 0,0 0,0 28px;animation:scroll-x 12s linear infinite;--w:200px}
.road-trees{left:0;right:0;bottom:41%;height:46px;background-repeat:repeat-x;
  background-image:radial-gradient(13px 15px at 30px 16px,#3FAF4A 97%,transparent),linear-gradient(90deg,transparent 28px,#8A5A2B 28px 32px,transparent 32px),
  radial-gradient(10px 12px at 130px 22px,#2E9C3E 97%,transparent),linear-gradient(90deg,transparent 128px,#8A5A2B 128px 132px,transparent 132px);
  background-size:180px 46px,180px 46px,180px 46px,180px 46px;background-position:0 0,0 26px,0 0,0 30px;animation:scroll-x 7s linear infinite;--w:180px}
.road-asphalt{left:0;right:0;bottom:0;height:42%;background:#3A3F47}
.road-asphalt::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:#E3E7EA}
.road-dashes{left:0;right:0;top:50%;height:5px;margin-top:-2px;display:block;position:absolute;
  background:repeating-linear-gradient(90deg,#FFE14D 0 34px,transparent 34px 70px);background-size:70px 5px;animation:scroll-x .5s linear infinite;--w:70px}
.road-speed{inset:0;z-index:3;pointer-events:none;opacity:.55;
  background:linear-gradient(90deg,transparent 0 10%,rgba(255,255,255,.9) 10% 13%,transparent 13%) 0 38%/220px 2px repeat-x,
             linear-gradient(90deg,transparent 0 50%,rgba(255,255,255,.8) 50% 54%,transparent 54%) 0 64%/300px 2px repeat-x;
  animation:speed .35s linear infinite}
@keyframes speed{to{background-position:-220px 38%,-300px 64%}}
@keyframes scroll-x{to{background-position-x:calc(var(--w) * -1)}}
.road-hills--near{animation-name:scroll-x}
.road-car{left:50%;bottom:4%;width:150px;height:150px;margin-left:-95px;z-index:2;animation:cruise 3.2s var(--in-out) infinite}
@keyframes cruise{0%,100%{translate:0 0}25%{translate:3px -1px}50%{translate:-2px 0}75%{translate:2px -1px}}
.road-car .mybil-body.is-sprung{animation:road-bump 1.2s linear infinite}
@keyframes road-bump{0%,100%{transform:translateY(0)}10%{transform:translateY(-1.2%)}20%{transform:translateY(.6%)}30%{transform:translateY(0)}60%{transform:translateY(-.4%)}70%{transform:translateY(0)}}
.road-car::after{content:"";position:absolute;left:14%;right:14%;bottom:14%;height:9%;border-radius:50%;z-index:-1;background:rgba(0,0,0,.28);filter:blur(4px)}
.road-loop > .road-label{left:12px;top:10px;z-index:4;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:7px 11px;border-radius:14px;background:rgba(255,255,255,.9);border:2px solid var(--line)}
.booster-chip-mini{display:inline-flex;align-items:center;gap:4px;font:800 13px/1 var(--font-display)}
.booster-chip-mini .booster-icon{width:16px;height:16px}
.road-label small{font:800 11px/1 var(--font-display);letter-spacing:.08em;color:var(--muted)}
.road-label strong{font:800 15px/1.1 var(--font-display)}
@media (min-width:700px){.road-loop{height:200px}.road-car{width:180px;height:180px;margin-left:-110px}}

/* ---------- off switch: settings or the device say no motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
body.no-motion *,body.no-motion *::before,body.no-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important}
body.no-motion .fx-sparks,body.no-motion .fx-puffs{display:none}
/* pause every loop while the tab is hidden: no battery spent on nobody */
html.is-hidden *,html.is-hidden *::before,html.is-hidden *::after{animation-play-state:paused!important}

/* ---------- Rive animations (rive-fx.js): the canvas sits on the element; its own icon is the fallback ---------- */
[data-rive]{position:relative}
.rive-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
[data-rive-on="on"]>:not(.rive-canvas){visibility:hidden}
.fb-badge{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--good,#58CC02);color:#fff;vertical-align:middle}
.fb-badge .ui-ico{width:20px;height:20px}
.fb-badge[data-rive$="wrong"]{background:var(--bad,#FF4B4B)}
.fb-badge .rive-canvas{inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px)}
.fb-badge[data-rive-on="on"]{background:none}
.fb-head{display:flex;align-items:center;gap:10px}
.ord-head{display:flex;align-items:center;gap:10px}
.judge__done-ico[data-rive-on="on"],.mh-ico[data-rive-on="on"],.chip-ico[data-rive-on="on"]{background:none!important;box-shadow:none!important}
.judge__done-ico .rive-canvas{inset:-10px;width:calc(100% + 20px);height:calc(100% + 20px)}
.rive-hero{height:190px;margin:-6px 0 -10px}
.rive-hero:not([data-rive-on]),.rive-hero[data-rive-on="off"]{display:none}
.journey-celebration[data-rive]{position:absolute;left:50%;top:0;width:260px;height:260px;translate:-50% -30px;pointer-events:none;z-index:0}
.journey-celebration[data-rive-on="on"] i{display:none}
.journey-lesson-done>:not(.journey-celebration){position:relative;z-index:1}

/* elements whose own content stays visible on top of the Rive canvas */
[data-rive-on="on"]>.rive-keep{visibility:visible;position:relative;z-index:1}
/* Lær: the readiness ring as a speedometer; the number sits in the gap at the bottom of the dial */
.mh-ring[data-rive-on="on"]{background:rgba(8,16,28,.62)}
.mh-ring[data-rive-on="on"]>.mh-ring-num{position:absolute;left:0;right:0;bottom:7%;display:grid;justify-items:center;line-height:1}
.mh-ring[data-rive-on="on"] .mh-ring-num b{font-size:17px}
.mh-ring[data-rive-on="on"] .mh-ring-num small{font-size:9.5px;margin-top:0}
@media (min-width:860px){.mh-ring[data-rive-on="on"] .mh-ring-num b{font-size:21px}.mh-ring[data-rive-on="on"] .mh-ring-num small{font-size:11px}}
.mh-ico[data-rive^="target"] .rive-canvas{inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px)}
/* Profil: a small dark dial next to the percentage */
.ready-gauge{display:none;flex:none;width:76px;height:76px;border-radius:18px;background:#1B2330}
.ready-gauge[data-rive-on]:not([data-rive-on="off"]){display:block}
/* Spørg AI: a traffic light while waiting for the first word */
.chat-status i[data-rive-on="on"]{display:inline-block;width:12px;height:28px;vertical-align:middle;border:0;border-radius:0;background:none;animation:none}
/* the Booster bolt in the top bar */
.bolt-rive{display:inline-grid;place-items:center}
.bolt-rive .rive-canvas{inset:-9px;width:calc(100% + 18px);height:calc(100% + 18px)}

/* Min bil: the dream-build show on its dark stage; the CSS glow-up underneath is the fallback */
.dream-rive{position:relative;width:min(100%,520px);aspect-ratio:1/1;margin:0 auto;display:grid;place-items:center}
.dream-rive[data-rive-on="on"]>.gu{position:absolute;inset:0}
.dream-modal:has(.dream-rive[data-rive-on="on"]){background:#0B0D15!important;padding:0 0 16px}
.dream-modal:has(.dream-rive[data-rive-on="on"]) .fine-print{color:#C9CFDB;border:0;margin:4px 0 0;padding:0 18px;text-align:center}
.dream-modal .btn.dream-replay{display:flex;margin:12px auto 0;background:#1E2236!important;color:#F4F6FA!important;border:2px solid #3A4060!important;box-shadow:0 4px 0 #05060A}
.dream-modal .btn.dream-replay[hidden]{display:none}
/* Start page: the glow-up machine's car area runs the Rive Hero; the garage scene and poster stay CSS */
.gu-stage[data-rive]{position:absolute;inset:0}
/* Rive draws its own shadow under the tyres, so the CSS car's shadow blob goes */
.gu:has(>.gu-stage[data-rive-on="on"]) .gu-ring{display:none!important}
/* a passed practice test: the finish-line show replaces the character once it runs */
.pass-rive{display:none;width:min(100%,460px);aspect-ratio:4/3;margin:0 auto 14px;border-radius:20px;overflow:hidden;background:#0B0D1F}
.pass-rive[data-rive-on="on"]{display:block}
.result-hero:has(.pass-rive[data-rive-on="on"])>.cast{display:none}
/* the logo intro (once per visit) */
.logo-intro{position:fixed;inset:0;z-index:1000;display:grid;place-content:center;justify-items:center;gap:4px;background:#0B0D15;transition:opacity .35s ease,visibility .35s}
.logo-intro.is-out{opacity:0;visibility:hidden}
.logo-intro__mark{position:relative;width:min(70vw,320px);aspect-ratio:1/1}
.logo-intro__mark .brand-mark{position:absolute;inset:23.3%;width:auto;height:auto;margin:0;border-radius:24%}
.logo-intro__name{font:800 30px var(--font-display);color:#F4F6FA;margin-top:-18px;opacity:0;translate:0 10px;transition:opacity .45s .7s,translate .45s .7s}
.logo-intro.is-on .logo-intro__name{opacity:1;translate:0}
/* the intro's start button: the canvas is laid over the button with a margin (fit Fill on a 480x140 board, button 360x58) */
.cta-rive{position:relative;display:flex}
.cta-rive>.start-cta{flex:1}
.cta-rive .rive-canvas{left:-16.667%;width:133.333%;top:-70.69%;height:241.38%}
.start-cta.is-launch{animation:cta-launch .62s cubic-bezier(.5,0,.9,.4) forwards!important;pointer-events:none}
@keyframes cta-launch{0%{translate:0 0}20%{translate:-12px 0}100%{translate:130vw 0}}
/* a streak milestone */
.streak-modal{text-align:center;background:#0B0D15;border-radius:20px;color:#F4F6FA;padding:6px 18px 18px}
.streak-rive{display:none;width:min(100%,320px);aspect-ratio:1/1;margin:0 auto -10px}
.streak-rive[data-rive-on="on"]{display:block}
.streak-big{margin:8px 0 2px;font:800 22px var(--font-display)}
.streak-big b{display:block;font-size:64px;line-height:1;color:#FFD60A}
.streak-line{margin:0 0 16px;color:#C9CFDB}
/* a lesson is done: the green-light show replaces the character once it runs */
.lesson-rive{display:none;width:min(100%,420px);aspect-ratio:5/3;margin:0 auto 4px}
.lesson-rive[data-rive-on="on"]{display:block}
.journey-lesson-done:has(.lesson-rive[data-rive-on="on"]) .journey-done-art{display:none!important} /* play.css forces flex */