/* ══════════════════════════════════════════════════════════════════
   MICROINTERACTIONS — cross-app polish para Medicina Toroidal

   Filosofía: pequeños gestos que dan sensación de vivo sin distraer.
   CSS-only para no impactar performance. Todo respeta
   prefers-reduced-motion.

   Aplica a:
   - .mood-chip (ritual-del-alba) — chips selectores
   - .reading-card (ritual-del-alba) — cards del análisis
   - .portal-card (home) — portales
   - .stat-card (perfil) — métricas
   - .library-shelf (perfil) — repisas
   - .action-card (perfil, otros) — call-to-actions
   - .toro-mini-chip (perfil) — pills pequeñas

   ══════════════════════════════════════════════════════════════════ */

/* ── Variable global para custom timing ─────────────────────── */
:root {
  --mi-quick: 180ms;
  --mi-medium: 320ms;
  --mi-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Chips (mood, oracle, library meta) ─────────────────────── */
.mood-chip,
.altar-element-chip,
.altar-oracle-chip,
.toro-mini-chip,
.library-meta-pill,
.flor-tag {
  transition:
    transform var(--mi-quick) var(--mi-easing),
    box-shadow var(--mi-medium) var(--mi-easing),
    border-color var(--mi-quick) ease,
    background-color var(--mi-quick) ease;
  will-change: transform;
}
.mood-chip:hover,
.altar-element-chip:hover,
.altar-oracle-chip:hover,
.toro-mini-chip:hover,
.library-meta-pill:hover,
.flor-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(240, 204, 96, 0.10), 0 0 14px rgba(184, 160, 248, 0.10);
}
.mood-chip:active,
.altar-element-chip:active,
.altar-oracle-chip:active,
.toro-mini-chip:active,
.library-meta-pill:active,
.flor-tag:active {
  transform: translateY(0) scale(0.98);
}
.mood-chip.active {
  animation: chipBreathe 3s ease-in-out infinite;
}

/* ── Cards (reading, portal, stat, library, action) ─────────── */
.reading-card,
.portal-card,
.stat-card,
.library-shelf,
.action-card,
.altar-card {
  transition:
    transform var(--mi-medium) var(--mi-easing),
    box-shadow var(--mi-medium) var(--mi-easing),
    border-color var(--mi-quick) ease;
  will-change: transform;
}
.stat-card:hover,
.action-card:hover,
.library-shelf:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.35),
    0 0 24px rgba(240, 204, 96, 0.12);
}
.portal-card:hover {
  /* Ya tiene su transform propio; sumamos halo dorado */
  box-shadow: 0 0 36px rgba(240, 204, 96, 0.15);
}
.altar-card:hover {
  transform: translateY(-1px);
  border-color: rgba(240, 204, 96, 0.35);
}

/* ── Botones de acción (reset, save, share, eclipse-play, etc.) ─ */
.reset-link-btn,
.daily-card-button,
.sim-shortcut,
.sim-playback-btn,
.sim-view-btn,
.sim-share-btn,
.sim-fullscreen-btn,
.altar-flower-chip {
  transition:
    transform var(--mi-quick) var(--mi-easing),
    box-shadow var(--mi-medium) ease,
    background-color var(--mi-quick) ease,
    color var(--mi-quick) ease,
    border-color var(--mi-quick) ease;
}
.reset-link-btn:hover,
.sim-shortcut:hover,
.sim-playback-btn:hover,
.sim-view-btn:hover,
.sim-share-btn:hover,
.sim-fullscreen-btn:hover,
.altar-flower-chip:hover {
  transform: translateY(-1px);
}
.reset-link-btn:active,
.sim-shortcut:active,
.sim-playback-btn:active,
.sim-view-btn:active,
.altar-flower-chip:active {
  transform: translateY(0) scale(0.97);
}

/* ── Estado activo / seleccionado: latido sutil ───────────── */
.sim-view-btn.is-active,
.sim-playback-btn.is-active,
.sim-shortcut.is-active {
  animation: chipBreathe 3.4s ease-in-out infinite;
}

/* ── Animaciones ────────────────────────────────────────────── */
@keyframes chipBreathe {
  0%, 100% {
    box-shadow: 0 0 12px rgba(240, 204, 96, 0.18);
  }
  50% {
    box-shadow: 0 0 22px rgba(240, 204, 96, 0.32);
  }
}

/* Ripple sutil al hacer click en cards principales (efecto pseudo-tap) */
.reading-card.s-carta,
.reading-card.s-mantra,
.daily-card-button {
  position: relative;
  overflow: hidden;
}

/* ── Tap feedback general (mobile) ──────────────────────────── */
@media (hover: none) {
  .reading-card:active,
  .stat-card:active,
  .action-card:active,
  .library-shelf:active,
  .altar-card:active {
    transform: scale(0.985);
    transition: transform 100ms ease;
  }
}

/* ── prefers-reduced-motion: animaciones suaves o nulas ────── */
@media (prefers-reduced-motion: reduce) {
  .mood-chip,
  .altar-element-chip,
  .altar-oracle-chip,
  .toro-mini-chip,
  .library-meta-pill,
  .flor-tag,
  .reading-card,
  .portal-card,
  .stat-card,
  .library-shelf,
  .action-card,
  .altar-card,
  .reset-link-btn,
  .sim-shortcut,
  .sim-playback-btn,
  .sim-view-btn,
  .sim-share-btn,
  .sim-fullscreen-btn,
  .altar-flower-chip {
    transition-duration: 0.15s !important;
  }
  .mood-chip:hover,
  .stat-card:hover,
  .action-card:hover,
  .library-shelf:hover,
  .portal-card:hover,
  .altar-card:hover,
  .reset-link-btn:hover,
  .sim-view-btn:hover {
    transform: none !important;
  }
  .mood-chip.active,
  .sim-view-btn.is-active,
  .sim-playback-btn.is-active,
  .sim-shortcut.is-active {
    animation: none !important;
  }
}