/* Roller Disco Night: the mirror ball's beams sweep the rink, its facets glint, the neon sign hums,
   the grid floor pulses and the skaters glide. The opening ("mirrorball"): lights down, the ball
   drops on its chain, the beams switch on, the sign flickers to life and the crew skates in.
   Only transform and opacity animate; reduced motion shows the lit rink, still. */
[data-theme="rollerdisco"] .hero-art .rd-beam { transform-box: view-box; transform-origin: 90px 44px; animation: rd-sweep 5s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -1.6s); }
[data-theme="rollerdisco"] .hero-art .rd-beam2 { animation-direction: alternate-reverse; }
[data-theme="rollerdisco"].tv-bd .rd-beam { transform-box: fill-box; transform-origin: center top; animation: rd-sweep 6s ease-in-out infinite alternate; }
[data-theme="rollerdisco"].tv-bd .rd-beam2 { animation-direction: alternate-reverse; }
[data-theme="rollerdisco"] .hero-art .rd-facet { animation: rd-glint 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.2s); }
[data-theme="rollerdisco"] .hero-art .rd-sign { animation: rd-hum 4s ease-in-out infinite; }
[data-theme="rollerdisco"] .hero-art .rd-grid { animation: rd-pulse 2.4s ease-in-out infinite; }
[data-theme="rollerdisco"] .hero-art .rd-skater { animation: rd-glide 3.4s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.1s); }
[data-theme="rollerdisco"] .hero-art .rd-under { display: none; }
[data-theme="rollerdisco"] .title { font-weight: 400; letter-spacing: .01em; text-shadow: 0 0 18px rgba(255, 61, 154, .55), 2px 2px 0 #7b2cbf; }
[data-theme="rollerdisco"] .card { border-radius: 20px; }
[data-theme="rollerdisco"] .btn { border-radius: 999px; }

/* the opening */
[data-theme="rollerdisco"] .op-art svg { overflow: visible; }
[data-theme="rollerdisco"] .op-art .rd-under { display: inline; }
[data-theme="rollerdisco"] .op-mirrorball.op-run .rd-sun { animation: rd-dim 1.6s .2s ease-out both; }
[data-theme="rollerdisco"] .op-mirrorball.op-run .rd-drop { animation: rd-drop 1.2s 1s cubic-bezier(.4, 0, .3, 1.4) both; }
[data-theme="rollerdisco"] .op-mirrorball.op-run .rd-beams { animation: rd-on .3s 2.2s steps(2, jump-none) both; }
[data-theme="rollerdisco"] .op-mirrorball.op-run .rd-sign { animation: rd-flicker 1s 2.7s linear both, rd-hum 4s 3.7s ease-in-out infinite; }
[data-theme="rollerdisco"] .op-mirrorball.op-run .rd-skater { animation: rd-in 1.2s calc(3.1s + var(--i) * .25s) cubic-bezier(.2, .8, .3, 1) both, rd-glide 3.4s 4.6s ease-in-out infinite alternate; }

@keyframes rd-sweep { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@keyframes rd-glint { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes rd-hum { 0%, 92%, 100% { opacity: 1; } 94% { opacity: .55; } 96% { opacity: 1; } 97% { opacity: .7; } }
@keyframes rd-pulse { 50% { opacity: .6; } }
@keyframes rd-glide { from { transform: translateX(-10px) rotate(-3deg); } to { transform: translateX(10px) rotate(3deg); } }
@keyframes rd-dim { from { opacity: 0; transform: translateY(26px); } }
@keyframes rd-drop { from { transform: translateY(-110px); } }
@keyframes rd-on { from { opacity: 0; } }
@keyframes rd-flicker { 0% { opacity: 0; } 10% { opacity: 1; } 20% { opacity: .1; } 35% { opacity: 1; } 45% { opacity: .2; } 60%, 100% { opacity: 1; } }
@keyframes rd-in { from { opacity: 0; transform: translateX(-200px); } }
/* long names (and wide display faces) wrap instead of pushing the page sideways at 320px */
[data-theme="rollerdisco"] .btn, [data-theme="rollerdisco"] .card h2, [data-theme="rollerdisco"] .title, [data-theme="rollerdisco"] .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 groove; the squad blinks now and then. */
[data-theme="rollerdisco"] .op-art { transform: scale(1.6); transform-origin: 26% 34%; transition: opacity 1.2s ease, transform 5.2s cubic-bezier(.33, .05, .2, 1); }
[data-theme="rollerdisco"] .op-pal { transform: translateX(115vw) rotate(12deg); transition-duration: 1.3s; transition-timing-function: cubic-bezier(.15, .75, .3, 1.05); }
[data-theme="rollerdisco"] .op-run .op-art, [data-theme="rollerdisco"] .op-run .op-pal { opacity: 1; transform: none; }
[data-theme="rollerdisco"] .op-final .op-art, [data-theme="rollerdisco"] .op-final .op-pal { opacity: 1; transform: none; transition: none; }
[data-theme="rollerdisco"] .op-run .op-pal svg { transform-origin: 50% 100%; animation: rd-groove .7s calc(4.5s + var(--i) * .18s) ease-out both; }
@keyframes rd-groove { 0%, 100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-8deg) translateY(-4px); } 75% { transform: rotate(8deg) translateY(-4px); } }
/* phones in portrait: the scene steps forward so it fills the screen */
@media (max-aspect-ratio: 4/5) { [data-theme="rollerdisco"] .op-art svg { transform: scale(1.35); transform-origin: 50% 100%; } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="rollerdisco"] .critter .cr-eye, [data-theme="rollerdisco"] .op-pal svg, [data-theme="rollerdisco"] .hero-art *, [data-theme="rollerdisco"] .rd-beam { animation: none !important; }
}