:root {

  --runtime-glow:
    rgba(255,255,255,.04);

  --runtime-danger:
    transparent;

  --signal-speed:
    2.4s;

  --runtime-compression:
    1;

}

/* ========================================
   GLOBAL ORGANISM
======================================== */

body {

  transition:
    background .8s ease,
    color .8s ease;

  overflow-x:hidden;

}

/* ========================================
   SYNCHRONIZATION SURGE
======================================== */

body[data-sync="SYNCHRONIZED"] {

  background:
    radial-gradient(
      circle at top,
      var(--runtime-glow),
      #05070b 52%
    );

}

/* ========================================
   CREATOR INSTABILITY
======================================== */

body[data-creator-climate="ESCALATING"]::before {

  content:"";

  position:fixed;
  inset:0;

  pointer-events:none;

  background:
    radial-gradient(
      circle at center,
      var(--runtime-danger),
      transparent 62%
    );

  animation:
    runtimePulse
    var(--weather-pulse-speed)
    infinite alternate;

  opacity:.55;

  z-index:0;

}

/* ========================================
   PRESSURE COMPRESSION
======================================== */

body[data-pressure="SYNCHRONIZED"]
.arena-runtime {

  transform:
    scale(var(--runtime-compression));

  transform-origin:
    top center;

  transition:
    transform .6s ease;

}

/* ========================================
   SYNCHRONIZATION FLASH
======================================== */

body.mutation-sync {

  animation:
    synchronizationFlash
    1.8s ease;

}

@keyframes synchronizationFlash {

  0% {

    filter:
      brightness(1);

  }

  50% {

    filter:
      brightness(1.18);

  }

  100% {

    filter:
      brightness(1);

  }

}

/* ========================================
   FRAGMENTATION EVENT
======================================== */

body.mutation-fragment {

  animation:
    fragmentationShake
    .4s ease
    4;

}

@keyframes fragmentationShake {

  0% {

    transform:
      translateX(0px);

  }

  25% {

    transform:
      translateX(-2px);

  }

  50% {

    transform:
      translateX(2px);

  }

  100% {

    transform:
      translateX(0px);

  }

}

/* ========================================
   RECOVERY EVENT
======================================== */

body.mutation-recovery {

  animation:
    recoveryGlow
    3s ease;

}

@keyframes recoveryGlow {

  0% {

    filter:
      saturate(.82);

  }

  50% {

    filter:
      saturate(1.25);

  }

  100% {

    filter:
      saturate(1);

  }

}

/* ========================================
   DRIFT EVENT
======================================== */

body.mutation-drift {

  animation:
    driftFade
    4s ease;

}

@keyframes driftFade {

  0% {

    opacity:1;

  }

  50% {

    opacity:.82;

  }

  100% {

    opacity:1;

  }

}

/* ========================================
   RUNTIME PULSE
======================================== */

@keyframes runtimePulse {

  from {

    opacity:.18;

  }

  to {

    opacity:.72;

  }

}

/* ========================================
   EMOTIONAL PRESSURE PHYSICS
======================================== */

body {

  letter-spacing:
    calc(
      (
        var(--pressure-density)
        / 100
      ) * -.025em
    );

  transition:
    letter-spacing .6s ease,
    filter .8s ease,
    background .8s ease;

}

/* ========================================
   CONVERGENCE SATURATION
======================================== */

body[data-sync="SYNCHRONIZED"] {

  filter:
    saturate(
      calc(
        1 +
        (
          var(--sync-intensity)
          / 400
        )
      )
    );

}

/* ========================================
   PRESSURE VELOCITY
======================================== */

.live-feed-item,
.intervention-card,
.signal-node {

  transition:
    transform .5s ease,
    opacity .5s ease;

}

body[data-pressure="COMPRESSED"]
.live-feed-item {

  transform:
    scale(.985);

  opacity:.92;

}

/* ========================================
   ATMOSPHERIC BREATHING
======================================== */

body::after {

  content:"";

  position:fixed;
  inset:0;

  pointer-events:none;

  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,.015),
      transparent 70%
    );

  animation:
    atmosphericBreathing
    calc(
      12s -
      (
        var(--convergence-velocity)
        * .05s
      )
    )
    infinite ease-in-out;

  z-index:0;

}

@keyframes atmosphericBreathing {

  0% {

    opacity:.12;
    transform:scale(1);

  }

  50% {

    opacity:.28;
    transform:scale(1.04);

  }

  100% {

    opacity:.12;
    transform:scale(1);

  }

}

/* ========================================
   EUPHORIC WEATHER
======================================== */

body[data-weather-mood="EUPHORIC"] {

  filter:
    saturate(var(--weather-saturation));

}

/* ========================================
   UNSTABLE WEATHER
======================================== */

