/* Slow colour motion, no flashing. */
.page-progress { height: 2px; background: var(--spectrum); background-size: 300%; position: fixed; top: 0; left: 0; width: 100%; transform: scaleX(0); transform-origin: left; z-index: 90; }
.rgb-frame::after, .rgb-divider > div, .page-progress { animation: spectrum-flow 9s linear infinite; }
.rgb-dot { animation: chroma 10s linear infinite; }
.hero { animation: ambient-rim 12s linear infinite; }
.hero-media img { animation: cinematic-drift 18s ease-in-out infinite alternate; }
.hero-media img.scene-enter { animation: scene-in .75s ease-out, cinematic-drift 18s .75s ease-in-out infinite alternate; }
.game-card:hover .cover::after { animation: foil-sweep .7s ease-out; }
.game-card.is-selected .cover { animation: selected-glow 8s linear infinite; }
.reaction-symbol { animation: turn 20s linear infinite; }
.emote-display > img { animation: float 6s ease-in-out infinite; }
.emote-display > img.pop { animation: pop .4s ease-out, float 6s .4s ease-in-out infinite; }
.flying-emote { animation: emote-rise 1.8s ease-out forwards; }
.motion-ready .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.motion-ready .reveal.is-visible { opacity: 1; transform: none; }
[data-palette=ice] { --spectrum: linear-gradient(110deg, #ffffff, #00e5ff, #4455ff, #00e5ff, #ffffff); }
[data-palette=ember] { --spectrum: linear-gradient(110deg, #ffdd88, #ff8034, #ff34b3, #ff8034, #ffdd88); }
.effects-off *, .effects-off *::before, .effects-off *::after { animation: none !important; scroll-behavior: auto !important; }
.effects-off #ambient-canvas, .effects-off .flying-emote { display: none; }
.effects-off .reveal { opacity: 1; transform: none; }
.effects-off .cover { transform: none; }
@keyframes spectrum-flow { 0% { background-position: 0% 50%; } 100% { background-position: 150% 50%; } }
@keyframes chroma { to { filter: hue-rotate(360deg); } }
@keyframes ambient-rim { 0%, 100% { box-shadow: 0 6px 28px #00e5ff14; } 33% { box-shadow: 0 6px 28px #8854ff20; } 66% { box-shadow: 0 6px 28px #ff34b319; } }
@keyframes cinematic-drift { from { transform: scale(1); } to { transform: scale(1.065) translateX(-1%); } }
@keyframes scene-in { from { opacity: .1; transform: scale(1.035); filter: blur(8px); } to { opacity: .88; transform: scale(1); filter: blur(0); } }
@keyframes foil-sweep { to { transform: translateX(150%); } }
@keyframes selected-glow { 0%, 100% { box-shadow: 0 2px 0 #00e5ff, 0 5px 18px #00e5ff22; } 33% { box-shadow: 0 2px 0 #bb44ff, 0 5px 18px #bb44ff22; } 66% { box-shadow: 0 2px 0 #ff348d, 0 5px 18px #ff348d22; } }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes float { 50% { transform: translateY(-6px); } }
@keyframes emote-chroma { 0% { filter: hue-rotate(100deg); transform: translateY(0); } 50% { transform: translateY(-6px); } 100% { filter: hue-rotate(460deg); transform: translateY(0); } }
@keyframes pop { 0% { transform: scale(.8) rotate(-5deg); opacity: .3; } 70% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }
@keyframes emote-rise { 0% { transform: translateY(0) rotate(-12deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--drift), -80vh) rotate(30deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-ready .reveal { opacity: 1; transform: none; }
  .cover { transform: none; }
  #ambient-canvas, .flying-emote { display: none; }
}