/* =========================================================================
   ANIMATIONS — Studio Kinetik
   Hero word reveal, scroll-progress, magnetic CTA, 3D tilt, reveals
   ========================================================================= */

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 2px;
  z-index: 90;
  background: transparent;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll, 0));
  will-change: transform;
}

/* Generic scroll-reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 720ms var(--ease-out-quint), transform 720ms var(--ease-out-quint);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Section title clip-path reveal */
.section-title.reveal {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  transform: none;
  transition: clip-path 1100ms var(--ease-out-quint);
}
.section-title.reveal.is-visible { clip-path: inset(0 0 0 0); }

/* Hero word-by-word reveal (built dynamically by JS) */
.hero-title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: 1;
}
.hero-title .word > span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 900ms var(--ease-out-quint), opacity 900ms var(--ease-out-quint);
  transition-delay: var(--word-delay, 0ms);
}
.hero-title.is-revealed .word > span {
  transform: translateY(0);
  opacity: 1;
}
.hero-title .word--space { display: inline-block; width: 0.28em; }

/* 3D tilt on cards (variables set by JS) */
.card--manifest, .card--pricing {
  transform-style: preserve-3d;
  transform: perspective(800px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateZ(0);
  transition: transform 480ms var(--ease-soft);
}
.card--manifest:hover, .card--pricing:hover {
  transition: transform 120ms linear;
}

/* Magnetic CTA */
[data-magnetic] {
  transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
  transition: transform 360ms var(--ease-spring);
}

/* Hover-state cursor coordination */
.card--manifest::before,
.card--pricing::before { transition: opacity 320ms var(--ease-soft); }

/* Sequential card reveal (stagger via nth-child) */
.manifest-cards .card { opacity: 0; transform: translateY(24px); transition: opacity 720ms var(--ease-out-quint), transform 720ms var(--ease-out-quint); }
.manifest-cards.is-visible .card { opacity: 1; transform: none; }
.manifest-cards.is-visible .card:nth-child(1) { transition-delay: 60ms; }
.manifest-cards.is-visible .card:nth-child(2) { transition-delay: 140ms; }
.manifest-cards.is-visible .card:nth-child(3) { transition-delay: 220ms; }
.manifest-cards.is-visible .card:nth-child(4) { transition-delay: 300ms; }
.manifest-cards.is-visible .card:nth-child(5) { transition-delay: 380ms; }
.manifest-cards.is-visible .card:nth-child(6) { transition-delay: 460ms; }

/* Pricing card stagger reveal */
.pricing-pane .card--pricing { opacity: 1; transition: opacity 380ms var(--ease-soft); }

/* Process step in-view */
.process-step {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 720ms var(--ease-out-quint), transform 720ms var(--ease-out-quint);
}
.process-step.is-visible { opacity: 1; transform: none; }

/* FAQ row reveal */
.faq-list details {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms var(--ease-out-quint), transform 600ms var(--ease-out-quint);
}
.faq-list details.is-visible { opacity: 1; transform: none; }

/* Marquee hover-pause already in styles.css */

/* Hero scroll-cue subtle bob */
.hero-scroll-cue { animation: cueFloat 4s var(--ease-soft) infinite; }
@keyframes cueFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* Number counter (placeholder — JS animates textContent) */
[data-counter] { display: inline-block; font-variant-numeric: tabular-nums; }

/* Header shrink visual */
.site-header.is-shrunk .header-inner {
  background: rgba(11, 10, 7, 0.78);
  border-color: var(--hairline-strong);
}
[data-theme='light'] .site-header.is-shrunk .header-inner {
  background: rgba(242, 237, 222, 0.88);
}

/* Hide cursor styles for touch */
@media (pointer: coarse) {
  [data-magnetic] { transform: none !important; }
  .card--manifest, .card--pricing { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .manifest-cards .card, .process-step, .faq-list details {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .hero-title .word > span { transform: none !important; opacity: 1 !important; }
  [data-magnetic] { transform: none !important; }
  .scroll-progress span { transform: scaleX(0) !important; }
}