/* ============================================
   ANIMATIONS.CSS — Modern Glassmorphism Animations
   Clean, smooth, minimal motion design
   ============================================ */

/* ===== HERO LETTER REVEAL ===== */
.hero-title .letter {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(30px);
  animation: letterReveal 0.7s var(--ease) forwards;
}

@keyframes letterReveal {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

.hero-title .letter.revealed {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* ===== SCROLL REVEAL — smooth fade up ===== */
.scroll-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s var(--ease);
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.scroll-reveal:nth-child(1) { transition-delay: 0s; }
.scroll-reveal:nth-child(2) { transition-delay: 0.08s; }
.scroll-reveal:nth-child(3) { transition-delay: 0.16s; }
.scroll-reveal:nth-child(4) { transition-delay: 0.24s; }
.scroll-reveal:nth-child(5) { transition-delay: 0.32s; }
.scroll-reveal:nth-child(6) { transition-delay: 0.40s; }

/* ===== CATEGORY CARD ENTRANCE ===== */
.category-card {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  transition:
    opacity 0.5s ease,
    transform 0.5s var(--ease),
    box-shadow 0.4s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}

.category-card.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.category-card:nth-child(1) { transition-delay: 0.05s; }
.category-card:nth-child(2) { transition-delay: 0.12s; }
.category-card:nth-child(3) { transition-delay: 0.19s; }

/* ===== WORD CARD ENTRANCE ===== */
.card-wrapper {
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transition: opacity 0.5s ease, transform 0.5s var(--ease);
}

.card-wrapper.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ===== QUOTE CARD ENTRANCE ===== */
.quote-card {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s var(--ease),
    box-shadow 0.4s ease;
}

.quote-card.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ===== SECTION HEADER ENTRANCE ===== */
.section-header {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s var(--ease);
}

.section-header.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ===== DICTIONARY CONTROLS ENTRANCE ===== */
.dict-controls {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s var(--ease);
}

.dict-controls.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ===== HERO ELEMENTS ENTRANCE ===== */
.hero-badge {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp 0.6s 0.2s var(--ease) forwards;
}

.hero-line {
  opacity: 0;
  transform: scaleX(0);
  animation: lineExpand 0.5s 0.6s var(--ease) forwards;
}

.hero-subtitle {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp 0.6s 0.8s var(--ease) forwards;
}

.hero-btn {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp 0.6s 1s var(--ease) forwards;
}

.hero-stats {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp 0.6s 1.2s var(--ease) forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lineExpand {
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* ===== AMBIENT GLOW FLOAT ===== */
@keyframes ambientFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(30px, -20px) scale(1.05); }
  66%      { transform: translate(-20px, 15px) scale(0.95); }
}

@keyframes ambientFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-25px, 20px) scale(0.95); }
  66%      { transform: translate(15px, -20px) scale(1.05); }
}

@keyframes ambientFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(20px, -15px) scale(1.03); }
}

/* ===== PAGE TRANSITION ===== */
@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cards-grid {
  animation: pageIn 0.4s ease;
}

/* ===== COUNTER ANIMATION ===== */
.counter-value {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  transition: transform 0.15s ease;
}

.counter-value.counting {
  animation: counterPulse 0.1s ease;
}

@keyframes counterPulse {
  50% { transform: scale(1.05); }
}

/* ===== TILT EFFECT ===== */
.card-wrapper:hover .card-front {
  transition: box-shadow 0.4s ease, border-color 0.3s ease;
}

/* ===== EMBER GLOW PULSE (dark theme accent) ===== */
@keyframes emberGlow {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 0.9; }
}

[data-theme="dark"] .hero-line {
  animation: lineExpand 0.5s 0.6s var(--ease) forwards, emberGlow 4s 2s ease-in-out infinite;
}

/* ===== REDUCED MOTION ===== */
@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;
  }

  .hero-title .letter {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .scroll-reveal,
  .category-card,
  .card-wrapper,
  .quote-card,
  .section-header,
  .dict-controls,
  .hero-badge,
  .hero-line,
  .hero-subtitle,
  .hero-btn,
  .hero-stats {
    opacity: 1;
    transform: none;
  }

  .hero-decorations {
    display: none;
  }
}