/* =============================================================
   ANIMATIONS — Lumière Studio
   All keyframes, transitions, and scroll-triggered reveal classes.
   ============================================================= */

/* ─────────────────────────────────────────────────────────────
   LOADER
   ───────────────────────────────────────────────────────────── */
@keyframes loaderType {
  to { width: 6ch; }
}

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

/* ─────────────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────────────── */
@keyframes heroLineReveal {
  to {
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

@keyframes emShimmer {
  to { background-position: -200% 0; }
}

/* ─────────────────────────────────────────────────────────────
   SCROLL INDICATOR
   ───────────────────────────────────────────────────────────── */
@keyframes scrollDotBounce {
  0%, 100% { top: 0; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: calc(100% - 4px); opacity: 0; }
}

/* ─────────────────────────────────────────────────────────────
   MARQUEE
   ───────────────────────────────────────────────────────────── */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ─────────────────────────────────────────────────────────────
   TESTIMONIAL FLOAT
   ───────────────────────────────────────────────────────────── */
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ─────────────────────────────────────────────────────────────
   SPARKLE BURST
   ───────────────────────────────────────────────────────────── */
@keyframes sparkleBurst {
  0% { opacity: 0; transform: scale(0.4) rotate(-15deg); }
  40% { opacity: 1; transform: scale(1.15) rotate(0deg); }
  100% { opacity: 0; transform: scale(1.4) rotate(15deg); }
}

/* ─────────────────────────────────────────────────────────────
   COUNTER MORPH
   ───────────────────────────────────────────────────────────── */
@keyframes counterMorph {
  0% { filter: blur(6px); opacity: 0.4; }
  60% { filter: blur(2px); opacity: 0.8; }
  100% { filter: blur(0); opacity: 1; }
}

.counter.is-counting {
  animation: counterMorph 1.2s var(--ease-smooth) forwards;
}

/* ─────────────────────────────────────────────────────────────
   SCROLL-TRIGGERED SECTION REVEALS
   Each variant fades + transforms; .is-visible plays the reveal.
   ───────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-liquid),
              transform var(--duration-slow) var(--ease-liquid);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Services — slide from right */
.reveal--right {
  transform: translateX(60px);
}

/* Gallery — scale from 0.95 */
.reveal--scale {
  transform: scale(0.95);
}

/* Team — slide from left */
.reveal--left {
  transform: translateX(-60px);
}

/* Testimonials — rotate from -3deg */
.reveal--rotate {
  transform: rotate(-3deg) translateY(24px);
  transform-origin: top left;
}

/* Generic rise */
.reveal--up {
  transform: translateY(32px);
}

/* Staggered children delay (set via inline custom property --d in JS) */
.reveal {
  transition-delay: var(--d, 0s);
}