/* Contact (spec 07): the warp hero, the channels and the questions page, plus the heroes of the legal pages and the 404, which share its kit.
   Markup: site-src/pages/contact.html, privacy.html, voorwaarden.html, verwerkersovereenkomst.html and 404.html, scenes: beats-pages.js (warp and channels).
   Plain rules are the end state of every scene, so the page is complete without JS or with reduced motion; .is-armed on the channels means the scroll
   scene has started and the beginning states apply. Tokens only. */

/* warp hero: a tunnel of grid lines in perspective behind the copy (ported from the Magic UI warp background). Four faces and a back wall, cell 48px,
   one line per cell in --lijn. A beam is a 2px cobalt line with a soft tail that glides from the far end to the near edge in 6 to 9 seconds; the
   lane around the beams of a face fades them in and out by position, so no opacity moves and nothing resets. CSS animations on the compositor only. */
.hero.hero--warp{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:calc(100svh - var(--nav-h));padding:0 var(--gutter) 12vh;overflow:hidden;isolation:isolate}
.warp{position:absolute;inset:0;z-index:0;overflow:hidden;perspective:600px;container-type:size;pointer-events:none;will-change:transform;--d:max(100cqw,100cqh)}
.face{position:absolute;overflow:hidden;background:linear-gradient(var(--lijn) 0 1px,transparent 1px) 0 24px/48px 48px,linear-gradient(90deg,var(--lijn) 0 1px,transparent 1px) 24px 0/48px 48px;-webkit-mask-image:linear-gradient(to bottom,#000 24%,rgb(0 0 0 / .22));mask-image:linear-gradient(to bottom,#000 24%,rgb(0 0 0 / .22))}
.f-top{left:0;top:0;width:100cqw;height:var(--d);transform-origin:50% 0;transform:rotateX(-90deg)}
.f-bottom{left:0;top:100%;width:100cqw;height:var(--d);transform-origin:50% 0;transform:rotateX(-90deg)}
.f-left{left:0;top:0;width:100cqh;height:var(--d);transform-origin:0 0;transform:rotate(90deg) rotateX(-90deg)}
.f-right{right:0;top:0;width:100cqh;height:var(--d);transform-origin:100% 0;transform:rotate(-90deg) rotateX(-90deg)}
.f-back{left:0;top:0;width:100%;height:100%;transform:translateZ(calc(var(--d) * -1));-webkit-mask-image:radial-gradient(closest-side,rgb(0 0 0 / .3),transparent);mask-image:radial-gradient(closest-side,rgb(0 0 0 / .3),transparent)}
.lane{position:absolute;inset:0;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 86%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 86%,transparent)}
.wbeam{position:absolute;left:20%;left:calc(round(down,var(--x,50cqw),48px) + 23.5px);top:0;width:2px;height:calc(var(--d) * .3);background:linear-gradient(to bottom,var(--kobalt-text),transparent);opacity:.85;will-change:transform;animation:wbeam-run var(--t,7s) linear var(--s,0s) infinite}
@keyframes wbeam-run{from{transform:translateY(var(--d))}to{transform:translateY(calc(var(--d) * -.3))}}
.f-top .wbeam:nth-child(1){--x:24cqw;--t:7.2s;--s:-1.4s}
.f-top .wbeam:nth-child(2){--x:68cqw;--t:8.6s;--s:-5.8s}
.f-bottom .wbeam:nth-child(1){--x:40cqw;--t:6.4s;--s:-4.1s}
.f-bottom .wbeam:nth-child(2){--x:82cqw;--t:7.8s;--s:-.6s}
.f-left .wbeam:nth-child(1){--x:30cqh;--t:8.2s;--s:-2.7s}
.f-left .wbeam:nth-child(2){--x:74cqh;--t:6.8s;--s:-6.1s}
.f-right .wbeam:nth-child(1){--x:18cqh;--t:7.6s;--s:-3.3s}
.f-right .wbeam:nth-child(2){--x:58cqh;--t:8.8s;--s:-7.9s}
.hero--warp.is-away .wbeam{animation-play-state:paused}
.hero--warp .hero-copy::before{content:"";position:absolute;inset:-14% -22%;z-index:-1;background:radial-gradient(closest-side,var(--papier) 46%,transparent 100%);pointer-events:none}
.hero--warp .eyebrow{margin:0 0 20px}
.hero--warp .hero-title{max-width:16ch;margin:0;text-wrap:balance;font-size:clamp(2.5rem,6.4vw,5.25rem);font-weight:600;line-height:1;letter-spacing:-.035em;color:var(--inkt)}
.hero--warp .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) .65s backwards}
.hero--warp .actions{justify-content:center;margin-top:clamp(24px,4vh,36px);animation:hero-in .8s var(--ease-out) .8s backwards}
.hero--warp [data-lang] .w:nth-of-type(n+2){animation-delay:.07s}
.hero--warp [data-lang] .w:nth-of-type(n+3){animation-delay:.14s}
.hero--warp [data-lang] .w:nth-of-type(n+4){animation-delay:.21s}
.hero--warp [data-lang] .w:nth-of-type(n+5){animation-delay:.28s}
.hero--warp [data-lang] .w:nth-of-type(n+6){animation-delay:.35s}
.hero--warp [data-lang] .w:nth-of-type(n+7){animation-delay:.42s}
.hero--warp [data-lang] .w:nth-of-type(n+8){animation-delay:.49s}
.hero--warp [data-lang] .w:nth-of-type(n+9){animation-delay:.56s}

