/* ── atmosphere.css ── Mechanical port of the DOM/SVG-preset slice of
 * WorldMaker Studio's fx.css (src/renderer/styles/fx.css) needed by
 * atmosphere.js: aurora, gradient, beams (SVG stop colours), spotlight,
 * ripple. The three canvas presets (blobs/snow/fireflies/embers/stars/
 * particles/vortex) draw everything themselves and need no CSS here.
 *
 * Scoping: every keyframe-driven rule the source scoped under its own
 * singleton #anim-bg-wrap / #rpbg-wrap is scoped here under `.atmos-wrap`
 * (a class, reused per mounted instance) so two mounted atmospheres never
 * collide.
 *
 * Reduced-motion: handled entirely in atmosphere.js — mount() no-ops (and
 * tears down / re-mounts live on change) when
 * `prefers-reduced-motion: reduce` matches, so the motion-bearing DOM below
 * (aurora sweep, gradient blobs, spotlight drift, ripple, beam SMIL) only
 * ever exists when JS decided motion is allowed. This file intentionally
 * leaves every animation/keyframe UNGUARDED — there is no
 * `@media (prefers-reduced-motion: reduce)` block here, to stay consistent
 * with the JS-side gate rather than duplicate it.
 */

/* ── Token fallbacks — declared per host via .atmos-host, per task brief.
 * LegendFiction's only accent is #9B885B (155,136,91); the beam trio stays
 * in the same antique-gold family instead of the source's fixed
 * Aceternity cyan/indigo/violet (which would clash with the LF palette). */
.atmos-host {
  --lift-rgb: 255, 255, 255;
  --shadow-rgb: 0, 0, 0;
  --accent-rgb: 155, 136, 91;
  --beam-c-1: #cbb37a; /* leading edge — pale gold  */
  --beam-c-2: #9b885b; /* mid          — LF accent  */
  --beam-c-3: #6e5e39; /* trailing     — deep bronze */
  /* Aurora's blur filter needs a value; source relied on a v1 global token
   * this repo doesn't define. Not one of the 5 required tokens, but
   * required for aurora to render at all. */
  --blur: 40px;
}

/* ── Wrap base (JS also sets these inline for the canvas/DOM-mount path;
 * kept here as a CSS-level fallback and for the ripple path, which does
 * NOT set them inline — see atmosphere.js). */
.atmos-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════════════
 * Aurora atmosphere — CSS-only monochromatic stripe sweep
 * ════════════════════════════════════════════════════════════════════════ */
@keyframes anim-bg-aurora-sweep {
  from { background-position: 50% 50%, 50% 50%; }
  to   { background-position: 350% 50%, 350% 50%; }
}

.atmos-wrap .anim-aurora-layer,
.atmos-wrap .anim-aurora-sweep,
.atmos-wrap .anim-aurora-veil {
  position: absolute;
  inset: 0;
}

.atmos-wrap .anim-aurora-layer {
  background-image:
    repeating-linear-gradient(100deg, rgba(var(--lift-rgb),1) 0%, rgba(var(--lift-rgb),1) 7%, transparent 10%, transparent 12%, rgba(var(--lift-rgb),1) 16%),
    repeating-linear-gradient(100deg, rgba(var(--lift-rgb),0.13) 10%, rgba(var(--lift-rgb),0.53) 15%, rgba(var(--lift-rgb),0.20) 20%, rgba(var(--lift-rgb),0.40) 25%, rgba(var(--lift-rgb),0.13) 30%);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;
  filter: blur(var(--blur)) invert(100%);
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
  mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
  opacity: 0.55;
}

.atmos-wrap .anim-aurora-sweep {
  background-image:
    repeating-linear-gradient(100deg, rgba(var(--lift-rgb),1) 0%, rgba(var(--lift-rgb),1) 7%, transparent 10%, transparent 12%, rgba(var(--lift-rgb),1) 16%),
    repeating-linear-gradient(100deg, rgba(var(--lift-rgb),0.13) 10%, rgba(var(--lift-rgb),0.53) 15%, rgba(var(--lift-rgb),0.20) 20%, rgba(var(--lift-rgb),0.40) 25%, rgba(var(--lift-rgb),0.13) 30%);
  background-size: 200%, 100%;
  animation: anim-bg-aurora-sweep 180s linear infinite;
  mix-blend-mode: difference;
}

.atmos-wrap .anim-aurora-veil {
  background: rgba(var(--shadow-rgb), 0.60);
}

/* ════════════════════════════════════════════════════════════════════════
 * Gradient blob atmosphere — CSS-only drifting coloured radial blobs
 * (Aceternity UI Background Gradient Animation)
 * ════════════════════════════════════════════════════════════════════════ */
