/* ================================================================
   ANIMATIONS.CSS — AlignPath motion & micro-interaction system
   Entrance animations, scroll-triggered reveals, hover effects,
   celebrations, and ambient motion. Does NOT own layout or color.
   ================================================================ */

/* ---- BASE: elements hidden until triggered ---- */
.anim-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.anim-on-scroll.anim-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Directional variants */
.anim-slide-left {
  transform: translateX(-36px);
}
.anim-slide-left.anim-visible {
  transform: translateX(0);
}

.anim-slide-right {
  transform: translateX(36px);
}
.anim-slide-right.anim-visible {
  transform: translateX(0);
}

.anim-scale-in {
  transform: scale(0.92);
}
.anim-scale-in.anim-visible {
  transform: scale(1);
}

.anim-fade-in {
  transform: none;
}
.anim-fade-in.anim-visible {
  opacity: 1;
}

/* ---- STAGGER DELAYS for child elements ---- */
.anim-stagger-1 { transition-delay: 0.08s; }
.anim-stagger-2 { transition-delay: 0.16s; }
.anim-stagger-3 { transition-delay: 0.24s; }
.anim-stagger-4 { transition-delay: 0.32s; }
.anim-stagger-5 { transition-delay: 0.40s; }
.anim-stagger-6 { transition-delay: 0.48s; }
.anim-stagger-7 { transition-delay: 0.56s; }
.anim-stagger-8 { transition-delay: 0.64s; }

/* ---- ENTRANCE KEYFRAMES ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-6px); }
}

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

/* ---- PAGE ENTRANCE (auto-play on load) ---- */
.anim-entrance {
  animation: fadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.anim-entrance-delay-1 { animation-delay: 0.1s; }
.anim-entrance-delay-2 { animation-delay: 0.2s; }
.anim-entrance-delay-3 { animation-delay: 0.35s; }
.anim-entrance-delay-4 { animation-delay: 0.5s; }

/* ---- CARD HOVER GLOW ---- */
.glow-card {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              box-shadow 0.35s ease;
}

.glow-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(245, 158, 11, 0.12),
              0 2px 8px rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.3);
}

/* Subtle ambient glow on focused/active states */
.glow-focus:focus-within {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15),
              0 4px 16px rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.4);
}

/* ---- BUTTON GLOW EFFECTS ---- */
.glow-btn {
  position: relative;
  transition: transform 0.22s ease, box-shadow 0.3s ease;
}

.glow-btn::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(245, 158, 11, 0.4),
    rgba(239, 68, 68, 0.2),
    rgba(245, 158, 11, 0.3));
  opacity: 0;
  z-index: -1;
  filter: blur(12px);
  transition: opacity 0.3s ease;
}

.glow-btn:hover::after {
  opacity: 1;
}

.glow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(245, 158, 11, 0.3);
}

/* ---- PROGRESS BAR GLOW ---- */
.progress-glow {
  position: relative;
}

.progress-glow::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: var(--accent, #F59E0B);
  border-radius: 50%;
  filter: blur(6px);
  opacity: 0.7;
  animation: progressPulse 1.5s ease-in-out infinite;
}

@keyframes progressPulse {
  0%, 100% { opacity: 0.5; transform: translateY(-50%) scale(1); }
  50%      { opacity: 0.9; transform: translateY(-50%) scale(1.3); }
}

/* ---- QUIZ STEP TRANSITIONS ---- */
@keyframes quizStepEnter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes quizStepExit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
  }
}

.quiz-step-animate-in {
  animation: quizStepEnter 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.quiz-step-animate-out {
  animation: quizStepExit 0.25s ease-in both;
}

/* ---- OPTION TILE SELECT PULSE ---- */
@keyframes selectPulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
  70%  { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.option-tile.just-selected {
  animation: selectPulse 0.5s ease-out;
}

/* ---- MATCH CARD SCORE COUNTER ---- */
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.score-animate {
  animation: countUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ---- CELEBRATION CONFETTI CANVAS ---- */
.confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}

/* ---- MICRO-CELEBRATION: step complete ---- */
@keyframes stepCelebrate {
  0%   { opacity: 0; transform: scale(0.5); }
  50%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.5); }
}

.step-celebrate {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  pointer-events: none;
  z-index: 500;
  animation: stepCelebrate 0.8s ease-out forwards;
}

/* ---- AMBIENT FLOATING PARTICLES ---- */
@keyframes floatParticle {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.3; }
  25%      { transform: translate(10px, -20px) rotate(90deg); opacity: 0.6; }
  50%      { transform: translate(-5px, -40px) rotate(180deg); opacity: 0.4; }
  75%      { transform: translate(15px, -60px) rotate(270deg); opacity: 0.2; }
}

.ambient-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ambient-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.25);
  animation: floatParticle var(--particle-duration, 8s) var(--particle-delay, 0s) ease-in-out infinite;
}

/* ---- LOADING SHIMMER ---- */
.loading-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(245, 158, 11, 0.08) 50%,
    rgba(255,255,255,0.03) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
}

/* ---- LOADING PULSE RING ---- */
@keyframes pulseRing {
  0%   { transform: scale(0.8); opacity: 0.8; }
  50%  { transform: scale(1.1); opacity: 0.3; }
  100% { transform: scale(0.8); opacity: 0.8; }
}

.loading-pulse-ring {
  width: 56px;
  height: 56px;
  border: 3px solid rgba(245, 158, 11, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  animation: pulseRing 2s ease-in-out infinite;
  position: relative;
}

.loading-pulse-ring::before {
  content: '';
  width: 36px;
  height: 36px;
  border: 3px solid transparent;
  border-top-color: var(--accent, #F59E0B);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---- LOADING TEXT PHASES ---- */
@keyframes loadingPhase {
  0%, 30%   { opacity: 1; transform: translateY(0); }
  35%, 100% { opacity: 0; transform: translateY(-8px); }
}

.loading-phase {
  position: absolute;
  animation: loadingPhase 6s ease-in-out infinite;
}

.loading-phase:nth-child(2) { animation-delay: 2s; }
.loading-phase:nth-child(3) { animation-delay: 4s; }

/* ---- MOTIVATIONAL MICROCOPY FADE ---- */
@keyframes motivationalFade {
  0%, 10%  { opacity: 0; transform: translateY(6px); }
  15%, 85% { opacity: 1; transform: translateY(0); }
  90%, 100%{ opacity: 0; transform: translateY(-6px); }
}

.motivational-copy {
  animation: motivationalFade 4s ease-in-out;
  font-size: 0.85rem;
  color: var(--accent-soft, #FCD34D);
  font-weight: 600;
  text-align: center;
}

/* ---- BADGE / TAG SHIMMER ---- */
.badge-shimmer {
  position: relative;
  overflow: hidden;
}

.badge-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(245, 158, 11, 0.15),
    transparent
  );
  animation: shimmer 3s ease-in-out infinite;
}

/* ---- REDUCE MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  .anim-on-scroll,
  .anim-entrance,
  .glow-card,
  .glow-btn,
  .ambient-particle,
  .quiz-step-animate-in,
  .quiz-step-animate-out,
  .option-tile.just-selected,
  .step-celebrate,
  .loading-shimmer,
  .loading-pulse-ring,
  .badge-shimmer {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .progress-glow::after {
    animation: none;
  }
}