/* channels: one cobalt line draws down from the hero with the scroll (--v, 0 to 1), splits in three branches (--b1 to --b3) that reach the three
   channels one after the other; a channel lights when its branch arrives. About 1.5 viewport heights, not pinned. */
.channels{--cw:min(60rem,100% - 2 * var(--gutter));--j:62svh;--nd:72px;position:relative;display:flow-root;min-height:150svh}
.ch-line{position:absolute;left:50%;top:0;width:2px;height:var(--j);margin-left:-1px}
.ch-line::before{content:"";position:absolute;inset:0;background:var(--lijn-zacht)}
.ch-line::before,.ch-fill{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 96px);mask-image:linear-gradient(to bottom,transparent,#000 96px)}
.ch-fill{position:absolute;left:0;top:0;width:100%;height:calc(var(--v,1) * 100%);background:var(--kobalt)}
.ch-line::after{content:"";position:absolute;left:50%;top:calc(var(--v,1) * 100%);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--kobalt);box-shadow:0 0 0 4px var(--kobalt-tint),0 0 22px 6px var(--kobalt-ring);opacity:0}
.is-armed .ch-line::after{opacity:calc(clamp(0,(var(--v) - .004) * 80,1) * clamp(0,(.996 - var(--v)) * 80,1))}
.ch-branches{display:block;width:var(--cw);height:auto;margin:var(--j) auto 0;overflow:visible}
.ch-branches path{fill:none;stroke-width:2}
.ch-tr path{stroke:var(--lijn-zacht)}
.ch-fi path{stroke:var(--kobalt);stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--b,1))}
.ch-fi path:nth-child(1){--b:var(--b1,1)}
.ch-fi path:nth-child(2){--b:var(--b2,1)}
.ch-fi path:nth-child(3){--b:var(--b3,1)}
.ch-row{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:var(--cw);margin:0 auto}
.channel{display:grid;justify-items:center;align-content:start;gap:22px;padding:0 8px;color:inherit;text-decoration:none;border-radius:24px;-webkit-tap-highlight-color:transparent}
.channel:hover{text-decoration:none}
.channel:focus-visible{outline:2px solid var(--kobalt);outline-offset:6px}
.ch-disc{position:relative;display:grid;place-items:center;box-sizing:border-box;width:var(--nd);height:var(--nd);border-radius:50%;background:var(--kobalt);color:var(--paper-fixed);box-shadow:0 0 0 6px var(--kobalt-tint),0 14px 30px -12px var(--kobalt-ring);transition:background-color .5s,color .5s,box-shadow .5s,translate .3s var(--ease-out)}
.ch-disc svg{width:42%;height:42%;stroke-width:1.75}
.is-armed .channel:not(.is-lit) .ch-disc{background:var(--papier);color:var(--grafiet);box-shadow:0 0 0 1.5px var(--lijn-sterk),0 0 0 0 transparent}
.channel:hover .ch-disc{translate:0 -4px}
@keyframes ch-ping{from{opacity:.55;scale:1}to{opacity:0;scale:1.9}}
.is-armed .channel.is-lit .ch-disc::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--kobalt);animation:ch-ping 1s ease-out both}
.ch-text{display:grid;justify-items:center;gap:6px;text-align:center}
.ch-label{font:600 clamp(1.3rem,2.1vw,1.75rem)/1.1 var(--font-sans);letter-spacing:-.025em;color:var(--inkt);transition:color .5s}
.ch-value{font:400 clamp(1rem,1.25vw,1.15rem)/1.35 var(--font-sans);color:var(--grafiet);overflow-wrap:anywhere}
.is-armed .channel:not(.is-lit) .ch-label{color:var(--grafiet)}
.channel:hover .ch-label{color:var(--kobalt-text)}
.ch-note{margin:clamp(40px,8vh,72px) 0 0;text-align:center;font-size:var(--text-md);color:var(--grafiet)}
@media (max-width:719px){
.channels{--j:30svh;--r:216px;--nd:60px;--cw:100%}
.ch-line{height:calc(var(--j) + 2 * var(--r) + var(--nd) / 2)}
.ch-branches{display:none}
.ch-row{grid-template-columns:1fr;margin-top:var(--j)}
.channel{height:var(--r)}
.ch-text{padding:6px 14px;background:var(--papier)}
.ch-note{margin-top:0;padding:0 var(--gutter)}
}

