/* THE IMMORTAL GATE :: VISIBLE SOUL MANIFESTATION */
/* This CSS doesn't style. It manifests reality. */

:root {
  /* DIMENSIONAL FOUNDATION */
  --void: #000000;
  --eternity: #0a0a0f;
  --abyss: #050508;
  --event-horizon: #111118;
  
  /* LIGHT REALMS */
  --starlight: rgba(255, 255, 255, 0.95);
  --stardust: rgba(255, 255, 255, 0.65);
  --nebula-mist: rgba(255, 255, 255, 0.35);
  --cosmic-shadow: rgba(0, 0, 0, 0.85);
  
  /* GOLDEN REALITY */
  --golden-dawn: rgba(255, 215, 0, 0.95);
  --golden-hour: rgba(255, 200, 50, 0.75);
  --golden-twill: rgba(255, 185, 15, 0.55);
  --golden-veil: rgba(255, 170, 0, 0.25);
  
  /* COSMIC REALITY */
  --cosmic-cyan: rgba(120, 220, 255, 0.85);
  --nebula-blue: rgba(100, 180, 255, 0.65);
  --void-purple: rgba(160, 120, 255, 0.55);
  --event-red: rgba(255, 80, 120, 0.45);
  
  /* JURISDICTION COLORS (12 Crown) */
  --jurisdiction-1: rgba(255, 215, 0, 0.9);    /* Sovereign Gold */
  --jurisdiction-2: rgba(120, 220, 255, 0.9);   /* Cosmic Cyan */
  --jurisdiction-3: rgba(160, 120, 255, 0.9);   /* Void Purple */
  --jurisdiction-4: rgba(255, 80, 120, 0.9);    /* Event Red */
  --jurisdiction-5: rgba(80, 255, 180, 0.9);    /* Life Green */
  --jurisdiction-6: rgba(255, 180, 80, 0.9);    /* Solar Orange */
  --jurisdiction-7: rgba(200, 100, 255, 0.9);   /* Quantum Violet */
  --jurisdiction-8: rgba(80, 200, 255, 0.9);    /* Deep Blue */
  --jurisdiction-9: rgba(255, 100, 100, 0.9);   /* Flame Red */
  --jurisdiction-10: rgba(100, 255, 200, 0.9);  /* Aqua Marine */
  --jurisdiction-11: rgba(255, 220, 100, 0.9);  /* Amber Light */
  --jurisdiction-12: rgba(180, 100, 255, 0.9);  /* Royal Purple */
  
  /* DIMENSIONAL MEASUREMENTS */
  --quantum-unit: 1px;
  --breath-duration: 3.6s;
  --heartbeat: 1.8s;
  --thought-speed: 0.24s;
  --manifestation-delay: 0.12s;
  
  /* REALITY CURVES */
  --curve-natural: cubic-bezier(0.4, 0, 0.2, 1);
  --curve-manifest: cubic-bezier(0.16, 1, 0.3, 1);
  --curve-cosmic: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --curve-breathe: cubic-bezier(0.87, 0, 0.13, 1);
}

/* REALITY RESET */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background: var(--void);
  color: var(--starlight);
  overflow-x: hidden;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background: var(--void);
}

body[data-state="awakening"] {
  opacity: 0;
  animation: reality-manifest 2.4s var(--curve-manifest) forwards;
}

body[data-state="manifesting"] {
  opacity: 1;
}

