.animation-brand { display: grid; justify-items: center; gap: 5px; }
.animation-brand img { width: 126px; height: 92px; object-fit: contain; }
.animation-brand span { color: var(--teal-900); font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.animation-scene { width: 100%; height: 220px; display: none; position: relative; }
.loading-screen[data-variant="mat"] .mat-scene,
.loading-screen[data-variant="relay"] .relay-scene,
.loading-screen[data-variant="parcours"] .parcours-scene,
.loading-screen[data-variant="swing"] .swing-scene,
.loading-screen[data-variant="trampoline"] .trampoline-scene,
.loading-screen[data-variant="bench"] .bench-scene,
.loading-screen[data-variant="lights"] .lights-scene,
.loading-screen[data-variant="cards"] .cards-scene,
.loading-screen[data-variant="puzzle"] .puzzle-scene,
.loading-screen[data-variant="podium"] .podium-scene,
.loading-screen[data-variant="yoga"] .yoga-scene,
.loading-screen[data-variant="pilates"] .pilates-scene,
.loading-screen[data-variant="parkour"] .parkour-scene,
.loading-screen[data-variant="acro"] .acro-scene,
.loading-screen[data-variant="unicycle"] .unicycle-scene,
.loading-screen[data-variant="footvolley"] .footvolley-scene,
.loading-screen[data-variant="badminton"] .badminton-scene,
.loading-screen[data-variant="basketball"] .basketball-scene,
.loading-screen[data-variant="dance"] .dance-scene,
.loading-screen[data-variant="jumping"] .jumping-scene { display: block; }
.loading-screen .loading-text { min-height: 45px; margin: 0; font-weight: 850; text-align: center; line-height: 1.4; }

.mat-floor { position: absolute; right: 14px; bottom: 28px; left: 14px; height: 58px; display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; padding: 5px; border: 2px solid var(--teal-900); border-radius: 7px; background: var(--teal-100); transform-origin: center bottom; }
.mat-floor span { border-right: 1px solid #8ebbb5; }
.mat-floor span:last-child { border: 0; }
.mat-logo { position: absolute; top: 17px; left: 33px; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--red-700); box-shadow: 0 8px 16px rgba(102,22,27,.2); }
.mat-logo svg { width: 26px; height: 26px; }
.loading-screen.playing[data-variant="mat"] .mat-logo { animation: mat-jump 2.3s cubic-bezier(.3,.65,.3,1) infinite; }
.loading-screen.playing[data-variant="mat"] .mat-floor { animation: mat-bounce 2.3s ease-in-out infinite; }
@keyframes mat-jump {
  0% { transform: translate(0,75px) rotate(0); }
  28% { transform: translate(82px,-18px) rotate(160deg); }
  55% { transform: translate(164px,58px) rotate(330deg); }
  70% { transform: translate(190px,44px) rotate(360deg); }
  100% { transform: translate(190px,58px) rotate(360deg); }
}
@keyframes mat-bounce { 0%,52%,100% { transform: scaleY(1); } 59% { transform: scaleY(.86); } 68% { transform: scaleY(1.03); } }

.track-line { position: absolute; right: 8px; bottom: 67px; left: 8px; height: 4px; background: var(--teal-700); box-shadow: 0 18px var(--amber-700), 0 -18px var(--red-700); }
.relay-card { position: absolute; top: 76px; width: 54px; height: 72px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 6px; color: #fff; box-shadow: 0 8px 18px rgba(15, 63, 57, .2); font-size: .72rem; font-weight: 900; opacity: 0; }
.card-one { left: 18px; background: var(--teal-700); }
.card-two { left: calc(50% - 27px); color: var(--teal-900); background: var(--amber-100); }
.card-three { right: 18px; background: var(--red-700); }
.relay-finish { position: absolute; right: 6px; top: 18px; width: 29px; color: var(--teal-900); }
.loading-screen.playing[data-variant="relay"] .card-one { animation: relay-one 2.6s ease-in-out infinite; }
.loading-screen.playing[data-variant="relay"] .card-two { animation: relay-two 2.6s ease-in-out infinite; }
.loading-screen.playing[data-variant="relay"] .card-three { animation: relay-three 2.6s ease-in-out infinite; }
@keyframes relay-one { 0% { opacity: 0; transform: translateX(-40px) rotate(-8deg); } 12%,29% { opacity: 1; transform: translateX(0) rotate(0); } 42%,100% { opacity: .25; transform: translateX(70px) scale(.78); } }
@keyframes relay-two { 0%,24% { opacity: 0; transform: translateX(-35px) rotate(-8deg); } 40%,58% { opacity: 1; transform: translateX(0) rotate(0); } 70%,100% { opacity: .25; transform: translateX(70px) scale(.78); } }
@keyframes relay-three { 0%,53% { opacity: 0; transform: translateX(-35px) rotate(-8deg); } 70%,92% { opacity: 1; transform: translateX(0) rotate(0); } 100% { opacity: 0; transform: translateX(24px); } }

.rings { position: absolute; top: 18px; left: 48px; display: flex; gap: 7px; }
.rings::before, .rings::after { content: ""; position: absolute; top: -18px; width: 2px; height: 25px; background: var(--teal-900); }
.rings::before { left: 14px; }
.rings::after { right: 14px; }
.rings i { width: 31px; height: 31px; border: 4px solid var(--red-700); border-radius: 50%; }
.vault { position: absolute; left: calc(50% - 38px); bottom: 42px; width: 76px; height: 49px; border: 3px solid var(--teal-900); border-radius: 22px 22px 6px 6px; background: var(--amber-100); }
.vault::after { content: ""; position: absolute; top: 45px; left: 32px; width: 7px; height: 35px; background: var(--teal-900); }
.beam { position: absolute; right: 22px; bottom: 34px; width: 94px; height: 8px; background: var(--red-700); box-shadow: 10px 14px 0 -2px var(--teal-900), 70px 14px 0 -2px var(--teal-900); }
.parcours-runner { position: absolute; left: 4px; bottom: 74px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--teal-700); }
.parcours-runner svg { width: 24px; }
.loading-screen.playing[data-variant="parcours"] .parcours-runner { animation: parcours-run 2.8s ease-in-out infinite; }
.loading-screen.playing[data-variant="parcours"] .rings { animation: rings-sway .75s ease-in-out infinite alternate; }
@keyframes parcours-run {
  0% { transform: translate(0,0) rotate(0); }
  28% { transform: translate(85px,-69px) rotate(180deg); }
  52% { transform: translate(148px,-8px) rotate(360deg); }
  75% { transform: translate(220px,-37px) rotate(360deg); }
  100% { transform: translate(278px,5px) rotate(360deg); }
}
@keyframes rings-sway { to { transform: rotate(4deg); } }

.swing-frame { position: absolute; top: 20px; left: 50%; width: 210px; height: 12px; transform: translateX(-50%); border-radius: 6px; background: var(--teal-900); }
.swing-frame::before, .swing-frame::after { content: ""; position: absolute; top: 10px; width: 5px; height: 180px; background: var(--teal-900); }
.swing-frame::before { left: 10px; transform: rotate(8deg); transform-origin: top; }
.swing-frame::after { right: 10px; transform: rotate(-8deg); transform-origin: top; }
.swing-rings { position: absolute; top: 31px; left: 50%; width: 90px; height: 130px; transform: translateX(-50%); transform-origin: 50% 0; }
.swing-rings::before, .swing-rings::after { content: ""; position: absolute; top: 0; width: 3px; height: 91px; background: var(--red-700); }
.swing-rings::before { left: 16px; }
.swing-rings::after { right: 16px; }
.swing-rings i { position: absolute; top: 82px; width: 34px; height: 34px; border: 5px solid var(--amber-700); border-radius: 50%; }
.swing-rings i:first-child { left: 0; }
.swing-rings i:last-child { right: 0; }
.swing-logo { position: absolute; top: 92px; left: 50%; width: 76px; height: 58px; display: grid; place-items: center; padding: 3px; transform: translateX(-50%); border: 2px solid #cbd8d4; border-radius: 6px; background: #fff; transform-origin: 50% -60px; }
.swing-logo img { width: 100%; height: 100%; object-fit: contain; }
.loading-screen.playing[data-variant="swing"] .swing-rings { animation: ring-swing 1.15s ease-in-out infinite alternate; }
.loading-screen.playing[data-variant="swing"] .swing-logo { animation: logo-swing 1.15s ease-in-out infinite alternate; }
@keyframes ring-swing { from { transform: translateX(-50%) rotate(-11deg); } to { transform: translateX(-50%) rotate(11deg); } }
@keyframes logo-swing { from { transform: translateX(-50%) rotate(-9deg); } to { transform: translateX(-50%) rotate(9deg); } }

.trampoline-bed { position: absolute; right: 50px; bottom: 42px; left: 50px; height: 24px; border: 5px solid var(--teal-900); border-radius: 50%; background: var(--teal-100); }
.trampoline-bed::before, .trampoline-bed::after { content: ""; position: absolute; top: 15px; width: 5px; height: 47px; background: var(--teal-900); }
.trampoline-bed::before { left: 16px; transform: rotate(13deg); }
.trampoline-bed::after { right: 16px; transform: rotate(-13deg); }
.trampoline-logo { position: absolute; z-index: 2; top: 21px; left: calc(50% - 43px); width: 86px; height: 66px; padding: 4px; border-radius: 6px; background: #fff; box-shadow: 0 9px 18px rgba(15,66,59,.16); }
.trampoline-logo img { width: 100%; height: 100%; object-fit: contain; }
.trampoline-shadow { position: absolute; right: 104px; bottom: 68px; left: 104px; height: 9px; border-radius: 50%; background: rgba(11,79,74,.18); }
.loading-screen.playing[data-variant="trampoline"] .trampoline-logo { animation: trampoline-jump 1.35s cubic-bezier(.34,.04,.45,1) infinite; }
.loading-screen.playing[data-variant="trampoline"] .trampoline-bed { animation: trampoline-flex 1.35s ease-in-out infinite; }
.loading-screen.playing[data-variant="trampoline"] .trampoline-shadow { animation: trampoline-shadow 1.35s ease-in-out infinite; }
@keyframes trampoline-jump { 0%,100% { transform: translateY(105px) rotate(0); } 47% { transform: translateY(0) rotate(8deg); } 60% { transform: translateY(10px) rotate(0); } }
@keyframes trampoline-flex { 0%,100% { transform: scaleY(.74); } 18%,70% { transform: scaleY(1); } }
@keyframes trampoline-shadow { 0%,100% { transform: scaleX(1); opacity: .9; } 47% { transform: scaleX(.45); opacity: .3; } }

.bench-part { position: absolute; width: 126px; height: 22px; border: 3px solid var(--teal-900); border-radius: 6px; background: var(--amber-100); opacity: 0; }
.bench-part i { position: absolute; top: 17px; width: 6px; height: 40px; background: var(--teal-900); }
.bench-part i:first-child { left: 16px; }
.bench-part i:last-child { right: 16px; }
.bench-one { top: 35px; left: 20px; }
.bench-two { top: 94px; right: 18px; }
.bench-three { bottom: 49px; left: calc(50% - 63px); }
.bench-check { position: absolute; right: 22px; bottom: 22px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--teal-700); opacity: 0; transform: scale(.4); }
.bench-check svg { width: 26px; }
.loading-screen.playing[data-variant="bench"] .bench-one { animation: bench-one-in 2.4s ease-in-out infinite; }
.loading-screen.playing[data-variant="bench"] .bench-two { animation: bench-two-in 2.4s ease-in-out infinite; }
.loading-screen.playing[data-variant="bench"] .bench-three { animation: bench-three-in 2.4s ease-in-out infinite; }
.loading-screen.playing[data-variant="bench"] .bench-check { animation: bench-check-in 2.4s ease-in-out infinite; }
@keyframes bench-one-in { 0% { opacity: 0; transform: translateX(-90px) rotate(-8deg); } 18%,100% { opacity: 1; transform: translateX(0) rotate(0); } }
@keyframes bench-two-in { 0%,20% { opacity: 0; transform: translateX(90px) rotate(8deg); } 40%,100% { opacity: 1; transform: translateX(0) rotate(0); } }
@keyframes bench-three-in { 0%,42% { opacity: 0; transform: translateY(65px); } 63%,100% { opacity: 1; transform: translateY(0); } }
@keyframes bench-check-in { 0%,64% { opacity: 0; transform: scale(.4); } 77%,94% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.8); } }

