/* Motion layer for the homepage. Motion (motion.js) and Lenis (vendor/) do the animating.
   Hidden starting states are only applied when .js-motion is set, so content stays
   visible without JS or with reduced motion. */

/* Scroll progress bar, driven by motion.js */
.scroll-progress {
  position: fixed; z-index: 60; top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--forest), var(--brass));
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* Starting states, so nothing flashes before motion.js runs */
.js-motion [data-reveal] { opacity: 0; }
.js-motion .hero-copy > :not(h1) { opacity: 0; }
.js-motion .art-frame { opacity: 0; }

/* Lenis owns smooth scrolling. Turn off the CSS smooth scroll that would fight it. */
html.js-motion { scroll-behavior: auto !important; }

/* Headline word mask: words rise from behind a clip line */
.js-motion .hero h1 .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.js-motion .hero h1 .word-inner { display: inline-block; will-change: transform; }

/* 3D depth for the hero */
.js-motion .hero-layout { perspective: 1400px; }
.js-motion .hero-art { transform-style: preserve-3d; will-change: transform; }
.js-motion .hero-contours,
.js-motion [data-parallax],
.js-motion [data-zoom],
.js-motion [data-tilt] { will-change: transform; }
.js-motion [data-tilt] { transform-origin: 50% 0; }

/* Topography lines draw themselves in on load */
.js-motion .topography path {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.6s cubic-bezier(.3, .6, .2, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js-motion.is-loaded .topography path { stroke-dashoffset: 0; }

/* Pathway cards lift with a soft shadow on hover, on top of the scroll tilt */
.js-motion .pathway-card { transition: box-shadow .5s ease; }
.js-motion .pathway-card:hover { box-shadow: 0 26px 52px -30px rgb(23 61 50 / 35%); }

@media (max-width: 780px) {
  .js-motion [data-tilt] { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .js-motion .topography path { transition: none !important; }
}

/* Headline character flips (anime.js). The h2 provides the perspective. */
.js-motion [data-chars] { perspective: 700px; }
.js-motion [data-chars] .char {
  display: inline-block;
  opacity: 0;
  transform-origin: 50% 100%;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* Terrain stage: layered contour map in 3D, beside the process steps (desktop) */
.terrain { display: none; }
.js-motion .terrain {
  display: block;
  position: relative;
  height: 380px;
  margin-top: 56px;
  perspective: 1100px;
}
.terrain-stack {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(64deg) rotateZ(-24deg);
}
.terrain-layer {
  position: absolute; inset: 6% 4%;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.terrain-layer svg { width: 100%; height: 100%; overflow: visible; }
.terrain-layer path {
  fill: none;
  stroke: var(--forest);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.terrain-layer .slab {
  fill: #EFEBE2;
  stroke: rgb(23 61 50 / 22%);
}
.terrain-labels {
  position: absolute; top: 0; right: 0;
  display: grid; gap: 8px;
  margin: 0; padding: 0; list-style: none;
  color: var(--muted);
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  text-align: right;
}
.terrain-labels li { transition: color .4s ease; }
.terrain-labels li.is-active { color: var(--forest); }

/* Sticky heading keeps the terrain in view while the steps scroll past (desktop) */
.js-motion .process-heading { position: sticky; top: 112px; align-self: start; }

@media (max-width: 780px) {
  .js-motion .terrain { display: none; }
  .js-motion .process-heading { position: static; }
}
.js-motion [data-chars] .word-chars { display: inline-block; white-space: nowrap; }