/* ==========================================================================
   Design D · Flow
   No flamingo. A centred headline that is alive:
   - letters arrive by weight (thin → heavy) and blur into focus;
   - Outfit is variable, so letters near the pointer get lighter, as if the
     cursor carves them (site.js, fine pointers only);
   - behind it, a network of rounded pipes with packets of light flowing
     through, fading out behind the text; a lens follows the pointer and
     brightens what it passes over;
   - on the first scroll the lines slide apart, alternating left and right,
     the pipes push in, and the statement lights up word by word.
   ========================================================================== */

/* ---------- Pipes ---------- */
.flow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* Fade the network behind the headline so it never fights the text. */
  -webkit-mask-image: radial-gradient(ellipse 46% 42% at 50% 50%, transparent 30%, #000 100%);
  mask-image: radial-gradient(ellipse 46% 42% at 50% 50%, transparent 30%, #000 100%);
}
.flow svg {
  width: 100%; height: 100%;
  transform: translate3d(calc(var(--px, 0) * -24px), calc(var(--py, 0) * -18px), 0) scale(calc(1.04 + var(--a) * .3));
  transition: transform 600ms var(--ease-out);
}
.flow__pipe { fill: none; stroke: rgb(236 238 227 / .09); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.flow__pkt {
  fill: none; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: .05 .95;
  animation: flow-run var(--dur) linear var(--del) infinite;
}
.flow__pkt.is-rev { animation-direction: reverse; }
.flow__pkt--org { stroke: var(--orange); filter: drop-shadow(0 0 6px rgb(255 103 32 / .9)); }
.flow__pkt--lav { stroke: var(--lav); filter: drop-shadow(0 0 6px rgb(200 133 255 / .9)); }
.flow__pkt--cream { stroke: var(--cream); stroke-dasharray: .02 .98; opacity: .7; }
@keyframes flow-run { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* A lens that follows the pointer and lights up the pipes beneath it. */
.flow__ring {
  position: absolute; z-index: -1; pointer-events: none;
  left: var(--mx); top: var(--my); width: 240px; height: 240px; translate: -50% -50%;
  border-radius: 50%;
  border: 1.5px solid rgb(236 238 227 / .3);
  box-shadow: inset 0 0 40px rgb(200 133 255 / .12), 0 0 60px rgb(200 133 255 / .1);
  -webkit-backdrop-filter: brightness(1.5) contrast(1.15);
  backdrop-filter: brightness(1.5) contrast(1.15);
  opacity: 0; transition: opacity var(--t-med), width var(--t-med) var(--ease-out), height var(--t-med) var(--ease-out);
}
.hero__card:hover .flow__ring { opacity: calc(1 - var(--a) * 2); }
@media (hover: none), (prefers-reduced-transparency: reduce) { .flow__ring { display: none; } }
.hero__card::before {
  background:
    radial-gradient(520px circle at var(--mx) var(--my), rgb(200 133 255 / .18), transparent 60%),
    radial-gradient(900px circle at 50% 120%, rgb(255 103 32 / .22), transparent 60%),
    radial-gradient(700px circle at 50% -20%, rgb(200 133 255 / .12), transparent 60%);
}

/* ---------- Centred headline ---------- */
.hero--flow .hero__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.hero--flow .hero__copy { align-items: center; }
.hero--flow .hero__statement { justify-items: center; text-align: center; }
.hero--flow .statement { border-left: 0; padding-left: 0; margin-inline: auto; }
.hero--flow .actions { justify-content: center; }
.hero--flow .hero__title { font-size: clamp(2.5rem, 1rem + 5.6vw, 6.25rem); letter-spacing: -0.02em; }
.hero--flow .hero__title .line { overflow: visible; }
.hero--flow .hero__title .line > span { transform: none; animation: none; }
.hero--flow .wd { display: inline-block; white-space: nowrap; }
.hero--flow .ch { display: inline-block; font-weight: var(--w, 800); }
.hero--flow .line--accent { color: var(--lav); }

/* ---------- Pinned intro ---------- */
.is-scrolly .hero--flow .hero__inner { grid-template-areas: "stack"; }
.is-scrolly .hero--flow .hero__copy { grid-area: stack; transform: none; opacity: 1; }
.is-scrolly .hero--flow .hero__eyebrow { transform: translateY(calc(var(--a) * -14vh)); opacity: calc(1 - var(--a) * 3); }
/* The lines part like a curtain: odd ones left, even ones right. */
.is-scrolly .hero--flow .hero__title .line {
  transform: translateX(calc(var(--a) * var(--dir) * 46vw)) skewX(calc(var(--a) * var(--dir) * -12deg));
  opacity: calc(1 - var(--a) * 1.25);
  filter: blur(calc(var(--a) * 6px));
}
.is-scrolly .hero--flow .hero__statement { grid-area: stack; }
.is-scrolly .hero--flow .statement { max-width: 24em; }

/* Magnetic buttons (site.js moves them toward the pointer with --tx/--ty). */
[data-magnetic] { translate: var(--tx, 0) var(--ty, 0); transition: translate 400ms var(--ease-spring), transform var(--t-fast) var(--ease-out), background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-med) var(--ease-out); }

.footer__mark { padding-top: 40px; }
.footer__nmde { width: 100%; height: auto; color: var(--plum); --colon: var(--plum); }

@media (max-width: 640px) {
  .hero--flow .hero__title { font-size: clamp(2.25rem, 1rem + 7vw, 3rem); }
  .flow { -webkit-mask-image: radial-gradient(ellipse 70% 40% at 50% 50%, transparent 30%, #000 100%); mask-image: radial-gradient(ellipse 70% 40% at 50% 50%, transparent 30%, #000 100%); }
  .is-scrolly .hero--flow .hero__inner { padding-inline: calc(var(--gutter) + 8px); }
}

/* ---------- Entrance ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Letters arrive thin and blurred, then gain weight and focus, in a wave. */
  .js .hero--flow .ch { animation: ch-in 1100ms var(--ease-out) backwards; animation-delay: calc(200ms + var(--c) * 22ms); }
  @keyframes ch-in { from { opacity: 0; font-weight: 200; filter: blur(10px); transform: translateY(.25em); } }
  /* Pipes draw themselves in before the light starts flowing. */
  .js .flow__pipe { stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: pipe-in 2200ms var(--ease-out) 100ms forwards; }
  @keyframes pipe-in { to { stroke-dashoffset: 0; } }
  .js .flow__pkt { opacity: 0; animation: flow-run var(--dur) linear var(--del) infinite, pkt-in 800ms ease 1600ms forwards; }
  .js .flow__pkt--cream { animation: flow-run var(--dur) linear var(--del) infinite, pkt-in-dim 800ms ease 1600ms forwards; }
  .js .flow__pkt.is-rev { animation-direction: reverse, normal; }
  @keyframes pkt-in { to { opacity: 1; } }
  @keyframes pkt-in-dim { to { opacity: .7; } }
}
@media (prefers-reduced-motion: reduce) {
  .flow__pkt { animation: none; stroke-dasharray: none; opacity: .25; }
}