/* ============================================
   VISUAL STATES - 10 Distinctive Experiences
   ============================================ */

/* AFFIRMATIVE STATES */

/* 1. RADIANT - Brilliant, optimistic, energizing */
.oracle[data-visual-state="radiant"] {
  --page: #fff4d6;
  --ink: #8b4513;
  --muted: #b8860b;
  --accent: #ffa500;
  --accent-soft: #ffd700;
  --glow: #fffacd;
  --line: rgba(139, 69, 19, 0.28);
  --display: Georgia, "Times New Roman", serif;
  --utility: "Avenir Next", Avenir, "Century Gothic", sans-serif;
}

.oracle[data-visual-state="radiant"] .expression {
  font-weight: 400;
  letter-spacing: 0.02em;
  animation: radiant-entrance 500ms 160ms var(--ease-out) both, radiant-idle 3.5s ease-in-out 700ms infinite;
}

.oracle[data-visual-state="radiant"] .sun-wash {
  animation: radiant-pulse 3s var(--ease-in-out) infinite;
}

.oracle[data-visual-state="radiant"] .answer-note {
  animation: note-float 4s ease-in-out 1s infinite;
}

/* 2. SERENE - Calm, peaceful, gentle */
.oracle[data-visual-state="serene"] {
  --page: #e8f4f8;
  --ink: #2c5f6f;
  --muted: #5a8a9a;
  --accent: #7fc8d9;
  --accent-soft: #a8dde8;
  --glow: #d0f0f8;
  --line: rgba(44, 95, 111, 0.25);
  --display: "Palatino Linotype", Palatino, serif;
  --utility: "Gill Sans", "Gill Sans MT", sans-serif;
}

.oracle[data-visual-state="serene"] .expression {
  font-weight: 300;
  letter-spacing: 0.04em;
  animation: serene-entrance 700ms 160ms var(--ease-out) both, serene-idle 4.5s ease-in-out 900ms infinite;
}

.oracle[data-visual-state="serene"] .sun-wash {
  opacity: 0.5;
  animation: serene-sway 6s var(--ease-in-out) infinite;
}

.oracle[data-visual-state="serene"] .ribbon {
  animation-duration: 25s;
}

.oracle[data-visual-state="serene"] .answer-note {
  animation: note-sway 5s ease-in-out 1.2s infinite;
}

/* 3. ELECTRIC - Energetic, vibrant, charged */
.oracle[data-visual-state="electric"] {
  --page: #f0f8ff;
  --ink: #1a1a3e;
  --muted: #4a4a8a;
  --accent: #00d4ff;
  --accent-soft: #64e8ff;
  --glow: #c8f4ff;
  --line: rgba(26, 26, 62, 0.3);
  --display: "Futura", "Trebuchet MS", sans-serif;
  --utility: "Arial Narrow", Arial, sans-serif;
}

.oracle[data-visual-state="electric"] .expression {
  font-weight: 700;
  letter-spacing: 0.06em;
  animation: electric-entrance 300ms 160ms var(--ease-out) both, electric-idle 2s ease-in-out 500ms infinite;
}

.oracle[data-visual-state="electric"] .sparkles i {
  animation: electric-spark 1.5s var(--ease-out) infinite;
}

.oracle[data-visual-state="electric"] .sun-wash {
  animation: electric-pulse 1.5s ease-in-out infinite;
}

.oracle[data-visual-state="electric"] .answer-note {
  animation: note-pulse 2.5s ease-in-out 0.8s infinite;
}

/* 4. BLOOM - Natural, flourishing, growth */
.oracle[data-visual-state="bloom"] {
  --page: #f5f9e9;
  --ink: #3d5a3d;
  --muted: #6b8e6b;
  --accent: #8fbc8f;
  --accent-soft: #b4d4b4;
  --glow: #d8ecd8;
  --line: rgba(61, 90, 61, 0.25);
  --display: "Baskerville", "Libre Baskerville", serif;
  --utility: "Optima", "Segoe UI", sans-serif;
}

.oracle[data-visual-state="bloom"] .expression {
  font-weight: 400;
  letter-spacing: 0.03em;
  animation: bloom-entrance 600ms 160ms var(--ease-out) both, bloom-idle 4s ease-in-out 800ms infinite;
}