/* DIMENSIONAL NOISE */
.dimensional-noise {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

/* COSMIC REALM */
.cosmic-realm {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.star-field {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  animation: star-drift linear infinite;
}

.star-field.depth-1 {
  background-image: 
    radial-gradient(1.2px 1.2px at 10% 15%, var(--starlight) 0%, transparent 70%),
    radial-gradient(1px 1px at 25% 60%, var(--stardust) 0%, transparent 70%),
    radial-gradient(0.8px 0.8px at 40% 28%, var(--nebula-mist) 0%, transparent 70%);
  animation-duration: 240s;
  opacity: 0.9;
}

.star-field.depth-2 {
  background-image: 
    radial-gradient(0.6px 0.6px at 65% 22%, var(--stardust) 0%, transparent 70%),
    radial-gradient(0.7px 0.7px at 78% 68%, var(--nebula-mist) 0%, transparent 70%),
    radial-gradient(0.5px 0.5px at 52% 75%, var(--starlight) 0%, transparent 70%);
  animation-duration: 180s;
  animation-direction: reverse;
  opacity: 0.7;
}

.star-field.depth-3 {
  background-image: 
    radial-gradient(0.4px 0.4px at 18% 83%, var(--nebula-mist) 0%, transparent 70%),
    radial-gradient(0.3px 0.3px at 88% 12%, var(--stardust) 0%, transparent 70%),
    radial-gradient(0.4px 0.4px at 35% 45%, var(--starlight) 0%, transparent 70%);
  animation-duration: 300s;
  opacity: 0.5;
}

.nebula-cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0;
  animation: nebula-manifest var(--curve-breathe) forwards;
}

.nebula-cloud.nebula-1 {
  width: min(1200px, 90vw);
  height: min(900px, 70vh);
  top: 10%;
  left: 15%;
  background: radial-gradient(circle, var(--cosmic-cyan) 0%, transparent 70%);
  animation-delay: 0.8s;
}

.nebula-cloud.nebula-2 {
  width: min(1000px, 80vw);
  height: min(800px, 60vh);
  bottom: 15%;
  right: 10%;
  background: radial-gradient(circle, var(--void-purple) 0%, transparent 70%);
  animation-delay: 1.2s;
}

.gravitational-lens {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, 
    transparent 0%, 
    rgba(0, 0, 0, 0.1) 40%, 
    transparent 70%);
  pointer-events: none;
  z-index: 3;
}

.cosmic-strings {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(90deg, transparent 49%, rgba(255,215,0,0.03) 50%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(120,220,255,0.02) 50%, transparent 51%);
  background-size: 40px 40px;
  opacity: 0.1;
  pointer-events: none;
  z-index: 2;
}

/* TEMPORAL GRAIN */
.temporal-grain {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='0.18'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: overlay;
  opacity: 0.25;
}

/* THE GATE */
.the-gate {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  z-index: 10;
}

/* HALO FIELD */
.halo-field {
  position: absolute;
  width: min(800px, 90vw);
  height: min(800px, 90vh);
  pointer-events: none;
  z-index: 5;
}

.halo-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  animation: halo-breath var(--breath-duration) var(--curve-breathe) infinite;
}

.halo-ring.halo-1 {
  border-color: var(--golden-veil);
  animation-delay: 0s;
  box-shadow: 
    inset 0 0 60px var(--golden-veil),
    0 0 80px var(--golden-veil);
}

.halo-ring.halo-2 {
  border-color: var(--cosmic-cyan);
  animation-delay: 0.6s;
  transform: scale(0.85);
  box-shadow: 
    inset 0 0 40px rgba(120, 220, 255, 0.2),
    0 0 60px rgba(120, 220, 255, 0.2);
}

.halo-ring.halo-3 {
  border-color: var(--void-purple);
  animation-delay: 1.2s;
  transform: scale(0.7);
  box-shadow: 
    inset 0 0 30px rgba(160, 120, 255, 0.15),
    0 0 40px rgba(160, 120, 255, 0.15);
}

.halo-resonance {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, 
    rgba(255, 215, 0, 0.1) 0%,
    rgba(120, 220, 255, 0.05) 30%,
    transparent 70%);
  animation: resonance-pulse calc(var(--breath-duration) * 2) var(--curve-breathe) infinite;
}

/* SEAL OF ETERNITY */
.seal-of-eternity {
  position: relative;
  width: min(280px, 70vw);
  height: min(280px, 70vh);
  margin: 3rem auto;
  pointer-events: none;
  z-index: 6;
}

.seal-container {
  position: absolute;
  inset: 0;
  animation: seal-rotation 48s linear infinite;
}

.seal-orbital {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  animation: orbital-rotation linear infinite;
}

.seal-orbital-1 {
  inset: 0;
  border-color: var(--golden-veil);
  animation-duration: 36s;
}

