/**
 * English Mastery Hub - Animate UI Motion & Micro-Interactions Engine
 * Distilled from:
 * - Animate UI (imskyleen/animate-ui) & Motion Primitives (ibelick/motion-primitives)
 * - Anime.js (juliangarnier/anime)
 * - Microkit (microkit.co)
 * Provides:
 * - Spring-physics modal scale-ins & backdrops
 * - Gliding indicator pill for segmented tabs
 * - Auto-height expansion containers
 * - 3D cursor-following tilt cards
 * - Spotlight cursor tracking & glowing border beams
 * - Magnetic button micro-interactions
 * - Audio visualizer dancing equalizer bars
 * - Question palette spring bounce & checkmark draw-in
 * - Rolling numeric counter typography
 * - WCAG Accessibility: Full prefers-reduced-motion support
 */

:root {
  /* Animate UI Spring Timing Curves */
  --emh-spring-snappy: cubic-bezier(0.2, 0.9, 0.3, 1.2);
  --emh-spring-natural: cubic-bezier(0.16, 1, 0.3, 1);
  --emh-spring-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --emh-spring-exit: cubic-bezier(0.4, 0, 0.2, 1);

  /* Tab Pill Theme */
  --emh-tab-pill-bg: rgba(14, 165, 233, 0.15);
  --emh-tab-pill-border: rgba(14, 165, 233, 0.35);
  --emh-tab-pill-glow: rgba(14, 165, 233, 0.2);

  /* Spotlight & Border Beam Theme */
  --emh-spotlight-color: rgba(56, 189, 248, 0.12);
  --emh-border-beam-color-1: #0ea5e9;
  --emh-border-beam-color-2: #6366f1;
}

html[data-theme='light'] {
  --emh-tab-pill-bg: rgba(2, 132, 199, 0.12);
  --emh-tab-pill-border: rgba(2, 132, 199, 0.35);
  --emh-tab-pill-glow: rgba(2, 132, 199, 0.15);
  --emh-spotlight-color: rgba(2, 132, 199, 0.08);
}

/* -------------------------------------------------------------------------- */
/* 1. MODAL DIALOGS (Scale-in & Fluid Exits)                                   */
/* -------------------------------------------------------------------------- */
.emh-dialog-backdrop {
  opacity: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: opacity 0.22s var(--emh-spring-exit), backdrop-filter 0.22s ease;
  will-change: opacity, backdrop-filter;
}

