/* Monster Truck Rally: sweeping stadium beams, popping fireworks, a hovering mid-air truck, waving
   flags. The opening ("rally"): the lights blaze on one by one, then the truck launches off the
   ramp and freezes mid-jump over the junk cars as the dust flies.
   Only transform and opacity animate; reduced motion shows the freeze-frame, still. */
[data-theme="trucks"] .tk-beam { transform-box: fill-box; transform-origin: 0 0; animation: tk-sweep 6s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -3s); }
[data-theme="trucks"] .hero-art .tk-pop { transform-box: fill-box; transform-origin: center; animation: tk-pop 2.8s ease-out infinite; animation-delay: calc(var(--i) * -.9s); }
[data-theme="trucks"] .hero-art .tk-truck { animation: tk-hover 1.6s ease-in-out infinite alternate; }
[data-theme="trucks"] .hero-art .tk-flag { transform-box: fill-box; transform-origin: left center; animation: tk-wave .7s ease-in-out infinite alternate; }
[data-theme="trucks"] .hero-art .tk-under { display: none; }
[data-theme="trucks"] .title { letter-spacing: .02em; font-style: italic; text-shadow: 3px 3px 0 var(--accent2); }
[data-theme="trucks"] .card { border-radius: 18px; }
[data-theme="trucks"] .btn { border-radius: 12px; }

/* the opening */
[data-theme="trucks"] .op-art svg { overflow: visible; }
[data-theme="trucks"] .op-art .tk-under { display: inline; }
[data-theme="trucks"] .op-rally.op-run .tk-lamp { animation: tk-on .3s calc(.6s + var(--i) * .5s) steps(2, jump-none) both; }
[data-theme="trucks"] .op-rally.op-run .tk-beam { animation: tk-on .3s calc(.7s + var(--i, 0) * .5s) steps(2, jump-none) both, tk-sweep 6s 2s ease-in-out infinite alternate; }
[data-theme="trucks"] .op-rally.op-run .tk-jump { animation: tk-launch 1.6s 2s cubic-bezier(.3, .6, .4, 1) both; }
[data-theme="trucks"] .op-rally.op-run .tk-dust { transform-box: fill-box; transform-origin: center bottom; animation: tk-puff .9s 2.1s ease-out both; }

@keyframes tk-sweep { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes tk-pop { 0% { opacity: 0; transform: scale(.2); } 20% { opacity: 1; } 60%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes tk-hover { to { transform: translateY(-3px) rotate(-1.5deg); } }
@keyframes tk-wave { to { transform: scaleX(.8) skewY(-6deg); } }
@keyframes tk-on { from { opacity: 0; } }
@keyframes tk-launch { 0% { opacity: 0; transform: translate(-112px, 44px) rotate(16deg); } 12% { opacity: 1; } 55% { transform: translate(-36px, -22px) rotate(-4deg); } 100% { transform: none; } }
@keyframes tk-puff { from { opacity: 0; transform: scale(.2); } 40% { opacity: 1; } }
/* long names (and wide display faces) wrap instead of pushing the page sideways at 320px */
[data-theme="trucks"] .btn, [data-theme="trucks"] .card h2, [data-theme="trucks"] .title, [data-theme="trucks"] .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 bounce; the squad blinks now and then. */
[data-theme="trucks"] .op-art { transform: scale(1.6); transform-origin: 45% 55%; transition: opacity 1.2s ease, transform 5.2s cubic-bezier(.33, .05, .2, 1); }
[data-theme="trucks"] .op-pal { transform: translateX(120vw) rotate(8deg); transition-duration: .9s; transition-timing-function: cubic-bezier(.2, 1.3, .35, 1); }
[data-theme="trucks"] .op-run .op-art, [data-theme="trucks"] .op-run .op-pal { opacity: 1; transform: none; }
[data-theme="trucks"] .op-final .op-art, [data-theme="trucks"] .op-final .op-pal { opacity: 1; transform: none; transition: none; }
[data-theme="trucks"] .op-run .op-pal svg { transform-origin: 50% 100%; animation: tk-bounce .7s calc(4.5s + var(--i) * .18s) ease-out both; }
@keyframes tk-bounce { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-16px) rotate(-6deg); } 60% { transform: translateY(0) scale(1.08, .9); } 80% { transform: translateY(-4px); } }
[data-theme="trucks"] .critter .cr-eye { transform-box: fill-box; transform-origin: center; animation: tk-blink 5.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.37s - .6s); }
@keyframes tk-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="trucks"] .op-art svg { transform: scale(1.35); transform-origin: 50% 100%; } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="trucks"] .critter .cr-eye, [data-theme="trucks"] .op-pal svg, [data-theme="trucks"] .hero-art *, [data-theme="trucks"] .tk-beam { animation: none !important; }
}