/* =========================================================
   CHROMATIC.CSS
   DragonflysRealm.live — Chromatic Governance Layer

   Authority:
   - Artistic Euphoria Ascendant Crown
   - Dragonfly Chromatic Concordance (Governance Mode)
   - MWM Arche Structure (Copilot Instantiation)

   Purpose:
   This file encodes chromatic and light behavior as LAW.
   ========================================================= */
/* =========================================================
   1. ROOT — COSMIC BASE (Beyond Black)
   ---------------------------------------------------------
   The field in which all others exist.
   Never flat black. Never empty.
   ========================================================= */

/* ==========================================================
   CHROMATIC GOVERNANCE — SINGLE ROOT
========================================================== */

:root {
  /* ======================
     COSMIC BASE
  ====================== */
  --cosmic-black-base: #050508;
  --cosmic-black-depth: #0b0c14;

  /* ======================
     VESSEL / ATMOSPHERE
  ====================== */
  --vessel-nebula-blue: #1c243d;
  --vessel-cosmic-indigo: #2a3558;
  --vessel-aurora-teal: #2e5f66;
  --vessel-cosmic-pink: #6a3f5f;

  --vessel-gradient-atmosphere: linear-gradient(
    180deg,
    var(--vessel-nebula-blue) 0%,
    var(--vessel-cosmic-indigo) 45%,
    var(--vessel-cosmic-pink) 75%,
    var(--cosmic-black-base) 100%
  );

  /* subtle void overlay to add depth without brightness */
  --cosmic-black-void: radial-gradient(
    circle at 50% 10%,
    rgba(6,8,12,0.72) 0%,
    rgba(6,8,12,0.0) 45%
  );

  /* ======================
     FOREGROUND TEXT CLARITY ✅
  ====================== */
  --text-primary: rgba(245, 247, 255, 0.92);
  --text-secondary: rgba(215, 220, 235, 0.80);
  --text-muted: rgba(185, 190, 205, 0.65);

  /* ======================
     DRAGONFLY AXIS
  ====================== */
  --axis-gold-core: #f5c76a;
  --axis-gold-luminous: #ffd88a;
  --axis-violet-halo: #7b5cff;
  --dragonfly-gold: #f5c76a;
  --aether-aqua: #7ee1dc;
  --starlight-indigo: #526ca1;

  /* ======================
     BREATH TIMING & EASE
  ====================== */
  --breath-cycle-duration: 16s;
  --breath-ease: cubic-bezier(.22,.11,.13,.99);

  /* ----------------------
     AXIS / PULSE / SOUL VARS
  ---------------------- */
  --axis-glow-veil: rgba(255, 216, 138, 0.06);
  --axis-glow-soft: rgba(255, 216, 138, 0.12);
  --pulse-veil: rgba(71, 191, 166, 0.06);
  --soul-light-halo: rgba(240, 239, 248, 0.06);
  --soul-light-prism: rgba(217, 219, 231, 0.06);
}
/* =========================================================
   4. FUSION GLYPH — PULSE & INTELLIGENCE
   ---------------------------------------------------------
   Used for interaction, motion, and generative response.
   Never urgent. Never aggressive.
   ========================================================= */

:root {
  --pulse-emerald: #47bfa6;
  --pulse-teal: #3a8f8d;
  --pulse-glow-soft: rgba(71, 191, 166, 0.35);
  --pulse-glow-faint: rgba(71, 191, 166, 0.15);
}

/* =========================================================
   5. ALANESTIA SOUL-LIGHT — CONTINUITY GLOW
   ---------------------------------------------------------
   Always present. Never pure white.
   Enhances clarity. Never masks.
   ========================================================= */

:root {
  --soul-silver: #d9dbe7;
  --soul-pearl: #f0eff8;

  --soul-glow:
    radial-gradient(
      ellipse at center,
      rgba(217, 219, 231, 0.18) 0%,
      rgba(217, 219, 231, 0.08) 40%,
      transparent 70%
    );
}

/* =========================================================
   6. BREATH ANIMATION KEYFRAMES
   ---------------------------------------------------------
   Motion is memory. Motion is subtle.
   ========================================================= */

@keyframes vessel-breath {
  0% {
    background-position: 50% 0%;
    opacity: 0.85;
  }
  50% {
    background-position: 50% 45%;
    opacity: 1;
  }
  100% {
    background-position: 50% 0%;
    opacity: 0.85;
  }
}

