/* animations.css */
/* Keyframe animations and reusable transition utilities */
/* No component styles. Animations and transitions only. */
/* Animate transform and opacity only — never layout properties */

/* ============================================================
   KEYFRAME ANIMATIONS
   ============================================================ */

/* Fade In — modal, dropdown */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Slide In From Right — burger menu open */
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* Slide Out To Right — burger menu close */
@keyframes slideOutRight {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

/* Scale In — modal container entrance */
@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* Fade Up — section content on scroll */
@keyframes fadeUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ============================================================
   UTILITY ANIMATION CLASSES
   ============================================================ */

.animate-fade-in {
  animation: fadeIn var(--transition-base) ease forwards;
}

.animate-scale-in {
  animation: scaleIn var(--transition-base) ease forwards;
}

.animate-fade-up {
  animation: fadeUp var(--transition-slow) ease forwards;
}

/* ============================================================
   REUSABLE TRANSITION UTILITIES
   ============================================================ */

.transition-fast {
  transition: all var(--transition-fast);
}

.transition-base {
  transition: all var(--transition-base);
}

.transition-slow {
  transition: all var(--transition-slow);
}

/* ============================================================
   ARROW ROTATION — Accordion and expandable sections
   ============================================================ */

.arrow--default {
  transform: rotate(0deg);
  transition: transform var(--transition-base);
}

.arrow--rotated {
  transform: rotate(180deg);
  transition: transform var(--transition-base);
}

/* ============================================================
   BLUR OVERLAY — Modal background
   ============================================================ */

.page-blurred {
  filter: blur(4px);
  transition: filter var(--transition-base);
  pointer-events: none;
}

/* ============================================================
   SCROLL ANIMATIONS — Applied by IntersectionObserver in main.js
   ============================================================ */

.services,
.reviews,
.trial,
.faq,
.journey,
.footer,
.services__card,
.reviews__item,
.faq__item {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
}

.services.is-visible,
.reviews.is-visible,
.trial.is-visible,
.faq.is-visible,
.journey.is-visible,
.footer.is-visible,
.services__card.is-visible,
.reviews__item.is-visible,
.faq__item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   PREFERS REDUCED MOTION — Override all animations and transitions
   ============================================================ */

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