/**
 * Index motion layer — complements Tailwind classes on index.html.
 * (CDN Tailwind does not compile this file; custom keyframes/properties live here.)
 */

/* ─── Scroll-driven reveal (below-fold) ─────────────────────── */

[data-reveal],
[data-hero-reveal] {
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
  transition:
    opacity 1.3s cubic-bezier(0.18, 0.82, 0.22, 1),
    transform 1.3s cubic-bezier(0.18, 0.82, 0.22, 1);
  transition-delay: calc(var(--reveal-delay, 0) * 1ms);
  will-change: opacity, transform;
}

[data-reveal='scale'],
[data-hero-reveal='product'] {
  transform: translate3d(0, 0.65rem, 0) scale(0.975);
}

[data-reveal].is-visible,
[data-hero-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}

/* Hero subtitle: fades after typewriter completes (never scroll-reveal) */
[data-hero-delay-reveal] {
  opacity: 0;
  transform: translate3d(0, 0.45rem, 0);
  transition:
    opacity 1.05s cubic-bezier(0.18, 0.82, 0.22, 1),
    transform 1.05s cubic-bezier(0.18, 0.82, 0.22, 1);
  transition-delay: 0ms;
}

[data-hero-delay-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ─── Typewriter caret ─── */

[data-typewriter] {
  display: inline;
}

[data-typewriter].is-typing::after {
  content: '';
  display: inline-block;
  width: 0.055em;
  min-width: 2px;
  height: 0.78em;
  margin-left: 0.08em;
  vertical-align: -0.06em;
  background-color: currentColor;
  opacity: 0.85;
  animation: index-tw-caret 1.15s steps(1, end) infinite;
}

[data-typewriter].is-done::after {
  display: none;
}

@keyframes index-tw-caret {
  0%,
  45% {
    opacity: 0.85;
  }
  50%,
  100% {
    opacity: 0.08;
  }
}

/* ─── Reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-visible,
  [data-hero-reveal],
  [data-hero-reveal].is-visible,
  [data-hero-delay-reveal],
  [data-hero-delay-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
    filter: none;
  }

  [data-typewriter].is-typing::after {
    animation: none;
    opacity: 0.55;
  }
}