.emh-dialog-backdrop.emh-dialog-open {
  opacity: 1;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.emh-dialog-modal {
  opacity: 0;
  transform: scale(0.95) translateY(12px);
  transition: transform 0.3s var(--emh-spring-natural), opacity 0.25s ease;
  will-change: transform, opacity;
}

.emh-dialog-modal.emh-dialog-open {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.emh-dialog-modal.emh-dialog-closing {
  opacity: 0;
  transform: scale(0.97) translateY(6px);
  transition: transform 0.18s var(--emh-spring-exit), opacity 0.15s ease;
}

/* -------------------------------------------------------------------------- */
/* 2. SLIDING TABS INDICATOR PILL                                             */
/* -------------------------------------------------------------------------- */
.emh-tabs-track {
  position: relative !important;
}

.emh-tab-pill {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
  background: var(--emh-tab-pill-bg);
  border: 1px solid var(--emh-tab-pill-border);
  box-shadow: 0 0 16px var(--emh-tab-pill-glow);
  border-radius: 9999px;
  transition: transform 0.28s var(--emh-spring-natural),
              width 0.28s var(--emh-spring-natural),
              height 0.28s var(--emh-spring-natural),
              opacity 0.2s ease;
  will-change: transform, width, height;
}

/* Ensure tab text renders clearly above the pill */
.emh-tabs-track > button,
.emh-tabs-track > a,
.emh-tabs-track > div {
  position: relative;
  z-index: 2;
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* -------------------------------------------------------------------------- */
/* 3. 3D CARD TILT PHYSICS                                                    */
/* -------------------------------------------------------------------------- */
.emh-tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.12s var(--emh-spring-natural);
}

.emh-tilt-card.emh-tilt-resetting {
  transition: transform 0.45s var(--emh-spring-bounce) !important;
}

.emh-tilt-content {
  transform: translateZ(24px);
  transform-style: preserve-3d;
}

/* -------------------------------------------------------------------------- */
/* 4. AUTO-HEIGHT DISCLOSURE CONTAINER                                        */
/* -------------------------------------------------------------------------- */
.emh-auto-height {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--emh-spring-natural), opacity 0.25s ease;
  opacity: 0;
  overflow: hidden;
}

.emh-auto-height.emh-expanded {
  grid-template-rows: 1fr;
  opacity: 1;
}

.emh-auto-height-inner {
  min-height: 0;
}

/* Dashboard Curriculum Accordion Spring AutoHeight */
.skill-accordion-body {
  display: grid !important;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.35s var(--emh-spring-natural), opacity 0.25s ease;
  overflow: hidden;
  opacity: 1;
}

.skill-accordion-body.is-collapsed {
  grid-template-rows: 0fr !important;
  opacity: 0 !important;
  pointer-events: none;
}

.skill-accordion-body > * {
  min-height: 0;
  overflow: hidden;
}

.btn-skill-toggle .lucide-chevron-down {
  transition: transform 0.35s var(--emh-spring-bounce);
}

/* -------------------------------------------------------------------------- */
/* 5. NUMERIC ROLL & PULSE BADGES                                             */
/* -------------------------------------------------------------------------- */
.emh-number-pulse {
  animation: emhNumberBounce 0.4s var(--emh-spring-bounce);
}

@keyframes emhNumberBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.emh-timer-urgent {
  animation: emhTimerHeartbeat 1s infinite var(--emh-spring-natural);
  color: #ef4444 !important;
}

@keyframes emhTimerHeartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* -------------------------------------------------------------------------- */
/* 7. SPOTLIGHT CURSOR EFFECT & BORDER GLOW (21st.dev / Magic UI Standard)     */
/* -------------------------------------------------------------------------- */
.emh-spotlight-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Surface Soft Spotlight */
.emh-spotlight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    520px circle at var(--mouse-x, -9999px) var(--mouse-y, -9999px),
    var(--emh-spotlight-color, rgba(56, 189, 248, 0.12)),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

/* Glowing Border Illumination following cursor */
.emh-spotlight-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    360px circle at var(--mouse-x, -9999px) var(--mouse-y, -9999px),
    rgba(56, 189, 248, 0.55),
    transparent 70%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.emh-spotlight-card:hover::before,
.emh-spotlight-card:hover::after {
  opacity: 1;
}

.emh-spotlight-card > * {
  position: relative;
  z-index: 3;
}

/* -------------------------------------------------------------------------- */
/* 8. BORDER BEAM EFFECT (Motion Primitives)                                  */
/* -------------------------------------------------------------------------- */
.emh-border-beam {
  position: relative;
  border-radius: inherit;
}

.emh-border-beam::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--beam-angle, 0deg) at 50% 50%,
    transparent 0deg,
    var(--emh-border-beam-color-1) 60deg,
    var(--emh-border-beam-color-2) 120deg,
    transparent 180deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  opacity: 0.65;
  animation: emhBorderBeamRotate 7s linear infinite;
}

