/* School Bus — page styles (composed scenery + sprite layout) */
.scene.sky { background:linear-gradient(180deg, #A5D8F0 0%, #C9E8F7 55%, #DDF0FA 100%); }
.ground { position:absolute; left:0; right:0; bottom:0; height:26%; z-index:2;
  background:linear-gradient(180deg, #8CC98A 0%, #79B877 30%, #6BA869 100%); }
.ground:before { content:''; position:absolute; left:0; right:0; top:38%; height:34%;
  background:linear-gradient(180deg,#9A9A9A,#8A8A8A); border-top:4px solid #B5B5B5; border-bottom:4px solid #B5B5B5; }
.ground:after { content:''; position:absolute; left:0; right:0; top:52%; height:4px;
  background:repeating-linear-gradient(90deg,#FFF7DC 0 40px, transparent 40px 80px); opacity:.9; }
.sun-el { position:absolute; top:4%; right:5%; width:clamp(70px,12vw,120px); aspect-ratio:1; z-index:1; animation:sun-spin 40s linear infinite; }
@keyframes sun-spin { to { transform:rotate(360deg); } }
.cloud-el { position:absolute; width:clamp(90px,16vw,170px); aspect-ratio:200/90; z-index:1; opacity:.95; }
.cloud-el.c1 { top:6%; left:8%; }
.cloud-el.c2 { top:16%; left:55%; width:clamp(70px,12vw,130px); }
.cloud-el.drift { animation:cloud-drift 9s linear infinite; }
@keyframes cloud-drift { from{transform:translateX(30vw)} to{transform:translateX(-60vw)} }

.scenery .prop { position:absolute; z-index:2; }
/* houses appear in the driving scene; the bus-stop scene stays uncluttered so
   the bus and kids read clearly at every width */
.prop.house { display:none; width:clamp(90px,16vw,180px); aspect-ratio:200/180; bottom:23%; }
.prop.tree { width:clamp(70px,10vw,120px); aspect-ratio:140/200; bottom:23%; }
.prop.tree.t1 { right:2%; } .prop.tree.t2 { right:3%; }
.prop.stop-sign { width:clamp(42px,7vw,70px); aspect-ratio:90/260; bottom:20%; right:16%; z-index:3; }
.prop.school-art { width:clamp(230px,44vw,460px); aspect-ratio:520/300; bottom:22%; right:2%; }
.prop svg, .scenery .prop { pointer-events:none; }

/* intro */
.intro-inner { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; padding-bottom:12vh; }
.intro-bus { width:min(64vw,340px); aspect-ratio:560/300; animation:intro-bob 2.4s ease-in-out infinite; }
@keyframes intro-bob { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-8px) rotate(1deg)} }
.intro-inner h1 { font-size:clamp(2rem,7vw,3.2rem); color:var(--navy); text-shadow:0 2px 0 #fff; margin-top:6px; }
.intro-inner .tagline { max-width:420px; color:var(--soft-navy); font-weight:600; margin:8px 0 20px; font-size:1.05rem; line-height:1.5; background:rgba(255,251,245,.75); border-radius:14px; padding:8px 14px; }
.intro-inner .micro { margin-top:14px; font-size:.82rem; color:var(--soft-navy); background:rgba(255,251,245,.7); padding:4px 12px; border-radius:999px; }

/* bus + windows */
.bus-holder { position:absolute; z-index:6; width:min(62vw,430px); aspect-ratio:560/300; left:3%; bottom:13%; }
.bus-art { position:absolute; inset:0; }
.bus-art img, .bus-art svg, .sun-el svg, .cloud-el svg, .prop svg, .prop img { width:100%; height:100%; display:block; }
.bus-windows { position:absolute; inset:0; z-index:2; }
.bus-window-slot { position:absolute; top:31%; height:23%; width:14.6%; }
.bus-window-slot .kid-window { width:100%; height:118%; position:absolute; bottom:2%; opacity:0; transform:translateY(30%) scale(.6); transition:all .35s cubic-bezier(.34,1.56,.64,1); }
.bus-window-slot.filled .kid-window { opacity:1; transform:none; }
.bus-window-slot .kid-window.leaving { opacity:0; transform:translateY(-40%) scale(.6); }
.bus-window-slot button { position:absolute; inset:-8% -12%; border-radius:12px; }
.bus-window-slot button:hover { background:rgba(255,255,255,.18); }

/* kids at curb */
.kids-curb { position:absolute; right:2%; bottom:15%; z-index:7; display:flex; align-items:flex-end; gap:2vw; }
.kid { position:relative; width:clamp(54px,9.5vw,92px); min-width:44px; aspect-ratio:160/260; border-radius:14px; touch-action:none; transition:transform .15s; }
.kid svg, .kid img { width:100%; height:100%; pointer-events:none; }
.kid { animation:kid-sway 2.8s ease-in-out infinite; }
.kid:nth-child(2){ animation-delay:.4s } .kid:nth-child(3){ animation-delay:.8s } .kid:nth-child(4){ animation-delay:1.2s }
@keyframes kid-sway { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.kid.dragging { animation:none; z-index:60; transform:scale(1.08); filter:drop-shadow(0 10px 16px rgba(30,42,74,.35)); }
.kid.boarding { animation:none; transition:all .7s cubic-bezier(.5,.05,.4,1); opacity:0; transform:scale(.35); pointer-events:none; }
.kid.spring { animation:none; transition:transform .35s cubic-bezier(.34,1.56,.64,1); }

/* drop glow on bus door */
.bus-holder.drop-ready .bus-art { filter:drop-shadow(0 0 18px rgba(232,195,106,.95)); }

/* go button */
.go-btn { position:absolute; left:0; right:0; margin:0 auto; width:max-content; bottom:max(20px, env(safe-area-inset-bottom)); z-index:10; }

/* driving scene */
.scroll-strip { position:absolute; left:0; right:0; bottom:23%; height:40%; z-index:2; overflow:hidden; }
.scroll-props { position:absolute; inset:0; display:flex; align-items:flex-end; gap:6vw; animation:street-scroll 7s linear infinite; width:200%; }
.scroll-props > div { flex:none; }
.scroll-props .sp-house { width:clamp(110px,18vw,200px); aspect-ratio:200/180; }
.scroll-props .sp-tree { width:clamp(70px,11vw,130px); aspect-ratio:140/200; }
@keyframes street-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.bus-holder.driving { left:50%; transform:translateX(-50%); bottom:14%; animation:drive-bob .5s ease-in-out infinite; }
@keyframes drive-bob { 0%,100%{margin-bottom:0} 50%{margin-bottom:5px} }
.bus-holder.driving .bus-wheel { transform-box:fill-box; transform-origin:center; animation:wheel-spin 1s linear infinite; }
@keyframes wheel-spin { to { transform:rotate(360deg); } }
.skip-btn { position:absolute; right:14px; bottom:max(16px, env(safe-area-inset-bottom)); z-index:10; }

/* arrival */
.bus-holder.arrival { left:2%; bottom:13%; width:min(58vw,400px); }
.kids-sidewalk { position:absolute; right:4%; bottom:12%; z-index:7; display:flex; align-items:flex-end; gap:1.5vw; }
.kids-sidewalk .kid { animation:kid-cheer 1.1s ease-in-out infinite; }
.kids-sidewalk .kid:nth-child(2){ animation-delay:.15s } .kids-sidewalk .kid:nth-child(3){ animation-delay:.3s } .kids-sidewalk .kid:nth-child(4){ animation-delay:.45s }
@keyframes kid-cheer { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.arrive-hint { position:absolute; left:50%; transform:translateX(-50%); top:10px; z-index:9; max-width:min(340px, 86vw); font-size:.95rem; }

@media (max-width:540px) {
  .ground { height:32%; }
  .bus-holder { width:60vw; left:1%; bottom:21%; }
  .bus-holder.arrival { width:60vw; }
  .kids-curb { right:1%; gap:1.4vw; bottom:23%; }
  .kid { width:10.5vw; min-width:40px; }
  .kids-sidewalk { right:2%; gap:1vw; bottom:20%; }
  .prop.house.h1 { display:none; }
  .prop.tree.t1 { display:none; }
  .prop.stop-sign { right:2%; bottom:29%; width:11vw; }
  .prop.school-art { width:64vw; right:0; bottom:29%; }
  .prop.tree.t2 { display:none; }
  .scroll-strip { bottom:29%; height:34%; }
}
/* 44px minimum touch target: invisible hit-area extension around each friend */
.kid::after { content:''; position:absolute; inset:-4px -8px; }