/* Motion and depth layer: WebGL hero backdrop, scroll reveals, 3D tilt, grain.
   Everything here degrades gracefully — content is visible and usable with
   this file (and its JS) absent; the .js-motion gate below is what lets JS
   opt elements into a hidden-until-revealed starting state. */

html {
  scroll-behavior: auto; /* Lenis + motion.js own smooth scrolling instead */
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Fine grain overlay for a filmic, designed feel instead of a flat fill. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Slow-drifting aurora wash behind the whole page, layered under the existing
   static radial gradients so scrolling never feels flat. */
body {
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: -10vh -10vw;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38rem 30rem at 15% 20%, rgba(105, 245, 69, .10), transparent 60%),
    radial-gradient(42rem 34rem at 85% 70%, rgba(46, 214, 182, .09), transparent 60%);
  animation: aurora-drift 26s ease-in-out infinite alternate;
}

@keyframes aurora-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(2%, -3%, 0) scale(1.06); }
}

/* Header scroll-progress hairline. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  height: 2px;
  background: transparent;
}

.scroll-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--green), var(--teal));
  box-shadow: 0 0 12px rgba(105, 245, 69, .6);
  transform-origin: left;
}

/* Hero WebGL backdrop. Sits behind .hero-copy/.hero-media, above the page's
   own background layers. */
.hero {
  position: relative;
  isolation: isolate;
}

.vanta-bg {
  position: absolute;
  inset: -6% -4%;
  z-index: -1;
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
}

.vanta-bg.is-active {
  opacity: 1;
}

/* Progressive-enhancement reveal states: hidden ONLY once JS confirms it can
   animate them back in. No-JS and JS-blocked visitors always see full content. */
html.js-motion .reveal {
  opacity: 0;
  transform: translateY(36px);
  will-change: transform, opacity;
}

html.js-motion .reveal-fade {
  opacity: 0;
  transform: none;
}

html.js-motion .hero-copy .reveal {
  transform: translateY(22px);
}

/* 3D tilt targets: perspective on the parent so the tilted child has depth,
   plus a soft ambient shadow that vanilla-tilt's own transform doesn't provide. */
[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
}

.tilt-shadow {
  position: relative;
}

.tilt-shadow::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6%;
  border-radius: inherit;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent 70%);
  opacity: 0;
  transform: translateY(28px) scale(.92);
  transition: opacity .4s ease, transform .4s ease;
  filter: blur(6px);
}

[data-tilt]:hover .tilt-shadow::after,
.tilt-shadow[data-tilt]:hover::after {
  opacity: .55;
}

.feature-grid article {
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}

.feature-grid article .js-tilt-glare {
  border-radius: inherit;
}

/* Magnetic buttons: JS moves them with transform; this just softens it. */
[data-magnetic] {
  display: inline-flex;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

/* Subtle continuous float for the language chip beside the hero phone. */
.signal-panel {
  animation: signal-float 5.5s ease-in-out infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .signal-panel,
  body::before {
    animation: none;
  }

  html.js-motion .reveal,
  html.js-motion .reveal-fade {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 820px) {
  .vanta-bg {
    display: none;
  }
}