@keyframes emhBorderBeamRotate {
  0% { --beam-angle: 0deg; transform: rotate(0deg); }
  100% { --beam-angle: 360deg; transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------- */
/* 9. MAGNETIC BUTTONS (Microkit)                                             */
/* -------------------------------------------------------------------------- */
.emh-magnetic {
  display: inline-flex;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.25s var(--emh-spring-natural);
}

.emh-magnetic.emh-magnetic-resetting {
  transition: transform 0.4s var(--emh-spring-bounce) !important;
}

/* -------------------------------------------------------------------------- */
/* 10. AUDIO EQUALIZER VISUALIZER BARS (Microkit)                             */
/* -------------------------------------------------------------------------- */
.emh-audio-equalizer {
  display: inline-flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 16px;
  width: 16px;
  vertical-align: middle;
}

.emh-audio-equalizer .eq-bar {
  width: 2.5px;
  background-color: currentColor;
  border-radius: 9999px;
  height: 4px;
  transition: height 0.15s ease;
  will-change: height;
}

.emh-audio-equalizer.is-playing .eq-bar:nth-child(1) {
  animation: emhEqBar 0.75s ease-in-out infinite alternate;
}
.emh-audio-equalizer.is-playing .eq-bar:nth-child(2) {
  animation: emhEqBar 0.95s ease-in-out infinite alternate 0.15s;
}
.emh-audio-equalizer.is-playing .eq-bar:nth-child(3) {
  animation: emhEqBar 0.65s ease-in-out infinite alternate 0.3s;
}
.emh-audio-equalizer.is-playing .eq-bar:nth-child(4) {
  animation: emhEqBar 0.85s ease-in-out infinite alternate 0.2s;
}

@keyframes emhEqBar {
  0% { height: 3px; }
  100% { height: 15px; }
}

/* -------------------------------------------------------------------------- */
/* 11. QUESTION PALETTE SPRING BOUNCE & CHECKMARK (Microkit)                  */
/* -------------------------------------------------------------------------- */
.emh-palette-pop {
  animation: emhPalettePopAnim 0.32s var(--emh-spring-bounce) !important;
}

@keyframes emhPalettePopAnim {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

.emh-check-draw {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: emhCheckStroke 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes emhCheckStroke {
  to { stroke-dashoffset: 0; }
}

/* -------------------------------------------------------------------------- */
/* 13. DYNAMIC TEXT LOOP TICKER (Motion Primitives)                           */
/* -------------------------------------------------------------------------- */
.emh-text-loop-container {
  display: inline-flex;
  align-items: center;
  position: relative;
  vertical-align: middle;
  overflow: hidden;
  height: 1.4em;
  line-height: 1.4em;
  min-width: 220px;
}

.emh-text-loop-item {
  position: absolute;
  left: 0;
  top: 0;
  width: max-content;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(105%);
  transition: transform 0.45s var(--emh-spring-natural), opacity 0.35s ease;
  will-change: transform, opacity;
  pointer-events: none;
}

.emh-text-loop-item.is-active {
  opacity: 1;
  transform: translateY(0%);
  pointer-events: auto;
}

.emh-text-loop-item.is-exit {
  opacity: 0;
  transform: translateY(-105%);
}

/* -------------------------------------------------------------------------- */
/* 14. TEXT SHIMMER EFFECT (Motion Primitives)                                */
/* -------------------------------------------------------------------------- */
.emh-text-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.8) 0%,
    #38bdf8 35%,
    #818cf8 50%,
    rgba(255, 255, 255, 0.8) 75%
  );
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: emhTextShimmer 4s linear infinite;
}

@keyframes emhTextShimmer {
  to { background-position: 200% center; }
}

/* -------------------------------------------------------------------------- */
/* 15. WRITING WORD COUNT MILESTONE HALO (Microkit)                           */
/* -------------------------------------------------------------------------- */
.emh-milestone-reached {
  animation: emhMilestoneGlow 0.8s var(--emh-spring-bounce);
  border-color: #10b981 !important;
  color: #10b981 !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.35) !important;
}

@keyframes emhMilestoneGlow {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(16, 185, 129, 0); }
  50% { transform: scale(1.18); box-shadow: 0 0 24px rgba(16, 185, 129, 0.55); }
  100% { transform: scale(1); box-shadow: 0 0 16px rgba(16, 185, 129, 0.35); }
}

/* -------------------------------------------------------------------------- */
/* 16. CANVAS CELEBRATION CONFETTI                                             */
/* -------------------------------------------------------------------------- */
.emh-confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 10000;
}

/* -------------------------------------------------------------------------- */
/* 12. REDUCED MOTION ACCESSIBILITY (Zero-Displacement Mode)                   */
/* -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .emh-tilt-card {
    transform: none !important;
  }

  .emh-dialog-modal {
    transform: none !important;
  }

  .emh-tab-pill {
    transition: none !important;
  }

  .emh-spotlight-card::before {
    display: none !important;
  }

  .emh-border-beam::after {
    animation: none !important;
  }

  .emh-magnetic {
    transform: none !important;
  }

  .emh-audio-equalizer.is-playing .eq-bar {
    animation: none !important;
    height: 8px !important;
  }

  .emh-palette-pop {
    animation: none !important;
  }

  .emh-text-loop-item {
    transition: none !important;
  }

  .emh-text-shimmer {
    animation: none !important;
    background: none !important;
    color: inherit !important;
  }

  .emh-milestone-reached {
    animation: none !important;
  }
}