/* ===========================================================================
   THE VAN. On the door it drives in and out; on the waiting screen it's
   parked and idling. The stage runs the full width of the window so it
   drives in from the edge of the screen, not the edge of the column.
   =========================================================================== */
.vn-stage{
  width:100vw; margin-left:calc(50% - 50vw); overflow:hidden;
  height:clamp(150px,24vw,214px); display:flex; align-items:flex-end; justify-content:center;
}
.vn-travel{position:relative; width:min(78vw,340px); transform-origin:50% 100%; animation-duration:1.6s}
.vn-art{display:block; width:100%; height:auto}
/* the door's van: about 20% smaller than the waiting screen's. The stage is
   as tall as the van (400x240 art) plus a little for the brake bounce. */
#vanStage{height:calc(min(78vw,272px) * .6 + 10px)}
#vanStage .vn-travel{width:min(78vw,272px)}
.vn-gone{transform:translateX(120vw)}
.vn-arrive{animation:vn-in 1.6s cubic-bezier(.12,.75,.3,1) both}
.vn-leave{animation:vn-out 1.6s cubic-bezier(.55,0,.85,.35) both}
.vn-parked .vn-bob{animation:vn-bob 2s ease-in-out infinite}
@keyframes vn-in{
  0%{transform:translateX(-120vw) rotate(0)}
  80%{transform:translateX(12px) rotate(0)}
  90%{transform:translateX(3px) rotate(1.4deg)}
  100%{transform:translateX(0) rotate(0)}
}
@keyframes vn-out{
  0%{transform:translateX(0) rotate(0)}
  14%{transform:translateX(-12px) rotate(-1.8deg)}
  26%{transform:translateX(0) rotate(0)}
  100%{transform:translateX(120vw) rotate(0)}
}
@keyframes vn-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* wheels go round while it moves */
.vn-wheel{transform-box:fill-box; transform-origin:center}
.vn-moving .vn-wheel{animation:vn-spin .28s linear infinite}
@keyframes vn-spin{to{transform:rotate(360deg)}}

/* speed lines at the back, only on the move */
.vn-lines{position:absolute; right:100%; top:34%; width:26%; height:auto; opacity:0}
.vn-moving .vn-lines{opacity:1}
.vn-moving .vn-lines line{animation:vn-dash .45s linear infinite}
.vn-moving .vn-lines line:nth-child(2){animation-delay:.15s}
.vn-moving .vn-lines line:nth-child(3){animation-delay:.3s}
@keyframes vn-dash{0%{opacity:0; transform:translateX(18px)}40%{opacity:1}100%{opacity:0; transform:translateX(-18px)}}

/* the aerial: lags on take-off, whips forward on the brake */
.vn-ae1{transform-box:view-box; transform-origin:250px 44px}
.vn-ae2{transform-box:view-box; transform-origin:250px 28px}
.vn-arrive .vn-ae1{animation:vn-ae1-in 1.6s linear both}
.vn-arrive .vn-ae2{animation:vn-ae2-in 1.6s linear both}
.vn-leave .vn-ae1{animation:vn-ae1-out 1.6s linear both}
.vn-leave .vn-ae2{animation:vn-ae2-out 1.6s linear both}
.vn-parked .vn-ae2{animation:vn-ae-idle 2s ease-in-out infinite}
@keyframes vn-ae1-in{0%{transform:rotate(-20deg)}55%{transform:rotate(-16deg)}78%{transform:rotate(-6deg)}86%{transform:rotate(14deg)}92%{transform:rotate(-7deg)}97%{transform:rotate(3deg)}100%{transform:rotate(0)}}
@keyframes vn-ae2-in{0%{transform:rotate(-26deg)}55%{transform:rotate(-20deg)}78%{transform:rotate(-4deg)}88%{transform:rotate(22deg)}94%{transform:rotate(-10deg)}98%{transform:rotate(4deg)}100%{transform:rotate(0)}}
@keyframes vn-ae1-out{0%{transform:rotate(0)}14%{transform:rotate(9deg)}26%{transform:rotate(-4deg)}45%{transform:rotate(-18deg)}100%{transform:rotate(-24deg)}}
@keyframes vn-ae2-out{0%{transform:rotate(0)}16%{transform:rotate(12deg)}30%{transform:rotate(-8deg)}50%{transform:rotate(-24deg)}100%{transform:rotate(-30deg)}}
@keyframes vn-ae-idle{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}

@media (prefers-reduced-motion:reduce){.vn-travel,.vn-travel *{animation:none !important}}

/* ===========================================================================
   THE WAIT. The pops over the heads (sparkles, thought clouds, ? ! ?,
   lightbulbs) spring up one head after another and idle while they're up.
   The van leans into the corner on the way off and straightens coming back.
   =========================================================================== */
.van-wait .vn-lines{top:55%}
.wv-p{
  opacity:0; transform:translateY(8px) scale(.4); transform-box:fill-box; transform-origin:50% 100%;
  transition:opacity .2s ease, transform .4s cubic-bezier(.3,1.6,.6,1); transition-delay:0s;
}
.wv-i{transform-box:fill-box; transform-origin:50% 100%}
[data-pop="read"] .wv-read .wv-p,
[data-pop="think"] .wv-think .wv-p,
[data-pop="talk"] .wv-talk .wv-p,
[data-pop="bulb"] .wv-bulb .wv-p{opacity:1; transform:none; transition-delay:var(--d)}

[data-pop="read"] .wv-read .wv-i{animation:wv-flick .9s ease-in-out infinite}
[data-pop="think"] .wv-think .wv-i{animation:wv-float 2.4s ease-in-out infinite}
[data-pop="talk"] .wv-talk .wv-i{animation:wv-chat .7s ease-in-out infinite}
[data-pop="bulb"] .wv-bulb .wv-i{animation:wv-glow .8s ease-in-out infinite}
.wv-p .wv-i{animation-delay:var(--d) !important}
@keyframes wv-flick{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes wv-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes wv-chat{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes wv-glow{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* round the corner: lean and narrow as it goes, straighten as it comes back */
.wv-turn .vn-bob{animation:wv-lean 1.6s ease-in both}
.wv-unturn .vn-bob{animation:wv-unlean 1.6s ease-out both}
@keyframes wv-lean{0%,45%{transform:none}100%{transform:skewX(-12deg) scaleX(.8)}}
@keyframes wv-unlean{0%{transform:skewX(12deg) scaleX(.8)}55%,100%{transform:none}}

/* the line under the van swaps with a little drop */
.wv-line{transition:opacity .18s ease, transform .18s ease}
.wv-line.swap{opacity:0; transform:translateY(-6px)}

@media (prefers-reduced-motion:reduce){
  .wv-p,.wv-line{transition:none}
  .wv-i,.wv-turn .vn-bob,.wv-unturn .vn-bob{animation:none !important}
}