/* Home scroll animations — progressive enhancement only.
   Default (no-JS / reduced-motion): everything fully visible. */

.scroll-statement {
  font-family: var(--head);
  font-weight: 800;
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 820px;
  margin: 36px 0 8px;
  color: #1b1b1b;
}

.scroll-statement .sw {
  display: inline;
  transition: none;
}

/* Only hide/animate when JS opted in and motion is OK */
html.js-ready:not(.reduce-motion) .hero-type .type-char {
  visibility: hidden;
}

html.js-ready:not(.reduce-motion) .hero-type .type-char.is-on {
  visibility: visible;
}

html.js-ready:not(.reduce-motion) .reveal-word {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(0.55em);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}

html.js-ready:not(.reduce-motion) .reveal-word.is-in {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

html.js-ready:not(.reduce-motion) .reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

html.js-ready:not(.reduce-motion) .reveal-up.is-in {
  opacity: 1;
  transform: translateY(0);
}

html.js-ready:not(.reduce-motion) .scroll-statement .sw {
  color: rgba(27, 27, 27, 0.18);
  transition: color 0.05s linear;
}

html.js-ready:not(.reduce-motion) .scroll-statement .sw.is-lit {
  color: #1b1b1b;
}

html.js-ready:not(.reduce-motion) .scroll-statement .sw.is-hot {
  background: linear-gradient(90deg, var(--ember), var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Statement band — a little more stage for the scrub */
.statement-band {
  margin-top: 8px;
  margin-bottom: 40px;
}