/* Scroll-linked phrase + coverage icons (port of the Skiper31 text-scroll-animation). --p goes 0 → 1, set by text-scroll.js. */
.text-scroll { background: hsl(var(--secondary)); overflow: hidden; }
.text-scroll__block {
  --p: 1;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px; min-height: 110vh; padding: 0 16px; overflow: hidden;
}
.text-scroll__block + .text-scroll__block { margin-top: -30vh; }
.text-scroll__hint {
  position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.text-scroll__hint::after {
  content: ""; display: block; width: 1px; height: 48px; margin: 12px auto 0;
  background: linear-gradient(hsl(var(--secondary)), hsl(var(--muted-foreground)));
}

/* V1: letters spread out and tipped back, folding in to the finished phrase */
.text-scroll__phrase {
  max-width: 14ch; margin: 0; text-align: center; perspective: 500px;
  font-size: clamp(2.4rem, 9vw, 5.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em;
  color: hsl(var(--foreground));
}
.ts-word { display: inline-block; white-space: nowrap; }
.ts-char {
  display: inline-block; will-change: transform;
  --t: calc(1 - var(--p));
  transform: translateX(calc(var(--d) * var(--spread, 50px) * var(--t))) rotateX(calc(clamp(-85deg, var(--d) * var(--tilt, 50deg), 85deg) * var(--t)));
}

/* Section headings: same fold-in, gentler because they are longer and sit in normal reading flow */
h2.ts-split { --p: 1; perspective: 500px; overflow-x: clip; }
h2.ts-split .ts-char { --spread: 26px; --tilt: 18deg; }
.ts-split .gradient-text { background: none; }
.ts-grad {
  background: var(--gradient-brand); background-size: var(--gw) 100%; background-position: var(--gx) 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ts-accent { color: hsl(var(--accent-ink, var(--accent))); }

/* V3: icons swing in from the sides, rotating and growing into place */
.text-scroll__caption {
  display: flex; align-items: center; gap: 12px; margin: 0; text-align: center;
  font-size: clamp(1.1rem, 3.5vw, 1.5rem); font-weight: 700; color: hsl(var(--foreground));
}
.text-scroll__caption svg { flex: none; height: 44px; width: auto; color: hsl(var(--foreground)); }
.text-scroll__caption svg:last-child { transform: scaleX(-1); }
.text-scroll__icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 0; padding: 0; list-style: none; }
.text-scroll__icons li {
  --t: calc(1 - var(--p));
  display: grid; justify-items: center; gap: 10px; will-change: transform;
  transform:
    translate(calc(var(--d) * 90px * var(--t)), calc(max(var(--d), -1 * var(--d)) * -20px * var(--t)))
    rotate(calc(var(--d) * 50deg * var(--t)))
    scale(calc(1 - .25 * var(--t)));
}
.text-scroll__icons span:first-child {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px;
  background: hsl(var(--background)); color: hsl(var(--accent-ink, var(--accent)));
  box-shadow: 0 12px 30px -14px hsl(var(--foreground) / .35);
}
.text-scroll__icons svg { width: 32px; height: 32px; }
.text-scroll__icons span:last-child { font-size: 14px; font-weight: 600; color: hsl(var(--foreground)); }

@media (max-width: 640px) {
  .ts-char { --spread: 22px; }
  h2.ts-split .ts-char { --spread: 12px; }
  .text-scroll__icons { display: grid; grid-template-columns: repeat(2, minmax(96px, auto)); gap: 18px 28px; }
  .text-scroll__icons span:first-child { width: 60px; height: 60px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .text-scroll__block, h2.ts-split { --p: 1 !important; }
}