@keyframes anim-bg-move-v {
  0%   { transform: translateY(-50%); }
  50%  { transform: translateY(50%); }
  100% { transform: translateY(-50%); }
}
@keyframes anim-bg-move-h {
  0%   { transform: translateX(-50%) translateY(-10%); }
  50%  { transform: translateX(50%)  translateY(10%); }
  100% { transform: translateX(-50%) translateY(-10%); }
}
@keyframes anim-bg-move-circle {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

.atmos-wrap .anim-gradient-inner {
  position: absolute;
  inset: -50%;
  filter: none;
  pointer-events: none;
}

.atmos-wrap .anim-gradient-blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: hard-light;
}

.atmos-wrap .anim-gradient-blob:nth-child(1) {
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  background: radial-gradient(circle at center, rgba(var(--accent-rgb), 0.9) 0%, transparent 60%);
  animation: anim-bg-move-v 60s ease infinite;
}
.atmos-wrap .anim-gradient-blob:nth-child(2) {
  width: 55%;
  height: 55%;
  top: 22%;
  left: 22%;
  background: radial-gradient(circle at center, rgba(var(--lift-rgb), 0.7) 0%, transparent 60%);
  transform-origin: calc(50% - 300px) center;
  animation: anim-bg-move-circle 50s reverse infinite;
}
.atmos-wrap .anim-gradient-blob:nth-child(3) {
  width: 65%;
  height: 65%;
  top: 17%;
  left: 17%;
  background: radial-gradient(circle at center, rgba(var(--accent-rgb), 0.55) 0%, transparent 60%);
  transform-origin: calc(50% + 300px) center;
  animation: anim-bg-move-circle 80s linear infinite;
}
.atmos-wrap .anim-gradient-blob:nth-child(4) {
  width: 70%;
  height: 70%;
  top: 15%;
  left: 15%;
  background: radial-gradient(circle at center, rgba(var(--lift-rgb), 0.5) 0%, transparent 60%);
  transform-origin: calc(50% - 200px) calc(50% + 150px);
  animation: anim-bg-move-h 70s ease infinite;
}
.atmos-wrap .anim-gradient-blob:nth-child(5) {
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;
  background: radial-gradient(circle at center, rgba(var(--accent-rgb), 0.65) 0%, transparent 60%);
  transform-origin: calc(50% - 600px) calc(50% + 200px);
  animation: anim-bg-move-circle 55s ease infinite;
}

/* ════════════════════════════════════════════════════════════════════════
 * Beams atmosphere colour tokens — SVG <stop class="beam-stop-N"> children
 * inherit --beam-c-1/2/3 from the nearest .atmos-host ancestor.
 * ════════════════════════════════════════════════════════════════════════ */
.atmos-wrap .beam-stop-0 { stop-color: var(--beam-c-1); stop-opacity: 0; }
.atmos-wrap .beam-stop-1 { stop-color: var(--beam-c-1); stop-opacity: 1; }
.atmos-wrap .beam-stop-2 { stop-color: var(--beam-c-2); stop-opacity: 1; }
.atmos-wrap .beam-stop-3 { stop-color: var(--beam-c-3); stop-opacity: 0; }

/* ════════════════════════════════════════════════════════════════════════
 * Spotlight atmosphere — slow-pulsing, floating cone of light
 * ════════════════════════════════════════════════════════════════════════ */
@keyframes anim-spotlight-drift {
  0%   { opacity: 0.65; transform: translateY(0px); }
  50%  { opacity: 1;    transform: translateY(-14px); }
  100% { opacity: 0.65; transform: translateY(0px); }
}

.atmos-wrap .anim-spotlight-el {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 75% 65% at 18% -2%,
    rgba(var(--lift-rgb), 0.28) 0%,
    rgba(var(--lift-rgb), 0.07) 48%,
    transparent 72%
  );
  animation: anim-spotlight-drift 7s ease-in-out infinite;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════
 * Ripple grid atmosphere (rpbg-) — own fade mechanic via .atmos-ripple /
 * .rpbg-visible, distinct from the generic wrap opacity+mask system above
 * (see atmosphere.js: the ripple branch does not set inline opacity/mask).
 * ════════════════════════════════════════════════════════════════════════ */
.atmos-wrap.atmos-ripple {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.atmos-wrap.atmos-ripple.rpbg-visible {
  opacity: 1;
  pointer-events: auto;
}

.atmos-wrap .rpbg-grid {
  display: grid;
  width: 100%;
  height: 100%;
}

.atmos-wrap .rpbg-cell {
  border-right: 1px solid rgba(var(--lift-rgb), 0.04);
  border-bottom: 1px solid rgba(var(--lift-rgb), 0.04);
  background: transparent;
  cursor: default;
}

.atmos-wrap .rpbg-cell--lit {
  animation: rpbg-cell-ripple var(--rpbg-dur, 2200ms) ease forwards;
  animation-delay: var(--rpbg-delay, 0ms);
}

@keyframes rpbg-cell-ripple {
  0%   { background: transparent; }
  25%  { background: rgba(var(--lift-rgb), 0.025); }
  100% { background: transparent; }
}