/* ============================================================
   PRATT SUTTHIPITAK — ANIMATIONS
   animations.css: scroll reveals, transitions, hover effects
   WCAG 2.1 AA compliant
   ============================================================

   WCAG 2.3.3 (AAA) / Best Practice:
   All animations respect prefers-reduced-motion.
   No content is hidden due to animation states — JS adds
   .visible class and the reduced-motion query disables all
   transforms, ensuring content is accessible regardless.
   ============================================================ */


/* ── Scroll Reveal Base ─────────────────────────────────────── */
/* IMPORTANT: Elements start visible if JS hasn't run (no-js safety).
   The JS observer adds .visible class. reduced-motion skips animations. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  /* Ensure content is discoverable even before animation */
  will-change: opacity, transform;
}

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

/* Stagger delays — mild values to avoid long waits for keyboard users */
.reveal-d1 { transition-delay:  80ms; }
.reveal-d2 { transition-delay: 160ms; }
.reveal-d3 { transition-delay: 240ms; }
.reveal-d4 { transition-delay: 320ms; }
.reveal-d5 { transition-delay: 400ms; }
.reveal-d6 { transition-delay: 480ms; }

/* Fade only (no translate) */
.reveal-fade {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.reveal-fade.visible { opacity: 1; }

/* Scale in */
.reveal-scale {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}


/* ── Page Load Animation ────────────────────────────────────── */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-eyebrow  { animation: heroFadeUp 0.7s var(--ease-out) 0.10s both; }
.hero-headline { animation: heroFadeUp 0.8s var(--ease-out) 0.20s both; }
.hero-sub      { animation: heroFadeUp 0.8s var(--ease-out) 0.35s both; }


/* ── Testimonial Slide ──────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── Hover Underline Slide ──────────────────────────────────── */
.hover-underline {
  position: relative;
  display: inline;
}

.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease);
}

.hover-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}


/* ── Image Lazy Load ────────────────────────────────────────── */
/* WCAG 1.4.4 / graceful degradation:
   Images default to visible. The .lazy-pending class is added by JS
   before load, then removed on load. This means images show immediately
   if JS fails, never trapping content in an invisible state.            */

img[loading="lazy"].lazy-pending {
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}

img[loading="lazy"].loaded {
  opacity: 1;
}


/* ── Stat Count-Up ──────────────────────────────────────────── */
.stat-num[data-target] {
  transition: color var(--dur-base) var(--ease);
}


/* ── Interactive Cursors ────────────────────────────────────── */
a, button, [role="button"] {
  cursor: pointer;
}


/* ── Reduced Motion ─────────────────────────────────────────── */
/* WCAG 2.3.3 (Best Practice) + respects OS accessibility preference.
   When prefers-reduced-motion is set, ALL animation and transition
   is disabled. Content is immediately visible and fully readable.       */
@media (prefers-reduced-motion: reduce) {
  /* Disable all transitions globally */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveal elements: make immediately visible */
  .reveal,
  .reveal-fade,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Hero: show immediately without animation */
  .hero-eyebrow,
  .hero-headline,
  .hero-sub {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Testimonials: disable slide animation */
  .testimonial-slide {
    animation: none;
  }

  /* Images: always fully visible */
  img[loading="lazy"].lazy-pending {
    opacity: 1;
    transition: none;
  }

  /* Hover card lifts: disable */
  .discipline-card:hover,
  .client-card:hover,
  .card:hover {
    transform: none;
  }

  /* Image scale on hover: disable */
  .discipline-card:hover .discipline-card-img,
  .client-card:hover .client-card-img,
  .card:hover .card-img {
    transform: none;
  }

  /* Dot scale: disable */
  .testimonial-dot.active::before {
    transform: none;
  }
}