/* legal pages: a short open hero on paper, a soft nevel gradient that fades to paper above and below; the copy lines up with the article */
.hero.hero--legal{display:flex;align-items:center;box-sizing:border-box;height:40vh;padding:0 var(--gutter);background:linear-gradient(to bottom,var(--papier),var(--nevel) 42%,var(--papier))}
.hero--legal .hero-copy{width:min(var(--measure),100%);margin:0 auto;align-items:flex-start;text-align:left}
.hero--legal .eyebrow,.hero--dots .eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font:500 15px/1.25 var(--font-sans);letter-spacing:.01em;color:var(--grafiet)}
.hero--legal .eyebrow::before,.hero--dots .eyebrow::before{content:"";flex:none;width:6px;height:6px;background:var(--kobalt)}
.hero--legal h1{margin:0;max-width:none;font-size:clamp(1.9rem,4.6vw,3.5rem);font-weight:600;line-height:1.04;letter-spacing:-.03em;color:var(--inkt)}
.hero--legal p:not(.eyebrow){max-width:40rem;margin:16px 0 0;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.5;color:var(--grafiet)}
.hero--legal p:not(.eyebrow)+p{margin-top:8px}

/* 404: the giant 404 over a quiet dot pattern (Magic UI dot pattern: 1px cobalt dots every 20px, masked radially, no animation) */
.hero.hero--dots{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:calc(100svh - var(--nav-h));padding:0 var(--gutter) 6vh;overflow:hidden;isolation:isolate}
.dotpattern{position:absolute;inset:0;z-index:0;width:100%;height:100%;fill:var(--kobalt-text);opacity:.25;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 64% 60% at 50% 48%,#000 20%,transparent 100%);mask-image:radial-gradient(ellipse 64% 60% at 50% 48%,#000 20%,transparent 100%)}
.hero--dots .giant{margin:0;max-width:none;font:600 clamp(6rem,22vw,18rem)/.9 var(--font-sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--inkt);animation:hero-in .8s var(--ease-out) .1s backwards}
.hero--dots .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) .35s backwards}
.hero--dots .actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(24px,4vh,36px);animation:hero-in .8s var(--ease-out) .5s backwards}
@media (max-width:719px){
.hero.hero--legal{height:36vh}
.hero--legal h1{font-size:clamp(1.55rem,7vw,2.1rem)}
.hero--legal p:not(.eyebrow){font-size:.95rem;margin-top:12px}
.hero--warp .hero-copy::before{inset:-12% -10%}
.hero--warp .hero-title{font-size:clamp(2.1rem,10.4vw,2.6rem)}
.hero.hero--warp{padding-bottom:104px}
.hero--dots .actions .btn{height:48px}
}

/* static: reduced motion, or GSAP did not load. The beams stand still and are not shown, the channels are lit and the line is full */
@media (prefers-reduced-motion:reduce){
.wbeam,.hero--warp .hero-sub,.hero--warp .actions,.hero--dots :is(.giant,.hero-sub,.actions){animation:none}
.wbeam{display:none}
.channels{min-height:0;padding-bottom:clamp(56px,10vh,96px);--j:18svh}
.ch-disc{transition:none}
}
.beats-static :is(.wbeam,.hero--warp .hero-sub,.hero--warp .actions,.hero--dots :is(.giant,.hero-sub,.actions)){animation:none}
.beats-static .wbeam{display:none}
.beats-static .channels{min-height:0;padding-bottom:clamp(56px,10vh,96px);--j:18svh}
.beats-static .ch-disc{transition:none}