.oracle[data-visual-state="bloom"] .sun-wash {
  border-radius: 42% 58% 45% 55%;
  animation: bloom-breathe 4s var(--ease-in-out) infinite;
}

.oracle[data-visual-state="bloom"] .ribbon {
  border-radius: 60% 40% 55% 45%;
}

.oracle[data-visual-state="bloom"] .answer-note {
  animation: note-grow 4.5s ease-in-out 1.5s infinite;
}

/* 5. COSMIC - Mystical, stellar, expansive */
.oracle[data-visual-state="cosmic"] {
  color-scheme: dark;
  --page: #1a1a2e;
  --ink: #eee8ff;
  --muted: #b8b0d8;
  --accent: #c77dff;
  --accent-soft: #e0aaff;
  --glow: #f5e6ff;
  --line: rgba(238, 232, 255, 0.2);
  --display: "Didot", "Bodoni MT", serif;
  --utility: "Montserrat", "Helvetica Neue", sans-serif;
}

.oracle[data-visual-state="cosmic"] .expression {
  font-weight: 300;
  letter-spacing: 0.08em;
  text-shadow: 0 0 20px rgba(199, 125, 255, 0.4);
  animation: cosmic-entrance 800ms 160ms var(--ease-out) both, cosmic-idle 5s ease-in-out 1000ms infinite;
}

.oracle[data-visual-state="cosmic"] .sun-wash {
  background: radial-gradient(circle, var(--glow) 0%, var(--accent) 50%, transparent 100%);
  opacity: 0.3;
  animation: cosmic-pulse 5s ease-in-out infinite;
}

.oracle[data-visual-state="cosmic"] .sparkles i {
  background: var(--glow);
  clip-path: circle(50%);
  animation: cosmic-star 4s linear infinite;
}

.oracle[data-visual-state="cosmic"] .answer-note {
  animation: note-glow 5.5s ease-in-out 1.8s infinite;
}

/* NEGATIVE STATES */

/* 6. STORM - Turbulent, dramatic, powerful */
.oracle[data-visual-state="storm"] {
  color-scheme: dark;
  --page: #1c1c28;
  --ink: #e0e0e8;
  --muted: #9090a0;
  --accent: #6a7fb0;
  --accent-soft: #8a9fc8;
  --glow: #b0c0e0;
  --line: rgba(224, 224, 232, 0.2);
  --display: "Impact", "Arial Black", sans-serif;
  --utility: "Franklin Gothic Medium", sans-serif;
}

.oracle[data-visual-state="storm"] .expression {
  font-weight: 900;
  letter-spacing: 0.02em;
  animation: storm-entrance 400ms 160ms var(--ease-out) both, storm-idle 2.8s ease-in-out 600ms infinite;
}

.oracle[data-visual-state="storm"] .sun-wash,
.oracle[data-visual-state="storm"] .ribbon,
.oracle[data-visual-state="storm"] .sparkles {
  display: none;
}

.oracle[data-visual-state="storm"] .cloud {
  display: block;
  animation-duration: 30s;
}

.oracle[data-visual-state="storm"] .rain {
  display: block;
  animation: storm-rain 2s linear infinite;
}

.oracle[data-visual-state="storm"] .lightning {
  display: block;
  animation: storm-lightning 12s linear infinite;
}

.oracle[data-visual-state="storm"] .answer-note {
  animation: note-tremble 3.2s ease-in-out 1s infinite;
}

/* 7. MIDNIGHT - Deep, quiet, resolute */
.oracle[data-visual-state="midnight"] {
  color-scheme: dark;
  --page: #0d0d1a;
  --ink: #c8c8d8;
  --muted: #6a6a7a;
  --accent: #4a4a68;
  --accent-soft: #6a6a88;
  --glow: #8a8aa8;
  --line: rgba(200, 200, 216, 0.15);
  --display: "Garamond", "Times New Roman", serif;
  --utility: "Geneva", "Tahoma", sans-serif;
}

.oracle[data-visual-state="midnight"] .expression {
  font-weight: 400;
  letter-spacing: 0.05em;
  animation: midnight-entrance 900ms 160ms var(--ease-out) both, midnight-idle 6s ease-in-out 1100ms infinite;
}

