/* Choo-Choo Express: steam puffs, turning wheels, a blinking crossing signal and bobbing balloons.
   The opening ("station"): the birthday express chugs in from the left and toots a big puff.
   Only transform and opacity animate; reduced motion shows the train already at the station. */
[data-theme="train"] .hero-art .tn-wheels { transform-box: fill-box; transform-origin: center; animation: tn-spin 1.2s linear infinite; }
[data-theme="train"] .hero-art .tn-loco, [data-theme="train"] .hero-art .tn-car { animation: tn-chug .5s ease-in-out infinite alternate; animation-delay: calc(var(--i, 3) * -.12s); }
[data-theme="train"] .tn-puff { transform-box: fill-box; transform-origin: center; animation: tn-puff 2.4s ease-out infinite; animation-delay: calc(var(--i) * -.8s); }
[data-theme="train"] .hero-art .tn-blink { animation: tn-blink 1s steps(1) infinite; }
[data-theme="train"] .hero-art .tn-blink2 { animation-delay: -.5s; }
[data-theme="train"] .hero-art .tn-bal { animation: tn-bob 4s ease-in-out infinite; animation-delay: calc(var(--i) * -1.6s); }
[data-theme="train"] .hero-art .tn-under { display: none; }
[data-theme="train"] .card { border-radius: 22px; }
[data-theme="train"] .btn { border-radius: 16px; }
[data-theme="train"] .title { letter-spacing: .01em; text-shadow: 0 4px 0 rgba(0, 0, 0, .18); }

/* the opening: full-bleed hills, the train rolls in from off screen and toots */
[data-theme="train"] .op-art svg { overflow: visible; }
[data-theme="train"] .op-art .tn-under { display: inline; }
[data-theme="train"] .op-station.op-run .tn-train { animation: tn-arrive 3.2s .4s cubic-bezier(.25, .7, .25, 1) both; }
[data-theme="train"] .op-station.op-run .tn-smoke { transform-box: fill-box; transform-origin: center bottom; animation: tn-toot .8s 3.5s cubic-bezier(.3, 1.6, .5, 1) both; }
[data-theme="train"] .op-station.op-run .tn-sky { animation: tn-fade 1.4s .2s ease-out both; }

/* Party TV backdrop */
[data-theme="train"].tv-bd { opacity: .7; }

@keyframes tn-spin { to { transform: rotate(360deg); } }
@keyframes tn-chug { to { transform: translateY(-1px); } }
@keyframes tn-puff { 0% { opacity: .95; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(-10px, -18px) scale(1.5); } }
@keyframes tn-blink { 50% { opacity: .15; } }
@keyframes tn-bob { 50% { transform: translateY(-5px) rotate(3deg); } }
@keyframes tn-arrive { from { transform: translateX(-420px); } }
@keyframes tn-toot { 0% { transform: scale(1); } 40% { transform: scale(1.7); } 100% { transform: scale(1); } }
@keyframes tn-fade { from { opacity: 0; transform: translateY(-10px); } }
/* long names (and wide display faces) wrap instead of pushing the page sideways at 320px */
[data-theme="train"] .btn, [data-theme="train"] .card h2, [data-theme="train"] .title, [data-theme="train"] .eyebrow { overflow-wrap: anywhere; }
/* film: the camera opens close on the hero beat and pulls back as the story plays; the squad
   makes its own entrance, then lands its rock; the squad blinks now and then. */
[data-theme="train"] .op-art { transform: scale(1.4); transform-origin: 56% 78%; transition: opacity 1.2s ease, transform 5.2s cubic-bezier(.33, .05, .2, 1); }
[data-theme="train"] .op-pal { transform: translateX(-120vw) rotate(-4deg); transition-timing-function: cubic-bezier(.25, .8, .3, 1.08); }
[data-theme="train"] .op-run .op-art, [data-theme="train"] .op-run .op-pal { opacity: 1; transform: none; }
[data-theme="train"] .op-final .op-art, [data-theme="train"] .op-final .op-pal { opacity: 1; transform: none; transition: none; }
[data-theme="train"] .op-run .op-pal svg { transform-origin: 50% 100%; animation: tn-rock .7s calc(4.5s + var(--i) * .18s) ease-out both; }
@keyframes tn-rock { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-6deg); } 65% { transform: rotate(4deg); } }
[data-theme="train"] .critter .cr-eye { transform-box: fill-box; transform-origin: center; animation: tn-blink 5.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.37s - .6s); }
@keyframes tn-blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.08); } }
/* phones in portrait: the scene steps forward so it fills the screen */
@media (max-aspect-ratio: 4/5) { [data-theme="train"] .op-art svg { transform: scale(1.35); transform-origin: 50% 100%; } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="train"] .critter .cr-eye, [data-theme="train"] .op-pal svg, [data-theme="train"] .hero-art *, [data-theme="train"] .tn-puff { animation: none !important; }
}