/* GEN-DESIGN-009.R5E.S2B — Temporal Celestial Field
   S1-C remains the only active celestial backdrop authority. Temporal motion is
   compositor-only: the selected procedural field moves, breathes and modulates
   internally without adding DOM nodes, Canvas surfaces, RAF loops or semantics. */

.field-stage {
  --r5es2-focus-rgb: 82, 157, 194;
  --r5es2-focus-haze: 0;
  --r5es2-focus-star-gain: 0;
  --r5es2-focus-intensity: 0;
  background: #04101a;
}

.field-celestial {
  position: absolute;
  inset: -4%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  background: #04101a;
}

.field-celestial__procedural,
.field-celestial__focus-haze {
  position: absolute;
  pointer-events: none;
}

.field-celestial__procedural {
  inset: -3.5%;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  background-color: #06131f;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  transform: translate3d(0, 0, 0) scale(1.05);
  transform-origin: 50% 48%;
  filter:
    saturate(calc(1.04 + var(--r5es2-focus-star-gain) * .18))
    contrast(calc(1.025 + var(--r5es2-focus-star-gain) * .08))
    brightness(calc(.98 + var(--r5es2-focus-star-gain) * .10));
  opacity: 0;
  transition: opacity 420ms ease, filter 1100ms ease;
  animation: r5es2-celestial-drift 76s cubic-bezier(.45, .04, .55, .96) infinite alternate;
  will-change: transform;
}

/* Temporal emission field. It modulates the raster already selected by S1-C;
   it is not an independent sky authority and adds no DOM node or JS loop. */
.field-celestial__procedural::before,
.field-celestial__procedural::after {
  content: "";
  position: absolute;
  inset: -16%;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.field-celestial__procedural::before {
  z-index: 1;
  opacity: .34;
  background:
    radial-gradient(ellipse 34% 28% at 18% 32%, rgba(74, 189, 226, .18) 0%, rgba(40, 139, 186, .08) 32%, transparent 68%),
    radial-gradient(ellipse 30% 36% at 48% 71%, rgba(92, 204, 230, .13) 0%, rgba(47, 135, 181, .055) 36%, transparent 70%),
    radial-gradient(ellipse 36% 26% at 76% 27%, rgba(65, 173, 217, .15) 0%, rgba(35, 112, 161, .06) 38%, transparent 72%),
    radial-gradient(ellipse 25% 30% at 88% 67%, rgba(103, 196, 218, .10) 0%, rgba(47, 121, 156, .045) 38%, transparent 72%);
  mix-blend-mode: screen;
  filter: blur(24px) saturate(.88);
  animation: r5es2-temporal-emission 31s ease-in-out infinite alternate;
}

/* Temporal absorption field. Counter-motion against emission makes cloud
   boundaries appear to deform instead of reading as a wallpaper translation. */
.field-celestial__procedural::after {
  z-index: 2;
  opacity: .28;
  background:
    radial-gradient(ellipse 34% 22% at 29% 54%, rgba(0, 7, 14, .56) 0%, rgba(1, 9, 17, .23) 34%, transparent 70%),
    radial-gradient(ellipse 30% 28% at 62% 34%, rgba(1, 8, 15, .45) 0%, rgba(2, 10, 18, .19) 38%, transparent 72%),
    radial-gradient(ellipse 28% 20% at 73% 76%, rgba(0, 6, 12, .42) 0%, rgba(1, 9, 16, .16) 39%, transparent 72%);
  mix-blend-mode: multiply;
  filter: blur(30px);
  animation: r5es2-temporal-absorption 43s ease-in-out infinite alternate;
}

.field-stage[data-r5es2-state="ready"] .field-celestial__procedural {
  opacity: 1;
}

/* Capability response remains the only capability-local DOM atmosphere above
   the selected field. It is independent from the autonomous temporal motion. */
.field-celestial__focus-haze {
  inset: -4%;
  z-index: 1;
  opacity: calc(var(--r5es2-focus-haze) * var(--r5es2-focus-intensity) * .72);
  background:
    radial-gradient(
      ellipse at var(--r5e-focus-x, 50%) var(--r5e-focus-y, 50%),
      rgba(var(--r5es2-focus-rgb), .44) 0%,
      rgba(var(--r5es2-focus-rgb), .18) 15%,
      rgba(var(--r5es2-focus-rgb), .055) 34%,
      transparent 61%
    );
  filter: blur(46px) saturate(.86);
  transition: opacity 980ms ease, background 980ms ease;
}

/* Black is neutral under screen; R5D.4's S2A bridge resets the retained
   Canvas to black where its old environment blit used to occur. */
#genesis-field {
  z-index: 1;
  mix-blend-mode: screen;
  filter: brightness(1.02) contrast(1.015);
}

