/* ============================================
   INTERACTIVE EFFECTS - Subtle & Delightful
   Following Emil Kowalski's philosophy
   ============================================ */

/* Base interactive styles */
.expression,
.answer-note {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 160ms var(--ease-out), filter 200ms ease;
}

/* ============================================
   AFFIRMATIVE STATES - Playful & Energetic
   ============================================ */

/* RADIANT - Bounce and glow */
@media (hover: hover) and (pointer: fine) {
  .oracle[data-visual-state="radiant"] .expression:hover {
    transform: translateY(0) scale(1.015) rotate(0);
    filter: brightness(1.08);
  }

  .oracle[data-visual-state="radiant"] .answer-note:hover {
    transform: translateY(-2px);
    color: var(--accent);
  }
}

.oracle[data-visual-state="radiant"] .expression:active {
  transform: translateY(0) scale(0.985) rotate(0);
  animation: radiant-wiggle 400ms var(--ease-out);
}

.oracle[data-visual-state="radiant"] .answer-note:active {
  transform: translateY(0) scale(0.97);
}

@keyframes radiant-wiggle {
  0%, 100% { transform: translateY(0) scale(0.985) rotate(0); }
  25% { transform: translateY(0) scale(0.985) rotate(1deg); }
  75% { transform: translateY(0) scale(0.985) rotate(-1deg); }
}

/* SERENE - Gentle float */
@media (hover: hover) and (pointer: fine) {
  .oracle[data-visual-state="serene"] .expression:hover {
    transform: translateY(-3px) scale(1.008) rotate(0);
    filter: brightness(1.05);
  }

  .oracle[data-visual-state="serene"] .answer-note:hover {
    transform: translateY(-1px);
    letter-spacing: 0.14em;
  }
}

.oracle[data-visual-state="serene"] .expression:active {
  transform: translateY(0) scale(0.992) rotate(0);
  animation: serene-ripple 600ms ease-out;
}

@keyframes serene-ripple {
  0% { filter: brightness(1); }
  30% { filter: brightness(1.12); }
  100% { filter: brightness(1); }
}

/* ELECTRIC - Quick pulse */
@media (hover: hover) and (pointer: fine) {
  .oracle[data-visual-state="electric"] .expression:hover {
    transform: translateY(0) scale(1.012) rotate(0);
    filter: brightness(1.15) saturate(1.2);
    text-shadow: 0.025em 0.035em 0 var(--accent-soft), 0 0 15px var(--accent);
  }

  .oracle[data-visual-state="electric"] .answer-note:hover {
    color: var(--accent);
    letter-spacing: 0.16em;
  }
}

.oracle[data-visual-state="electric"] .expression:active {
  transform: translateY(0) scale(0.985) rotate(0);
  animation: electric-zap 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes electric-zap {
  0%, 100% { filter: brightness(1); }
  25% { filter: brightness(1.4); }
  50% { filter: brightness(0.9); }
  75% { filter: brightness(1.3); }
}

/* BLOOM - Organic grow */
@media (hover: hover) and (pointer: fine) {
  .oracle[data-visual-state="bloom"] .expression:hover {
    transform: translateY(0) scale(1.01) rotate(-0.5deg);
    filter: brightness(1.06);
  }

  .oracle[data-visual-state="bloom"] .answer-note:hover {
    transform: translateY(-2px) scale(1.02);
    color: var(--accent);
  }
}

.oracle[data-visual-state="bloom"] .expression:active {
  transform: translateY(0) scale(0.99) rotate(0);
  animation: bloom-grow 500ms var(--ease-out);
}

@keyframes bloom-grow {
  0%, 100% { transform: translateY(0) scale(0.99) rotate(0); }
  50% { transform: translateY(0) scale(1.02) rotate(2deg); }
}

/* COSMIC - Ethereal glow */
@media (hover: hover) and (pointer: fine) {
  .oracle[data-visual-state="cosmic"] .expression:hover {
    transform: translateY(0) scale(1.008) rotate(0);
    text-shadow: 0 0 25px rgba(199, 125, 255, 0.6), 0 0 40px rgba(199, 125, 255, 0.3);
    filter: brightness(1.1);
  }

  .oracle[data-visual-state="cosmic"] .answer-note:hover {
    color: var(--accent);
    text-shadow: 0 0 10px var(--accent);
  }
}

.oracle[data-visual-state="cosmic"] .expression:active {
  transform: translateY(0) scale(0.995) rotate(0);
  animation: cosmic-shimmer 700ms ease-out;
}

@keyframes cosmic-shimmer {
  0%, 100% {
    text-shadow: 0 0 20px rgba(199, 125, 255, 0.4);
    filter: brightness(1);
  }
  50% {
    text-shadow: 0 0 40px rgba(199, 125, 255, 0.8), 0 0 60px rgba(199, 125, 255, 0.4);
    filter: brightness(1.2);
  }
}

/* ============================================
   NEGATIVE STATES - Dramatic & Restrained
   ============================================ */

/* STORM - Shake */
@media (hover: hover) and (pointer: fine) {
  .oracle[data-visual-state="storm"] .expression:hover {
    transform: translateY(0) scale(1.005) rotate(0);
    filter: brightness(1.1);
  }

  .oracle[data-visual-state="storm"] .answer-note:hover {
    transform: translateY(-1px);
    color: var(--accent);
  }
}

.oracle[data-visual-state="storm"] .expression:active {
  transform: translateY(0) scale(0.99) rotate(0);
  animation: storm-shake 350ms var(--ease-out);
}

@keyframes storm-shake {
  0%, 100% { transform: translateY(0) scale(0.99) translateX(0); }
  20% { transform: translateY(0) scale(0.99) translateX(-3px); }
  40% { transform: translateY(0) scale(0.99) translateX(3px); }
  60% { transform: translateY(0) scale(0.99) translateX(-2px); }
  80% { transform: translateY(0) scale(0.99) translateX(2px); }
}

/* MIDNIGHT - Subtle fade */
@media (hover: hover) and (pointer: fine) {
  .oracle[data-visual-state="midnight"] .expression:hover {
    transform: translateY(0) scale(1.003) rotate(0);
    filter: brightness(1.15);
  }

  .oracle[data-visual-state="midnight"] .answer-note:hover {
    opacity: 1;
    letter-spacing: 0.14em;
  }
}

.oracle[data-visual-state="midnight"] .expression:active {
  transform: translateY(0) scale(0.997) rotate(0);
  animation: midnight-pulse 600ms ease-out;
}

@keyframes midnight-pulse {
  0%, 100% { filter: brightness(1); opacity: 1; }
  50% { filter: brightness(1.3); opacity: 0.9; }
}

/* EMBER - Flicker glow */
@media (hover: hover) and (pointer: fine) {
  .oracle[data-visual-state="ember"] .expression:hover {
    transform: translateY(0) scale(1.006) rotate(0);
    text-shadow: 0 0 35px rgba(255, 68, 34, 0.8);
    filter: brightness(1.15);
  }

  .oracle[data-visual-state="ember"] .answer-note:hover {
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent);
  }
}

