/*
 * Scroll-reveal fade-up + hero grain texture + count-up numerals.
 * Ported by hand from react-bits.dev (BlurText/ScrollReveal/CountUp/Grainient concepts) —
 * this theme is plain WordPress/PHP, not React, so these are vanilla CSS/JS reimplementations,
 * not the original components. See assets/js/effects.js for the JS half.
 */

/* Reveal only takes effect once effects.js has confirmed it's running (html.js) — with no JS,
   or before effects.js runs, content stays fully visible so it never depends on JS to be readable. */
html.js .vt-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: var(--reveal-delay, 0s);
}
html.js .vt-reveal.vt-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Subtle static grain over the hero, pure CSS (no canvas/WebGL) — cheap to paint, no JS cost. */
.vt-hero { position: relative; }
.vt-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

@media (prefers-reduced-motion: reduce) {
  html.js .vt-reveal { opacity: 1; transform: none; transition: none; }
}