/* ═══════════════════════════════════════════════════════════════════════════
   LEXISCAN — ANIMATIONS
   Scroll-triggered reveals, page transitions, micro-interactions
═══════════════════════════════════════════════════════════════════════════ */

/* ─── AOS (Animate On Scroll) – manual implementation ─────────────────────── */
[data-aos] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-aos="scale-in"] {
  opacity: 0;
  transform: scale(0.94) translateY(12px);
}

[data-aos="fade-left"] {
  opacity: 0;
  transform: translateX(-30px);
}

[data-aos="fade-right"] {
  opacity: 0;
  transform: translateX(30px);
}

[data-aos].aos-animate {
  opacity: 1;
  transform: none;
}

/* ─── Feature card staggered entrance ─────────────────────────────────────── */
.feature-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s,
              box-shadow 0.3s;
}

.feature-card.visible { opacity: 1; transform: translateY(0); }

/* ─── Step entrance ─────────────────────────────────────────────────────── */
.step {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.step.visible { opacity: 1; transform: translateY(0); }

/* ─── List card entrance ─────────────────────────────────────────────────── */
.list-card {
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s,
              box-shadow 0.3s;
}

.list-card.visible { opacity: 1; transform: translateY(0) scale(1); }

/* ─── Stat card entrance ─────────────────────────────────────────────────── */
.stat-card, .stats-card-full {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s,
              box-shadow 0.3s;
}

.stat-card.visible, .stats-card-full.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Number count-up animation ─────────────────────────────────────────── */
.stat-value[data-count-target] {
  display: inline-block;
}

/* ─── Flashcard flip sound effect visual ───────────────────────────────── */
.flashcard-scene.flip-effect .flashcard {
  transform: rotateY(180deg);
}

/* ─── Card shake on wrong answer ───────────────────────────────────────── */
@keyframes cardShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-12px) rotate(-1deg); }
  30% { transform: translateX(10px) rotate(1deg); }
  45% { transform: translateX(-8px) rotate(-0.5deg); }
  60% { transform: translateX(7px) rotate(0.5deg); }
  75% { transform: translateX(-5px); }
  90% { transform: translateX(4px); }
}

.type-card.shake {
  animation: cardShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* ─── Correct answer burst ──────────────────────────────────────────────── */
@keyframes correctBurst {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  70% { box-shadow: 0 0 0 14px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.type-card.correct-burst {
  animation: correctBurst 0.5s ease-out;
}

/* ─── Navigation active indicator ──────────────────────────────────────── */
.nav-link {
  position: relative;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  animation: indicatorSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes indicatorSlide {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ─── Page transition ──────────────────────────────────────────────────── */
.page {
  animation: pageFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Upload zone pulse while processing ───────────────────────────────── */
@keyframes processingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); }
  50% { box-shadow: 0 0 0 8px rgba(245,166,35,0.1); }
}

.upload-zone.processing {
  border-color: var(--accent);
  animation: processingPulse 2s infinite;
}

/* ─── Progress bar shimmer ──────────────────────────────────────────────── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.ocr-progress-bar.active {
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    var(--accent-hover) 25%,
    #ffd17a 50%,
    var(--accent-hover) 75%,
    var(--accent) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

/* ─── Hero card interactive tilt ───────────────────────────────────────── */
.hero-card-stack {
  transform-style: preserve-3d;
  transition: transform 0.1s linear;
}

/* ─── Button ripple effect ──────────────────────────────────────────────── */
.btn-primary, .btn-ghost, .btn-danger {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transform: scale(0);
  animation: rippleEffect 0.6s linear;
  pointer-events: none;
}

@keyframes rippleEffect {
  to { transform: scale(4); opacity: 0; }
}

/* ─── Word pair row entrance ────────────────────────────────────────────── */
.word-pair-row {
  animation: rowSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes rowSlideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ─── Flashcard entrance ────────────────────────────────────────────────── */
@keyframes cardSlideIn {
  from { opacity: 0; transform: translateX(40px) scale(0.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

.flashcard.new-card {
  animation: cardSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Type mode card slide ──────────────────────────────────────────────── */
@keyframes typeCardSlide {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.type-card.new-question {
  animation: typeCardSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── Score animation (number fly in) ──────────────────────────────────── */
@keyframes scoreAppear {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

.result-stat strong {
  animation: scoreAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.result-stat:nth-child(1) strong { animation-delay: 0.1s; }
.result-stat:nth-child(2) strong { animation-delay: 0.2s; }
.result-stat:nth-child(3) strong { animation-delay: 0.3s; }

/* ─── Confetti (CSS only) ───────────────────────────────────────────────── */
.confetti-piece {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  pointer-events: none;
  z-index: 9999;
  animation: confettiFall linear forwards;
}

@keyframes confettiFall {
  0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* ─── Skeleton loading ──────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-elevated) 0%,
    var(--bg-hover) 50%,
    var(--bg-elevated) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeletonShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ─── OCR step transition ───────────────────────────────────────────────── */
.ocr-step {
  transition: color 0.4s ease;
}

.ocr-step.done::before {
  content: '✓ ';
  color: var(--success);
}

/* ─── Mode card select animation ───────────────────────────────────────── */
.mode-card.selected {
  border-color: var(--accent);
  background: var(--accent-muted);
  box-shadow: 0 0 0 2px var(--accent-glow), var(--shadow-md);
}

/* ─── Accessibility: reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero-orb { animation: none; }
  .loading-logo .logo-icon { animation: none; }
  .badge-dot { animation: none; }
  .flashcard { transition: none; }