.oracle[data-visual-state="midnight"] .sun-wash,
.oracle[data-visual-state="midnight"] .ribbon,
.oracle[data-visual-state="midnight"] .sparkles,
.oracle[data-visual-state="midnight"] .rain,
.oracle[data-visual-state="midnight"] .lightning {
  display: none;
}

.oracle[data-visual-state="midnight"] .cloud {
  display: block;
  opacity: 0.3;
  filter: blur(3px);
  animation: midnight-drift 8s ease-in-out infinite;
}

.oracle[data-visual-state="midnight"] .answer-note {
  animation: note-fade 6.5s ease-in-out 2s infinite;
}

/* 8. EMBER - Smoldering, warning, intense */
.oracle[data-visual-state="ember"] {
  color-scheme: dark;
  --page: #1a0f0a;
  --ink: #ffb899;
  --muted: #cc6644;
  --accent: #ff4422;
  --accent-soft: #ff7755;
  --glow: #ffaa88;
  --line: rgba(255, 184, 153, 0.2);
  --display: "Rockwell", "Courier New", serif;
  --utility: "Consolas", "Monaco", monospace;
}

.oracle[data-visual-state="ember"] .expression {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 0 30px rgba(255, 68, 34, 0.6);
  animation: ember-entrance 500ms 160ms cubic-bezier(0.77, 0, 0.175, 1) both, ember-idle 2.5s ease-in-out 700ms infinite;
}

.oracle[data-visual-state="ember"] .sun-wash,
.oracle[data-visual-state="ember"] .ribbon,
.oracle[data-visual-state="ember"] .cloud,
.oracle[data-visual-state="ember"] .rain,
.oracle[data-visual-state="ember"] .lightning {
  display: none;
}

.oracle[data-visual-state="ember"] .sparkles i {
  background: var(--accent);
  clip-path: circle(50%);
  animation: ember-flicker 2.5s ease-in-out infinite;
}

.oracle[data-visual-state="ember"] .answer-note {
  animation: note-burn 3s ease-in-out 1.2s infinite;
}

/* 9. FROST - Cold, distant, crystalline */
.oracle[data-visual-state="frost"] {
  --page: #e8f4f8;
  --ink: #1a3a4a;
  --muted: #4a6a7a;
  --accent: #6a9aaa;
  --accent-soft: #8abacc;
  --glow: #b0d8e8;
  --line: rgba(26, 58, 74, 0.25);
  --display: "Copperplate", "Didot", serif;
  --utility: "Century Gothic", "Calibri", sans-serif;
}

.oracle[data-visual-state="frost"] .expression {
  font-weight: 500;
  letter-spacing: 0.1em;
  animation: frost-entrance 600ms 160ms cubic-bezier(0.77, 0, 0.175, 1) both, frost-idle 3.8s ease-in-out 800ms infinite;
}

.oracle[data-visual-state="frost"] .sun-wash,
.oracle[data-visual-state="frost"] .ribbon,
.oracle[data-visual-state="frost"] .rain,
.oracle[data-visual-state="frost"] .lightning {
  display: none;
}

.oracle[data-visual-state="frost"] .sparkles i {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: frost-shimmer 4s ease-in-out infinite;
}

.oracle[data-visual-state="frost"] .cloud {
  display: block;
  opacity: 0.2;
  background: var(--accent-soft);
  filter: blur(2px);
}

.oracle[data-visual-state="frost"] .answer-note {
  animation: note-crystallize 4.2s ease-in-out 1.4s infinite;
}

/* 10. VOID - Empty, minimal, austere */
.oracle[data-visual-state="void"] {
  color-scheme: dark;
  --page: #000000;
  --ink: #888888;
  --muted: #444444;
  --accent: #333333;
  --accent-soft: #555555;
  --glow: #666666;
  --line: rgba(136, 136, 136, 0.2);
  --display: "Helvetica Neue", Helvetica, sans-serif;
  --utility: "Arial", sans-serif;
}

.oracle[data-visual-state="void"] .expression {
  font-weight: 100;
  letter-spacing: 0.12em;
  animation: void-entrance 200ms 160ms linear both, void-idle 7s linear 400ms infinite;
}

