/* ============================================================
   assets/css/animations.css  —  Keyframes & Motion
   Curve Matrix LLP
   ============================================================ */

/* ── Scroll-reveal base ─────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--t-xslow) var(--ease-out),
              transform var(--t-xslow) var(--ease-out);
}
.reveal.visible         { opacity: 1; transform: none; }
.reveal-delay-1         { transition-delay: 0.08s; }
.reveal-delay-2         { transition-delay: 0.16s; }
.reveal-delay-3         { transition-delay: 0.24s; }
.reveal-delay-4         { transition-delay: 0.32s; }

/* Fade in (no vertical shift) */
.reveal-fade {
  opacity: 0;
  transition: opacity var(--t-xslow) var(--ease-out);
}
.reveal-fade.visible { opacity: 1; }

/* Slide in from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--t-xslow) var(--ease-out),
              transform var(--t-xslow) var(--ease-out);
}
.reveal-left.visible  { opacity: 1; transform: none; }

/* Scale in */
.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--t-xslow) var(--ease-out),
              transform var(--t-xslow) var(--ease-spring);
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* ── Hero line animation ────────────────────────────────────── */
.hero-headline .line span {
  animation: lineReveal 0.9s var(--ease-out) both;
}
.hero-headline .line:nth-child(1) span { animation-delay: 0.05s; }
.hero-headline .line:nth-child(2) span { animation-delay: 0.18s; }
.hero-headline .line:nth-child(3) span { animation-delay: 0.30s; }

.hero-badge    { animation: fadeSlideUp 0.7s 0.0s var(--ease-out) both; }
.hero-sub      { animation: fadeSlideUp 0.8s 0.4s var(--ease-out) both; }
.hero-actions  { animation: fadeSlideUp 0.8s 0.52s var(--ease-out) both; }

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes lineReveal {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

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

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

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

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes floatGlow {
  0%, 100% { transform: translateY(0)   scale(1); }
  50%       { transform: translateY(-28px) scale(1.04); }
}

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

@keyframes centerPulse {
  0%, 100% { box-shadow: 0 0 0  0   rgba(200,255,0,0.5); }
  50%       { box-shadow: 0 0 45px 20px rgba(200,255,0,0.08); }
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.65); }
}

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

/* ── Prefers-reduced-motion override ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
  }
  .reveal, .reveal-fade, .reveal-left, .reveal-scale {
    opacity: 1;
    transform: none;
  }
}