twntyx-css 1.0.0

package/styles/animation.css

@@ -0,0 +1,2493 @@
+/*----------------------------*/
+/* ANIMATIONS */
+/*----------------------------*/
+
+/* Enable animating custom properties for gradient stops */
+@property --mask-radius {
+  syntax: '<percentage>';
+  initial-value: 0%;
+  inherits: false;
+}
+
+
+@property --ai-orb-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+:root {
+  interpolate-size: allow-keywords;
+}
+
+@theme {
+  --animate-title-in-bottom: titleInBottom 0.66s cubic-bezier(0.33, 1, 0.68, 1)
+    both;
+  --animate-slide-in-top: slideInTop 0.66s cubic-bezier(0.33, 1, 0.68, 1) both;
+  --animate-slide-in-right: slideInRight 0.66s cubic-bezier(0.33, 1, 0.68, 1)
+    both;
+  --animate-slide-in-bottom: slideInBottom 0.66s cubic-bezier(0.33, 1, 0.68, 1)
+    both;
+  --animate-slide-in-left: slideInLeft 0.66s cubic-bezier(0.33, 1, 0.68, 1) both;
+  --animate-slide-in-long-top: slideInLongTop 0.66s
+    cubic-bezier(0.33, 1, 0.68, 1) both;
+  --animate-slide-in-long-right: slideInLongRight 0.66s
+    cubic-bezier(0.33, 1, 0.68, 1) both;
+  --animate-slide-in-long-bottom: slideInLongBottom 0.66s
+    cubic-bezier(0.33, 1, 0.68, 1) both;
+  --animate-slide-in-long-left: slideInLongLeft 0.66s
+    cubic-bezier(0.33, 1, 0.68, 1) both;
+  --animate-swish-in-bottom: swishInBottom 0.66s cubic-bezier(0.33, 1, 0.68, 1)
+    both;
+  --animate-swish-in-right: swishInRight 0.66s cubic-bezier(0.33, 1, 0.68, 1)
+    both;
+  --animate-swish-in-left: swishInLeft 0.66s cubic-bezier(0.33, 1, 0.68, 1) both;
+  --animate-swish-in-top: swishInTop 0.66s cubic-bezier(0.33, 1, 0.68, 1) both;
+  --animate-transition-content-in: transitionContentIn 0.5s
+    cubic-bezier(0.34, 1.56, 0.64, 1) both;
+  --animate-dropdown-in-top: dropdownInTop 0.22s var(--ease-out-quart) both;
+  --animate-fade-in: fadeIn 0.4s ease both;
+  --animate-fade-out: fadeOut 0.4s ease both;
+  --animate-scale-out: scaleOut 0.4s ease both;
+  --animate-scale-in: scaleIn 0.4s ease both;
+  --animate-kenburns: kenburns 44s ease infinite;
+  --animate-kenburns-reverse: kenburnsReverse 44s ease infinite;
+  --animate-rays: rays 8s cubic-bezier(0.7, 0, 0.3, 1) infinite;
+  --animate-modal-fade-in: modalFadeIn 0.3s ease both;
+  --animate-modal-fade-out: modalFadeOut 0.3s ease both;
+  --animate-scale-in-x-left: scaleInXLeft 0.75s cubic-bezier(0.77, 0, 0.175, 1)
+    both;
+  --animate-scale-out-x-left: scaleOutXLeft 0.75s
+    cubic-bezier(0.77, 0, 0.175, 1) both;
+  --animate-scale-in-x-right: scaleInXRight 0.75s
+    cubic-bezier(0.77, 0, 0.175, 1) both;
+  --animate-scale-out-x-right: scaleOutXRight 0.75s
+    cubic-bezier(0.77, 0, 0.175, 1) both;
+  --animate-stripe: stripe 2s linear infinite;
+  --animate-dailychallenge-medal-in: dailychallengeMedalIn 1.5s
+    cubic-bezier(0, 0.815, 1, 1.005) both;
+  --animate-dailychallenge-top-in: dailychallengeTopIn 0.75s
+    cubic-bezier(0.33, 1, 0.68, 1) both;
+  --animate-dailychallenge-bottom-in: dailychallengeBottomIn 0.75s
+    cubic-bezier(0.33, 1, 0.68, 1) both;
+  --animate-dailychallenge-day-in: dailychallengeDayIn 0.3s
+    cubic-bezier(0, 0.66, 0.34, 1) both;
+  --animate-dailychallenge-progressbar-in: dailychallengeProgressbarIn 2s
+    cubic-bezier(0.66, 0, 0.34, 1) both;
+  --animate-fire-in: fireIn 0.88s cubic-bezier(0, 0.003, 0.034, 1.002) both;
+  --animate-fire-out: fireOut 0.88s cubic-bezier(0, 0.663, 0.34, 1) both;
+  --animate-explosion: explosion 2.5s cubic-bezier(0, 0.48, 0, 1) forwards;
+  --animate-toast-in-out: toastInOut 2s cubic-bezier(0.44, 0, 0, 1) both;
+  --animate-menu-item-grow-down: menuItemGrowDown 0.6s
+    cubic-bezier(0.33, 1, 0.68, 1) both;
+  --animate-star-to-right: starToRight 1.5s linear infinite both;
+  --animate-panel-in-left: panelInLeft 0.75s cubic-bezier(0.44, 0, 0, 1) both;
+  --animate-panel-in-right: panelInRight 0.75s cubic-bezier(0.44, 0, 0, 1) both;
+  --animate-cash-center: cashCenter 2s cubic-bezier(0, 0.4, 0, 1) both;
+  --animate-modal-slide-in: modalSlideIn 0.3s cubic-bezier(0.44, 0, 0, 1) both;
+  --animate-modal-slide-out: modalSlideOut 0.3s cubic-bezier(0.21, 0, 0, 1) both;
+  --animate-tooltip-slide-down: tooltipSlideDown 0.3s
+    cubic-bezier(0.21, 0, 0, 1) both;
+  --animate-tooltip-slide-up: tooltipSlideUp 0.3s cubic-bezier(0.21, 0, 0, 1)
+    both;
+  --animate-tooltip-slide-right: tooltipSlideRight 0.3s
+    cubic-bezier(0.21, 0, 0, 1) both;
+  --animate-tooltip-slide-left: tooltipSlideLeft 0.3s
+    cubic-bezier(0.21, 0, 0, 1) both;
+  --animate-float: float 6s ease-in-out infinite alternate-reverse;
+  --animate-float-coin: floatCoin 6s ease-in-out infinite alternate-reverse;
+  --animate-float-lg: floatLG 6s ease-in-out infinite alternate-reverse;
+  --animate-sidemen-pattern: sidemenPattern 100s linear infinite;
+  --animate-sidemen-box-completed: sidemenBoxCompleted 0.3s
+    cubic-bezier(0.21, 0, 0, 1) both;
+  --animate-flicker: flicker 1s ease-in-out infinite alternate-reverse;
+  --animate-bounce-left: bounceLeft 1s ease-in-out infinite alternate-reverse;
+  --animate-bounce-right: bounceRight 1s ease-in-out infinite alternate-reverse;
+  --animate-bounce-top: bounceTop 1s ease-in-out infinite alternate-reverse;
+  --animate-bounce-bottom: bounceBottom 1s ease-in-out infinite
+    alternate-reverse;
+  --animate-bounce-left-small: bounceLeftSmall 0.7s ease-in-out infinite;
+  --animate-rotate: rotate 10s linear infinite;
+  --animate-double-rays: doubleRays 3s cubic-bezier(0.7, 0, 0.3, 1) infinite
+    both;
+  --animate-double-rays-transform: doubleRaysTransform 3s
+    cubic-bezier(0.7, 0, 0.3, 1) infinite both;
+  --animate-double-rays-transform-diagonal: doubleRaysTransformDiagonal 3s
+    cubic-bezier(0.7, 0, 0.3, 1) infinite both;
+  --animate-double-rays-transform-vertical: doubleRaysTransformVertical 3s
+    cubic-bezier(0.7, 0, 0.3, 1) infinite both;
+  --animate-double-rays-transform-horizontal: doubleRaysTransformHorizontal 3s
+    cubic-bezier(0.7, 0, 0.3, 1) infinite both;
+  --animate-rays-tooltip: raysTooltip 1.2s cubic-bezier(0.33, 1, 0.68, 1) both;
+  --animate-slide-in-top-no-opacity: slideInTopNoOpacity 0.66s
+    cubic-bezier(0.33, 1, 0.68, 1) both;
+  --animate-infobanner-front: infobannerFront 8s cubic-bezier(0.3, 0, 0.3, 1)
+    infinite;
+  --animate-infobanner-back: infobannerBack 8s cubic-bezier(0.3, 0, 0.3, 1)
+    infinite;
+  --animate-notification-in: notificationIn 1s
+    linear(
+      0,
+      0.115 2.2%,
+      0.877 9.4%,
+      1.016 11.9%,
+      1.081 14.7%,
+      1.088 16%,
+      1.084 17.5%,
+      1.013 25.3%,
+      0.993 30.8%,
+      1.001 46.8%,
+      1
+    )
+    both;
+  --animate-jump-top: bounceJumpTop 6s infinite both;
+  --animate-state-explosion: stateExplosion 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)
+    forwards;
+  --animate-state-fire-in: stateFireIn 1s cubic-bezier(0.77, 0, 0.175, 1) both;
+  --animate-state-in-top: stateInTop 1s cubic-bezier(0.77, 0, 0.175, 1) both;
+  --animate-emote-animated: emoteAnimated 1.4s linear both infinite;
+  --animate-ai-perl-circle: ai-perl-circle 5s linear infinite;
+  --animate-ai-orb-rotate: ai-orb-rotate 20s linear infinite;
+  --animate-state-shake: stateShake 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)
+    both;
+  --animate-dropdown-in: dropdownIn 0.22s ease both;
+  --animate-xp-event-in-opacity: xpEventInOpacity 1.5s ease both;
+  --animate-xp-event-in-translate: xpEventInTranslate 1.5s
+    cubic-bezier(0, 0.4, 0, 1) both;
+  --animate-xp-event-in-scale: xpEventInScale 1s
+    linear(
+      0,
+      0.008 1.1%,
+      0.034 2.3%,
+      0.134 4.9%,
+      0.264 7.3%,
+      0.683 14.3%,
+      0.797 16.5%,
+      0.89 18.6%,
+      0.967 20.7%,
+      1.027 22.8%,
+      1.073 25%,
+      1.104 27.3%,
+      1.123 30.6%,
+      1.119 34.3%,
+      1.018 49.5%,
+      0.988 58.6%,
+      0.985 65.2%,
+      1 84.5%,
+      1
+    )
+    both;
+  --animate-cash-top: cashTop 1.6s cubic-bezier(0, 0, 0.2, 1) both;
+  --animate-cash-right: cashRight 1.6s cubic-bezier(0, 0, 0.2, 1) both;
+  --animate-letter-in-bottom: letterInBottom 0.75s
+    linear(
+      0,
+      0.002 0.4%,
+      0.008 0.9%,
+      0.019 1.4%,
+      0.035 1.9%,
+      0.054 2.4%,
+      0.082 3%,
+      0.108 3.5%,
+      0.144 4.1%,
+      0.21 5.1%,
+      0.292 6.2%,
+      0.613 10.2%,
+      0.749 12%,
+      0.813 12.9%,
+      0.865 13.7%,
+      0.92 14.6%,
+      0.964 15.4%,
+      1.009 16.3%,
+      1.044 17.1%,
+      1.076 17.9%,
+      1.106 18.8%,
+      1.128 19.6%,
+      1.149 20.5%,
+      1.164 21.4%,
+      1.176 22.3%,
+      1.184 23.4%,
+      1.187 24.6%,
+      1.183 25.9%,
+      1.175 27.2%,
+      1.163 28.4%,
+      1.145 29.8%,
+      1.054 36%,
+      1.032 37.7%,
+      1.014 39.2%,
+      0.997 41%,
+      0.984 42.8%,
+      0.974 44.6%,
+      0.968 46.5%,
+      0.965 48.9%,
+      0.967 51.7%,
+      0.973 54.4%,
+      0.997 63.5%,
+      1.002 66.8%,
+      1.006 70.2%,
+      1.006 75.6%,
+      1 90%,
+      1
+    )
+    both;
+  --animate-progressbar__highlight: progressbarHighlight 1s
+    cubic-bezier(0.22, 1, 0.36, 1) infinite both;
+  --animate-xp-reward-in-scale: xpRewardInScale 1s
+    linear(
+      0,
+      0.008 1.1%,
+      0.034 2.3%,
+      0.134 4.9%,
+      0.264 7.3%,
+      0.683 14.3%,
+      0.797 16.5%,
+      0.89 18.6%,
+      0.967 20.7%,
+      1.027 22.8%,
+      1.073 25%,
+      1.104 27.3%,
+      1.123 30.6%,
+      1.119 34.3%,
+      1.018 49.5%,
+      0.988 58.6%,
+      0.985 65.2%,
+      1 84.5%,
+      1
+    )
+    both;
+  --animate-xp-event-in-height: xpEventInHeight 1s
+    cubic-bezier(0, 0.993, 0.079, 0.996) both;
+  --animate-xp-event-in-left: xpEventInLeft 1s
+    linear(
+      0,
+      0.008 1.1%,
+      0.034 2.3%,
+      0.134 4.9%,
+      0.264 7.3%,
+      0.683 14.3%,
+      0.797 16.5%,
+      0.89 18.6%,
+      0.967 20.7%,
+      1.027 22.8%,
+      1.073 25%,
+      1.104 27.3%,
+      1.123 30.6%,
+      1.119 34.3%,
+      1.018 49.5%,
+      0.988 58.6%,
+      0.985 65.2%,
+      1 84.5%,
+      1
+    )
+    both;
+  --animate-xp-event-in-right: xpEventInRight 1s
+    linear(
+      0,
+      0.008 1.1%,
+      0.034 2.3%,
+      0.134 4.9%,
+      0.264 7.3%,
+      0.683 14.3%,
+      0.797 16.5%,
+      0.89 18.6%,
+      0.967 20.7%,
+      1.027 22.8%,
+      1.073 25%,
+      1.104 27.3%,
+      1.123 30.6%,
+      1.119 34.3%,
+      1.018 49.5%,
+      0.988 58.6%,
+      0.985 65.2%,
+      1 84.5%,
+      1
+    )
+    both;
+  --animate-loading-text-gradient: loadingTextGradient 1.5s ease infinite;
+  --animate-shake-bottom: shake-bottom 0.6s
+    cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
+  --animate-claim-diamond-rotate: claimDiamondRotate 1s
+    cubic-bezier(0, 0.4, 0, 1) both infinite;
+  --animate-claim-diamond-left: claimDiamondLeft 1s cubic-bezier(0, 0.4, 0, 1)
+    both infinite;
+  --animate-claim-diamond-right: claimDiamondRight 1s cubic-bezier(0, 0.4, 0, 1)
+    both infinite;
+  --animate-claim-radar: claimRadar 3s cubic-bezier(0, 0.4, 0, 1) both infinite;
+  --animate-radar: radar 2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  --animate-photobooth-in: photoboothIn 1s cubic-bezier(0, 0.4, 0, 1) both 0.5s;
+  --animate-photobooth-curtain: photoboothCurtain 1.5s ease both 2s;
+  --animate-photobooth-curtain-container: photoboothCurtainContainer 2s linear
+    both;
+  --animate-photobooth-flicker-in: photoboothFlickerIn 1.2s ease-out both 1.2s;
+  --animate-progressbar-dots: progressbarDots 1s linear infinite;
+  --animate-skeleton: skeleton 4s linear infinite;
+  --animate-translate-in-top: translateInTop 0.66s
+    linear(
+      0,
+      0.008 1.1%,
+      0.034 2.3%,
+      0.134 4.9%,
+      0.264 7.3%,
+      0.683 14.3%,
+      0.797 16.5%,
+      0.89 18.6%,
+      0.967 20.7%,
+      1.027 22.8%,
+      1.073 25%,
+      1.104 27.3%,
+      1.123 30.6%,
+      1.119 34.3%,
+      1.018 49.5%,
+      0.988 58.6%,
+      0.985 65.2%,
+      1 84.5%,
+      1
+    )
+    both;
+  --animate-swirl-in: swirlIn 0.66s
+    linear(
+      0,
+      0.402 7.4%,
+      0.711 15.3%,
+      0.929 23.7%,
+      1.008 28.2%,
+      1.067 33%,
+      1.099 36.9%,
+      1.12 41%,
+      1.13 45.4%,
+      1.13 50.1%,
+      1.111 58.5%,
+      1.019 83.2%,
+      1.004 91.3%,
+      1
+    )
+    both;
+  --animate-character-in: characterIn 0.4s
+    linear(
+      0,
+      0.345 8.4%,
+      0.616 17.2%,
+      0.819 26.6%,
+      0.894 31.5%,
+      0.955 36.7%,
+      0.995 41.3%,
+      1.024 46.2%,
+      1.043 51.4%,
+      1.052 57.1%,
+      1.049 66%,
+      1.008 88.4%,
+      1
+    )
+    both;
+  --animate-number-up: numberUp 0.05s ease both;
+  --animate-drop-in: dropIn 0.6s
+    linear(
+      0,
+      0.008 1.1%,
+      0.034 2.3%,
+      0.134 4.9%,
+      0.264 7.3%,
+      0.683 14.3%,
+      0.797 16.5%,
+      0.89 18.6%,
+      0.967 20.7%,
+      1.027 22.8%,
+      1.073 25%,
+      1.104 27.3%,
+      1.123 30.6%,
+      1.119 34.3%,
+      1.018 49.5%,
+      0.988 58.6%,
+      0.985 65.2%,
+      1 84.5%,
+      1
+    )
+    both;
+
+  --animate-circle-wipe-out: circleWipeOut 0.5s cubic-bezier(0.8, 0, 0.3, 1)
+    forwards;
+  --animate-rival-shake: rivalShake 3.2s cubic-bezier(0.455, 0.03, 0.515, 0.955)
+    both infinite 0.8s;
+  --animate-level-in: levelIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+  --animate-bg-pattern: bgPattern 20s linear infinite;
+  --animate-star-shine: starShine 4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
+  --animate-padlock-out: padlockOut 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  --animate-padlock-explosion: padlockExplosion 0.6s
+    cubic-bezier(0.377, 1.75, 0.465, 0.994) both;
+  --animate-letter-jump: letterJump 1s ease infinite both;
+  --animate-ui-in-top: uiInTop 0.7s cubic-bezier(0.22, 1, 0.342, 1.101) both;
+  --animate-ui-in-bottom: uiInBottom 0.7s cubic-bezier(0.22, 1, 0.342, 1.101)
+    both;
+  --animate-move-down: moveDown 70s linear infinite;
+  --animate-move-up: moveUp 70s linear infinite;
+  --animate-move-right: moveRight 70s linear infinite;
+  --animate-move-left: moveLeft 70s linear infinite;
+  --animate-modal-in: modalIn 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) both;
+  --animate-popover-in-top: popoverInTop 0.125s ease both;
+  --animate-popover-in-bottom: popoverInBottom 0.125s ease both;
+  --animate-flip-in: flipIn 1s cubic-bezier(0.77, 0, 0.175, 1) both;
+  --animate-ripple-out: rippleOut 1s cubic-bezier(0, 0, 0.2, 1) forwards;
+  --animate-success-in-top: successInTop 1s cubic-bezier(0.77, 0, 0.175, 1) both;
+  --animate-scale-out-big: scaleOutBig 0.5s cubic-bezier(0, 0.4, 0.8, 1.01) forwards;
+  --animate-tooltip-in-top: tooltip-in-top 0.2s ease-out;
+  --animate-tooltip-in-bottom: tooltip-in-bottom 0.2s ease-out;
+  --animate-tooltip-in-left: tooltip-in-left 0.2s ease-out;
+  --animate-tooltip-in-right: tooltip-in-right 0.2s ease-out;
+  --animate-shine: shine 10s cubic-bezier(0.7, 0, 0.3, 1) infinite;
+  --animate-stroke-animate: stroke-animate 1s cubic-bezier(0.075, 0.82, 0.165, 1) both;
+  --animate-chat-bubble-in: chat-bubble-in 0.2s cubic-bezier(0.77, 0, 0.175, 1) both;
+  --animate-aurora: aurora 60s linear infinite;
+
+@keyframes uiInBottom {
+    0% {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes uiInTop {
+    0% {
+      transform: translateY(-100%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  @keyframes letterJump {
+    0%,
+    10%,
+    100% {
+      transform: translateY(0);
+      animation-timing-function: ease-out;
+    }
+    5% {
+      transform: translateY(-20%);
+      animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+  }
+
+  @keyframes padlockExplosion {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+      box-shadow:
+        inset 0 0 0 1rem var(--color-yellow-50),
+        inset 0 0 0 4rem var(--color-yellow-20);
+    }
+    90% {
+      opacity: 1;
+      transform: scale(2);
+      box-shadow:
+        inset 0 0 0 0 var(--color-yellow-50),
+        inset 0 0 0 0 var(--color-yellow-20);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(2);
+      box-shadow:
+        inset 0 0 0 0 var(--color-yellow-50),
+        inset 0 0 0 0 var(--color-yellow-20);
+    }
+  }
+
+  @keyframes padlockOut {
+    0% {
+      transform: scale(1) rotate(0deg);
+      filter: brightness(100%);
+    }
+    75% {
+      transform: scale(1.25) rotate(6deg);
+      filter: brightness(120%);
+    }
+    100% {
+      transform: scale(0) rotate(24deg);
+      filter: brightness(100%);
+    }
+  }
+
+  @keyframes starShine {
+    0% {
+      transform: translate(-100%, -100%);
+      easing: cubic-bezier(0.22, 1, 0.36, 1);
+    }
+    66%,
+    100% {
+      transform: translate(100%, 100%);
+      easing: linear;
+    }
+  }
+
+  @keyframes bgPattern {
+    0% {
+      --pattern-size: 120px;
+      background-position:
+        0 0,
+        0 calc(var(--pattern-size) / 2),
+        calc(var(--pattern-size) / 2) calc(var(--pattern-size) / -2),
+        calc(var(--pattern-size) / -2) 0;
+    }
+    100% {
+      --pattern-size: 120px;
+      background-position:
+        var(--pattern-size) calc(var(--pattern-size) * -1),
+        var(--pattern-size) calc(var(--pattern-size) * -1),
+        calc(var(--pattern-size) * 1.5) calc(var(--pattern-size) * -1),
+        calc(var(--pattern-size) / 2) calc(var(--pattern-size) * -1);
+    }
+  }
+  @keyframes levelIn {
+    0% {
+      transform: translateY(0) scale(0);
+    }
+    100% {
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @keyframes rivalShake {
+    0%,
+    100% {
+      transform: rotate(-2deg);
+      transform-origin: 50% 100%;
+    }
+    2.5% {
+      transform: rotate(-0.5deg);
+    }
+    5%,
+    10%,
+    15% {
+      transform: rotate(-2deg);
+    }
+    7.5%,
+    12.5%,
+    17.5% {
+      transform: rotate(0deg);
+    }
+    20% {
+      transform: rotate(-1.5deg);
+    }
+    22.5%,
+    97.5% {
+      transform: rotate(-2deg);
+    }
+  }
+
+  @keyframes circleWipeOut {
+    0% {
+      --mask-radius: 0%;
+    }
+    100% {
+      --mask-radius: 100%;
+    }
+  }
+
+  @keyframes dropIn {
+    0% {
+      transform: translateY(-20%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes numberUp {
+    0% {
+      transform: translateY(40%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes characterIn {
+    0% {
+      transform: scale(0);
+      transform-origin: bottom;
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1);
+      transform-origin: bottom;
+      opacity: 1;
+    }
+  }
+
+  @keyframes swirlIn {
+    0% {
+      transform: rotate(-1turn) scale(0);
+      opacity: 0;
+    }
+    100% {
+      transform: rotate(0turn) scale(1);
+      opacity: 1;
+    }
+  }
+  @keyframes translateInTop {
+    0% {
+      transform: translateY(-25%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes skeleton {
+    0% {
+      background-position: -800px 0;
+    }
+    100% {
+      background-position: 800px 0;
+    }
+  }
+
+  @keyframes progressbarDots {
+    0% {
+      background-position: 0 0;
+    }
+    100% {
+      background-position: -0.5rem 0;
+    }
+  }
+
+  @keyframes photoboothFlickerIn {
+    0% {
+      opacity: 0;
+    }
+    3% {
+      opacity: 0.15;
+    }
+    4% {
+      opacity: 0;
+    }
+    8% {
+      opacity: 0.4;
+    }
+    9% {
+      opacity: 0.1;
+    }
+    10% {
+      opacity: 0;
+    }
+    15% {
+      opacity: 0.7;
+    }
+    16% {
+      opacity: 0.2;
+    }
+    17% {
+      opacity: 0.05;
+    }
+    22% {
+      opacity: 0.85;
+    }
+    23% {
+      opacity: 0.6;
+    }
+    24% {
+      opacity: 0.75;
+    }
+    25% {
+      opacity: 0.4;
+    }
+    30% {
+      opacity: 0.9;
+    }
+    32% {
+      opacity: 0.95;
+    }
+    35% {
+      opacity: 0.85;
+    }
+    38% {
+      opacity: 0.92;
+    }
+    45% {
+      opacity: 0.88;
+    }
+    55% {
+      opacity: 0.94;
+    }
+    65% {
+      opacity: 0.91;
+    }
+    75% {
+      opacity: 0.97;
+    }
+    85% {
+      opacity: 0.93;
+    }
+    90% {
+      opacity: 0.98;
+    }
+    95% {
+      opacity: 0.96;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes photoboothCurtainContainer {
+    0% {
+      transform: rotate(-2deg);
+      transform-origin: top;
+    }
+    100% {
+      transform: rotate(0deg);
+      transform-origin: top;
+    }
+  }
+
+  @keyframes photoboothCurtain {
+    0% {
+      transform: translateX(0) scaleX(1);
+    }
+    100% {
+      transform: translateX(-500%) scaleX(0.75);
+    }
+  }
+
+  @keyframes photoboothIn {
+    0% {
+      transform: translateY(50%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes radar {
+    0% {
+      transform: scale(0.9);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1.4);
+      opacity: 0;
+    }
+  }
+
+  @keyframes claimRadar {
+    0% {
+      transform: scale(0);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1.5);
+      opacity: 0;
+    }
+  }
+
+  @keyframes claimDiamondLeft {
+    0% {
+      transform: translateX(-20rem);
+    }
+    100% {
+      transform: translateX(-1rem);
+    }
+  }
+
+  @keyframes claimDiamondRight {
+    0% {
+      transform: translateX(20rem);
+    }
+    100% {
+      transform: translateX(1rem);
+    }
+  }
+
+  @keyframes claimDiamondRotate {
+    0% {
+      transform: rotate(-45deg);
+      opacity: 1;
+    }
+    100% {
+      transform: rotate(-45deg);
+      opacity: 0;
+    }
+  }
+
+  @keyframes shake-bottom {
+    0%,
+    100% {
+      transform: rotate(0deg);
+      transform-origin: 50% 100%;
+    }
+    10% {
+      transform: rotate(0.5deg);
+    }
+    20%,
+    40%,
+    60% {
+      transform: rotate(-1deg);
+    }
+    30%,
+    50%,
+    70% {
+      transform: rotate(1deg);
+    }
+    80% {
+      transform: rotate(-0.5deg);
+    }
+    90% {
+      transform: rotate(0.5deg);
+    }
+  }
+
+  @keyframes xpEventInLeft {
+    0% {
+      transform: translateX(-2rem);
+      opacity: 0;
+    }
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+  @keyframes xpEventInRight {
+    0% {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes loadingTextGradient {
+    0% {
+      background: linear-gradient(
+        to right,
+        var(--tw-gradient-from) 0%,
+        var(--tw-gradient-to) 12%,
+        var(--tw-gradient-from) 24%,
+        var(--tw-gradient-from) 100%
+      );
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-size: 300% auto;
+      background-position: -50%;
+    }
+    100% {
+      background: linear-gradient(
+        to right,
+        var(--tw-gradient-from) 0%,
+        var(--tw-gradient-to) 12%,
+        var(--tw-gradient-from) 24%,
+        var(--tw-gradient-from) 100%
+      );
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-size: 300% auto;
+      background-position: -200%;
+    }
+  }
+
+  @keyframes xpEventInHeight {
+    0% {
+      height: 0;
+    }
+    100% {
+      height: 1.75rem;
+    }
+  }
+
+  @keyframes xpRewardInScale {
+    0% {
+      transform: scale(0) rotate(15deg);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1) rotate(0deg);
+      rotate: 0deg;
+      opacity: 1;
+    }
+  }
+
+  @keyframes progressbarHighlight {
+    0% {
+      transform: translateX(-100%);
+      opacity: 0;
+    }
+    20% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    100% {
+      transform: translateX(0);
+      opacity: 0;
+    }
+  }
+
+  @keyframes letterInBottom {
+    0% {
+      opacity: 0;
+      transform: translateY(50%) scale(0.95) rotate(15deg);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0) scale(1) rotate(0deg);
+    }
+  }
+
+  @keyframes cashTop {
+    0% {
+      transform: translateY(0);
+      opacity: 0.75;
+    }
+    100% {
+      transform: translateY(-1.25rem);
+      opacity: 0;
+    }
+  }
+
+  @keyframes cashRight {
+    0% {
+      transform: translateX(0);
+      opacity: 0.75;
+    }
+    100% {
+      transform: translateX(3rem);
+      opacity: 0;
+    }
+  }
+
+  @keyframes xpEventInOpacity {
+    0%,
+    100% {
+      opacity: 0;
+    }
+    15%,
+    70% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes xpEventInScale {
+    0% {
+      transform: scale(1.2);
+      filter: blur(1rem);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1);
+      filter: blur(0rem);
+      opacity: 1;
+    }
+  }
+
+  @keyframes xpEventInTranslate {
+    0% {
+      transform: translateY(0);
+    }
+    100% {
+      transform: translateY(-100%);
+    }
+  }
+
+  @keyframes dropdownIn {
+    0% {
+      transform: scale(0.95);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  @keyframes stateShake {
+    0%,
+    100% {
+      transform: translateX(0);
+    }
+    10%,
+    30%,
+    50%,
+    70% {
+      transform: translateX(-5%);
+    }
+    20%,
+    40%,
+    60% {
+      transform: translateX(5%);
+    }
+    80% {
+      transform: translateX(4%);
+    }
+    90% {
+      transform: translateX(-4%);
+    }
+  }
+
+  @keyframes emoteAnimated {
+    0%,
+    100% {
+      transform: rotate(-3deg);
+    }
+    50% {
+      transform: rotate(3deg);
+    }
+  }
+
+  @keyframes stateExplosion {
+    0% {
+      transform: scale(0.8);
+      box-shadow: 
+        inset 0 0 0 2rem var(--color-brand-default),
+        0 0 0 0 var(--color-brand-default),
+        0 0 20px 0 var(--color-brand-default);
+      opacity: 1;
+      filter: brightness(200%);
+    }
+    50% {
+      transform: scale(1.5);
+      box-shadow: 
+        inset 0 0 0 0.5rem var(--color-brand-moderate),
+        0 0 15px 5px var(--color-brand-moderate),
+        0 0 30px 10px var(--color-brand-default);
+      opacity: 0.8;
+      filter: brightness(180%);
+    }
+    100% {
+      transform: scale(2.5);
+      box-shadow: 
+        inset 0 0 0 0 transparent,
+        0 0 0 0 transparent,
+        0 0 0 0 transparent;
+      opacity: 0;
+      filter: brightness(100%);
+    }
+  }
+
+  @keyframes stateFireIn {
+    0% {
+      opacity: 0;
+      transform: scale(1.5);
+      filter: brightness(500%) blur(3px);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+      filter: brightness(100%) blur(0px);
+    }
+  }
+
+  @keyframes stateInTop {
+    0% {
+      /* transform: scale(1.2) translateY(0); */
+      filter: blur(4px);
+      opacity: 0;
+    }
+    100% {
+      /* transform: scale(1) translateY(0);  */
+      filter: blur(0px);
+      opacity: 1;
+    }
+  }
+
+  @keyframes rippleOut {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(1.4);
+    }
+  }
+
+  @keyframes bounceJumpTop {
+    /* Initial throw upward */
+
+    0% {
+      transform: translateY(0%);
+      animation-timing-function: ease-out;
+    }
+    3% {
+      transform: translateY(-33%);
+      animation-timing-function: ease-in;
+    }
+
+    /* First bounce */
+    6% {
+      transform: translateY(0%);
+      animation-timing-function: ease-out;
+    }
+    8% {
+      transform: translateY(-20%);
+      animation-timing-function: ease-in;
+    }
+    10% {
+      transform: translateY(0%);
+      animation-timing-function: ease-out;
+    }
+
+    /* Second bounce */
+    11% {
+      transform: translateY(-12%);
+      animation-timing-function: ease-in;
+    }
+    12% {
+      transform: translateY(0%);
+      animation-timing-function: ease-out;
+    }
+
+    /* Third bounce */
+    12.5% {
+      transform: translateY(-7%);
+      animation-timing-function: ease-in;
+    }
+    13% {
+      transform: translateY(0%);
+      animation-timing-function: ease-out;
+    }
+
+    /* Fourth bounce */
+    13.3% {
+      transform: translateY(-3%);
+      animation-timing-function: ease-in;
+    }
+    13.6% {
+      transform: translateY(0%);
+      animation-timing-function: ease-out;
+    }
+
+    /* Fifth bounce */
+    13.8% {
+      transform: translateY(-2%);
+      animation-timing-function: ease-in;
+    }
+    14% {
+      transform: translateY(0%);
+    }
+
+    /* Extended rest period */
+    14%,
+    100% {
+      transform: translateY(0%);
+    }
+  }
+
+  @keyframes notificationIn {
+    0% {
+      transform: scale(0);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+  @keyframes infobannerFront {
+    0%,
+    15%,
+    85%,
+    100% {
+      transform-origin: 50% 0%;
+      opacity: 1;
+      filter: blur(0px);
+    }
+    25%,
+    75% {
+      opacity: 0;
+      filter: blur(4px);
+    }
+  }
+
+  @keyframes infobannerBack {
+    0%,
+    20%,
+    80%,
+    100% {
+      transform-origin: 50% 50%;
+      opacity: 0;
+      filter: blur(4px);
+      pointer-events: none;
+    }
+    30%,
+    70% {
+      transform-origin: 50% 50%;
+      opacity: 1;
+      filter: blur(0px);
+      pointer-events: auto;
+    }
+  }
+
+  @keyframes slideInTopNoOpacity {
+    0% {
+      transform: translateY(-1rem);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes raysTooltip {
+    0% {
+      background-position: 100%;
+      filter: brightness(2);
+      opacity: 1;
+    }
+    100% {
+      background-position: -20%;
+      filter: brightness(1);
+      opacity: 0;
+    }
+  }
+  @keyframes doubleRaysTransformDiagonal {
+    0% {
+      transform: translate(-100%, -100%);
+    }
+    100% {
+      transform: translate(100%, 100%);
+    }
+  }
+  @keyframes doubleRaysTransformHorizontal {
+    0% {
+      transform: translateX(100%);
+    }
+    100% {
+      transform: translateX(-100%);
+    }
+  }
+  @keyframes doubleRaysTransformVertical {
+    0% {
+      transform: translateY(-100%);
+    }
+    100% {
+      transform: translateY(100%);
+    }
+  }
+  @keyframes doubleRaysTransform {
+    0% {
+      transform: translateY(-100%);
+    }
+    100% {
+      transform: translateY(50%);
+    }
+  }
+  @keyframes doubleRays {
+    0% {
+      background-position: 160%;
+    }
+    100% {
+      background-position: -20%;
+    }
+  }
+
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes bounceLeft {
+    0%,
+    100% {
+      transform: translateX(-25%);
+      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+    }
+    50% {
+      transform: none;
+      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+  }
+
+  @keyframes bounceRight {
+    0%,
+    100% {
+      transform: translateX(25%);
+      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+    }
+    50% {
+      transform: none;
+      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+  }
+
+  @keyframes bounceTop {
+    0%,
+    100% {
+      transform: translateY(-25%);
+      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+    }
+    50% {
+      transform: none;
+      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+  }
+
+  @keyframes bounceBottom {
+    0%,
+    100% {
+      transform: translateY(25%);
+      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+    }
+    50% {
+      transform: none;
+      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+  }
+
+  @keyframes floatLG {
+    0% {
+      transform: translateY(10%);
+    }
+    100% {
+      transform: translateY(-12%);
+    }
+  }
+  @keyframes floatCoin {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-0.625rem);
+    }
+  }
+  @keyframes float {
+    0% {
+      transform: translateY(5%);
+    }
+    100% {
+      transform: translateY(-6%);
+    }
+  }
+
+  @keyframes flicker {
+    0% {
+      opacity: 1;
+    }
+    4% {
+      opacity: 0.9;
+    }
+    6% {
+      opacity: 0.85;
+    }
+    8% {
+      opacity: 0.75;
+    }
+    10% {
+      opacity: 0.8;
+    }
+    11% {
+      opacity: 0.86;
+    }
+    12% {
+      opacity: 0.85;
+    }
+    14% {
+      opacity: 0.95;
+    }
+    16% {
+      opacity: 0.98;
+    }
+    17% {
+      opacity: 0.9;
+    }
+    19% {
+      opacity: 0.93;
+    }
+    20% {
+      opacity: 0.99;
+    }
+    24% {
+      opacity: 1;
+    }
+    26% {
+      opacity: 0.84;
+    }
+    28% {
+      opacity: 0.88;
+    }
+    37% {
+      opacity: 0.83;
+    }
+    38% {
+      opacity: 0.79;
+    }
+    39% {
+      opacity: 0.75;
+    }
+    42% {
+      opacity: 1;
+    }
+    44% {
+      opacity: 0.8;
+    }
+    46% {
+      opacity: 0.94;
+    }
+    56% {
+      opacity: 0.8;
+    }
+    58% {
+      opacity: 0.8;
+    }
+    60% {
+      opacity: 0.89;
+    }
+    68% {
+      opacity: 1;
+    }
+    70% {
+      opacity: 0.9;
+    }
+    72% {
+      opacity: 0.95;
+    }
+    93% {
+      opacity: 0.93;
+    }
+    95% {
+      opacity: 0.985;
+    }
+    97% {
+      opacity: 0.93;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes sidemenBoxCompleted {
+    0% {
+      transform: scale(0.95);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+  @keyframes sidemenPattern {
+    0% {
+      mask-position: 0px 0px;
+    }
+    100% {
+      mask-position: 1100px -1100px;
+    }
+  }
+
+  @keyframes tooltipSlideDown {
+    0% {
+      transform: translate(0, -1rem);
+      opacity: 0;
+    }
+    100% {
+      transform: translate(0, 0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes tooltipSlideUp {
+    0% {
+      transform: translate(0, 1rem);
+      opacity: 0;
+    }
+    100% {
+      transform: translate(0, 0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes tooltipSlideRight {
+    0% {
+      transform: translateX(1rem);
+      opacity: 0;
+    }
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes tooltipSlideLeft {
+    0% {
+      transform: translateX(-1rem);
+      opacity: 0;
+    }
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+
+  @keyframes cashCenter {
+    0% {
+      position: absolute;
+      transform: scale(1);
+      opacity: 0.6;
+    }
+    100% {
+      position: absolute;
+      transform: scale(1.75);
+      opacity: 0;
+    }
+  }
+  @keyframes cashTop {
+    0% {
+      position: absolute;
+      transform: translateY(0);
+      opacity: 0.6;
+    }
+    100% {
+      position: absolute;
+      transform: translateY(-1.5rem);
+      opacity: 0;
+    }
+  }
+
+  @keyframes panelInLeft {
+    0% {
+      transform: translateX(-50%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes panelInRight {
+    0% {
+      transform: translateX(50%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+  @keyframes starToRight {
+    0% {
+      background-position: -550px -315px;
+    }
+    100% {
+      background-position: 550px 315px;
+    }
+  }
+
+  @keyframes menuItemGrowDown {
+    0% {
+      max-height: 0;
+      transform: translateY(-0.5rem);
+    }
+    100% {
+      max-height: 50rem;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes toastInOut {
+    0%,
+    100% {
+      opacity: 0;
+      transform: translateY(0);
+    }
+    10%,
+    90% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes dailychallengeMedalIn {
+    0% {
+      transform: translateY(0) scale(2);
+    }
+    90% {
+      transform: translateY(5.25rem) scale(1);
+    }
+    100% {
+      transform: translateY(5.25rem) scale(0);
+    }
+  }
+  @keyframes modalSlideIn {
+    0% {
+      transform: scale(0.95);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+  @keyframes modalSlideOut {
+    0% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+  @keyframes dailychallengeTopIn {
+    0% {
+      transform: translateY(-15%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+  @keyframes dailychallengeBottomIn {
+    0% {
+      transform: translateY(15%);
+    }
+    100% {
+      transform: translateY(0);
+    }
+  }
+  @keyframes dailychallengeProgressbarIn {
+    0% {
+      width: 0%;
+    }
+    100% {
+      width: 50%;
+    }
+  }
+
+  @keyframes dailychallengeDayIn {
+    0% {
+      opacity: 0;
+      transform: scale(1) translateY(50%);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+  @keyframes stripe {
+    0% {
+      background-position: 30px 0%;
+    }
+    100% {
+      background-position: 0px 0%;
+    }
+  }
+  @keyframes modalFadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes modalFadeOut {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes scaleIn {
+    0% {
+      transform: scale(1.25);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  @keyframes scaleOut {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(0.95);
+      opacity: 0;
+    }
+  }
+
+  @keyframes fadeOut {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes dropdownInTop {
+    0% {
+      transform-origin: center top;
+      transform: translateY(0rem) rotateX(-25deg);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0) rotateX(0deg);
+      opacity: 1;
+    }
+  }
+
+  @keyframes transitionContentIn {
+    0% {
+      transform: scale(0);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes swishInBottom {
+    0% {
+      filter: blur(2px);
+      transform: translateY(2rem) skewY(-3deg);
+      opacity: 0;
+    }
+    100% {
+      filter: blur(0px);
+      transform: translateY(0) skewY(0deg);
+      opacity: 1;
+    }
+  }
+
+  @keyframes swishInTop {
+    0% {
+      filter: blur(2px);
+      transform: translateY(-2rem) skewY(-3deg);
+      opacity: 0;
+    }
+    100% {
+      filter: blur(0px);
+      transform: translateY(0) skewY(0deg);
+      opacity: 1;
+    }
+  }
+
+  @keyframes swishInRight {
+    0% {
+      filter: blur(2px);
+      transform: translateX(2rem) skewX(-6deg);
+      opacity: 0;
+    }
+    100% {
+      filter: blur(0px);
+      transform: translateX(0) skewX(0deg);
+      opacity: 1;
+    }
+  }
+
+  @keyframes swishInLeft {
+    0% {
+      filter: blur(2px);
+      transform: translateX(-2rem) skewX(-6deg);
+      opacity: 0;
+    }
+    100% {
+      filter: blur(0px);
+      transform: translateX(0) skewX(0deg);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideInLongBottom {
+    0% {
+      transform: translateY(2.5rem);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideInLongTop {
+    0% {
+      transform: translateY(-2.5rem);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideInLongRight {
+    0% {
+      transform: translateX(2.5rem);
+      opacity: 0;
+    }
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+  @keyframes slideInLongLeft {
+    0% {
+      transform: translateX(-2.5rem);
+      opacity: 0;
+    }
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+  @keyframes slideInBottom {
+    0% {
+      transform: translateY(0.5rem);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideInTop {
+    0% {
+      transform: translateY(-0.5rem);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideInRight {
+    0% {
+      transform: translateX(0.5rem);
+      opacity: 0;
+    }
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+  @keyframes slideInLeft {
+    0% {
+      transform: translateX(-0.5rem);
+      opacity: 0;
+    }
+    100% {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes rays {
+    0% {
+      background-position: 160%;
+    }
+    85%,
+    100% {
+      background-position: 0%;
+    }
+  }
+
+  @keyframes kenburnsReverse {
+    0%,
+    100% {
+      transform: scale3d(1.2, 1.2, 1.2) translate3d(0, 0, 0);
+    }
+
+    15% {
+      transform: scale3d(1.2, 1.2, 1.2) translate3d(0, 0, 0);
+    }
+
+    70% {
+      transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+      animation-timing-function: ease-in;
+      opacity: 1;
+      filter: brightness(100%);
+    }
+  }
+
+  @keyframes kenburns {
+    0%,
+    100% {
+      transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+      opacity: 1;
+      filter: brightness(120%);
+    }
+
+    15% {
+      transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+      opacity: 1;
+      filter: brightness(100%);
+    }
+
+    70% {
+      transform: scale3d(1.3, 1.3, 1.3) translate3d(0, 0, 0);
+      animation-timing-function: ease-in;
+      opacity: 1;
+      filter: brightness(100%);
+    }
+  }
+
+  @keyframes scaleInXLeft {
+    0% {
+      transform: scaleX(0);
+      transform-origin: 0% 0%;
+    }
+    100% {
+      transform: scaleX(1);
+      transform-origin: 0% 0%;
+    }
+  }
+
+  @keyframes scaleOutXLeft {
+    0% {
+      transform: scaleX(1);
+      transform-origin: 0% 0%;
+    }
+    100% {
+      transform: scaleX(0);
+      transform-origin: 0% 0%;
+    }
+  }
+
+  @keyframes scaleInXRight {
+    0% {
+      transform: scaleX(0);
+      transform-origin: 100% 100%;
+    }
+    100% {
+      transform: scaleX(1);
+      transform-origin: 100% 100%;
+    }
+  }
+
+  @keyframes scaleOutXRight {
+    0% {
+      transform: scaleX(1);
+      transform-origin: 100% 100%;
+    }
+    100% {
+      transform: scaleX(0);
+      transform-origin: 100% 100%;
+    }
+  }
+
+  @keyframes titleInBottom {
+    0% {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes fireOut {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+      filter: brightness(100%);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(0.5);
+      filter: brightness(50%);
+    }
+  }
+
+  @keyframes fireIn {
+    0% {
+      opacity: 0;
+      transform: scale(1.25);
+      filter: brightness(500%);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+      filter: brightness(100%);
+    }
+  }
+
+  @keyframes explosion {
+    0% {
+      transform: scale(1);
+      box-shadow: inset 0 0 0 1.5rem rgba(255, 255, 0, 1);
+      filter: brightness(150%);
+    }
+    100% {
+      transform: scale(2);
+      box-shadow: inset 0 0 0 0 rgba(255, 255, 0, 0);
+      filter: brightness(100%);
+    }
+  }
+
+  @keyframes ai-perl-circle {
+    0% {
+      transform: rotate(90deg);
+      box-shadow:
+        0 6px 12px 0 var(--ai-perl-c1) inset,
+        0 12px 18px 0 var(--ai-perl-c2) inset,
+        0 36px 36px 0 var(--ai-perl-c3) inset,
+        0 0 3px 1.2px var(--ai-perl-glow-1),
+        0 0 6px 1.8px var(--ai-perl-glow-2);
+    }
+    50% {
+      transform: rotate(270deg);
+      box-shadow:
+        0 6px 12px 0 var(--ai-perl-c1-mid) inset,
+        0 12px 18px 0 var(--ai-perl-c2-mid) inset,
+        0 36px 36px 0 var(--ai-perl-c3-mid) inset,
+        0 0 3px 1.2px var(--ai-perl-glow-1),
+        0 0 6px 1.8px var(--ai-perl-glow-2);
+    }
+    100% {
+      transform: rotate(450deg);
+      box-shadow:
+        0 6px 12px 0 var(--ai-perl-c1) inset,
+        0 12px 18px 0 var(--ai-perl-c2) inset,
+        0 36px 36px 0 var(--ai-perl-c3) inset,
+        0 0 3px 1.2px var(--ai-perl-glow-1),
+        0 0 6px 1.8px var(--ai-perl-glow-2);
+    }
+  }
+
+  @keyframes ai-orb-rotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* Moved from theme.css */
+  @keyframes moveDown {
+      0% { transform: translateY(0%); }
+      100% { transform: translateY(100%); }
+    }
+
+  @keyframes moveUp {
+      0% { transform: translateY(0%); }
+      100% { transform: translateY(-100%); }
+    }
+
+  @keyframes moveRight {
+      0% { transform: translateX(0%); }
+      100% { transform: translateX(100%); }
+    }
+
+  @keyframes moveLeft {
+      0% { transform: translateX(0%); }
+      100% { transform: translateX(-100%); }
+    }
+
+  @keyframes modalIn {
+      0% { transform: scale(0.975); opacity: 0; }
+      100% { transform: scale(1); opacity: 1; }
+    }
+
+  @keyframes popoverInTop {
+      0% { transform: translateY(-0.125rem) scale(1); opacity: 0; }
+      100% { transform: translateY(0) scale(1); opacity: 1; }
+    }
+
+  @keyframes popoverInBottom {
+      0% { transform: translateY(0.125rem) scale(1); opacity: 0; }
+      100% { transform: translateY(0) scale(1); opacity: 1; }
+    }
+
+  @keyframes flipIn {
+      0% { opacity: 0; transform: translateZ(0) rotateY(-90deg) rotateX(0deg); }
+      100% { opacity: 1; transform: translateZ(0) rotateY(0deg) rotateX(0deg); }
+    }
+
+  @keyframes successInTop {
+      0% { transform: scale(1.1) translateY(0); filter: blur(4px); opacity: 0; }
+      100% { transform: scale(1) translateY(0); filter: blur(0px); opacity: 1; }
+    }
+
+  @keyframes scaleOutBig {
+      0% { pointer-events: none; opacity: 1; transform: scale(1); }
+      100% { pointer-events: none; opacity: 0; transform: scale(2); }
+    }
+
+  @keyframes tooltip-in-top {
+      0% { opacity: 0; transform: translateY(4px); }
+      100% { opacity: 1; transform: translateY(0); }
+    }
+
+  @keyframes tooltip-in-bottom {
+      0% { opacity: 0; transform: translateY(-4px); }
+      100% { opacity: 1; transform: translateY(0); }
+    }
+
+  @keyframes tooltip-in-left {
+      0% { opacity: 0; transform: translateX(4px); }
+      100% { opacity: 1; transform: translateX(0); }
+    }
+
+  @keyframes tooltip-in-right {
+      0% { opacity: 0; transform: translateX(-4px); }
+      100% { opacity: 1; transform: translateX(0); }
+    }
+
+  @keyframes fade-in {
+      0% { opacity: 0; }
+      100% { opacity: 1; }
+    }
+
+  @keyframes shine {
+      0% { background-size: 300% auto; background-position: 160%; }
+      75%, 100% { background-size: 300% auto; background-position: -30%; }
+    }
+
+  @keyframes stroke-animate {
+      0% { stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 1; }
+      100% { stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 39; opacity: 0.5; }
+    }
+
+  @keyframes loading-text-gradient {
+      0% {
+        background: linear-gradient(to right, var(--tw-gradient-from) 0%, var(--tw-gradient-to) 12%, var(--tw-gradient-from) 24%, var(--tw-gradient-from) 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-size: 300% auto;
+        background-position: -50%;
+      }
+      100% {
+        background: linear-gradient(to right, var(--tw-gradient-from) 0%, var(--tw-gradient-to) 12%, var(--tw-gradient-from) 24%, var(--tw-gradient-from) 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-size: 300% auto;
+        background-position: -200%;
+      }
+    }
+
+  @keyframes chat-bubble-in {
+      0% { transform: scale(0.8); opacity: 0; }
+      100% { transform: scale(1); opacity: 1; }
+    }
+
+  @keyframes aurora {
+      0% { background-position: 0% 50%, 0% 50%; }
+      50% { background-position: 100% 50%, 100% 50%; }
+      100% { background-position: 0% 50%, 0% 50%; }
+    }
+}
+
+.perspective {
+  perspective: 100px;
+}
+
+/* flip */
+.flip {
+  @apply relative
+  transition-transform
+  duration-[1.25s]
+  ease-[cubic-bezier(0.8,0,0.2,1)];
+  transform-style: preserve-3d;
+  /* backface-visibility: hidden; */
+
+  > * {
+    @apply absolute
+    w-full
+    h-full;
+    backface-visibility: hidden;
+  }
+
+  > .flip-front {
+    @apply z-20;
+  }
+  > .flip-back {
+    @apply z-10;
+    transform: translate3d(0, 0, 0) rotateY(180deg) rotateX(0deg);
+  }
+
+  &:not(.animate-flip) {
+    transform: translate3d(0, 0, 0) rotateY(0deg) rotateX(0deg);
+  }
+
+  &.animate-flip {
+    transform: translate3d(0, 0, 0) rotateY(180deg) rotateX(0deg);
+  }
+
+  &.animate-delay {
+    transition-delay: var(--delay, 0.3s) !important;
+  }
+}
+
+.flip.flip-vertical {
+  > .flip-back {
+    transform: translate3d(0, 0, 0) rotateX(180deg) rotateY(0deg);
+  }
+
+  &:not(.animate-flip) {
+    transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
+  }
+
+  &.animate-flip {
+    transform: translate3d(0, 0, 0) rotateX(180deg) rotateY(0deg);
+  }
+
+  &.animate-delay {
+    transition-delay: var(--delay, 0.3s) !important;
+  }
+}
+
+.rays {
+  @apply relative animate-rays bg-size-[300%_auto] bg-[linear-gradient(66deg,rgba(255,255,255,0)_40%,rgba(255,255,255,.3)_43%,rgba(255,255,255,0)_44%,rgba(255,255,255,.5)_50%,rgba(255,255,255,0)_55%,rgba(255,255,255,0)_70%,rgba(255,255,255,.4)_71%,rgba(255,255,255,.2)_77%,rgba(255,255,255,0)_78%)] bg-no-repeat;
+}
+
+.perspective {
+  perspective: 500px;
+}
+
+/* delay */
+.animate-delay {
+  animation-delay: var(--delay, 0.3s) !important;
+}
+.transition-delay {
+  transition-delay: var(--delay, 0.3s) !important;
+}
+
+@utility child-animate-delay {
+  --delay: 0s;
+  --momentum: 0.066s;
+  > * {
+    &:nth-child(1) {
+      animation-delay: calc(var(--delay, 0s) + 1 * var(--momentum, 0.05s));
+    }
+    &:nth-child(2) {
+      animation-delay: calc(var(--delay) + 2 * var(--momentum, 0.05s));
+    }
+    &:nth-child(3) {
+      animation-delay: calc(var(--delay, 0s) + 3 * var(--momentum, 0.05s));
+    }
+    &:nth-child(4) {
+      animation-delay: calc(var(--delay, 0s) + 4 * var(--momentum, 0.05s));
+    }
+    &:nth-child(5) {
+      animation-delay: calc(var(--delay, 0s) + 5 * var(--momentum, 0.05s));
+    }
+    &:nth-child(6) {
+      animation-delay: calc(var(--delay, 0s) + 6 * var(--momentum, 0.05s));
+    }
+    &:nth-child(7) {
+      animation-delay: calc(var(--delay, 0s) + 7 * var(--momentum, 0.05s));
+    }
+    &:nth-child(8) {
+      animation-delay: calc(var(--delay, 0s) + 8 * var(--momentum, 0.05s));
+    }
+    &:nth-child(9) {
+      animation-delay: calc(var(--delay, 0s) + 9 * var(--momentum, 0.05s));
+    }
+    &:nth-child(10) {
+      animation-delay: calc(var(--delay, 0s) + 10 * var(--momentum, 0.05s));
+    }
+    &:nth-child(11) {
+      animation-delay: calc(var(--delay, 0s) + 11 * var(--momentum, 0.05s));
+    }
+    &:nth-child(12) {
+      animation-delay: calc(var(--delay, 0s) + 12 * var(--momentum, 0.05s));
+    }
+    &:nth-child(13) {
+      animation-delay: calc(var(--delay, 0s) + 13 * var(--momentum, 0.05s));
+    }
+    &:nth-child(14) {
+      animation-delay: calc(var(--delay, 0s) + 14 * var(--momentum, 0.05s));
+    }
+    &:nth-child(15) {
+      animation-delay: calc(var(--delay, 0s) + 15 * var(--momentum, 0.05s));
+    }
+    &:nth-child(16) {
+      animation-delay: calc(var(--delay, 0s) + 16 * var(--momentum, 0.05s));
+    }
+    &:nth-child(17) {
+      animation-delay: calc(var(--delay, 0s) + 17 * var(--momentum, 0.05s));
+    }
+    &:nth-child(18) {
+      animation-delay: calc(var(--delay, 0s) + 18 * var(--momentum, 0.05s));
+    }
+    &:nth-child(19) {
+      animation-delay: calc(var(--delay, 0s) + 19 * var(--momentum, 0.05s));
+    }
+    &:nth-child(20) {
+      animation-delay: calc(var(--delay, 0s) + 20 * var(--momentum, 0.05s));
+    }
+    &:nth-child(21) {
+      animation-delay: calc(var(--delay, 0s) + 21 * var(--momentum, 0.05s));
+    }
+    &:nth-child(22) {
+      animation-delay: calc(var(--delay, 0s) + 22 * var(--momentum, 0.05s));
+    }
+    &:nth-child(23) {
+      animation-delay: calc(var(--delay, 0s) + 23 * var(--momentum, 0.05s));
+    }
+    &:nth-child(24) {
+      animation-delay: calc(var(--delay, 0s) + 24 * var(--momentum, 0.05s));
+    }
+    &:nth-child(25) {
+      animation-delay: calc(var(--delay, 0s) + 25 * var(--momentum, 0.05s));
+    }
+    &:nth-child(26) {
+      animation-delay: calc(var(--delay, 0s) + 26 * var(--momentum, 0.05s));
+    }
+    &:nth-child(27) {
+      animation-delay: calc(var(--delay, 0s) + 27 * var(--momentum, 0.05s));
+    }
+    &:nth-child(28) {
+      animation-delay: calc(var(--delay, 0s) + 28 * var(--momentum, 0.05s));
+    }
+    &:nth-child(29) {
+      animation-delay: calc(var(--delay, 0s) + 29 * var(--momentum, 0.05s));
+    }
+    &:nth-child(30) {
+      animation-delay: calc(var(--delay, 0s) + 30 * var(--momentum, 0.05s));
+    }
+  }
+}
+
+@utility child-transition-delay {
+  --delay: 0s;
+  --momentum: 0.066s;
+  > * {
+    &:nth-child(1) {
+      transition-delay: calc(var(--delay, 0s) + 1 * var(--momentum, 0.05s));
+    }
+    &:nth-child(2) {
+      transition-delay: calc(var(--delay, 0s) + 2 * var(--momentum, 0.05s));
+    }
+    &:nth-child(3) {
+      transition-delay: calc(var(--delay, 0s) + 3 * var(--momentum, 0.05s));
+    }
+    &:nth-child(4) {
+      transition-delay: calc(var(--delay, 0s) + 4 * var(--momentum, 0.05s));
+    }
+    &:nth-child(5) {
+      transition-delay: calc(var(--delay, 0s) + 5 * var(--momentum, 0.05s));
+    }
+    &:nth-child(6) {
+      transition-delay: calc(var(--delay, 0s) + 6 * var(--momentum, 0.05s));
+    }
+    &:nth-child(7) {
+      transition-delay: calc(var(--delay, 0s) + 7 * var(--momentum, 0.05s));
+    }
+    &:nth-child(8) {
+      transition-delay: calc(var(--delay, 0s) + 8 * var(--momentum, 0.05s));
+    }
+    &:nth-child(9) {
+      transition-delay: calc(var(--delay, 0s) + 9 * var(--momentum, 0.05s));
+    }
+    &:nth-child(10) {
+      transition-delay: calc(var(--delay, 0s) + 10 * var(--momentum, 0.05s));
+    }
+    &:nth-child(11) {
+      transition-delay: calc(var(--delay, 0s) + 11 * var(--momentum, 0.05s));
+    }
+    &:nth-child(12) {
+      transition-delay: calc(var(--delay, 0s) + 12 * var(--momentum, 0.05s));
+    }
+    &:nth-child(13) {
+      transition-delay: calc(var(--delay, 0s) + 13 * var(--momentum, 0.05s));
+    }
+    &:nth-child(14) {
+      transition-delay: calc(var(--delay, 0s) + 14 * var(--momentum, 0.05s));
+    }
+    &:nth-child(15) {
+      transition-delay: calc(var(--delay, 0s) + 15 * var(--momentum, 0.05s));
+    }
+    &:nth-child(16) {
+      transition-delay: calc(var(--delay, 0s) + 16 * var(--momentum, 0.05s));
+    }
+    &:nth-child(17) {
+      transition-delay: calc(var(--delay, 0s) + 17 * var(--momentum, 0.05s));
+    }
+    &:nth-child(18) {
+      transition-delay: calc(var(--delay, 0s) + 18 * var(--momentum, 0.05s));
+    }
+    &:nth-child(19) {
+      transition-delay: calc(var(--delay, 0s) + 19 * var(--momentum, 0.05s));
+    }
+    &:nth-child(20) {
+      transition-delay: calc(var(--delay, 0s) + 20 * var(--momentum, 0.05s));
+    }
+    &:nth-child(21) {
+      transition-delay: calc(var(--delay, 0s) + 21 * var(--momentum, 0.05s));
+    }
+    &:nth-child(22) {
+      transition-delay: calc(var(--delay, 0s) + 22 * var(--momentum, 0.05s));
+    }
+    &:nth-child(23) {
+      transition-delay: calc(var(--delay, 0s) + 23 * var(--momentum, 0.05s));
+    }
+    &:nth-child(24) {
+      transition-delay: calc(var(--delay, 0s) + 24 * var(--momentum, 0.05s));
+    }
+    &:nth-child(25) {
+      transition-delay: calc(var(--delay, 0s) + 25 * var(--momentum, 0.05s));
+    }
+    &:nth-child(26) {
+      transition-delay: calc(var(--delay, 0s) + 26 * var(--momentum, 0.05s));
+    }
+    &:nth-child(27) {
+      transition-delay: calc(var(--delay, 0s) + 27 * var(--momentum, 0.05s));
+    }
+    &:nth-child(28) {
+      transition-delay: calc(var(--delay, 0s) + 28 * var(--momentum, 0.05s));
+    }
+    &:nth-child(29) {
+      transition-delay: calc(var(--delay, 0s) + 29 * var(--momentum, 0.05s));
+    }
+    &:nth-child(30) {
+      transition-delay: calc(var(--delay, 0s) + 30 * var(--momentum, 0.05s));
+    }
+  }
+}
+
+.infobanner {
+  @apply relative;
+  > .infobanner-front {
+    @apply relative
+    z-0;
+  }
+  > .infobanner-back {
+    @apply absolute
+    /* z-0 */
+    inset-0
+    w-full
+    hidden
+    items-center
+    select-none
+    /* pointer-events-none */;
+    > * {
+      @apply opacity-0;
+    }
+  }
+
+  &.infobanner--active {
+    > .infobanner-front {
+      @apply animate-infobanner-front;
+    }
+    > .infobanner-back {
+      @apply flex
+      items-center
+      justify-center;
+      > * {
+        @apply animate-infobanner-back;
+      }
+    }
+  }
+}