/* ============================================================
   SCALYEX — ANIMATIONS CSS
   Scroll Reveals · Text Split · Curtain Transitions
   ============================================================
   All animations use transform + opacity only (GPU-accelerated)
   Respects prefers-reduced-motion
   ============================================================ */

/* ─── Base reveal state (hidden) ─── */
.reveal {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.reveal.fade-up     { transform: translateY(40px); }
.reveal.fade-down   { transform: translateY(-40px); }
.reveal.fade-left   { transform: translateX(-40px); }
.reveal.fade-right  { transform: translateX(40px); }
.reveal.scale-in    { transform: scale(0.94); }
.reveal.fade-in     { transform: none; }

/* ─── Revealed state (visible) ─── */
.reveal.is-visible {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* ─── Stagger delay utilities ─── */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }
.delay-7 { transition-delay: 0.7s; }
.delay-8 { transition-delay: 0.8s; }

/* ─── Text Split Animation ─── */
/* JS wraps words in .word spans, each word gets staggered */
[data-split] .word {
  display: inline-block;
  overflow: hidden;
}
[data-split] .word-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-split].is-visible .word-inner {
  transform: translateY(0);
}
/* Stagger each word */
[data-split].is-visible .word:nth-child(1)  .word-inner { transition-delay: 0.00s; }
[data-split].is-visible .word:nth-child(2)  .word-inner { transition-delay: 0.05s; }
[data-split].is-visible .word:nth-child(3)  .word-inner { transition-delay: 0.10s; }
[data-split].is-visible .word:nth-child(4)  .word-inner { transition-delay: 0.15s; }
[data-split].is-visible .word:nth-child(5)  .word-inner { transition-delay: 0.20s; }
[data-split].is-visible .word:nth-child(6)  .word-inner { transition-delay: 0.25s; }
[data-split].is-visible .word:nth-child(7)  .word-inner { transition-delay: 0.30s; }
[data-split].is-visible .word:nth-child(8)  .word-inner { transition-delay: 0.35s; }
[data-split].is-visible .word:nth-child(9)  .word-inner { transition-delay: 0.40s; }
[data-split].is-visible .word:nth-child(10) .word-inner { transition-delay: 0.45s; }

/* ─── Clip-path wipe reveal (section curtains) ─── */
.wipe-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.wipe-reveal.is-visible { clip-path: inset(0 0% 0 0); }

/* ─── Parallax layers (JS controls transform) ─── */
.parallax-layer { will-change: transform; }

/* ─── Mouse parallax floating elements ─── */
.mouse-float {
  transition: transform 0.1s linear;
  will-change: transform;
}

/* ─── Hero floating shapes ─── */
.hero-shape {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0.06;
}
.hero-shape-1 {
  width: 500px; height: 500px;
  border: 1px solid var(--text-primary);
  top: -100px; right: -80px;
  animation: float-slow 8s ease-in-out infinite;
}
.hero-shape-2 {
  width: 200px; height: 200px;
  border: 1px solid var(--accent);
  opacity: 0.12;
  bottom: 15%; right: 18%;
  animation: float-slow 6s ease-in-out infinite reverse;
}
.hero-shape-3 {
  width: 60px; height: 60px;
  background: var(--accent);
  opacity: 0.08;
  top: 30%; right: 30%;
  animation: float-slow 5s ease-in-out infinite;
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-18px); }
}

/* ─── Nav scroll progress bar ─── */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: var(--accent);
  z-index: 1001;
  width: 0%;
  transition: width 100ms linear;
}

/* ─── Count-up number ─── */
.count-num {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ─── Hover line animation for cards ─── */
.hover-underline {
  position: relative;
  display: inline-block;
}
.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width var(--transition-base);
}
.hover-underline:hover::after { width: 100%; }

/* ─── Reduce Motion: disable all ─── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  [data-split] .word-inner,
  .wipe-reveal,
  .hero-shape,
  .marquee-track {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
  }
}