.field-vignette {
  z-index: 2;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(55, 121, 154, .028), transparent 34%),
    radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(2, 7, 12, .08) 84%, rgba(1, 5, 9, .18) 100%);
}

/* Macro parallax: visible over 5–10 seconds but still slower than semantic
   interaction. The non-linear path prevents a simple sliding-wallpaper read. */
@keyframes r5es2-celestial-drift {
  0% {
    transform: translate3d(-1.10%, -.55%, 0) scale(1.050) rotate(-.08deg);
  }
  28% {
    transform: translate3d(-.25%, .18%, 0) scale(1.060) rotate(.035deg);
  }
  63% {
    transform: translate3d(.70%, -.14%, 0) scale(1.069) rotate(.10deg);
  }
  100% {
    transform: translate3d(1.18%, .62%, 0) scale(1.058) rotate(-.025deg);
  }
}

/* Mesoscale light flow: asymmetric translation + scale + rotation changes the
   apparent energy inside cloud bodies without moving semantic coordinates. */
@keyframes r5es2-temporal-emission {
  0% {
    transform: translate3d(-2.2%, -1.3%, 0) scale(1.02) rotate(-1.1deg);
    opacity: .24;
  }
  36% {
    transform: translate3d(1.1%, -.2%, 0) scale(1.07) rotate(.45deg);
    opacity: .38;
  }
  72% {
    transform: translate3d(-.4%, 1.7%, 0) scale(1.04) rotate(1.15deg);
    opacity: .30;
  }
  100% {
    transform: translate3d(2.0%, .6%, 0) scale(1.09) rotate(-.3deg);
    opacity: .42;
  }
}

/* Counter-flowing dark lanes create the perception of slow gas deformation. */
@keyframes r5es2-temporal-absorption {
  0% {
    transform: translate3d(1.8%, -1.0%, 0) scale(1.04) rotate(.7deg);
    opacity: .22;
  }
  31% {
    transform: translate3d(-.7%, .9%, 0) scale(1.09) rotate(-.55deg);
    opacity: .31;
  }
  67% {
    transform: translate3d(1.0%, 1.5%, 0) scale(1.055) rotate(-1.0deg);
    opacity: .25;
  }
  100% {
    transform: translate3d(-1.9%, -.1%, 0) scale(1.10) rotate(.25deg);
    opacity: .34;
  }
}

@media (max-width: 760px) {
  .field-celestial {
    inset: -3%;
  }

  .field-celestial__procedural {
    inset: -5%;
    transform: translate3d(0, 0, 0) scale(1.055);
    filter:
      saturate(calc(1.015 + var(--r5es2-focus-star-gain) * .12))
      contrast(calc(1.02 + var(--r5es2-focus-star-gain) * .06))
      brightness(calc(.96 + var(--r5es2-focus-star-gain) * .08));
  }

  .field-celestial__procedural::before {
    opacity: .26;
    filter: blur(21px) saturate(.86);
  }

  .field-celestial__procedural::after {
    opacity: .22;
    filter: blur(26px);
  }

  .field-celestial__focus-haze {
    opacity: calc(var(--r5es2-focus-haze) * var(--r5es2-focus-intensity) * .52);
    filter: blur(38px) saturate(.82);
  }
}

@media (prefers-reduced-motion: reduce) {
  .field-celestial__procedural,
  .field-celestial__procedural::before,
  .field-celestial__procedural::after {
    animation: none !important;
  }

  .field-celestial__procedural {
    transform: scale(1.05);
  }

  .field-celestial__procedural::before {
    transform: none;
    opacity: .26;
  }

  .field-celestial__procedural::after {
    transform: none;
    opacity: .22;
  }

  .field-celestial__focus-haze {
    transition: none;
  }
}