/* Product page beats (specs 05, 05b), see KIT.md: plain rules are the end state, html.beats-static makes a page of the tall sections */
/* flow: the paths layer is sticky behind the hero and the points, its opacity follows the scroll */
.flow{position:relative}
.flow-bg{position:sticky;top:0;height:100vh;margin-bottom:-100vh;overflow:hidden;pointer-events:none;will-change:opacity}
.flow.is-away .flow-bg{visibility:hidden}
.flow.is-away .paths path{animation-play-state:paused}
/* hero */
.hero.hero--paths{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:calc(100svh - var(--nav-h));padding:0 var(--gutter) 16vh;overflow:hidden;isolation:isolate}
.paths,.orbit-ring,.beams{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-linecap:round}
.paths{will-change:transform;opacity:0;transition:opacity 1.2s}
.is-on .paths,.beats-static .paths{opacity:1}
/* stroke-opacity, not opacity: 36 animated opacities paint 36 buffers per frame */
.paths path{stroke:var(--kobalt-text);stroke-dasharray:.3 .7}
.is-on .paths path{animation:paths-run 25s ease-in-out infinite alternate,paths-glow 25s ease-in-out infinite alternate;animation-composition:replace,add}
@keyframes paths-run{to{stroke-dashoffset:-1}}
@keyframes paths-glow{from{stroke-opacity:0}to{stroke-opacity:.2}}
.hero--paths .eyebrow{margin:0 0 20px}
.hero--paths .hero-title,.point-title,.cta-band--ripple h2{margin:0;font-weight:600;line-height:1.04;letter-spacing:-.03em}
.hero--paths .hero-title{max-width:16ch;font-size:clamp(2.5rem,7.2vw,5.75rem);line-height:1;color:var(--inkt)}
.hero--paths [data-lang] .w+.w{animation-delay:.08s}
.hero--paths [data-lang] .w+.w+.w+.w{animation-delay:.16s}
.hero--paths .hero-sub{max-width:34ch;margin:clamp(20px,3.4vh,32px) 0 0;font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.45;color:var(--grafiet);animation:hero-in .8s var(--ease-out) .4s backwards}
.hero--paths .actions{justify-content:center;margin-top:clamp(24px,4vh,36px);animation:hero-in .8s var(--ease-out) .55s backwards}
/* points */
.points .stage{position:sticky;top:var(--nav-h);box-sizing:border-box;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:clamp(32px,6vw,96px);height:calc(100svh - var(--nav-h))}
.points{height:840vh}
.point-space{position:absolute;left:0;width:100%;top:calc((var(--r) - 1) * 160vh);height:160vh}
.point-list{display:grid;gap:clamp(12px,2.4vh,24px)}
.point-title{font-size:clamp(1.75rem,4.4vw,3.5rem);color:var(--grafiet);opacity:.55;transition:.4s}
.point.is-active .point-title{color:var(--inkt);opacity:1}
.point-line{max-width:30ch;max-height:0;margin:0;overflow:hidden;visibility:hidden;opacity:0;font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.4;color:var(--grafiet);transition:max-height .5s,margin .5s,opacity .4s,visibility 0s .5s}
.point.is-active .point-line{max-height:8em;margin-top:12px;visibility:visible;opacity:1;transition-delay:0s,0s,.1s,0s}
.point-line .hl{font-style:normal;font-weight:600;color:var(--kobalt-text)}
.point-visuals{--side:min(480px,40vw);position:relative;width:var(--side);aspect-ratio:1;justify-self:center}
.visual{position:absolute;inset:0;overflow:hidden;font-size:calc(var(--side) / 24);opacity:0;transition:opacity .5s}
.visual.is-active{opacity:1}
.disc{position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;width:var(--w,4.4em);height:var(--w,4.4em);border-radius:50%;background:var(--kobalt);color:var(--paper-fixed);box-shadow:0 0 0 .4em var(--kobalt-tint)}
.disc svg{width:46%;height:46%;stroke-width:1.75}
/* 1 orbit */
.orbit-ring{stroke:var(--lijn-sterk);stroke-width:.7;stroke-dasharray:0 2.6}
.core{--w:6.4em}
.orbiter{position:absolute;inset:0;animation:spin 14s linear infinite paused}
.orbiter .disc{--w:4em;top:14%;animation:spin 14s linear infinite reverse paused}
.orbiter+.orbiter{rotate:180deg}
.orbiter+.orbiter .disc{rotate:-180deg}
.visual.is-active :is(.orbiter,.orbiter .disc){animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
/* 2 beam: one head at a time, 2s per branch; a node pulses when the head touches it (.88) */
.b-track{stroke:var(--lijn);stroke-width:.6}
.b-tail,.b-head{stroke:var(--kobalt-text);stroke-dasharray:var(--l) 3;animation:beam 4s linear both infinite paused}
.b-tail{--l:.3;--a:.34;--b:-.58;--c:-1.06;stroke-width:1;opacity:.4}
.b-head{--l:.07;--a:.11;--b:-.81;--c:-1.29;stroke-width:1.8}
.b-two{animation-delay:2s}
.visual.is-active :is(.b-tail,.b-head,.n-top,.n-bottom){animation-play-state:running}
@keyframes beam{0%{stroke-dashoffset:var(--a);animation-timing-function:ease-in-out}34%{stroke-dashoffset:var(--b);animation-timing-function:ease-out}43%,100%{stroke-dashoffset:var(--c)}}
@keyframes node-pulse{0%,34%{scale:1}37.75%{scale:1.08}41.5%,100%{scale:1}}
.n-top,.n-bottom{animation:node-pulse 4s ease both infinite paused}
.n-bottom{animation-delay:2s}
.n-from{left:16%}
.n-top{left:84%;top:22%}
.n-bottom{left:84%;top:78%}
/* 3 list */
.cal{--w:5.2em;top:20%}
.chips{position:absolute;left:50%;top:40%;display:grid;gap:.9em;transform:translateX(-50%)}
.visual .chip{display:grid;place-items:center;width:9em;height:3.6em;padding:0;color:var(--kobalt-text);opacity:0;transform:translateY(1.2em);transition:.3s}
.chip svg{width:1.7em;height:1.7em}
.visual.is-active .chip{opacity:1;transform:none;transition:opacity .4s var(--d,0s),transform .5s var(--d,0s)}
.chip:nth-child(2){--d:.18s}
.chip:nth-child(3){--d:.36s}
/* 4 blur */
.glow{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(closest-side,var(--kobalt-ring),transparent)}
.disc.big{--w:13em;box-shadow:0 0 0 1.1em var(--kobalt-tint);filter:blur(12px);transform:scale(1.15);transition:.6s var(--ease-out)}
.visual.is-active .disc.big{filter:blur(0px);transform:none}
/* 5 replay: the line of a call fills while a head travels along it, two marks light up where it passes (what worked, what could be better), then it rewinds */
.replay{position:absolute;left:14%;right:14%;top:50%;height:.7em;border-radius:1em;background:var(--lijn);translate:0 -50%}
.rp-fill{position:absolute;inset:0;width:0;border-radius:inherit;background:var(--kobalt);animation:rp-fill 7s ease-in-out both infinite paused}
.rp-head{--w:3.2em;left:0;background:var(--papier);color:var(--kobalt-text);box-shadow:0 0 0 .22em var(--kobalt);animation:rp-head 7s ease-in-out both infinite paused}
.rp-mark{--w:4.4em;scale:.8;opacity:.45;animation:rp-m1 7s ease both infinite paused}
.rp-mark.m1{left:36%}
.rp-mark.m2{left:72%;animation-name:rp-m2}
.visual.is-active :is(.rp-fill,.rp-head,.rp-mark){animation-play-state:running}
@keyframes rp-fill{0%{width:0}70%,88%{width:100%}100%{width:0}}
@keyframes rp-head{0%{left:0}70%,88%{left:100%}100%{left:0}}
@keyframes rp-m1{0%,22%{scale:.8;opacity:.45}28%,88%{scale:1;opacity:1}100%{scale:.8;opacity:.45}}
@keyframes rp-m2{0%,47%{scale:.8;opacity:.45}53%,88%{scale:1;opacity:1}100%{scale:.8;opacity:.45}}
@media (max-width:719px){
.points .stage{grid-template-columns:1fr;grid-template-rows:1fr auto;justify-items:center;gap:20px;padding:4vh 0 84px}
.point-list{align-self:center;justify-self:stretch}
.point-visuals{--side:min(240px,32svh)}
}
/* closing */
.cta-band.cta-band--ripple{position:relative;display:grid;place-items:center;box-sizing:border-box;min-height:max(70vh,480px);padding:14vh var(--gutter);overflow:hidden;isolation:isolate;text-align:center}
.ripple{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ring{--o:calc(.9 - var(--i,0) * .15);--d:calc(28vmax + var(--i,0) * 9vmax);position:absolute;left:50%;top:50%;width:var(--d);height:var(--d);border:1.5px solid var(--kobalt-ring);border-radius:50%;translate:-50% -50%;opacity:var(--o)}
.ring:nth-child(2){--i:1}
.ring:nth-child(3){--i:2}
.ring:nth-child(4){--i:3}
.ring:nth-child(5){--i:4}
.cta-band--ripple.is-on .ring{animation:ring-run 4s ease calc(var(--i,0) * .4s) infinite backwards}
@keyframes ring-run{0%{scale:.86;opacity:0}40%{opacity:var(--o)}100%{scale:1.1;opacity:0}}
.cta-band--ripple h2{max-width:16ch;margin:0 auto clamp(24px,4vh,40px);font-size:clamp(2rem,5vw,4rem);color:var(--inkt)}
/* coach and feedback (05b): 460vh stages; section.coach, as canvas.coach has the class too */
section.coach,section.feedback{height:460vh}
section.coach .stage,section.feedback .stage{position:sticky;top:var(--nav-h);box-sizing:border-box;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:clamp(32px,6vw,96px);height:calc(100svh - var(--nav-h))}
.coach-space,.feedback-space{position:absolute;left:0;top:0;width:100%;height:140vh}
.coach-space:nth-child(3),.feedback-space:nth-child(3){top:140vh}
.coach-space:nth-child(4),.feedback-space:nth-child(4){top:280vh}
/* the states share a cell and cross fade */
.state-copy{display:grid;align-content:center;justify-items:start;gap:clamp(14px,2.6vh,26px)}
.state-copy .eyebrow{grid-area:1/1}
.state{grid-area:2/1;opacity:0;visibility:hidden;translate:0 14px;transition:opacity .25s ease-in,translate .25s ease-in,visibility 0s .25s}
.state.is-active{opacity:1;visibility:visible;translate:none;transition:opacity .45s ease-out .2s,translate .7s var(--ease-out) .2s,visibility 0s .2s}
.state-title{margin:0;max-width:13ch;font-size:clamp(1.85rem,4.2vw,3.5rem);font-weight:600;line-height:1.04;letter-spacing:-.03em;text-wrap:balance;color:var(--inkt)}
.state-line{max-width:30ch;margin:16px 0 0;font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.4;color:var(--grafiet)}
.coach-visual,.track-visual{--side:min(520px,42vw);position:relative;width:var(--side);aspect-ratio:1;justify-self:center}
.coach-chip,.track-chip{--cf:14px;position:absolute;display:inline-flex;align-items:center;gap:.55em;box-sizing:border-box;height:2.9em;font:500 var(--cf)/1 var(--font-sans);white-space:nowrap;color:var(--inkt);opacity:0}
.coach-chip svg,.track-chip svg{flex:none;width:1.2em;height:1.2em;stroke-width:2;color:var(--kobalt-text)}
/* 1 coach: the canvas is 1.5 times the visual, so the points fly in from further out */
.coach-visual::before{content:"";position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(closest-side,var(--kobalt-tint),#0000)}
.coach-visual canvas{--fit:.59;--dot:2.6;position:absolute;left:50%;top:50%;display:block;width:var(--cw,calc(var(--side) * 1.5));aspect-ratio:1;translate:-50% -50%;pointer-events:none}
.coach-chip{--d:0s;--dx:0px;--dy:0px;left:50%;top:50%;translate:calc(-50% + var(--dx)) calc(-50% + var(--dy));transform:translateY(10px) scale(.94);transition:opacity .2s,transform .2s}
.coach-chip:nth-of-type(2){--d:.25s}
.coach-chip:nth-of-type(3){--d:.5s}
.coach-chip>*{filter:blur(6px);transition:filter .2s}
section.coach.is-advice .coach-chip{opacity:1;transform:none;transition:opacity .6s ease-out var(--d),transform .6s var(--ease-out) var(--d)}
section.coach.is-advice .coach-chip>*{filter:none;transition:filter .6s ease-out var(--d)}
/* 2 feedback: chip and node in the plane of the canvas */
.track-visual{--x0:.06;--x1:.74;--cy:.56;perspective:900px}
.track-plane{position:absolute;inset:0;transform:rotateX(28deg)}
.track-visual canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.track-chip{translate:-50% -50%;will-change:transform,opacity}
.track-chip>*{filter:blur(var(--b,0px))}
.next-node{position:absolute;left:90%;top:calc(var(--cy) * 100%);display:grid;place-items:center;width:4.4em;height:4.4em;font-size:15px;border-radius:50%;translate:-50% -50%;background:var(--papier);color:var(--grafiet);box-shadow:inset 0 0 0 1.5px var(--lijn-sterk);transition:.5s}
.next-node>svg{width:46%;height:46%;stroke-width:1.75}
.next-node.is-lit,.beats-static .next-node{background:var(--kobalt);color:var(--paper-fixed);box-shadow:0 0 0 .5em var(--kobalt-tint),0 .9em 2.4em -.5em var(--kobalt-ring)}
.next-label{position:absolute;top:calc(100% + .9em);left:50%;translate:-50% 0;white-space:nowrap;font:500 14px/1.2 var(--font-sans);color:var(--grafiet);transition:color .45s}
.next-node.is-lit .next-label,.beats-static .next-label{color:var(--inkt)}
@media (max-width:900px){.track-visual{--x1:.7}.next-node{left:86%}}
@media (max-width:719px){
section.coach .stage,section.feedback .stage{grid-template-columns:1fr;align-content:center;justify-items:stretch;gap:clamp(20px,3.6vh,36px);padding:0 0 84px}
.coach-visual,.track-visual{--side:260px;grid-row:1;width:100%;height:var(--side);aspect-ratio:auto}
.state-copy{grid-row:2}
.coach-visual::before{inset:-6% 0}
.coach-visual canvas{--fit:.5;--dot:2.2;width:calc(100% + 40px)}
.coach-chip,.track-chip{--cf:11.5px}
.next-label{font-size:12px}
.next-node{font-size:12px;left:88%}
}
/* static: reduced motion or no GSAP */
.beats-static .points{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:clamp(48px,9vh,88px) clamp(32px,6vw,96px);padding:clamp(64px,12vh,120px) 0}
.beats-static .points :is(.stage,.point-list,.point-visuals){position:static;display:contents}
.point:nth-child(1),.visual:nth-child(1),.point-space:nth-child(2){--r:1}
.point:nth-child(2),.visual:nth-child(2),.point-space:nth-child(3){--r:2}
.point:nth-child(3),.visual:nth-child(3),.point-space:nth-child(4){--r:3}
.point:nth-child(4),.visual:nth-child(4),.point-space:nth-child(5){--r:4}
.point:nth-child(5),.visual:nth-child(5),.point-space:nth-child(6){--r:5}
.beats-static :is(.point,.point-space){grid-column:1;grid-row:var(--r)}
.beats-static .point-space{position:static;height:0;align-self:start}
.beats-static .visual{position:relative;inset:auto;grid-column:2;grid-row:var(--r);justify-self:center;width:var(--side);aspect-ratio:1;opacity:1}
.beats-static .point-title{color:var(--inkt);opacity:1}
.beats-static .point-line{max-height:none;margin-top:12px;visibility:visible;opacity:1}
.beats-static .rp-fill{width:100%}
.beats-static .rp-head{left:100%}
.beats-static .rp-mark{scale:1;opacity:1}
.beats-static :is(.orbiter,.orbiter .disc,.b-tail,.b-head,.n-top,.n-bottom,.rp-fill,.rp-head,.rp-mark,.ring,.paths path,.hero--paths .hero-sub,.hero--paths .actions){animation:none}
.beats-static .paths path{stroke-dasharray:none}
.beats-static .b-head{display:none}
.beats-static .b-tail{stroke-dasharray:none;opacity:.6}
.beats-static .chip{opacity:1;transform:none}
.beats-static .disc.big{filter:none;transform:none}
.beats-static .flow-bg{position:absolute;inset:0 0 auto;height:calc(100svh - var(--nav-h));margin:0}
/* static coach and feedback */
.beats-static :is(section.coach,section.feedback){height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:clamp(32px,6vw,96px);padding:clamp(64px,12vh,120px) 0}
.beats-static :is(section.coach,section.feedback) .stage{position:static;display:contents}
.beats-static :is(.coach-space,.feedback-space){display:none}
.beats-static .state-copy{gap:clamp(22px,4vh,36px)}
.beats-static .state-copy .eyebrow,.beats-static .state{grid-area:auto}
.beats-static .state{opacity:1;visibility:visible;translate:none;transition:none}
.beats-static :is(.coach-chip,.track-chip){opacity:1;transform:none;transition:none;will-change:auto}
.beats-static :is(.coach-chip,.track-chip)>*{filter:none;transition:none}
.beats-static :is(.next-node,.next-label){transition:none}
@media (max-width:719px){
.beats-static :is(section.coach,section.feedback){grid-template-columns:1fr;row-gap:28px}
.beats-static :is(.coach-visual,.track-visual){grid-row:1}
.beats-static .state-copy{grid-row:2}
.beats-static .points{grid-template-columns:1fr;row-gap:20px}
.beats-static .point{grid-row:calc(var(--r) * 2)}
.beats-static :is(.visual,.point-space){grid-row:calc(var(--r) * 2 - 1)}
.beats-static .visual{grid-column:1;margin-top:36px}
}