/* Tiny Tomato Games — HERO ATMOSPHERE
   Volumetric god-rays, drifting aurora fields, a glow pool beneath the mark and
   a parallaxed depth-dust layer. Purely decorative, motion-safe, sits BEHIND
   all hero content (z-index 0). Injected by hero-atmos.js. */

.hero-atmos { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-atmos > * { position: absolute; pointer-events: none; }

/* ---- drifting aurora: two big soft colour fields ---- */
.atmos-aurora { inset: -25%; will-change: transform; }
.atmos-aurora b {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(64px); mix-blend-mode: screen; opacity: 0.55;
}
.atmos-aurora b.a1 {
  width: 58vw; height: 58vw; left: 6%; top: -8%;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 46%, transparent), transparent 64%);
}
.atmos-aurora b.a2 {
  width: 50vw; height: 50vw; right: 2%; top: 6%;
  background: radial-gradient(circle, color-mix(in oklab, #ff7a36 40%, transparent), transparent 64%);
}
.atmos-aurora b.a3 {
  width: 44vw; height: 44vw; left: 30%; top: 30%;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 30%, transparent), transparent 66%);
}

/* ---- volumetric god-rays radiating from behind the mark ---- */
.atmos-rays {
  left: 50%; top: 4%; width: 165vh; height: 165vh; transform: translateX(-50%);
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    transparent 0deg,
    color-mix(in oklab, var(--accent) 26%, transparent) 1.1deg,
    transparent 2.6deg,
    transparent 7deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0%, #000 10%, transparent 50%);
          mask: radial-gradient(circle at 50% 50%, #000 0%, #000 10%, transparent 50%);
  mix-blend-mode: screen; opacity: 0; filter: blur(2px);
}
.atmos-rays.two {
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    transparent 0deg,
    color-mix(in oklab, #ffd49a 18%, transparent) 0.7deg,
    transparent 1.7deg,
    transparent 9deg);
}

/* ---- glow pool / floor bloom beneath the mark ---- */
.atmos-floor {
  left: 50%; top: 55%; width: 540px; height: 160px; transform: translateX(-50%) scale(1);
  background: radial-gradient(ellipse at 50% 50%, color-mix(in oklab, var(--accent) 52%, transparent), transparent 70%);
  filter: blur(16px); opacity: 0; mix-blend-mode: screen;
}

/* ---- fine depth dust (parallaxed) ---- */
.atmos-dust { inset: 0; will-change: transform; }
.atmos-dust i {
  position: absolute; border-radius: 50%; background: var(--text); opacity: 0;
  box-shadow: 0 0 6px color-mix(in oklab, var(--text) 55%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  html.hero-cinematic .hero-atmos > * { transition: opacity 1.2s ease; }

  /* rays bloom in once the hero plays, then slowly counter-rotate + breathe */
  html.hero-cinematic.play .atmos-rays  { opacity: 0.5;  animation: atmos-spin 78s linear infinite, atmos-breathe 9s ease-in-out infinite; }
  html.hero-cinematic.play .atmos-rays.two { opacity: 0.34; animation: atmos-spin-rev 104s linear infinite, atmos-breathe 12s ease-in-out infinite; }
  html.hero-cinematic.assembled .atmos-floor { opacity: 0.5; animation: atmos-pool 7s ease-in-out infinite; }

  .atmos-aurora b.a1 { animation: aur-drift-1 24s ease-in-out infinite alternate; }
  .atmos-aurora b.a2 { animation: aur-drift-2 30s ease-in-out infinite alternate; }
  .atmos-aurora b.a3 { animation: aur-drift-3 27s ease-in-out infinite alternate; }
  .atmos-dust i { animation: atmos-twinkle var(--tdur, 6s) ease-in-out var(--tdel, 0s) infinite; }

  @keyframes atmos-spin     { to { transform: translateX(-50%) rotate(360deg); } }
  @keyframes atmos-spin-rev { to { transform: translateX(-50%) rotate(-360deg); } }
  @keyframes atmos-breathe  { 0%, 100% { filter: blur(2px); } 50% { filter: blur(4.5px); } }
  @keyframes atmos-pool     { 0%, 100% { opacity: 0.42; transform: translateX(-50%) scale(1); } 50% { opacity: 0.62; transform: translateX(-50%) scale(1.08); } }
  @keyframes aur-drift-1 { from { transform: translate(0, 0); } to { transform: translate(6%, 5%); } }
  @keyframes aur-drift-2 { from { transform: translate(0, 0); } to { transform: translate(-7%, 4%); } }
  @keyframes aur-drift-3 { from { transform: translate(0, 0); } to { transform: translate(4%, -6%); } }
  @keyframes atmos-twinkle { 0%, 100% { opacity: 0; } 50% { opacity: var(--tmax, 0.3); } }
}

/* reduced motion / hard-skip: keep a calm static bloom, no rays */
html.hero-cinematic.hero-skip .atmos-rays { opacity: 0.32 !important; animation: none !important; }
html.hero-cinematic.hero-skip .atmos-floor { opacity: 0.4 !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .atmos-rays, .atmos-rays.two { opacity: 0.28; }
  .atmos-floor { opacity: 0.4; }
}