/* beats-home.css: the two 3D beats of the homepage since spec 11 (2026-11-02). The growth line (outcomes): a grid floor and a chart wall stand in
   CSS perspective behind the copy, the line draws itself while the three statements light up, a node lights where a statement ends, the area
   under the line fills, and the camera turns a little with the scroll. The layers (modules): four glass layers stacked in depth fan out and
   light up one by one, with the names on the left. beats-home.js scrubs both through GSAP; the plain rules are the end state and
   html.beats-static shows everything at once. The theme comes from the tokens. Loaded right after beats.css. Cap 16 KB. */

/* 2. outcomes: the copy on the left, the world behind it */
.outcomes .stage { overflow: clip visible; }   /* spec 14: the floor runs on below the stage into the modules, clipped sideways only */
.outcomes .eyebrow { left: var(--gutter); right: auto; justify-content: flex-start; }
.statement { position: absolute; left: var(--gutter); right: auto; top: 50%; bottom: auto; width: min(44%, 560px); translate: 0 -50%; align-items: flex-start; justify-content: flex-start; padding: 0; text-align: left; }
.statement-text { max-width: 12ch; font-size: clamp(1.9rem, 5vw, 4rem); }
.statement-sub { margin: 0; max-width: 34ch; font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.45; color: var(--grafiet); text-wrap: pretty; }
.world { position: absolute; inset: 0; z-index: 0; overflow: clip visible; perspective: 1200px; perspective-origin: 64% 42%; pointer-events: none; }
.scene { --turn: -16deg; --tilt: 8deg; position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--tilt)) rotateY(var(--turn)); }
.floor { position: absolute; left: -35%; right: -35%; bottom: -6%; height: 150%; transform-origin: 50% 100%; transform: rotateX(80deg); background: repeating-linear-gradient(90deg, var(--lijn) 0 1px, transparent 1px 64px), repeating-linear-gradient(0deg, var(--lijn) 0 1px, transparent 1px 64px); -webkit-mask-image: radial-gradient(ellipse 64% 70% at 50% 100%, #000 22%, transparent 80%), linear-gradient(#000 72%, transparent 100%); mask-image: radial-gradient(ellipse 64% 70% at 50% 100%, #000 22%, transparent 80%), linear-gradient(#000 72%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; }   /* the second mask fades the near part of the floor, inside the modules */
.wall { position: absolute; left: 44%; width: 54%; top: 48%; aspect-ratio: 1000 / 620; translate: 0 -50%; transform: translateZ(30px); }
.rise { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rise-line { fill: none; stroke: var(--kobalt-text); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px var(--kobalt-ring)); }   /* no non-scaling-stroke: the dash that draws the line must count in the units of the path */
.rise-area { fill: url(#rise-fill); clip-path: inset(0 100% 0 0); }
.rise-fill-a { stop-color: var(--kobalt); stop-opacity: .32; }
.rise-fill-b { stop-color: var(--kobalt); stop-opacity: 0; }
.rise-node { fill: var(--papier); stroke: var(--lijn-sterk); stroke-width: 3; vector-effect: non-scaling-stroke; transition: fill .35s, stroke .35s; }
.rise-node.lit { fill: var(--kobalt); stroke: var(--kobalt-text); filter: drop-shadow(0 0 12px var(--kobalt-ring)); }
.rise-head { fill: var(--papier); stroke: var(--kobalt); stroke-width: 4; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 14px var(--kobalt)); }
.rise-base { fill: none; stroke: var(--lijn-sterk); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* 3. modules: the names on the left, the layers on the right, one unit of 160vh per layer */
.modules { height: 640vh; padding: 0; }
.modules .stage { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); overflow: hidden; }
.modules .lead { position: absolute; top: clamp(20px, 5vh, 48px); left: var(--gutter); right: var(--gutter); max-width: none; margin: 0; text-align: left; }
.modules .lead h2 { font-size: clamp(1.4rem, 2.6vw, 2.2rem); }
.lagen-list { position: absolute; left: var(--gutter); top: 50%; width: min(40%, 520px); translate: 0 -50%; display: grid; gap: clamp(10px, 2.2vh, 22px); }
.laag-copy .card-name { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.9rem); font-weight: 600; line-height: 1.04; letter-spacing: -.03em; color: var(--grafiet); opacity: .55; transition: color .4s, opacity .4s; }
.laag-copy.is-active .card-name { color: var(--inkt); opacity: 1; }
.laag-copy .card-line { max-height: 0; margin: 0; overflow: hidden; visibility: hidden; opacity: 0; font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.4; color: var(--grafiet); transition: max-height .5s, margin .5s, opacity .4s, visibility 0s .5s; }
.laag-copy.is-active .card-line { max-height: 5em; margin-top: 8px; visibility: visible; opacity: 1; transition-delay: 0s, 0s, .1s, 0s; }
.deck { --gap: 22; --rz: -26deg; --rx: 58deg; --zk: 1px; position: absolute; right: 2%; top: 50%; width: min(50%, 640px); aspect-ratio: 1.05; translate: 0 -50%; perspective: 1500px; perspective-origin: 50% 30%; pointer-events: none; }
.deck-floor { position: absolute; left: 16%; right: 16%; bottom: 10%; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, var(--kobalt-ring), transparent 72%); filter: blur(22px); opacity: .45; }
.laag { --i: 0; --lift: 0; --above: 0; position: absolute; left: 17%; right: 17%; top: 22%; bottom: 22%; box-sizing: border-box; display: grid; grid-template-rows: 1fr auto; align-items: end; padding: clamp(14px, 2.2vw, 26px); border-radius: 22px; border: 1px solid var(--glass-line); background: var(--glass-panel-tint); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); box-shadow: inset 0 1px 1px var(--glass-rim), 0 24px 48px -26px rgba(0,0,0,.45); color: var(--inkt); transform: rotateX(var(--rx)) rotateZ(var(--rz)) translateZ(calc((var(--i) * var(--gap) + var(--lift) * 46 + var(--above) * 80) * var(--zk))); transition: transform .6s var(--ease-out), background-color .4s, color .4s, border-color .4s, box-shadow .4s; }
.laag svg { width: clamp(28px, 3.2vw, 44px); height: auto; stroke-width: 1.6; color: var(--kobalt-text); }
.laag-tag { font: 500 clamp(12px, 1vw, 15px)/1.2 var(--font-sans); letter-spacing: .01em; color: var(--grafiet); }
.laag.is-active { background: var(--kobalt); border-color: rgba(255,255,255,.55); color: var(--paper-fixed); box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 34px 60px -24px rgba(59,91,219,.7); }
.laag.is-active svg, .laag.is-active .laag-tag { color: var(--paper-fixed); }
.laag[data-laag="2"] { --i: 1; }
.laag[data-laag="3"] { --i: 2; }
.laag[data-laag="4"] { --i: 3; }