body[data-weather-mood="UNSTABLE"] {

  filter:
    saturate(var(--weather-saturation))
    contrast(1.05);

}

/* ========================================
   HEALING WEATHER
======================================== */

body[data-weather-mood="HEALING"] {

  filter:
    saturate(1);

}

/* ========================================
   DENSE PRESENCE
======================================== */

body[data-presence-density="DENSE"] {

  --runtime-compression:
    .96;

}

/* ========================================
   ACTIVE MIGRATION
======================================== */

body[data-presence-migration="ACTIVE"]::after {

  content:"";

  position:fixed;

  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(217,255,102,.05),
      transparent
    );

  animation:
    migrationFlow 7s linear infinite;

  z-index:0;

}
@keyframes migrationFlow {

  from {

    transform:
      translateX(-20%);

  }

  to {

    transform:
      translateX(20%);

  }

}

/* ========================================
   SYNCHRONIZATION PHASE MUTATIONS
======================================== */

body[data-sync-phase="observer"] {

  --ritualGlow:
    rgba(255,255,255,0.03);

  --syncPulse:
    0.25;

  --signalIntensity:
    0.35;

}

body[data-sync-phase="participant"] {

  --ritualGlow:
    rgba(0,180,255,0.08);

  --syncPulse:
    0.45;

  --signalIntensity:
    0.52;

}

body[data-sync-phase="wallet_ready"] {

  --ritualGlow:
    rgba(0,255,200,0.14);

  --syncPulse:
    0.72;

  --signalIntensity:
    0.74;

}

body[data-sync-phase="synchronized"] {

  --ritualGlow:
    rgba(0,255,200,0.22);

  --syncPulse:
    1;

  --signalIntensity:
    1;

}

/* ========================================
   SYNCHRONIZATION OVERLAY
======================================== */

.sync-overlay {

  position: fixed;

  inset: 0;

  z-index: 99999;

  display: flex;

  align-items: center;

  justify-content: center;

}

.sync-overlay-backdrop {

  position: absolute;

  inset: 0;

  background:
    rgba(0,0,0,0.72);

  backdrop-filter:
    blur(18px);

}

.sync-overlay-panel {

  position: relative;

  width: min(92vw, 460px);

  padding: 42px 32px;

  border-radius: 28px;

  background:
    linear-gradient(
      180deg,
      rgba(18,18,24,0.96),
      rgba(6,6,10,0.98)
    );

  border:
    1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 0 80px rgba(0,255,200,0.12);

  z-index: 2;

}

.sync-overlay-label {

  display: block;

  margin-bottom: 14px;

  font-size: 10px;

  letter-spacing: .42em;

  color:
    rgba(0,255,200,0.72);

}

.sync-overlay-title {

  font-size: 32px;

  line-height: 1.05;

  margin-bottom: 18px;

}

.sync-overlay-description {

  font-size: 15px;

  line-height: 1.7;

  color:
    rgba(255,255,255,0.72);

  margin-bottom: 28px;

}

.sync-overlay-action {

  width: 100%;

  padding: 16px;

  border-radius: 16px;

  border: none;

  cursor: pointer;

  background:
    rgba(0,255,200,0.14);

  color: white;

  font-weight: 600;

  margin-bottom: 12px;

}

.sync-overlay-close {

  width: 100%;

  padding: 14px;

  border-radius: 14px;

  border:
    1px solid rgba(255,255,255,0.08);

  background: transparent;

  color:
    rgba(255,255,255,0.58);

  cursor: pointer;

}

/* ========================================
   TXT RITUAL SURGE
======================================== */

body.txt-ritual-pulse {

  animation:
    civilizationPulse 2.4s ease;

}

@keyframes civilizationPulse {

  0% {

    filter:
      brightness(1);

  }

  30% {

    filter:
      brightness(1.08);

  }

  60% {

    filter:
      brightness(1.03);

  }

  100% {

    filter:
      brightness(1);

  }

}

/* ========================================
   CIVILIZATION RESONANCE
======================================== */

body.civilization-resonance {

  animation:
    civilizationResonance 3.2s ease;

}

@keyframes civilizationResonance {

  0% {

    filter:
      brightness(1);

  }

  25% {

    filter:
      brightness(1.12);

  }

  50% {

    filter:
      brightness(1.04);

  }

  100% {

    filter:
      brightness(1);

  }

}


/* ========================================
   TXT CONTINUITY ACTIVATION
======================================== */

body.txt-channel-active {

  animation:
    continuityActivation 4.2s ease;

}

@keyframes continuityActivation {

  0% {

    filter:
      saturate(1)
      brightness(1);

  }

  30% {

    filter:
      saturate(1.35)
      brightness(1.12);

  }

  60% {

    filter:
      saturate(1.12)
      brightness(1.04);

  }

  100% {

    filter:
      saturate(1)
      brightness(1);

  }

}