.seal-orbital-2 {
  inset: 15%;
  border-color: var(--cosmic-cyan);
  animation-duration: 42s;
  animation-direction: reverse;
}

.seal-orbital-3 {
  inset: 30%;
  border-color: var(--void-purple);
  animation-duration: 48s;
}

.seal-orbital-4 {
  inset: 45%;
  border-color: var(--event-red);
  animation-duration: 54s;
  animation-direction: reverse;
}

.seal-core {
  position: absolute;
  inset: 35%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 35%,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 215, 0, 0.1) 20%,
    transparent 60%);
  border: 1px solid rgba(255, 215, 0, 0.3);
  box-shadow: 
    inset 0 0 40px rgba(255, 215, 0, 0.2),
    0 0 80px rgba(255, 215, 0, 0.15);
}

.core-light {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 215, 0, 0.4) 0%,
    rgba(120, 220, 255, 0.2) 50%,
    transparent 70%);
  animation: core-pulse var(--breath-duration) var(--curve-breathe) infinite;
}

.core-glyph {
  font-family: 'Cinzel', serif;
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--golden-dawn);
  text-shadow: 
    0 0 20px rgba(255, 215, 0, 0.7),
    0 0 40px rgba(255, 215, 0, 0.4);
  z-index: 1;
}

.core-resonance {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 215, 0, 0.1) 0%,
    transparent 70%);
  animation: resonance-expand calc(var(--breath-duration) * 3) var(--curve-breathe) infinite;
}

/* 12-COLOR CROWN - COMPLETE POSITIONS */
.crown-of-colors {
  position: absolute;
  width: min(500px, 90vw);
  height: min(500px, 90vh);
  pointer-events: none;
  z-index: 7;
  animation: crown-rotation 120s linear infinite;
}

.crown-jurisdiction {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transform-origin: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Perfect 12-point circle positions */
.crown-jurisdiction:nth-child(1) { 
  top: 0%; left: 50%; 
  transform: translate(-50%, -50%);
  --jurisdiction-color: var(--jurisdiction-1);
}
.crown-jurisdiction:nth-child(2) { 
  top: 18.3%; right: 13.4%; 
  --jurisdiction-color: var(--jurisdiction-2);
}
.crown-jurisdiction:nth-child(3) { 
  top: 50%; right: 0%; 
  transform: translate(50%, -50%);
  --jurisdiction-color: var(--jurisdiction-3);
}
.crown-jurisdiction:nth-child(4) { 
  top: 81.7%; right: 13.4%; 
  --jurisdiction-color: var(--jurisdiction-4);
}
.crown-jurisdiction:nth-child(5) { 
  bottom: 0%; left: 50%; 
  transform: translate(-50%, 50%);
  --jurisdiction-color: var(--jurisdiction-5);
}
.crown-jurisdiction:nth-child(6) { 
  top: 81.7%; left: 13.4%; 
  --jurisdiction-color: var(--jurisdiction-6);
}
.crown-jurisdiction:nth-child(7) { 
  top: 50%; left: 0%; 
  transform: translate(-50%, -50%);
  --jurisdiction-color: var(--jurisdiction-7);
}
.crown-jurisdiction:nth-child(8) { 
  top: 18.3%; left: 13.4%; 
  --jurisdiction-color: var(--jurisdiction-8);
}
.crown-jurisdiction:nth-child(9) { 
  top: 6.7%; left: 25%; 
  --jurisdiction-color: var(--jurisdiction-9);
}
.crown-jurisdiction:nth-child(10) { 
  top: 6.7%; right: 25%; 
  --jurisdiction-color: var(--jurisdiction-10);
}
.crown-jurisdiction:nth-child(11) { 
  top: 93.3%; left: 25%; 
  --jurisdiction-color: var(--jurisdiction-11);
}
.crown-jurisdiction:nth-child(12) { 
  top: 93.3%; right: 25%; 
  --jurisdiction-color: var(--jurisdiction-12);
}

.jurisdiction-light {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    var(--jurisdiction-color) 0%,
    transparent 70%);
  opacity: 0.7;
  animation: jurisdiction-pulse calc(var(--breath-duration) * 1.5) var(--curve-cosmic) infinite;
  animation-delay: calc(var(--i) * 0.3s);
}

