/* ---------- Scroll-reveal variants (bidirectional) ---------- */
.js [data-reveal] {
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal]:not(.is-visible) { opacity: 0; }
.js [data-reveal="rise"]:not(.is-visible)[data-dir="down"],
.js [data-reveal="rise"]:not(.is-visible):not([data-dir="up"]) { transform: translateY(30px); }
.js [data-reveal="rise"]:not(.is-visible)[data-dir="up"] { transform: translateY(-30px); }
.js [data-reveal="left"]:not(.is-visible)  { transform: translateX(-46px); }
.js [data-reveal="right"]:not(.is-visible) { transform: translateX(46px); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* reusable stagger-delay utilities (avoids inline styles) */
.js .rd-1 { --reveal-delay: 160ms; }
.js .rd-2 { --reveal-delay: 320ms; }
.js .rd-3 { --reveal-delay: 460ms; }
.js .rd-4 { --reveal-delay: 600ms; }

/* ---------- Kinetic split-text headline ---------- */
.js .split-line { display: block; }
.js .split-word { display: inline-block; overflow: hidden; vertical-align: top; }
.js .split-word > span {
  display: inline-block;
  transform: translateY(108%);
  transition: transform var(--dur-slow) var(--ease-spring);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .split-text.is-visible .split-word > span { transform: none; }

/* ---------- Hero: living mesh-gradient field + grain ---------- */
.hero-mesh {
  position: absolute;
  inset: -20% -10%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
  filter: blur(6px);
}
.js .hero-mesh::before,
.js .hero-mesh::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 70%;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
}
.js .hero-mesh::before {
  left: 4%; top: 6%;
  background: radial-gradient(circle, rgba(12, 239, 212, 0.40), transparent 62%);
  animation: mesh-a 18s var(--ease-in-out) infinite alternate;
}
.js .hero-mesh::after {
  right: 2%; bottom: 0%;
  background: radial-gradient(circle, rgba(89, 214, 241, 0.34), transparent 62%);
  animation: mesh-b 22s var(--ease-in-out) infinite alternate;
}
@keyframes mesh-a {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(18%, 12%, 0) scale(1.25); }
}
@keyframes mesh-b {
  0%   { transform: translate3d(0,0,0) scale(1.1); }
  100% { transform: translate3d(-16%, -10%, 0) scale(1); }
}

/* fine static grain over the hero for filmic texture (no animation = no cost) */
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Technology wave (static asset) ---------- */

/* ---------- Parallax depth (desktop only; set via JS) ---------- */
.js [data-parallax] { will-change: transform; }

/* ============================================================
   Guards
   ============================================================ */

/* lighter on small screens: shorter travel, no parallax/tilt cost */
@media (max-width: 768px) {
  .js [data-reveal="rise"]:not(.is-visible)[data-dir="down"],
  .js [data-reveal="rise"]:not(.is-visible):not([data-dir="up"]) { transform: translateY(18px); }
  .js [data-reveal="rise"]:not(.is-visible)[data-dir="up"] { transform: translateY(-18px); }
  .js [data-reveal="left"]:not(.is-visible),
  .js [data-reveal="right"]:not(.is-visible) { transform: translateY(18px); }
  .hero-mesh { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  .js .split-word > span { transform: none; transition: none; }
  .js .hero-mesh::before, .js .hero-mesh::after { animation: none; }
}