/* Motion. Every rule here is scoped to .motion, which motion.js sets
   only when the visitor has not asked for reduced motion. Without it the page
   is static. */

/* 1. Hero headline: words rise out of a mask, one after another */
.motion .split .w {
  display: inline-block;
  overflow: clip;
  overflow-clip-margin: 0.12em;
  vertical-align: top;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.motion .split .w > span {
  display: inline-block;
  transform: translateY(105%);
  filter: blur(6px);
  opacity: 0;
  animation: word-rise 0.9s cubic-bezier(0.2, 0, 0, 1) forwards;
  animation-delay: calc(var(--w) * 80ms + 150ms);
}
@keyframes word-rise {
  to {
    transform: none;
    filter: blur(0);
    opacity: 1;
  }
}
.motion .hero .hero__foot.rv {
  transition-delay: var(--after, 900ms);
}

/* 2. Ink panels: a slow fog drawn in WebGL behind the text, lifted near the pointer */
.motion .ink {
  position: relative;
  isolation: isolate;
}
.motion .ink > .atmos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  transition: opacity 1.6s ease-out;
  pointer-events: none;
}
.motion .ink > .atmos.on {
  opacity: 1;
}

/* 3. Statement lines light word by word as they cross the screen */
.motion .lit .lw {
  opacity: 0.16;
  transition: opacity 0.35s ease-out;
}
.motion .lit .lw.on {
  opacity: 1;
}

/* 4. Primary button: ink fill sweeps to cobalt, slight pull to the pointer, press feedback */
.motion .btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: translate(var(--mx, 0px), var(--my, 0px)) scale(var(--press, 1));
  transition:
    transform 0.28s cubic-bezier(0.2, 0, 0, 1),
    color 0.18s ease-out;
}
.motion .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cobalt);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s cubic-bezier(0.2, 0, 0, 1);
}
.motion .btn:hover {
  background: var(--ink);
}
/* The light button on ink panels sweeps to the lighter grey and keeps ink text,
   so the label stays readable at every point of the sweep and on keyboard focus. */
.motion .btn--paper::before {
  background: var(--on-ink-2);
}
.motion .btn--paper:hover {
  background: var(--on-ink);
}
.motion .btn:hover::before,
.motion .btn:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left center;
}
.motion .btn:active {
  --press: 0.96;
  transition-duration: 0.12s;
}