/* Superstar Gymnastics: swaying spotlights, swinging rings, swirling ribbons, twinkling confetti and
   a star bouncing on the podium. The opening ("podium"): the spotlights snap on, the star flips
   across the arena and sticks the landing, and the judges' cards flip up: 10, 10, 10.
   Only transform and opacity animate; reduced motion shows the star on the podium, still. */
[data-theme="gymnastics"] .gy-spot { transform-box: fill-box; transform-origin: center top; animation: gy-sway 7s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -2.3s); }
[data-theme="gymnastics"] .hero-art .gy-rings { transform-box: fill-box; transform-origin: center top; animation: gy-swing 3.2s ease-in-out infinite; }
[data-theme="gymnastics"] .hero-art .gy-rib { transform-box: fill-box; transform-origin: left center; animation: gy-twirl 3s ease-in-out infinite; animation-delay: calc(var(--i) * -1.5s); }
[data-theme="gymnastics"] .hero-art .gy-conf { animation: gy-twinkle 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.3s); }
[data-theme="gymnastics"] .hero-art .gy-star { transform-box: fill-box; transform-origin: center; animation: gy-bounce 1.6s ease-in-out infinite; }
[data-theme="gymnastics"] .hero-art .gy-card { transform-box: fill-box; transform-origin: center bottom; animation: gy-bob 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
[data-theme="gymnastics"] .hero-art .gy-under { display: none; }
[data-theme="gymnastics"] .title { letter-spacing: .01em; text-shadow: 0 4px 0 var(--accent); }
[data-theme="gymnastics"] .card { border-radius: 24px; }
[data-theme="gymnastics"] .btn { border-radius: 999px; }

/* the opening */
[data-theme="gymnastics"] .op-art svg { overflow: visible; }
[data-theme="gymnastics"] .op-art .gy-under { display: inline; }
[data-theme="gymnastics"] .op-podium.op-run .gy-spot { animation: gy-on .25s calc(.4s + var(--i, 0) * .45s) steps(2, jump-none) both, gy-sway 7s 2s ease-in-out infinite alternate; }
[data-theme="gymnastics"] .op-podium.op-run .gy-flip { animation: gy-arc 1.5s 1.9s cubic-bezier(.3, .5, .3, 1) both; }
[data-theme="gymnastics"] .op-podium.op-run .gy-star { animation: gy-spin 1.5s 1.9s cubic-bezier(.3, .5, .3, 1) both, gy-bounce 1.6s 3.6s ease-in-out infinite; }
[data-theme="gymnastics"] .op-podium.op-run .gy-card { animation: gy-up .5s calc(3.5s + var(--i) * .3s) cubic-bezier(.3, 1.6, .5, 1) both, gy-bob 2.4s 5s ease-in-out infinite; }

@keyframes gy-sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes gy-swing { 50% { transform: rotate(5deg); } }
@keyframes gy-twirl { 50% { transform: rotate(-10deg) scale(1.05); } }
@keyframes gy-twinkle { 50% { opacity: .3; } }
@keyframes gy-bounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(-6px) scale(.97, 1.03); } 90% { transform: translateY(0) scale(1.05, .95); } }
@keyframes gy-bob { 50% { transform: translateY(-2px) rotate(-3deg); } }
@keyframes gy-on { from { opacity: 0; } }
@keyframes gy-arc { 0% { opacity: 0; transform: translate(-190px, 70px); } 10% { opacity: 1; } 55% { transform: translate(-90px, -46px); } 100% { transform: none; } }
@keyframes gy-spin { from { transform: rotate(-720deg); } to { transform: none; } }
@keyframes gy-up { from { opacity: 0; transform: scaleY(0); } }
/* long names (and wide display faces) wrap instead of pushing the page sideways at 320px */
[data-theme="gymnastics"] .btn, [data-theme="gymnastics"] .card h2, [data-theme="gymnastics"] .title, [data-theme="gymnastics"] .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 stick; the squad blinks now and then. */
[data-theme="gymnastics"] .op-art { transform: scale(1.55); transform-origin: 78% 62%; transition: opacity 1.2s ease, transform 5.2s cubic-bezier(.33, .05, .2, 1); }
[data-theme="gymnastics"] .op-pal { transform: translate(-70vw, -40vh) rotate(-720deg) scale(.5); opacity: 0; transition-property: transform, opacity; transition-duration: 1.2s; transition-timing-function: cubic-bezier(.25, .7, .3, 1.15); }
[data-theme="gymnastics"] .op-run .op-art, [data-theme="gymnastics"] .op-run .op-pal { opacity: 1; transform: none; }
[data-theme="gymnastics"] .op-final .op-art, [data-theme="gymnastics"] .op-final .op-pal { opacity: 1; transform: none; transition: none; }
[data-theme="gymnastics"] .op-run .op-pal svg { transform-origin: 50% 100%; animation: gy-stick .7s calc(4.5s + var(--i) * .18s) ease-out both; }
@keyframes gy-stick { 0% { transform: scale(1.15, .82); } 50% { transform: scale(.95, 1.06) translateY(-4px); } 100% { transform: none; } }
[data-theme="gymnastics"] .critter .cr-eye { transform-box: fill-box; transform-origin: center; animation: gy-blink 5.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.37s - .6s); }
@keyframes gy-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="gymnastics"] .op-art svg { transform: scale(1.35); transform-origin: 50% 100%; } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="gymnastics"] .critter .cr-eye, [data-theme="gymnastics"] .op-pal svg, [data-theme="gymnastics"] .hero-art *, [data-theme="gymnastics"] .gy-spot { animation: none !important; }
}