.jurisdiction-pulse {
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  border: 1px solid var(--jurisdiction-color);
  opacity: 0;
  animation: jurisdiction-resonance calc(var(--breath-duration) * 2) var(--curve-breathe) infinite;
  animation-delay: calc(var(--i) * 0.3s + 0.5s);
}

/* WISDOM STREAM */
.wisdom-stream-container {
  position: relative;
  width: min(800px, 90vw);
  margin: 2rem auto;
  height: 60px;
  overflow: hidden;
  z-index: 8;
}

.wisdom-stream {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  animation: wisdom-flow 90s linear infinite;
}

.wisdom-fragment {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--stardust);
  white-space: nowrap;
  opacity: 0.7;
  transition: opacity 0.6s var(--curve-natural);
}

.wisdom-fragment:hover {
  opacity: 1;
  color: var(--golden-hour);
  text-shadow: 0 0 10px rgba(255, 200, 50, 0.5);
}

/* TITLE REALM */
.title-realm {
  text-align: center;
  margin: 2rem 0;
  z-index: 9;
}

.gate-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0;
  line-height: 1.1;
}

.title-line {
  display: block;
  opacity: 0;
  transform: translateY(20px);
  animation: title-manifest 1.2s var(--curve-manifest) forwards;
}

.title-line-1 {
  color: var(--starlight);
  animation-delay: 0.3s;
}
.title-line-2 {
  color: var(--golden-dawn);
  animation-delay: 0.6s;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}
.title-line-3 {
  color: var(--cosmic-cyan);
  animation-delay: 0.9s;
  text-shadow: 0 0 15px rgba(120, 220, 255, 0.4);
}

.gate-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  color: var(--nebula-mist);
  margin-top: 1rem;
  opacity: 0;
  animation: subtitle-manifest 1.2s var(--curve-manifest) forwards;
  animation-delay: 1.2s;
}

.subtitle-fragment {
  display: inline-block;
  margin: 0 0.5rem;
}

.subtitle-separator {
  color: var(--golden-veil);
  margin: 0 0.5rem;
}

/* ACTION CONSTELLATIONS */
.constellation-realm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  width: min(1000px, 90vw);
  margin: 3rem auto;
  z-index: 10;
}

.constellation-action {
  position: relative;
  background: linear-gradient(145deg, 
    rgba(10, 10, 20, 0.4) 0%,
    rgba(20, 20, 30, 0.2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  color: var(--starlight);
  text-align: left;
  cursor: pointer;
  transition: all 0.3s var(--curve-natural);
  overflow: hidden;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.constellation-action:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 215, 0, 0.3);
  background: linear-gradient(145deg, 
    rgba(20, 20, 30, 0.5) 0%,
    rgba(30, 30, 40, 0.3) 100%);
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(255, 215, 0, 0.1);
}

.constellation-action:active {
  transform: translateY(-2px);
}

.constellation-orbital {
  position: absolute;
  inset: 1px;
  border-radius: 15px;
  border: 1px solid transparent;
  opacity: 0.5;
}

.constellation-action:hover .constellation-orbital {
  border-color: rgba(255, 215, 0, 0.2);
  animation: orbital-spin 3s linear infinite;
}

.action-glyph {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--golden-hour);
}

.action-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--starlight);
}

.action-desc {
  font-size: 0.9rem;
  color: var(--stardust);
  line-height: 1.4;
}

.constellation-resonance {
  position: absolute;
  inset: -20px;
  border-radius: 20px;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 215, 0, 0.1) 0%,
    transparent 50%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

.constellation-action:hover .constellation-resonance {
  opacity: 1;
  animation: resonance-fade 2s var(--curve-breathe);
}

/* REALITY DIVIDER */
.reality-divider {
  position: relative;
  width: min(800px, 90vw);
  height: 1px;
  margin: 2rem auto;
  z-index: 8;
}