.oracle[data-visual-state="ember"] .expression:active {
  transform: translateY(0) scale(0.992) rotate(0);
  animation: ember-burn 450ms ease-in-out;
}

@keyframes ember-burn {
  0%, 100% {
    filter: brightness(1);
    text-shadow: 0 0 30px rgba(255, 68, 34, 0.6);
  }
  15% {
    filter: brightness(1.3);
    text-shadow: 0 0 50px rgba(255, 68, 34, 1);
  }
  30% {
    filter: brightness(0.9);
    text-shadow: 0 0 20px rgba(255, 68, 34, 0.4);
  }
  60% {
    filter: brightness(1.2);
    text-shadow: 0 0 45px rgba(255, 68, 34, 0.9);
  }
}

/* FROST - Crystallize */
@media (hover: hover) and (pointer: fine) {
  .oracle[data-visual-state="frost"] .expression:hover {
    transform: translateY(0) scale(1.004) rotate(0);
    filter: brightness(1.08) saturate(1.2);
  }

  .oracle[data-visual-state="frost"] .answer-note:hover {
    transform: translateY(-1px);
    color: var(--accent);
    letter-spacing: 0.16em;
  }
}

.oracle[data-visual-state="frost"] .expression:active {
  transform: translateY(0) scale(0.996) rotate(0);
  animation: frost-freeze 400ms cubic-bezier(0.77, 0, 0.175, 1);
}

@keyframes frost-freeze {
  0% {
    filter: brightness(1);
    transform: translateY(0) scale(0.996) rotate(0);
  }
  50% {
    filter: brightness(1.2) saturate(1.3);
    transform: translateY(0) scale(1.01) rotate(0);
  }
  100% {
    filter: brightness(1);
    transform: translateY(0) scale(0.996) rotate(0);
  }
}

/* VOID - Minimal response */
@media (hover: hover) and (pointer: fine) {
  .oracle[data-visual-state="void"] .expression:hover {
    transform: translateY(0) scale(1.002) rotate(0);
    filter: brightness(1.15);
  }

  .oracle[data-visual-state="void"] .answer-note:hover {
    opacity: 0.8;
  }
}

.oracle[data-visual-state="void"] .expression:active {
  transform: translateY(0) scale(0.998) rotate(0);
  opacity: 0.7;
  transition: transform 100ms linear, opacity 100ms linear;
}

/* ============================================
   ANSWER MARK INTERACTIONS
   ============================================ */

.answer-mark {
  transition: transform 200ms var(--ease-out), opacity 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .expression:hover ~ .answer-mark {
    transform: scale(1.15) rotate(0);
    opacity: 1;
  }
}

.expression:active ~ .answer-mark {
  transform: scale(0.9) rotate(0);
}

/* Specific state overrides for answer-mark */
.oracle[data-visual-state="radiant"] .expression:hover ~ .answer-mark {
  animation: mark-bounce 600ms var(--ease-out);
}

@keyframes mark-bounce {
  0%, 100% { transform: scale(1.15) rotate(0); }
  50% { transform: scale(1.25) rotate(15deg); }
}

.oracle[data-visual-state="cosmic"] .expression:hover ~ .answer-mark {
  filter: drop-shadow(0 0 10px var(--accent));
}

.oracle[data-visual-state="storm"] .expression:active ~ .answer-mark {
  animation: mark-shake 300ms ease-out;
}

@keyframes mark-shake {
  0%, 100% { transform: scale(0.9) rotate(45deg); }
  25% { transform: scale(0.9) rotate(50deg); }
  75% { transform: scale(0.9) rotate(40deg); }
}

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

@media (prefers-reduced-motion: reduce) {
  .expression,
  .answer-note,
  .answer-mark {
    transition: opacity 200ms ease !important;
    animation: none !important;
  }

  .expression:hover,
  .answer-note:hover {
    transform: none !important;
    filter: none !important;
    text-shadow: none !important;
  }

  .expression:active,
  .answer-note:active {
    opacity: 0.8;
  }
}