/* ============================================================
   binnenkort/binnenkort.css: the temporary "nog even geduld" page on live (worker/coming-soon.js)
   ============================================================
   Standalone on purpose: it also runs on the old main branch, so it uses no other stylesheet.
   The tokens below are the brand colours of css/ds/tokens.css. */

:root{
  --ok:#1E6B52; --ink:#13262B; --petrol:#1F5560; --yellow:#F2B632; --yellow-soft:#FCE8A6; --clay:#B0532E;
  --n-0:#FFFFFF; --n-50:#FAFBF8; --n-100:#EEF0EA; --n-200:#E3E8E2; --n-300:#D3D9D3; --n-500:#6A7A7D; --n-700:#3D5257;
  --display:'Bricolage Grotesque',system-ui,sans-serif; --body:'Instrument Sans',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--n-100);color:var(--ink);font:400 18px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:-30%;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 38% at 22% 28%,color-mix(in srgb,var(--yellow) 45%,transparent),transparent 70%),
             radial-gradient(42% 42% at 78% 70%,color-mix(in srgb,var(--petrol) 28%,transparent),transparent 70%);
  filter:blur(40px);animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(5%,-4%,0) rotate(6deg)}}

.wait{min-height:100vh;width:min(980px,100%);margin:0 auto;padding:28px 20px 56px;display:flex;flex-direction:column;align-items:center;gap:20px}
.wait-mark{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:800 22px var(--display);letter-spacing:-.02em}
.wait-mark svg{width:34px;height:34px}
.wait-mark .dot{fill:var(--yellow)}