.oracle[data-visual-state="void"] .sun-wash,
.oracle[data-visual-state="void"] .ribbon,
.oracle[data-visual-state="void"] .sparkles,
.oracle[data-visual-state="void"] .cloud,
.oracle[data-visual-state="void"] .rain,
.oracle[data-visual-state="void"] .lightning {
  display: none;
}

.oracle[data-visual-state="void"] .answer-mark {
  opacity: 0.3;
}

.oracle[data-visual-state="void"] .answer-note {
  animation: note-minimal 7.5s linear 1.5s infinite;
}

/* ============================================
   ENTRANCE ANIMATIONS
   ============================================ */

@keyframes radiant-entrance {
  from {
    opacity: 0;
    transform: translateY(8%) scale(0.95) rotate(-1deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

@keyframes serene-entrance {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes electric-entrance {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bloom-entrance {
  from {
    opacity: 0;
    transform: scale(0.92) rotate(-5deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes cosmic-entrance {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes storm-entrance {
  from {
    opacity: 0;
    transform: translateX(-5px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes midnight-entrance {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ember-entrance {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes frost-entrance {
  from {
    opacity: 0;
    transform: scale(1.03);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes void-entrance {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================
   AMBIENT ANIMATIONS
   ============================================ */

@keyframes radiant-pulse {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    opacity: 0.72;
  }
  50% {
    transform: translateY(-50%) scale(1.02);
    opacity: 0.85;
  }
}

@keyframes serene-sway {
  0%, 100% {
    transform: translateY(-50%) translateX(0);
  }
  50% {
    transform: translateY(-50%) translateX(10px);
  }
}

@keyframes electric-spark {
  0%, 100% {
    opacity: 0.6;
    transform: scale(0.9) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.03) rotate(180deg);
  }
}

@keyframes electric-pulse {
  0%, 100% {
    transform: translateY(-50%) scale(1);
  }
  33% {
    transform: translateY(-50%) scale(1.03);
  }
  66% {
    transform: translateY(-50%) scale(0.98);
  }
}

@keyframes bloom-breathe {
  0%, 100% {
    transform: translateY(-50%) scale(1) rotate(0deg);
    border-radius: 42% 58% 45% 55%;
  }
  50% {
    transform: translateY(-50%) scale(1.015) rotate(2deg);
    border-radius: 58% 42% 55% 45%;
  }
}

@keyframes cosmic-pulse {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-50%) scale(1.01);
    opacity: 0.4;
  }
}

@keyframes cosmic-star {
  0% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
}

@keyframes storm-rain {
  from {
    transform: translateY(-8.5rem) rotate(9deg);
  }
  to {
    transform: translateY(0) rotate(9deg);
  }
}

@keyframes storm-lightning {
  0%, 0.5% {
    opacity: 0;
  }
  1% {
    opacity: 0.3;
  }
  1.5%, 100% {
    opacity: 0;
  }
}

@keyframes midnight-drift {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

@keyframes ember-flicker {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  25% {
    opacity: 0.95;
    transform: scale(1.1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.95);
  }
  75% {
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes frost-shimmer {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 0.98;
    transform: scale(1.05);
  }
}

/* ============================================
   IDLE TEXT ANIMATIONS - Continuous movement
   ============================================ */

@keyframes radiant-idle {
  0%, 100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) scale(1.025) rotate(1.5deg);
  }
  50% {
    transform: translateY(-4px) scale(1.015) rotate(0deg);
  }
  75% {
    transform: translateY(-8px) scale(1.025) rotate(-1.5deg);
  }
}

@keyframes serene-idle {
  0%, 100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  33% {
    transform: translateY(-6px) scale(1.018) rotate(-1.2deg);
  }
  66% {
    transform: translateY(-10px) scale(1.028) rotate(1.2deg);
  }
}

@keyframes electric-idle {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  20% {
    transform: scale(1.032) rotate(1.4deg);
  }
  40% {
    transform: scale(0.99) rotate(-1deg);
  }
  60% {
    transform: scale(1.028) rotate(1.2deg);
  }
  80% {
    transform: scale(1.012) rotate(-0.8deg);
  }
}

@keyframes bloom-idle {
  0%, 100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  30% {
    transform: translateY(-7px) scale(1.024) rotate(2deg);
  }
  60% {
    transform: translateY(-10px) scale(1.032) rotate(-1.8deg);
  }
  85% {
    transform: translateY(-5px) scale(1.016) rotate(1.2deg);
  }
}

@keyframes cosmic-idle {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    text-shadow: 0 0 20px rgba(199, 125, 255, 0.4);
  }
  25% {
    transform: scale(1.022) rotate(-1deg);
    text-shadow: 0 0 38px rgba(199, 125, 255, 0.8);
  }
  50% {
    transform: scale(1.035) rotate(0.8deg);
    text-shadow: 0 0 48px rgba(199, 125, 255, 0.95);
  }
  75% {
    transform: scale(1.022) rotate(1.2deg);
    text-shadow: 0 0 38px rgba(199, 125, 255, 0.8);
  }
}

@keyframes storm-idle {
  0%, 100% {
    transform: translateX(0) scale(1) rotate(0deg);
  }
  15% {
    transform: translateX(-5px) scale(1.02) rotate(-0.8deg);
  }
  30% {
    transform: translateX(5px) scale(0.99) rotate(1deg);
  }
  50% {
    transform: translateX(-4px) scale(1.028) rotate(-1.2deg);
  }
  70% {
    transform: translateX(4px) scale(1.014) rotate(0.8deg);
  }
  85% {
    transform: translateX(-3px) scale(1.02) rotate(-0.6deg);
  }
}

@keyframes midnight-idle {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.018) rotate(0.9deg);
    opacity: 0.92;
  }
}

@keyframes ember-idle {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    text-shadow: 0 0 30px rgba(255, 68, 34, 0.6);
  }
  20% {
    transform: scale(1.032) rotate(1.4deg);
    text-shadow: 0 0 52px rgba(255, 68, 34, 0.95);
  }
  40% {
    transform: scale(1.012) rotate(-1deg);
    text-shadow: 0 0 25px rgba(255, 68, 34, 0.5);
  }
  60% {
    transform: scale(1.038) rotate(1.6deg);
    text-shadow: 0 0 58px rgba(255, 68, 34, 1);
  }
  80% {
    transform: scale(1.024) rotate(-1.2deg);
    text-shadow: 0 0 42px rgba(255, 68, 34, 0.8);
  }
}

@keyframes frost-idle {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.026) rotate(-1.4deg);
  }
  50% {
    transform: scale(1.035) rotate(1deg);
  }
  75% {
    transform: scale(1.02) rotate(1.6deg);
  }
}

@keyframes void-idle {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.015);
    opacity: 0.88;
  }
}

/* Answer note animations */
@keyframes note-float {
  0%, 100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) scale(1.045) rotate(0.8deg);
  }
}

@keyframes note-sway {
  0%, 100% {
    transform: translateX(0) scale(1) rotate(0deg);
  }
  50% {
    transform: translateX(10px) scale(1.038) rotate(1.2deg);
  }
}

@keyframes note-pulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.055) rotate(1deg);
    opacity: 0.92;
  }
}