@media (max-width: 759px) {
  .statement { right: var(--gutter); top: auto; bottom: clamp(100px, 16vh, 150px); width: auto; translate: none; }
  .statement-text { max-width: 12ch; font-size: clamp(1.7rem, 7.6vw, 2.2rem); }
  .statement-sub { font-size: .95rem; }
  .world { perspective-origin: 50% 28%; }
  .wall { left: 5%; width: 90%; top: 30%; }
  .modules .lead { top: 16px; }
  .modules .lead h2 { font-size: 1.3rem; }
  .deck { --zk: .55px; right: 8%; left: 8%; width: auto; top: 17%; translate: none; aspect-ratio: 1.25; }
  .laag { top: 24%; bottom: 20%; }
  .lagen-list { right: var(--gutter); width: auto; top: auto; bottom: clamp(100px, 14vh, 140px); translate: none; gap: 6px; }
  .laag-copy .card-name { font-size: 1.35rem; }
  .laag-copy .card-line { font-size: .95rem; }
}

/* the static page (reduced motion, or GSAP did not load): no pins, everything in its end state */
.beats-static .outcomes .stage, .beats-static .modules .stage { position: static; height: auto; overflow: visible; }
.beats-static .outcomes .world { position: relative; inset: auto; width: 100%; height: min(56vh, 500px); margin-bottom: 8px; overflow: hidden; }
.beats-static .rise-area { clip-path: none; }
.beats-static .rise-node { fill: var(--kobalt); stroke: var(--kobalt-text); }
.beats-static .rise-head { display: none; }
.beats-static .statement { translate: none; width: auto; left: auto; right: auto; bottom: auto; }
.beats-static .modules { height: auto; padding: clamp(64px, 12vh, 120px) 0; }
.beats-static .modules .lead { position: static; margin: 0 0 32px; }
.beats-static .lagen { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; width: min(var(--wrap), 100% - 2 * var(--gutter)); margin: 0 auto; }
.beats-static .lagen-list, .beats-static .deck { position: static; translate: none; width: auto; left: auto; right: auto; bottom: auto; }
.beats-static .deck { --gap: 70; aspect-ratio: 1.05; }
.beats-static .laag-copy .card-name { color: var(--inkt); opacity: 1; }
.beats-static .laag-copy .card-line { max-height: none; margin-top: 8px; visibility: visible; opacity: 1; }
@media (max-width: 759px) { .beats-static .lagen { grid-template-columns: 1fr; } }