/* Gedeeld binnenkomst-scherm (03, 06, 07, 08–10). Kleuren komen uit de tokens van elk concept. */
body.gated{overflow:hidden}
#gate{position:fixed;inset:0;z-index:100;background:var(--gate-bg,#141414);color:var(--gate-fg,#e8e6e1);display:grid;grid-template-rows:auto 1fr auto;padding:16px max(16px, env(safe-area-inset-right,0px)) 18px max(16px, env(safe-area-inset-left,0px));font-family:var(--mono,ui-monospace,monospace);font-size:12px;text-transform:uppercase;letter-spacing:.06em;transition:opacity 1.1s ease,visibility 0s 1.2s}
#gate.out{opacity:0;visibility:hidden}
#gate .g-top,#gate .g-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
#gate .g-mid{display:grid;place-items:center;align-content:center;gap:28px;text-align:center}
#gate .g-pct{font-size:clamp(64px,12vw,160px);line-height:1;letter-spacing:-.02em;font-weight:300;font-variant-numeric:tabular-nums}
#gate .g-pct small{font-size:.3em;vertical-align:top;margin-left:.2em;opacity:.6}
#gate .g-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;opacity:0;transform:translateY(10px);transition:opacity .6s .1s,transform .6s .1s;pointer-events:none}
#gate.ready .g-btns{opacity:1;transform:none;pointer-events:auto}
#gate.ready .g-load{opacity:.4}
#gate button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:1px solid currentColor;padding:14px 22px;cursor:pointer;min-width:200px;transition:background .25s,color .25s}
#gate button:hover,#gate button:focus-visible{background:var(--gate-fg,#e8e6e1);color:var(--gate-bg,#141414);outline:none}
#gate .g-note{opacity:.5;max-width:40ch;text-transform:none;letter-spacing:0;font-size:12px}
[data-sound-toggle]{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:2px;display:inline-flex;gap:8px;align-items:center;text-transform:inherit;letter-spacing:inherit}
[data-sound-toggle] .eq{display:inline-flex;gap:2px;align-items:flex-end;height:10px}
[data-sound-toggle] .eq i{width:2px;height:3px;background:currentColor}
[data-sound-toggle][aria-pressed="true"] .eq i{animation:eq .9s ease-in-out infinite alternate}
[data-sound-toggle][aria-pressed="true"] .eq i:nth-child(2){animation-delay:-.3s}
[data-sound-toggle][aria-pressed="true"] .eq i:nth-child(3){animation-delay:-.6s}
@keyframes eq{to{height:10px}}

/* taalkeuze met vlaggetjes (zoals op dogfluence.com en purrfluence.com), bovenin het startscherm en in de balk */
.lng{display:inline-flex;gap:4px;align-items:center}
.lng button[data-lang]{display:inline-grid;place-items:center;width:32px;height:28px;min-width:0;padding:0;border:0;border-radius:999px;background:none;cursor:pointer;opacity:.45;filter:grayscale(.7);transition:opacity .2s,filter .2s,transform .2s,background .2s}
.lng button[data-lang]:hover{opacity:1;filter:none;transform:translateY(-1px);background:color-mix(in srgb,currentColor 10%,transparent)}
.lng button[data-lang][aria-pressed="true"]{opacity:1;filter:none;text-decoration:none}
.lng img{display:block;width:20px;height:15px;border-radius:2px}
#gate .g-ctl{display:inline-flex;gap:18px;align-items:center}


#gate .lng button[data-lang]{min-width:0;padding:0;border:0;background:none}
#gate .lng button[data-lang]:hover,#gate .lng button[data-lang]:focus-visible{background:color-mix(in srgb,currentColor 10%,transparent);color:inherit}