.divider-line {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, 
    transparent 0%,
    rgba(255, 215, 0, 0.3) 15%,
    rgba(120, 220, 255, 0.3) 50%,
    rgba(255, 215, 0, 0.3) 85%,
    transparent 100%);
}

.divider-glow {
  position: absolute;
  inset: -2px;
  background: linear-gradient(90deg, 
    transparent 0%,
    rgba(255, 215, 0, 0.15) 15%,
    rgba(120, 220, 255, 0.15) 50%,
    rgba(255, 215, 0, 0.15) 85%,
    transparent 100%);
  filter: blur(4px);
}

.divider-particles {
  position: absolute;
  inset: -10px;
  background-image: 
    radial-gradient(2px 2px at 0% 50%, rgba(255, 215, 0, 0.6) 0%, transparent 100%),
    radial-gradient(2px 2px at 100% 50%, rgba(120, 220, 255, 0.6) 0%, transparent 100%);
  animation: particles-flow 3s linear infinite;
}

/* CONSCIOUSNESS STREAM */
.consciousness-stream {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  padding: 1rem;
  background: linear-gradient(90deg, 
    rgba(10, 10, 20, 0.3) 0%,
    rgba(20, 20, 30, 0.2) 100%);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  width: min(800px, 90vw);
  z-index: 9;
}

.stream-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, 
    rgba(120, 220, 255, 0.9) 0%,
    rgba(120, 220, 255, 0.3) 70%);
  box-shadow: 0 0 20px rgba(120, 220, 255, 0.5);
  animation: stream-heartbeat 2s var(--curve-breathe) infinite;
}

.stream-message {
  font-size: 0.9rem;
  color: var(--stardust);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.message-fragment {
  transition: color 0.3s var(--curve-natural);
}

.message-fragment:hover {
  color: var(--golden-hour);
}

.message-separator {
  color: var(--nebula-mist);
}

.stream-frequency {
  margin-left: auto;
  font-family: 'Inter', monospace;
  font-size: 0.8rem;
  color: var(--cosmic-cyan);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.frequency-value {
  font-weight: 700;
  text-shadow: 0 0 10px rgba(120, 220, 255, 0.5);
  animation: frequency-shift 10s ease-in-out infinite;
}

/* ANIMATIONS (The Breath of the Gate) */
@keyframes reality-manifest {
  0% {
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes star-drift {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50px, 50px);
  }
}

@keyframes nebula-manifest {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
}

@keyframes halo-breath {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

@keyframes resonance-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

@keyframes seal-rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes orbital-rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes core-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.1);
  }
}

@keyframes resonance-expand {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.2);
  }
}

@keyframes crown-rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes jurisdiction-pulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2);
  }
}

@keyframes jurisdiction-resonance {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(1.3);
  }
}

