/* F54® / CREATIVE STUDIO — gedeelde stijl.
   Eén idee: de site drukt status uit via de gewichtsas van het font, niet via kleur. */

@font-face{
  font-family:"F54 Display";
  src:url("/assets/Thunder-VF.ttf") format("truetype");
  font-weight:100 900; font-display:block;
}

:root{
  /* het thema staat op <html data-thema>; dit vertelt de browser wat hij met native dingen moet
     (keuzelijsten, schuifbalken, invoervelden) — anders staat daar een wit vak in een donkere pagina */
  color-scheme:dark;
  --ink:#0A0A0B;
  --ink-2:#101013;
  --line:#1B1B1E;
  --line-2:#2C2C31;
  --paper:#F3F3F0;
  --mute:#8A8A92;      /* 5,8:1 op de donkere achtergrond */
  --mute-2:#7E7E86;    /* 4,9:1 — draagt tekst, mag dus niet fluisteren */
  --fout:#E2452A;

  --display:"F54 Display", Impact, sans-serif;
  --ui:ui-sans-serif,-apple-system,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --pad:clamp(20px,4vw,44px);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
/* van pagina naar pagina overvloeien in plaats van omklappen; browsers die het niet kennen, laden gewoon zoals eerst */
@view-transition{ navigation:auto }
body{
  margin:0; background:var(--ink); color:var(--paper);
  font:13px/1.5 var(--ui); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
/* geen dubbeltik-zoom en geen wachttijd van 300 ms voordat een tik aankomt */
a,button,input,select,textarea,label,summary,[role=button],[role=link]{touch-action:manipulation}

.label{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mute);
}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* ---------- topbalk ---------- */
.top{
  display:flex; align-items:center; gap:18px;
  padding:0 var(--pad); height:56px; border-bottom:1px solid var(--line);
}
.mark{
  font-family:var(--display); font-variation-settings:"wght" 900,"CNTR" 40;
  font-size:21px; line-height:1; letter-spacing:.01em; text-transform:uppercase;
}
.mark sup{font-family:var(--ui); font-size:8px; font-weight:500; vertical-align:super; margin-left:2px}
.top .spacer{flex:1}
.top .who{
  font-family:var(--mono); font-size:11px; color:var(--mute);
  max-width:min(42vw,340px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.top .subtitel{white-space:nowrap}
@media (max-width:760px){ .top{gap:12px} .top .subtitel{display:none} }
@media (max-width:560px){ .top .who{max-width:34vw} }
/* onder deze breedte wint de knop van de naam: uitloggen en van thema wisselen moet altijd kunnen */
@media (max-width:420px){ .top .who{display:none} }

.knop{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  background:none; border:1px solid var(--line-2); color:var(--paper);
  padding:7px 12px; cursor:pointer; transition:background .25s cubic-bezier(.16,1,.3,1), color .25s cubic-bezier(.16,1,.3,1), border-color .25s;
}
.knop:hover{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.knop:disabled{opacity:.4; cursor:not-allowed}

:focus-visible{outline:1px solid var(--paper); outline-offset:2px}

/* bij het omzetten van het thema mag alles even meelopen; daarbuiten staat deze regel niet aan,
   zodat een transitie op kleur nergens anders in de weg zit */
html.thema-wissel *{ transition:background-color .32s ease, color .32s ease, border-color .32s ease, fill .32s ease !important }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  @view-transition{ navigation:none }
}

/* ---------- specimenmuur ----------
   Dezelfde taal als het inlogscherm: grote woorden in bijna-zwart achter de inhoud, waarvan het gewicht
   langzaam golft. Pagina's zetten hun eigen inhoud erboven met .boven (z-index 1). */
.muur{position:fixed; inset:0; z-index:0; overflow:hidden; display:flex; flex-direction:column; justify-content:center;
  pointer-events:none; user-select:none}
.muur .rij{font-family:var(--display); font-size:clamp(52px,10.5vw,132px); line-height:.90; text-transform:uppercase;
  white-space:nowrap; color:#0F0F13; letter-spacing:-.01em;
  font-variation-settings:"wght" var(--w,400),"CNTR" 0;
  animation:golf 13s ease-in-out infinite; animation-delay:calc(var(--i) * -.62s); will-change:font-variation-settings}
.muur .rij:nth-child(even){text-indent:-1.6em}
@keyframes golf{
  0%,100%{ font-variation-settings:"wght" 130,"CNTR" 0 }
  50%    { font-variation-settings:"wght" 880,"CNTR" 0 }
}
@media (prefers-reduced-motion:reduce){ .muur .rij{animation:none} }
.boven{position:relative; z-index:1}

/* ---------- lichte variant ----------
   Dezelfde rollen, omgekeerd: inkt wordt papier. Eén set variabelen, de rest van de stijl verandert niet. */
:root[data-thema="licht"]{
  color-scheme:light;
  --ink:#F4F4F1;
  --ink-2:#EAEAE5;
  --line:#DFDFD9;
  --line-2:#C2C2BB;
  --paper:#111114;
  --mute:#5A5A62;      /* 6,2:1 op papier */
  --mute-2:#6B6B73;    /* 4,8:1 */
  --fout:#B8301A;
}
:root[data-thema="licht"] .muur .rij{color:#E8E8E2}

/* ---------- eigen muis ----------
   Eén vierkant dat de wijzer volgt; muis.js laat hem frame voor frame inlopen.
   difference-blending maakt hem vanzelf licht op donker en donker op licht. */
@media (hover:hover) and (pointer:fine){
  html.muis-aan, html.muis-aan *{cursor:none}
  html.muis-aan input, html.muis-aan textarea,
  html.muis-aan [contenteditable]{cursor:text}   /* tikken blijft tikken, ook in het opstellingsvel */
  .muis{
    position:fixed; left:0; top:0; z-index:9999; pointer-events:none;
    width:14px; height:14px; border:1px solid #fff;
    mix-blend-mode:difference; will-change:transform;
    /* de plaats komt uit muis.js (frame voor frame) en het midden via translate(-50%,-50%) in dezelfde
       transform; alleen de maat en het vervagen gaan via een overgang, zonder marges die mee moeten schuiven */
    transition:width .22s cubic-bezier(.16,1,.3,1), height .22s cubic-bezier(.16,1,.3,1),
               border-radius .22s, opacity .2s;
  }
  .muis.open{width:34px; height:34px; border-radius:50%}
  .muis.druk{width:10px; height:10px}
  .muis.weg{opacity:0}
}
@media (prefers-reduced-motion:reduce){ .muis{transition:none} }