/* =========================
   animations.css — Io First Light
   Breathing / awakening system
   ========================= */

/* =========================
   GLOBAL SOFT MOTION CORE
   ========================= */

:root {
  --breath-slow: 12s;
  --breath-medium: 7s;
  --breath-fast: 3.5s;
}

/* =========================
   WORLD BREATH (BACKGROUND)
   ========================= */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 210, 170, 0.08),
    transparent 60%
  );
  opacity: 0.4;
  animation: worldBreath var(--breath-slow) ease-in-out infinite;
  filter: blur(80px);
}

@keyframes worldBreath {
  0% {
    transform: scale(1);
    opacity: 0.25;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.45;
  }
  100% {
    transform: scale(1);
    opacity: 0.25;
  }
}

/* =========================
   LIGHT PULSE CORE
   ========================= */

.light-core {
  animation: corePulse var(--breath-medium) ease-in-out infinite;
}

@keyframes corePulse {
  0% {
    transform: scale(0.95);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.75;
  }
  100% {
    transform: scale(0.95);
    opacity: 0.4;
  }
}

/* =========================
   RING BREATH
   ========================= */

.pulse-ring {
  animation: ringBreath var(--breath-slow) ease-in-out infinite;
}

@keyframes ringBreath {
  0% {
    transform: scale(0.98);
    opacity: 0.2;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.5;
  }
  100% {
    transform: scale(0.98);
    opacity: 0.2;
  }
}

/* =========================
   TRACK REVEAL TIMING
   ========================= */

.track-item {
  opacity: 0;
  transform: translateY(10px);
  animation: trackAppear 900ms ease forwards;
}

.track-item:nth-child(1) { animation-delay: 100ms; }
.track-item:nth-child(2) { animation-delay: 200ms; }
.track-item:nth-child(3) { animation-delay: 300ms; }
.track-item:nth-child(4) { animation-delay: 400ms; }
.track-item:nth-child(5) { animation-delay: 500ms; }
.track-item:nth-child(6) { animation-delay: 600ms; }
.track-item:nth-child(7) { animation-delay: 700ms; }
.track-item:nth-child(8) { animation-delay: 800ms; }
.track-item:nth-child(9) { animation-delay: 900ms; }
.track-item:nth-child(10) { animation-delay: 1000ms; }

@keyframes trackAppear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   META SLOW REVEAL
   ========================= */

.meta {
  transform: translateY(20px);
  opacity: 0;
  transition: all 1400ms ease;
}

.meta.revealed {
  transform: translateY(0);
  opacity: 0.9;
}

/* =========================
   MIRROR FLOAT DRIFT
   ========================= */

.mirror-word {
  animation: drift 20s ease-in-out infinite;
}

.mirror-word:nth-child(odd) {
  animation-duration: 24s;
}

.mirror-word:nth-child(even) {
  animation-duration: 18s;
}

@keyframes drift {
  0% {
    transform: translateY(0px) rotate(-2deg);
    opacity: 0.06;
  }
  50% {
    transform: translateY(-30px) rotate(2deg);
    opacity: 0.12;
  }
  100% {
    transform: translateY(0px) rotate(-2deg);
    opacity: 0.06;
  }
}

/* =========================
   STATE TRANSITIONS (WORLD SHIFT)
   ========================= */

body {
  transition: background 1800ms ease, filter 1800ms ease;
}

.state-night .bg-gradient {
  filter: brightness(0.6) saturate(0.8);
}

.state-deep-night .bg-gradient {
  filter: brightness(0.4) saturate(0.6);
}

.state-pre-dawn .bg-gradient {
  filter: brightness(0.8) saturate(0.9);
}

.state-dawn .bg-gradient {
  filter: brightness(1.1) saturate(1.1);
}

.state-morning .bg-gradient {
  filter: brightness(1.3) saturate(1.2);
}

/* =========================
   PLAYER LIVING STATE
   ========================= */

.player {
  animation: playerBreath 10s ease-in-out infinite;
}

@keyframes playerBreath {
  0% {
    box-shadow: 0 0 0 rgba(255, 200, 160, 0);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 200, 160, 0.08);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 200, 160, 0);
  }
}

/* =========================
   FINAL GLOW STATE
   ========================= */

.myth-layer {
  animation: mythFadeIn 1600ms ease forwards;
}

@keyframes mythFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(20px);
  }
}