/* ── the scene ── */
.wait-scene{margin:8px 0 0;width:100%;max-width:760px}
.wait-scene svg{width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(0 30px 40px color-mix(in srgb,var(--ink) 18%,transparent))}
.ground{fill:var(--n-50);stroke:var(--n-300);stroke-width:1.5}
.dots{fill:var(--n-300)}
.hill{fill:color-mix(in srgb,var(--petrol) 10%,var(--n-50))}
.trail{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round;stroke-dasharray:2 14;opacity:.55}
.door-frame{fill:var(--petrol)}
.door-panel{fill:color-mix(in srgb,var(--petrol) 70%,var(--n-0))}
.door-knob{fill:var(--yellow)}
.lock{transform-box:fill-box;transform-origin:50% 0;animation:jiggle 3.6s var(--ease) infinite}
.lock-shackle{fill:none;stroke:var(--yellow);stroke-width:4;stroke-linecap:round}
.code{fill:var(--ink)}
.code-cell{fill:color-mix(in srgb,var(--n-0) 12%,var(--ink));stroke:color-mix(in srgb,var(--n-0) 25%,transparent)}
.code-char{font:700 15px var(--mono);fill:var(--yellow)}
.code-char.is-last{fill:var(--n-300);animation:blink 1.2s steps(1) infinite}
.code-char.is-pop{animation:pop .45s var(--ease)}
@keyframes blink{50%{opacity:.2}}
@keyframes pop{0%{transform:scale(.2);opacity:0}70%{transform:scale(1.25)}100%{transform:none}}
.code-char{transform-box:fill-box;transform-origin:center}
.lock.is-try{animation:shake .6s var(--ease)}
@keyframes shake{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* the stops on the route: a letter pops up when the snail passes */
.stop circle{fill:var(--n-50);stroke:var(--ink);stroke-width:2.5;transition:fill .3s}
.stop>text{font:700 12px var(--body);fill:var(--ink)}
.stop.is-got circle{fill:var(--ok,#1E6B52);stroke:var(--ink)}
.stop.is-got>text{fill:var(--n-0)}
.stop-letter{opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s var(--ease)}
.stop-letter rect{fill:var(--yellow);stroke:var(--ink);stroke-width:2}
.stop-letter text{font:800 16px var(--display);fill:var(--ink)}
.stop.is-got .stop-letter{opacity:1;transform:none}

/* the phone in front of the snail */
.phone-body{fill:var(--ink)}
.phone-screen{fill:var(--n-50)}
.phone-route{fill:none;stroke:var(--clay);stroke-width:1.6;stroke-dasharray:2 2;stroke-linecap:round}
.phone-pin{fill:var(--yellow);stroke:var(--ink);stroke-width:1}
.phone-home{fill:color-mix(in srgb,var(--n-0) 40%,transparent)}
.phone{animation:bob 1.6s ease-in-out infinite .2s;transform-box:fill-box}
.door-sign{font:700 15px var(--mono);fill:var(--clay)}
@keyframes jiggle{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-9deg)}88%{transform:rotate(7deg)}92%{transform:rotate(-4deg)}96%{transform:rotate(2deg)}}

/* the snail travels along the trail and starts again, ever so slowly */
.snail-path{animation:crawl 26s linear infinite;offset-path:path("M40 214 C130 192 220 204 300 208 C360 211 410 204 440 200");offset-rotate:0deg}
@supports not (offset-path:path("M0 0")){.snail-path{transform:translate(220px,206px);animation:none}}
@keyframes crawl{0%{offset-distance:0%}92%{offset-distance:100%;opacity:1}96%{offset-distance:100%;opacity:0}97%{offset-distance:0%;opacity:0}100%{offset-distance:0%;opacity:1}}
.snail{cursor:pointer;outline:none;transform-box:fill-box}
.snail .body{fill:var(--yellow-soft);stroke:var(--ink);stroke-width:2.5;animation:squish 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.snail .stalk{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.snail .eye{fill:var(--n-0);stroke:var(--ink);stroke-width:2}
.snail .pupil{fill:var(--ink);animation:look 6s ease-in-out infinite}
.snail .smile{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.shell{animation:bob 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.shell-fill{fill:var(--clay);stroke:var(--ink);stroke-width:2.5}
.shell-swirl{fill:none;stroke:color-mix(in srgb,var(--n-0) 75%,transparent);stroke-width:3;stroke-linecap:round}
.hat-top{fill:var(--yellow);stroke:var(--ink);stroke-width:2.5}
.hat-brim{fill:var(--yellow);stroke:var(--ink);stroke-width:2.5}
.hat-ridge{fill:color-mix(in srgb,var(--yellow) 70%,var(--clay));stroke:var(--ink);stroke-width:2}
.hat{animation:bob 1.6s ease-in-out infinite .1s;transform-box:fill-box}
.pole{stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.flag{fill:var(--petrol);transform-box:fill-box;transform-origin:0 50%;animation:wave 1.2s ease-in-out infinite}
.shadow{fill:color-mix(in srgb,var(--ink) 12%,transparent)}
.snail:focus-visible .shell-fill{stroke:var(--yellow);stroke-width:5}
@keyframes squish{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.05)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes look{0%,40%,100%{transform:translate(0,0)}50%,90%{transform:translate(-2px,1px)}}
@keyframes wave{0%,100%{transform:skewY(0)}50%{transform:skewY(-8deg) scaleX(.92)}}

/* the speech bubble, after a click on the snail */
.bubble{opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s var(--ease);pointer-events:none}
.bubble rect,.bubble path{fill:var(--ink)}
.bubble-pos{transition:transform .3s var(--ease)}
.is-near .bubble-pos{transform:translateX(-170px)}
.bubble .tail-left,.is-near .bubble .tail-right{display:none}
.is-near .bubble .tail-left{display:inline}
.bubble text{font:600 15px var(--body);fill:var(--n-50)}
.is-talking .bubble{opacity:1;transform:none}
.is-hurrying .snail-path{animation-duration:9s}

/* ── text ── */
.wait-text{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;max-width:620px}
.wait-badge{margin:0;font:500 14px var(--mono);background:var(--n-50);border:1px solid var(--n-300);border-radius:99px;padding:6px 14px}
.wait-text h1{margin:0;font:800 clamp(44px,9vw,84px)/1 var(--display);letter-spacing:-.03em}
.wait-lead{margin:0;font-size:clamp(18px,2.3vw,21px);color:var(--n-700)}
.wait-progress{width:min(440px,100%);display:flex;flex-direction:column;gap:8px;margin-top:6px}
.wait-bar{height:14px;border-radius:99px;background:var(--n-200);border:1px solid var(--n-300);overflow:hidden}
.wait-bar i{display:block;height:100%;width:97%;border-radius:99px;background:repeating-linear-gradient(45deg,var(--yellow) 0 12px,color-mix(in srgb,var(--yellow) 70%,var(--clay)) 12px 24px);background-size:34px 34px;animation:stripes 1s linear infinite;transition:width 1.2s var(--ease)}
@keyframes stripes{to{background-position:34px 0}}
.wait-progress p{margin:0;font:500 15px var(--mono);color:var(--n-500)}
.wait-soon{margin:10px 0 0;font-weight:600;color:var(--petrol)}

@media (max-width:560px){
  body{font-size:16px}
  .wait{padding:20px 16px 40px;gap:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .code-char.is-last{opacity:1}
  .snail-path{offset-distance:45%}
}