.ambient-motion-layer {
  position: fixed;
  z-index: 12;
  inset: -14vh 0 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.ambient-motion-particle {
  position: absolute;
  top: -8vh;
  left: var(--particle-x);
  width: var(--particle-size);
  height: var(--particle-size);
  border-radius: 50%;
  background: var(--particle-color);
  box-shadow: 0 0 calc(var(--particle-size) * 2.6) var(--particle-color);
  opacity: var(--particle-opacity);
  animation:
    ambientParticleFall var(--particle-duration) linear var(--particle-delay) infinite,
    ambientParticleGlow var(--particle-twinkle) ease-in-out var(--particle-twinkle-delay) infinite;
  will-change: transform, opacity;
}

body[data-ambient-theme="hub"] .ambient-motion-layer {
  opacity: .72;
}

body[data-ambient-theme="hub"] .ambient-motion-particle:nth-child(3n) {
  border-radius: 2px;
  transform: rotate(45deg);
}

body[data-ambient-theme="kingshot"] .ambient-motion-layer {
  opacity: .92;
}

body[data-ambient-theme="kingshot"] .ambient-motion-particle {
  border-radius: 45% 55% 48% 52%;
  box-shadow:
    0 0 calc(var(--particle-size) * 2.8) var(--particle-color),
    0 0 calc(var(--particle-size) * 6) rgba(237, 139, 48, .22);
}

body[data-ambient-theme="kingshot"] .ambient-motion-particle:nth-child(4n) {
  border-radius: 1px;
  clip-path: polygon(50% 0, 64% 36%, 100% 50%, 64% 64%, 50% 100%, 36% 64%, 0 50%, 36% 36%);
}

body[data-ambient-theme="hub"] .hub-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -35%;
  bottom: -35%;
  left: -55%;
  width: 38%;
  pointer-events: none;
  opacity: .42;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(94, 226, 255, .2), rgba(154, 100, 255, .12), transparent);
  filter: blur(18px);
  animation: ambientHeroSweep 11s ease-in-out infinite;
}

body[data-ambient-theme="hub"] .hub-game-visual::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -45% auto -45% -45%;
  width: 24%;
  pointer-events: none;
  opacity: .48;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--game-accent) 32%, transparent), transparent);
  filter: blur(9px);
  animation: ambientCardSweep 8.5s ease-in-out infinite;
}

body[data-ambient-theme="hub"] .hub-game-card:nth-child(2n) .hub-game-visual::after {
  animation-delay: -3.4s;
}

body[data-ambient-theme="kingshot"] .ks-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -35% -25%;
  pointer-events: none;
  opacity: .36;
  background:
    radial-gradient(ellipse at 22% 38%, rgba(255, 188, 81, .38), transparent 34%),
    radial-gradient(ellipse at 76% 28%, rgba(231, 93, 24, .22), transparent 30%);
  filter: blur(28px);
  animation: ambientKingshotAurora 9s ease-in-out infinite alternate;
}

body[data-ambient-theme="kingshot"] .ks-hero-copy,
body[data-ambient-theme="kingshot"] .ks-app-icon {
  z-index: 3;
}

body[data-ambient-theme="kingshot"] .ks-hero-grid {
  animation: ambientGridDrift 24s linear infinite;
}

body[data-ambient-theme="kingshot"] .ks-button-primary {
  animation: ambientCtaGlow 3.8s ease-in-out infinite;
}

.ambient-motion-layer.is-paused .ambient-motion-particle {
  animation-play-state: paused;
}

@keyframes ambientParticleFall {
  from { transform: translate3d(0, -8vh, 0) rotate(0deg); }
  to { transform: translate3d(var(--particle-drift), 124vh, 0) rotate(var(--particle-spin)); }
}

@keyframes ambientParticleGlow {
  0%, 100% { opacity: .2; }
  50% { opacity: var(--particle-opacity); }
}

@keyframes ambientHeroSweep {
  0%, 15% { transform: translateX(0) skewX(-18deg); }
  72%, 100% { transform: translateX(430%) skewX(-18deg); }
}

@keyframes ambientCardSweep {
  0%, 18% { transform: translateX(0) skewX(-20deg); }
  62%, 100% { transform: translateX(690%) skewX(-20deg); }
}

@keyframes ambientKingshotAurora {
  to { transform: translate3d(7%, 5%, 0) scale(1.08) rotate(3deg); opacity: .58; }
}

@keyframes ambientGridDrift {
  to { background-position: 64px 64px; }
}

@keyframes ambientCtaGlow {
  50% { box-shadow: 0 16px 46px rgba(239, 140, 42, .42), 0 0 26px rgba(255, 204, 111, .16); }
}

@media (max-width: 780px) {
  .ambient-motion-layer { opacity: .58 !important; }
  .ambient-motion-particle:nth-child(n+19) { display: none; }
  body[data-ambient-theme="hub"] .hub-hero::after { opacity: .25; }
  body[data-ambient-theme="hub"] .hub-game-visual::after { opacity: .34; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-motion-layer { display: none; }
  body[data-ambient-theme="hub"] .hub-hero::after,
  body[data-ambient-theme="hub"] .hub-game-visual::after,
  body[data-ambient-theme="kingshot"] .ks-hero::before,
  body[data-ambient-theme="kingshot"] .ks-hero-grid,
  body[data-ambient-theme="kingshot"] .ks-button-primary {
    animation: none !important;
  }
}