/* ============================================================
   QuikStartup — animations.css
   Keyframes, reveal, stagger, split text, tilt
   ============================================================ */

/* ── Keyframes ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes pulseRing {
  0%         { transform: scale(1);    opacity: 0.7; }
  70%, 100%  { transform: scale(1.5); opacity: 0; }
}

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

@keyframes slideDown {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Entry animations ── */
.animate-fade-up {
  animation: fadeUp 0.6s var(--ease-out) both;
}

.delay-1 { animation-delay: 0.10s; }
.delay-2 { animation-delay: 0.20s; }
.delay-3 { animation-delay: 0.30s; }
.delay-4 { animation-delay: 0.40s; }
.delay-5 { animation-delay: 0.50s; }

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(3px);
  transition:
    opacity    0.65s var(--ease-out),
    transform  0.65s var(--ease-out),
    filter     0.65s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}

.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; }
.reveal-delay-5 { transition-delay: 0.40s; }

/* ── Stagger — delay set by JS ── */
.stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   0.55s var(--ease-out),
    transform 0.55s var(--ease-out);
}
.stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ── Tilt container ── */
.tilt-container { transform-style: preserve-3d; }

/* ── Split text ── */
.hero-title .word {
  display: inline-block;
  overflow: hidden;
  margin-right: 0.22em;
}
.hero-title .word span {
  display: inline-block;
  animation: fadeUp 0.7s var(--ease-out) both;
}