/* The hero Δ and the line of light that draws it (js/delta-intro.js). Heroes stay clean: the field of points
   behind the rest of the site is kept out of them, so the mark is the only thing that moves there. */

.delta-trail {position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.delta-trail-line {fill:none;stroke:#f4f5f7;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(255,255,255,.7)) drop-shadow(0 0 14px rgba(255,255,255,.25))}
.delta-trail-head {opacity:0}
.delta-trail-head .core {fill:#fff}
.delta-trail-head .halo {fill:rgba(255,255,255,.14);filter:blur(4px)}

/* Facets turn and travel around their own centre as they lock into the ring. */
.has-delta-intro .delta-face,.has-delta-intro .fib-square {transform-box:fill-box;transform-origin:center}
/* While the light draws, the mark holds still so the route lands exactly on it. */
.is-delta-intro .brand-emblem {--tilt-x:0deg;--tilt-y:0deg}
.is-delta-intro .page-delta {--tilt-x:0deg;--tilt-y:0deg}

/* The Δ is lit the same way on every page. */
.delta-mark .delta-line {stroke-opacity:.6}
.brand-emblem .delta-mark,.page-delta .delta-mark {filter:drop-shadow(0 0 26px rgba(255,255,255,.12))}
.fib-spiral {stroke-opacity:.9}

/* Interior heroes: keep the vertical centring the tilt had overridden. */
@media(min-width:901px) {
  .page-delta {transform:translateY(-42%) perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
}
/* Until it plays, the mark stays hidden (the script removes this the moment the drawing starts). */
.is-delta-waiting .delta-face,.is-delta-waiting .delta-line,.is-delta-waiting .fib-spiral,.is-delta-waiting .fib-square {opacity:0}
/* Facets catch the cursor's light smoothly. */
.has-delta-intro .delta-face {transition:fill-opacity .5s ease}

/* Tablets and phones: the Δ leads the hero, right above the title and aligned with the text column, so the
   mark and the message read together and the light draws it in the first screen. */
@media(max-width:900px) {
  .page-hero {display:flex;flex-direction:column;padding-top:112px}
  .page-hero > .wrap {order:1}
  .page-delta {display:block;position:relative;order:0;right:auto;top:auto;width:clamp(96px,26vw,140px);margin:0 0 26px var(--gutter);transform:none}
  .home-hero {align-items:flex-start;min-height:0;padding-top:112px}
  .home-hero .hero-body {gap:0}
  .home-hero .hero-right {order:-1;justify-content:flex-start;margin:0 0 26px}
  .home-hero .brand-emblem {width:clamp(132px,38vw,200px);margin:0}
}

/* The menu button always reads as a menu: the Δ already lives in the wordmark beside it. */
.symbol-delta {display:none}
.site-header:not(.menu-open) .symbol-lines {opacity:1;transform:none}
@media(max-width:900px) {
  /* Contact keeps the form in the first screen on phones. */
  .page-hero:has(+ .contact-layout) .page-delta {display:none}
}