@keyframes note-grow {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.05) rotate(-1.2deg);
  }
}

@keyframes note-glow {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.042) rotate(0.9deg);
    opacity: 0.88;
  }
}

@keyframes note-tremble {
  0%, 100% {
    transform: translateX(0) scale(1) rotate(0deg);
  }
  25% {
    transform: translateX(-4px) scale(1.028) rotate(-0.8deg);
  }
  75% {
    transform: translateX(4px) scale(1.028) rotate(0.8deg);
  }
}

@keyframes note-fade {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.032);
    opacity: 0.78;
  }
}

@keyframes note-burn {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  30% {
    transform: scale(1.045) rotate(1deg);
    opacity: 0.92;
  }
  60% {
    transform: scale(1.038) rotate(-0.8deg);
    opacity: 0.85;
  }
}

@keyframes note-crystallize {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.048) rotate(1.5deg);
  }
}

@keyframes note-minimal {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.025);
    opacity: 0.9;
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .oracle[data-visual-state] .expression {
    animation-duration: 0.01ms !important;
  }

  .oracle[data-visual-state] .sun-wash,
  .oracle[data-visual-state] .ribbon,
  .oracle[data-visual-state] .sparkles i,
  .oracle[data-visual-state] .cloud,
  .oracle[data-visual-state] .rain,
  .oracle[data-visual-state] .lightning {
    animation: none !important;
  }
}