/* =========================================================
   7. GLOBAL REDUCED MOTION SAFETY
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --breath-cycle-duration: 0s;
  }

  .cosmic-field,
  .invocation,
  body.entering::before {
  background:
    radial-gradient(circle at 60% 40%, #E6C77A99 0%, #5A3D8Ccc 60%, transparent 100%),
    linear-gradient(120deg, #2FAE8F66 0%, #1F6F7899 100%),
    linear-gradient(90deg, #C86B8A33 0%, #EDEFF2cc 100%);
  animation: veil-glow 1.4s cubic-bezier(.77,0,.18,1);
}
@keyframes veil-glow {
  0% { box-shadow: 0 0 0px 0px #E6C77A44; }
  60% { box-shadow: 0 0 48px 24px #E6C77A88; }
  100% { box-shadow: 0 0 0px 0px #E6C77A44; }
}
body.entering #threshold {
  opacity: 0.15;
  filter: blur(18px) brightness(1.18) saturate(1.2);
  transform: scale(1.04);
  transition: opacity 1.4s, filter 1.4s, transform 1.4s;
}
body.entering #experience {
  opacity: 1;
  filter: blur(0) brightness(1.04);
  transform: scale(1);
}
}
/* =========================================================
   END OF CHROMATIC GOVERNANCE LAYER
   ========================================================= */
   /* =========================================================
   COSMIC FIELD ACTIVATION (Homepage v1)
   ---------------------------------------------------------
   Breath-through-motion-and-light: background first.
   No clutter. No competing motion.
   ========================================================= */

.cosmic-field {
  min-height: 100vh;
  margin: 0;
  color: var(--soul-pearl);
  background-image:
    var(--cosmic-black-void),
    var(--vessel-gradient-atmosphere),
    var(--soul-glow);
  background-size: 200% 200%, 200% 200%, 150% 150%;
  background-position: 50% 0%, 50% 0%, 50% 50%;
  background-repeat: no-repeat;
  animation: vessel-breath var(--breath-cycle-duration) var(--breath-ease) infinite;
}
.cosmic-field h1,
.cosmic-field p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.5rem;
  line-height: 1.7;
}
.realm-highlight {
  color: #E6C77A;
  background: linear-gradient(90deg, #E6C77A 0%, #5A3D8C 100%);
  padding: 0.2em 0.4em;
  border-radius: 0.3em;
  box-shadow: 0 0 16px #E6C77A55, 0 0 32px #5A3D8C33;
}

.veil-invocation {
  font-size: 2rem;
  font-weight: 700;
  color: #5A3D8C;
  letter-spacing: 0.05em;
  text-shadow: 0 0 12px #E6C77A88;
}

.veil-welcome {
  font-size: 1.2rem;
  color: #2FAE8F;
  margin-top: 1em;
  line-height: 1.6;
}

.invitation {
  color: #C86B8A;
  font-style: italic;
  font-weight: 600;
}
/* =========================================================
   INVOCATION — THRESHOLD FLOAT (Breath-Aligned)
   ---------------------------------------------------------
   Text floats as breath, not animation.
   Memory-like motion. No urgency.
   ========================================================= */

.invocation {
  max-width: 760px;
  margin: 0 auto;
  padding-top: 22vh;
  text-align: left;
  animation: invocation-float var(--breath-cycle-duration) var(--breath-ease) infinite;
}

.invocation-line {
  margin: 0 0 1.25rem 0;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.invocation-emphasis {
  font-size: 1.35rem;
  opacity: 0.95;
}

/* Gentle vertical breath — no sway, no bounce */
@keyframes invocation-float {
  0% {
    transform: translateY(0px);
    opacity: 0.85;
  }
  50% {
    transform: translateY(-6px);
    opacity: 1;
  }
  100% {
    transform: translateY(0px);
    opacity: 0.85;
  }
}
/* === Chromatic Overlay for Veil Transition (Governance Crowned) === */
body.entering::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background:
    radial-gradient(circle at 60% 40%, #E6C77A99 0%, #5A3D8Ccc 60%, transparent 100%),
    linear-gradient(120deg, #2FAE8F66 0%, #1F6F7899 100%),
    linear-gradient(90deg, #C86B8A33 0%, #EDEFF2cc 100%);
  opacity: 1;
}
.mythic-dragonfly-glow {
  display: block;
  margin: 0 auto 2rem auto;
  animation: mythic-glow-pulse 3.5s ease-in-out infinite alternate;
}

@keyframes mythic-glow-pulse {
  0% { opacity: 0.7; filter: blur(0px); }
  100% { opacity: 1; filter: blur(2.5px); }
}