.hall-lamp { position: absolute; top: 17px; width: 78px; height: 38px; border: 4px solid var(--teal-900); border-radius: 6px; background: #d3dedb; }
.hall-lamp::before { content: ""; position: absolute; top: -21px; left: 34px; width: 3px; height: 18px; background: var(--teal-900); }
.lamp-one { left: 13px; }
.lamp-two { left: calc(50% - 39px); }
.lamp-three { right: 13px; }
.hall-lines { position: absolute; right: 8px; bottom: 25px; left: 8px; height: 72px; border: 3px solid #a9c6c1; border-radius: 50%; opacity: .5; }
.lights-logo { position: absolute; top: 94px; left: calc(50% - 62px); width: 124px; height: 91px; padding: 6px; object-fit: contain; border-radius: 7px; background: #fff; opacity: .08; filter: grayscale(1); }
.loading-screen.playing[data-variant="lights"] .lamp-one { animation: lamp-on 2.4s step-end infinite; }
.loading-screen.playing[data-variant="lights"] .lamp-two { animation: lamp-on 2.4s .35s step-end infinite; }
.loading-screen.playing[data-variant="lights"] .lamp-three { animation: lamp-on 2.4s .7s step-end infinite; }
.loading-screen.playing[data-variant="lights"] .lights-logo { animation: logo-light 2.4s ease-in-out infinite; }
@keyframes lamp-on { 0%,12% { background: #d3dedb; box-shadow: none; } 13%,92% { background: var(--amber-100); box-shadow: 0 16px 24px rgba(245,183,39,.28); } 100% { background: #d3dedb; } }
@keyframes logo-light { 0%,28% { opacity: .08; filter: grayscale(1); transform: scale(.93); } 55%,92% { opacity: 1; filter: grayscale(0); transform: scale(1); } 100% { opacity: .08; } }

.start-card { position: absolute; top: 70px; left: calc(50% - 32px); width: 64px; height: 78px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 7px; color: #fff; box-shadow: 0 9px 18px rgba(15,66,59,.18); font-weight: 950; opacity: 0; }
.start-one { background: var(--teal-700); }
.start-two { color: var(--teal-900); background: var(--amber-100); }
.start-three { background: var(--red-700); }
.start-four { background: var(--blue-700); }
.loading-screen.playing[data-variant="cards"] .start-one { animation: card-shuffle-one 2.5s ease-in-out infinite; }
.loading-screen.playing[data-variant="cards"] .start-two { animation: card-shuffle-two 2.5s ease-in-out infinite; }
.loading-screen.playing[data-variant="cards"] .start-three { animation: card-shuffle-three 2.5s ease-in-out infinite; }
.loading-screen.playing[data-variant="cards"] .start-four { animation: card-shuffle-four 2.5s ease-in-out infinite; }
@keyframes card-shuffle-one { 0% { opacity: 0; transform: translate(-120px,-40px) rotate(-22deg); } 18%,82% { opacity: 1; transform: translate(-102px,10px) rotate(-8deg); } 100% { opacity: 0; transform: translate(0,0); } }
@keyframes card-shuffle-two { 0%,12% { opacity: 0; transform: translate(-50px,-60px) rotate(16deg); } 30%,82% { opacity: 1; transform: translate(-36px,-5px) rotate(-3deg); } 100% { opacity: 0; transform: translate(0,0); } }
@keyframes card-shuffle-three { 0%,25% { opacity: 0; transform: translate(60px,-60px) rotate(-18deg); } 43%,82% { opacity: 1; transform: translate(35px,-5px) rotate(3deg); } 100% { opacity: 0; transform: translate(0,0); } }
@keyframes card-shuffle-four { 0%,38% { opacity: 0; transform: translate(125px,-35px) rotate(22deg); } 58%,82% { opacity: 1; transform: translate(104px,10px) rotate(8deg); } 100% { opacity: 0; transform: translate(0,0); } }

.puzzle-piece { position: absolute; width: 76px; height: 68px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 7px; color: #fff; box-shadow: 0 7px 16px rgba(15,66,59,.18); font-size: 1.5rem; font-weight: 950; opacity: 0; }
.puzzle-piece svg { width: 28px; }
.puzzle-one { top: 36px; left: calc(50% - 80px); background: var(--teal-700); }
.puzzle-two { top: 36px; left: calc(50% + 4px); color: var(--teal-900); background: var(--amber-100); }
.puzzle-three { top: 112px; left: calc(50% - 80px); background: var(--red-700); }
.puzzle-four { top: 112px; left: calc(50% + 4px); background: var(--blue-700); }
.loading-screen.playing[data-variant="puzzle"] .puzzle-one { animation: puzzle-one-in 2.4s ease-in-out infinite; }
.loading-screen.playing[data-variant="puzzle"] .puzzle-two { animation: puzzle-two-in 2.4s ease-in-out infinite; }
.loading-screen.playing[data-variant="puzzle"] .puzzle-three { animation: puzzle-three-in 2.4s ease-in-out infinite; }
.loading-screen.playing[data-variant="puzzle"] .puzzle-four { animation: puzzle-four-in 2.4s ease-in-out infinite; }
@keyframes puzzle-one-in { 0% { opacity: 0; transform: translate(-95px,-75px) rotate(-18deg); } 30%,90% { opacity: 1; transform: translate(0,0) rotate(0); } 100% { opacity: 0; } }
@keyframes puzzle-two-in { 0%,10% { opacity: 0; transform: translate(95px,-75px) rotate(18deg); } 40%,90% { opacity: 1; transform: translate(0,0) rotate(0); } 100% { opacity: 0; } }
@keyframes puzzle-three-in { 0%,20% { opacity: 0; transform: translate(-95px,75px) rotate(18deg); } 50%,90% { opacity: 1; transform: translate(0,0) rotate(0); } 100% { opacity: 0; } }
@keyframes puzzle-four-in { 0%,30% { opacity: 0; transform: translate(95px,75px) rotate(-18deg); } 60%,90% { opacity: 1; transform: translate(0,0) rotate(0); } 100% { opacity: 0; } }

.podium-step { position: absolute; bottom: 27px; width: 76px; display: grid; place-items: start center; padding-top: 10px; border-radius: 6px 6px 0 0; color: #fff; font-weight: 950; transform: translateY(120px); }
.step-one { left: calc(50% - 38px); height: 104px; background: var(--teal-700); }
.step-two { left: calc(50% - 117px); height: 73px; background: var(--blue-700); }
.step-three { left: calc(50% + 41px); height: 52px; background: var(--red-700); }
.podium-logo { position: absolute; top: 15px; left: calc(50% - 49px); width: 98px; height: 74px; padding: 4px; border-radius: 6px; background: #fff; box-shadow: 0 8px 16px rgba(15,66,59,.18); opacity: 0; transform: translateY(35px) scale(.7); }
.podium-logo img { width: 100%; height: 100%; object-fit: contain; }
.podium-spark { position: absolute; width: 27px; color: var(--amber-700); opacity: 0; }
.spark-one { top: 35px; left: 30px; }
.spark-two { top: 53px; right: 28px; }
.loading-screen.playing[data-variant="podium"] .step-one { animation: podium-rise 2.5s .1s ease-in-out infinite; }
.loading-screen.playing[data-variant="podium"] .step-two { animation: podium-rise 2.5s .22s ease-in-out infinite; }
.loading-screen.playing[data-variant="podium"] .step-three { animation: podium-rise 2.5s .34s ease-in-out infinite; }
.loading-screen.playing[data-variant="podium"] .podium-logo { animation: podium-logo-in 2.5s ease-in-out infinite; }
.loading-screen.playing[data-variant="podium"] .podium-spark { animation: spark-in 2.5s ease-in-out infinite; }
@keyframes podium-rise { 0%,10% { transform: translateY(120px); } 38%,90% { transform: translateY(0); } 100% { transform: translateY(120px); } }
@keyframes podium-logo-in { 0%,37% { opacity: 0; transform: translateY(35px) scale(.7); } 58%,90% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; } }
@keyframes spark-in { 0%,52% { opacity: 0; transform: scale(.4) rotate(0); } 68%,88% { opacity: 1; transform: scale(1) rotate(18deg); } 100% { opacity: 0; } }

.yoga-mat { position: absolute; right: 36px; bottom: 34px; left: 36px; height: 24px; border: 3px solid var(--teal-900); border-radius: 12px; background: var(--teal-100); }
.yoga-symbol { position: absolute; z-index: 2; top: 65px; left: calc(50% - 39px); width: 78px; height: 78px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--teal-700); box-shadow: 0 10px 24px rgba(15,79,74,.22); }
.yoga-symbol svg { width: 39px; height: 39px; }
.yoga-focus { position: absolute; top: 62px; left: calc(50% - 42px); width: 84px; height: 84px; border: 3px solid var(--amber-700); border-radius: 50%; opacity: 0; }
.loading-screen.playing[data-variant="yoga"] .yoga-symbol { animation: yoga-breathe 2.5s ease-in-out infinite; }
.loading-screen.playing[data-variant="yoga"] .focus-one { animation: yoga-focus 2.5s ease-out infinite; }
.loading-screen.playing[data-variant="yoga"] .focus-two { animation: yoga-focus 2.5s .7s ease-out infinite; }
@keyframes yoga-breathe { 0%,100% { transform: translateY(12px) scale(.9); } 50% { transform: translateY(0) scale(1.05); } }
@keyframes yoga-focus { 0% { opacity: .7; transform: scale(.7); } 72%,100% { opacity: 0; transform: scale(1.75); } }

.pilates-mat { position: absolute; right: 20px; bottom: 29px; left: 20px; height: 54px; border: 3px solid var(--teal-900); border-radius: 8px; background: var(--teal-100); }
.pilates-core { position: absolute; top: 65px; left: calc(50% - 36px); width: 72px; height: 72px; display: grid; place-items: center; border: 4px solid var(--red-700); border-radius: 50%; color: var(--teal-900); background: #fff; }
.pilates-core svg { width: 37px; height: 37px; }
.pilates-line { position: absolute; top: 98px; width: 92px; height: 6px; border-radius: 3px; background: var(--amber-700); }
.line-one { left: 17px; }
.line-two { right: 17px; }
.loading-screen.playing[data-variant="pilates"] .pilates-core { animation: pilates-core 2.4s ease-in-out infinite; }
.loading-screen.playing[data-variant="pilates"] .line-one { animation: pilates-left 2.4s ease-in-out infinite; }
.loading-screen.playing[data-variant="pilates"] .line-two { animation: pilates-right 2.4s ease-in-out infinite; }
@keyframes pilates-core { 0%,100% { transform: rotate(-8deg) scale(.92); } 50% { transform: rotate(8deg) scale(1.06); } }
@keyframes pilates-left { 0%,100% { transform: translateX(-24px); opacity: .35; } 50% { transform: translateX(25px); opacity: 1; } }
@keyframes pilates-right { 0%,100% { transform: translateX(24px); opacity: .35; } 50% { transform: translateX(-25px); opacity: 1; } }

.parkour-block { position: absolute; bottom: 30px; border: 3px solid var(--teal-900); border-radius: 6px 6px 0 0; background: var(--amber-100); }
.block-one { left: 25px; width: 61px; height: 50px; }
.block-two { left: 126px; width: 65px; height: 88px; background: var(--teal-100); }
.block-three { right: 22px; width: 61px; height: 126px; background: var(--red-100); }
.parkour-runner { position: absolute; z-index: 2; top: 121px; left: 28px; width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--teal-700); }
.parkour-runner svg { width: 25px; }
.loading-screen.playing[data-variant="parkour"] .parkour-runner { animation: parkour-jump 2.55s ease-in-out infinite; }
@keyframes parkour-jump { 0% { transform: translate(0,0) rotate(0); } 28% { transform: translate(82px,-79px) rotate(170deg); } 57% { transform: translate(174px,-117px) rotate(350deg); } 82%,100% { transform: translate(244px,-151px) rotate(360deg); } }

.acro-floor { position: absolute; right: 34px; bottom: 30px; left: 34px; height: 13px; border-radius: 7px; background: var(--teal-100); box-shadow: inset 0 0 0 2px var(--teal-900); }
.acro-base { position: absolute; bottom: 48px; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--teal-700); }
.acro-base svg { width: 29px; }
.base-left { left: calc(50% - 78px); }
.base-right { right: calc(50% - 78px); }
.acro-flyer { position: absolute; top: 29px; left: calc(50% - 31px); width: 62px; height: 62px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: var(--red-700); opacity: 0; }
.acro-flyer svg { width: 31px; }
.loading-screen.playing[data-variant="acro"] .base-left { animation: acro-left 2.45s ease-in-out infinite; }
.loading-screen.playing[data-variant="acro"] .base-right { animation: acro-right 2.45s ease-in-out infinite; }
.loading-screen.playing[data-variant="acro"] .acro-flyer { animation: acro-fly 2.45s ease-in-out infinite; }
@keyframes acro-left { 0%,100% { transform: translateX(-18px); } 36%,76% { transform: translateX(5px) rotate(9deg); } }
@keyframes acro-right { 0%,100% { transform: translateX(18px); } 36%,76% { transform: translateX(-5px) rotate(-9deg); } }
@keyframes acro-fly { 0%,15% { opacity: 0; transform: translateY(100px) scale(.65) rotate(0); } 43% { opacity: 1; transform: translateY(-8px) scale(1) rotate(180deg); } 69%,88% { opacity: 1; transform: translateY(82px) scale(.82) rotate(360deg); } 100% { opacity: 0; } }

.unicycle-line { position: absolute; right: 15px; bottom: 28px; left: 15px; height: 4px; border-radius: 2px; background: var(--teal-900); }
.unicycle-wheel { position: absolute; bottom: 31px; left: 24px; width: 78px; height: 78px; border: 7px solid var(--teal-700); border-radius: 50%; background: #fff; }
.unicycle-wheel i, .unicycle-wheel i::after { position: absolute; content: ""; top: 29px; left: 3px; width: 59px; height: 3px; background: var(--red-700); }
.unicycle-wheel i::after { top: 0; left: 0; transform: rotate(90deg); }
.unicycle-frame { position: absolute; bottom: 101px; left: 59px; width: 6px; height: 52px; border-radius: 3px; background: var(--teal-900); }
.unicycle-frame::before { content: ""; position: absolute; top: -5px; left: -19px; width: 44px; height: 7px; border-radius: 4px; background: var(--red-700); }
.unicycle-rider { position: absolute; bottom: 145px; left: 39px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--amber-700); }
.unicycle-rider svg { width: 26px; }
.loading-screen.playing[data-variant="unicycle"] .unicycle-wheel,
.loading-screen.playing[data-variant="unicycle"] .unicycle-frame,
.loading-screen.playing[data-variant="unicycle"] .unicycle-rider { animation: unicycle-roll 2.6s ease-in-out infinite; }
.loading-screen.playing[data-variant="unicycle"] .unicycle-wheel { animation-name: unicycle-wheel-roll; }
@keyframes unicycle-roll { 0% { transform: translateX(0) rotate(-3deg); } 42%,75% { transform: translateX(195px) rotate(3deg); } 100% { transform: translateX(235px) rotate(-2deg); opacity: 0; } }
@keyframes unicycle-wheel-roll { 0% { transform: translateX(0) rotate(0); } 42%,75% { transform: translateX(195px) rotate(360deg); } 100% { transform: translateX(235px) rotate(430deg); opacity: 0; } }

.footvolley-net, .badminton-net { position: absolute; top: 58px; left: calc(50% - 3px); width: 6px; height: 132px; background: var(--teal-900); }
.footvolley-net::before, .badminton-net::before { content: ""; position: absolute; top: 15px; left: -76px; width: 158px; height: 55px; border: 3px solid var(--teal-900); background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(15,79,74,.26) 14px 16px); }
.footvolley-ball, .basketball-ball { position: absolute; top: 121px; left: 26px; width: 48px; height: 48px; border: 4px solid var(--red-700); border-radius: 50%; background: #fff; }
.footvolley-ball i { position: absolute; top: 18px; left: 3px; width: 34px; height: 4px; border-radius: 50%; background: var(--teal-700); transform: rotate(24deg); }
.footvolley-foot { position: absolute; right: 27px; bottom: 22px; width: 51px; height: 51px; display: grid; place-items: center; color: var(--amber-700); transform: rotate(-24deg); }
.footvolley-foot svg { width: 38px; height: 38px; }
.loading-screen.playing[data-variant="footvolley"] .footvolley-ball { animation: footvolley-arc 2.4s ease-in-out infinite; }
.loading-screen.playing[data-variant="footvolley"] .footvolley-foot { animation: footvolley-kick 2.4s ease-in-out infinite; }
@keyframes footvolley-arc { 0% { transform: translate(0,0) rotate(0); } 48% { transform: translate(125px,-105px) rotate(220deg); } 82%,100% { transform: translate(245px,18px) rotate(430deg); } }
@keyframes footvolley-kick { 0%,68%,100% { transform: rotate(-24deg); } 78% { transform: translate(-22px,-10px) rotate(-62deg); } }

.badminton-net { top: 84px; height: 106px; }
.badminton-net::before { top: 5px; height: 45px; }
.badminton-racket { position: absolute; left: 25px; bottom: 28px; width: 70px; height: 70px; border: 6px solid var(--teal-700); border-radius: 50%; transform: rotate(-27deg); }
.badminton-racket::after { content: ""; position: absolute; top: 57px; left: 51px; width: 7px; height: 67px; border-radius: 4px; background: var(--red-700); transform: rotate(-39deg); transform-origin: top; }
.badminton-racket i { position: absolute; inset: 9px; border: 2px solid #b2d1cc; border-radius: 50%; }
.badminton-shuttle { position: absolute; top: 42px; right: 31px; width: 40px; height: 55px; transform: rotate(-31deg); }
.badminton-shuttle i { position: absolute; top: 0; left: 2px; width: 36px; height: 36px; border: 4px solid var(--amber-700); border-radius: 50% 50% 8px 8px; border-bottom: 0; }
.badminton-shuttle b { position: absolute; bottom: 0; left: 13px; width: 16px; height: 19px; border-radius: 50%; background: var(--red-700); }
.loading-screen.playing[data-variant="badminton"] .badminton-shuttle { animation: shuttle-flight 2.35s ease-in-out infinite; }
.loading-screen.playing[data-variant="badminton"] .badminton-racket { animation: racket-swing 2.35s ease-in-out infinite; }
@keyframes shuttle-flight { 0% { transform: translate(0,0) rotate(-31deg); } 46% { transform: translate(-126px,73px) rotate(60deg); } 78%,100% { transform: translate(-235px,-9px) rotate(135deg); } }
@keyframes racket-swing { 0%,51%,100% { transform: rotate(-27deg); } 64% { transform: rotate(7deg); } }

.basketball-court { position: absolute; right: 12px; bottom: 24px; left: 12px; height: 73px; border: 3px solid #9fc6c0; border-radius: 50% 50% 0 0; }
.basketball-hoop { position: absolute; top: 39px; right: 29px; width: 72px; height: 13px; border: 5px solid var(--red-700); border-radius: 50%; }
.basketball-hoop::before { content: ""; position: absolute; right: -9px; bottom: 6px; width: 8px; height: 77px; background: var(--teal-900); }
.basketball-hoop i { position: absolute; top: 8px; left: 8px; width: 47px; height: 47px; border: 3px solid #a9c6c1; border-top: 0; clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%); }
.basketball-ball { top: 132px; left: 25px; border-color: var(--amber-700); background: #f4b52d; }
.basketball-ball i, .basketball-ball i::after { position: absolute; content: ""; top: 19px; left: 2px; width: 36px; height: 3px; border-radius: 50%; background: var(--teal-900); }
.basketball-ball i::after { top: 0; left: 0; transform: rotate(90deg); }
.loading-screen.playing[data-variant="basketball"] .basketball-ball { animation: basketball-shot 2.55s ease-in-out infinite; }
@keyframes basketball-shot { 0% { transform: translate(0,0) rotate(0); } 18% { transform: translate(53px,-61px) rotate(120deg); } 33% { transform: translate(96px,8px) rotate(220deg); } 65% { transform: translate(217px,-116px) rotate(470deg); } 82%,100% { transform: translate(235px,-68px) rotate(570deg); opacity: .2; } }

.dance-stage { position: absolute; right: 24px; bottom: 27px; left: 24px; height: 72px; border: 3px solid var(--teal-900); border-radius: 50%; background: var(--teal-100); }
.dance-step { position: absolute; bottom: 48px; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: var(--teal-700); }
.dance-step svg { width: 34px; height: 34px; }
.step-left { left: 83px; }
.step-right { right: 83px; background: var(--red-700); }
.dance-note { position: absolute; width: 33px; height: 33px; color: var(--amber-700); opacity: 0; }
.note-one { top: 50px; left: 44px; }
.note-two { top: 26px; right: 42px; }
.loading-screen.playing[data-variant="dance"] .step-left { animation: dance-left 1.15s ease-in-out infinite alternate; }
.loading-screen.playing[data-variant="dance"] .step-right { animation: dance-right 1.15s ease-in-out infinite alternate; }
.loading-screen.playing[data-variant="dance"] .dance-note { animation: dance-note 2.2s ease-out infinite; }
.loading-screen.playing[data-variant="dance"] .note-two { animation-delay: .55s; }
@keyframes dance-left { to { transform: translate(38px,-22px) rotate(13deg); } }
@keyframes dance-right { to { transform: translate(-38px,8px) rotate(-13deg); } }
@keyframes dance-note { 0% { opacity: 0; transform: translateY(35px) scale(.6); } 35%,72% { opacity: 1; } 100% { opacity: 0; transform: translateY(-28px) scale(1.1); } }

.jump-tramp { position: absolute; bottom: 34px; width: 76px; height: 25px; border: 5px solid var(--teal-900); border-radius: 50%; background: var(--teal-100); }
.jump-tramp::before, .jump-tramp::after { content: ""; position: absolute; top: 15px; width: 4px; height: 31px; background: var(--teal-900); }
.jump-tramp::before { left: 10px; transform: rotate(12deg); }
.jump-tramp::after { right: 10px; transform: rotate(-12deg); }
.tramp-one { left: 10px; }
.tramp-two { left: calc(50% - 38px); }
.tramp-three { right: 10px; }
.jump-energy { position: absolute; top: 43px; left: 29px; width: 45px; height: 45px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: var(--red-700); }
.jump-energy svg { width: 27px; }
.loading-screen.playing[data-variant="jumping"] .jump-energy { animation: jumping-route 2.55s ease-in-out infinite; }
.loading-screen.playing[data-variant="jumping"] .tramp-one { animation: jump-flex 2.55s ease-in-out infinite; }
.loading-screen.playing[data-variant="jumping"] .tramp-two { animation: jump-flex 2.55s .72s ease-in-out infinite; }
.loading-screen.playing[data-variant="jumping"] .tramp-three { animation: jump-flex 2.55s 1.45s ease-in-out infinite; }
@keyframes jumping-route { 0% { transform: translate(0,88px) rotate(0); } 31% { transform: translate(111px,-3px) rotate(120deg); } 62% { transform: translate(222px,88px) rotate(240deg); } 88%,100% { transform: translate(222px,-10px) rotate(360deg); } }
@keyframes jump-flex { 0%,26%,100% { transform: scaleY(1); } 34% { transform: scaleY(.68); } 43% { transform: scaleY(1.08); } }
.loading-screen .loading-stage {
  width: min(390px, 100%);
  min-height: 430px;
  grid-template-rows: auto 220px auto;
  align-content: center;
  gap: 16px;
  padding: 28px 24px;
}
.animation-scenes { width: 100%; min-width: 0; }
.loading-screen:not(.playing) .animation-scene * { animation-play-state: paused !important; }
.loading-screen.quick-finish[data-variant="mat"] { --quick-finish-offset: -1.95s; }
.loading-screen.quick-finish[data-variant="relay"] { --quick-finish-offset: -2.2s; }
.loading-screen.quick-finish[data-variant="parcours"] { --quick-finish-offset: -2.35s; }
.loading-screen.quick-finish[data-variant="swing"] { --quick-finish-offset: -.92s; }
.loading-screen.quick-finish[data-variant="trampoline"] { --quick-finish-offset: -1.08s; }
.loading-screen.quick-finish[data-variant="bench"] { --quick-finish-offset: -2.02s; }
.loading-screen.quick-finish[data-variant="lights"] { --quick-finish-offset: -2.02s; }
.loading-screen.quick-finish[data-variant="cards"] { --quick-finish-offset: -2.1s; }
.loading-screen.quick-finish[data-variant="puzzle"] { --quick-finish-offset: -2.02s; }
.loading-screen.quick-finish[data-variant="podium"] { --quick-finish-offset: -2.1s; }
.loading-screen.quick-finish[data-variant="yoga"] { --quick-finish-offset: -2.1s; }
.loading-screen.quick-finish[data-variant="pilates"] { --quick-finish-offset: -2.02s; }
.loading-screen.quick-finish[data-variant="parkour"] { --quick-finish-offset: -2.15s; }
.loading-screen.quick-finish[data-variant="acro"] { --quick-finish-offset: -2.07s; }
.loading-screen.quick-finish[data-variant="unicycle"] { --quick-finish-offset: -2.2s; }
.loading-screen.quick-finish[data-variant="footvolley"] { --quick-finish-offset: -2.02s; }
.loading-screen.quick-finish[data-variant="badminton"] { --quick-finish-offset: -1.98s; }
.loading-screen.quick-finish[data-variant="basketball"] { --quick-finish-offset: -2.15s; }
.loading-screen.quick-finish[data-variant="dance"] { --quick-finish-offset: -.92s; }
.loading-screen.quick-finish[data-variant="jumping"] { --quick-finish-offset: -2.15s; }
.loading-screen.quick-finish.playing .animation-scene * {
  animation-delay: var(--quick-finish-offset, -2s) !important;
  animation-iteration-count: 1 !important;
  animation-fill-mode: both !important;
}
.loading-screen.quick-finish.playing[data-variant="dance"] .dance-note {
  animation-delay: -1.85s !important;
}
.loading-screen.is-leaving .loading-stage { opacity: 0; transform: translateY(-5px) scale(.98); }

.login-form.is-entering .login-form-head,
.login-form.is-entering > label {
  animation: login-form-field-in .5s cubic-bezier(.18,.88,.3,1.05) both;
}
.login-form.is-entering > label:nth-of-type(1) { animation-delay: .08s; }
.login-form.is-entering > label:nth-of-type(2) { animation-delay: .16s; }
.login-form.is-entering .login-submit-button { animation: login-submit-in .46s .24s cubic-bezier(.18,.88,.3,1.12) both; }
.login-submit-button { transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
.login-submit-button.is-checking { transform: scale(.98); background: var(--teal-900); box-shadow: 0 8px 22px rgba(11,79,74,.2); }
.login-submit-button.is-checking svg { animation: login-submit-spin .72s linear infinite; }
.login-submit-button.is-success { transform: scale(1.015); background: var(--teal-700); box-shadow: 0 0 0 7px rgba(15,118,110,.13); }
.login-submit-button.is-success svg { animation: login-submit-check .38s cubic-bezier(.2,.85,.3,1.25) both; }
.app-shell.is-entering { animation: app-shell-enter .55s cubic-bezier(.18,.82,.28,1) both; }
@keyframes login-form-field-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes login-submit-in { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes login-submit-spin { to { transform: rotate(360deg); } }
@keyframes login-submit-check { from { transform: scale(.35) rotate(-20deg); } to { transform: scale(1) rotate(0); } }
@keyframes app-shell-enter { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }

@media (max-width: 760px) {
  .mobile-nav-dialog[open] {
    transform-origin: calc(100% - 28px) 100%;
    animation: quick-fan-dialog-in .34s cubic-bezier(.18,.9,.32,1.12) both;
  }
  .mobile-nav-dialog[open]::backdrop { animation: quick-fan-backdrop-in .24s ease both; }
  .mobile-nav-dialog[open] .mobile-nav-section {
    opacity: 0;
    transform: translate(18px, 20px) scale(.9);
    transform-origin: 100% 100%;
    animation: quick-fan-section-in .36s cubic-bezier(.18,.9,.32,1.12) forwards;
  }
  .mobile-nav-dialog[open] .mobile-nav-section:nth-child(1) { animation-delay: .04s; }
  .mobile-nav-dialog[open] .mobile-nav-section:nth-child(2) { animation-delay: .09s; }
  .mobile-nav-dialog[open] .mobile-nav-section:nth-child(3) { animation-delay: .14s; }
  .mobile-nav-dialog[open] .mobile-nav-section:nth-child(4) { animation-delay: .19s; }
  .mobile-nav-dialog[open] .mobile-nav-section:nth-child(5) { animation-delay: .24s; }
  .mobile-nav-dialog[open] .mobile-nav-section:nth-child(6) { animation-delay: .29s; }
  .mobile-nav-dialog[open] .mobile-nav-section .option-button {
    opacity: 0;
    transform: translateX(12px);
    animation: quick-fan-item-in .24s ease forwards;
  }
  .mobile-nav-dialog[open] .mobile-nav-section .option-button:nth-of-type(1) { animation-delay: .12s; }
  .mobile-nav-dialog[open] .mobile-nav-section .option-button:nth-of-type(2) { animation-delay: .17s; }
  .mobile-nav-dialog[open] .mobile-nav-section .option-button:nth-of-type(3) { animation-delay: .22s; }
}
@keyframes quick-fan-dialog-in { from { opacity: 0; transform: translate(18px, 20px) scale(.68); } to { opacity: 1; transform: translate(0,0) scale(1); } }
@keyframes quick-fan-backdrop-in { from { background: rgba(8,25,23,0); } to { background: rgba(8,25,23,.52); } }
@keyframes quick-fan-section-in { to { opacity: 1; transform: translate(0,0) scale(1); } }
@keyframes quick-fan-item-in { to { opacity: 1; transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .loading-screen .animation-scene *, .login-form.is-entering *, .login-submit-button, .app-shell.is-entering,
  .mobile-nav-dialog[open], .mobile-nav-dialog[open] .mobile-nav-section, .mobile-nav-dialog[open] .option-button {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}