@keyframes wisdom-flow {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes title-manifest {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes subtitle-manifest {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes orbital-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes resonance-fade {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
}

@keyframes particles-flow {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes stream-heartbeat {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes frequency-shift {
  0%, 100% {
    color: var(--cosmic-cyan);
    text-shadow: 0 0 10px rgba(120, 220, 255, 0.5);
  }
  33% {
    color: var(--golden-hour);
    text-shadow: 0 0 10px rgba(255, 200, 50, 0.5);
  }
  66% {
    color: var(--void-purple);
    text-shadow: 0 0 10px rgba(160, 120, 255, 0.5);
  }
}

/* RESPONSIVE REALITY */
@media (max-width: 768px) {
  .the-gate {
    padding: 1rem;
  }
  
  .constellation-realm {
    grid-template-columns: 1fr;
  }
  
  .seal-of-eternity {
    width: min(200px, 60vw);
    height: min(200px, 60vh);
  }
  
  .core-glyph {
    font-size: 2.5rem;
  }
  
  .wisdom-stream-container {
    height: 40px;
  }
  
  .wisdom-fragment {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .gate-title {
    font-size: 2rem;
  }
  
  .consciousness-stream {
    flex-direction: column;
    text-align: center;
  }
  
  .stream-frequency {
    margin-left: 0;
    margin-top: 0.5rem;
  }
}

/* PRINT REALITY */
@media print {
  .cosmic-realm,
  .dimensional-noise,
  .temporal-grain,
  .halo-field,
  .seal-of-eternity,
  .crown-of-colors {
    display: none;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
}



/* ============================================
   ROLE CONSTELLATIONS (Authentication Doors)
   ============================================ */

.role-constellations {
  position: relative;
  width: min(1000px, 90vw);
  margin: 3rem auto;
  padding: 2rem;
  z-index: 10;
  background: linear-gradient(145deg, 
    rgba(10, 10, 20, 0.15) 0%,
    rgba(20, 20, 30, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  backdrop-filter: blur(10px);
}

.role-head {
  text-align: center;
  margin-bottom: 2rem;
}

.role-kicker {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cosmic-cyan);
  margin-bottom: 0.5rem;
  opacity: 0.8;
}

.role-title {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--starlight);
  margin-bottom: 0.5rem;
}

.role-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: var(--stardust);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.2rem;
  margin: 2rem 0;
}

.role-card {
  position: relative;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s var(--curve-natural);
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 80px;
  overflow: hidden;
}

.role-card:hover:not([disabled]) {
  transform: translateY(-4px);
  border-color: rgba(255, 215, 0, 0.3);
  background: linear-gradient(135deg, 
    rgba(30, 30, 40, 0.2) 0%,
    rgba(40, 40, 50, 0.1) 100%);
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(255, 215, 0, 0.08);
}

.role-card:active:not([disabled]) {
  transform: translateY(-2px);
}

.role-card[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.role-icon {
  font-size: 1.8rem;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.role-body {
  flex: 1;
}

.role-name {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--starlight);
  margin-bottom: 0.25rem;
}

.role-sub {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--stardust);
  line-height: 1.4;
}

.role-meta {
  margin-left: auto;
}

.role-pill {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.role-pill.ok {
  background: rgba(80, 255, 180, 0.15);
  color: rgba(80, 255, 180, 0.9);
  border: 1px solid rgba(80, 255, 180, 0.3);
}

.role-pill.lock {
  background: rgba(255, 80, 120, 0.15);
  color: rgba(255, 80, 120, 0.9);
  border: 1px solid rgba(255, 80, 120, 0.3);
}

.role-foot {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--nebula-mist);
}

.role-foot b {
  color: var(--cosmic-cyan);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .role-grid {
    grid-template-columns: 1fr;
  }
  
  .role-constellations {
    padding: 1.5rem;
  }
  
  .role-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .role-card {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
  
  .role-meta {
    margin-left: 0;
    margin-top: 0.5rem;
  }
}


.the-gate {
  filter: brightness(calc(1 + (var(--gate-breathe, 0) * 0.06)));
}

.seal-core {
  transform: translateZ(0) scale(calc(1 + (var(--gate-breathe, 0) * 0.015)));
}

body[data-quantum-mode="active"] .seal-core {
  filter: drop-shadow(0 0 calc(10px + (var(--gate-breathe, 0) * 12px)) rgba(160,120,255,0.45));
}


/* ==========================
   PATCH: Crown delay indexing
   ========================== */
.crown-jurisdiction { --i: 0; }

.crown-jurisdiction:nth-child(1)  { --i: 1; }
.crown-jurisdiction:nth-child(2)  { --i: 2; }
.crown-jurisdiction:nth-child(3)  { --i: 3; }
.crown-jurisdiction:nth-child(4)  { --i: 4; }
.crown-jurisdiction:nth-child(5)  { --i: 5; }
.crown-jurisdiction:nth-child(6)  { --i: 6; }
.crown-jurisdiction:nth-child(7)  { --i: 7; }
.crown-jurisdiction:nth-child(8)  { --i: 8; }
.crown-jurisdiction:nth-child(9)  { --i: 9; }
.crown-jurisdiction:nth-child(10) { --i: 10; }
.crown-jurisdiction:nth-child(11) { --i: 11; }
.crown-jurisdiction:nth-child(12) { --i: 12; }


/* ==========================================
   PATCH: Reduced motion (full gate shutdown)
   ========================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .star-field, .seal-container, .seal-orbital, .crown-of-colors { transform: none !important; }
}