/* Yamako design-system, gedeelde bron voor het project Kijkje.
   Tokens, verfijnde mesh-gradients en de basiscomponenten.
   Projecten importeren hieruit in plaats van de stijl na te bouwen. */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --font:'Sora',system-ui,sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --ink:#4a4a4d;
  --body:#5a5a5d;
  --soft:#7a7a7d;
  --mist:#9a9a9d;
  --line:rgba(74,74,77,.13);
  --veil:rgba(255,255,255,.72);

  --geel:#f5e994;
  --salie:#4f7a5e;
  --rose:#d9a8b0;
  --oppervlak:#ffffff;

  --radius:8px;
  --schaduw:0 18px 44px rgba(74,74,77,.14);
  --schaduw-zacht:0 10px 30px rgba(74,74,77,.10);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font);
  color:var(--body);
  background:var(--oppervlak);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}

/* Donkere modus voor donkere momenten. Tekst en lijnen worden licht. */
body.donker{--ink:#f3f1f6;--body:#dcdae6;--soft:#bab8c9;--mist:#8f8ea0;--line:rgba(255,255,255,.16)}

/* ---- Verfijnde mesh-gradients ------------------------------------
   Elke mesh is een set zachte radialen over een pastel-basis. Kalm,
   niet druk, met meer diepte dan een enkel verloop. */
.mesh{position:absolute;inset:0}
.mesh-1{background-color:#fbeef1;background-image:
  radial-gradient(42% 48% at 16% 20%, #ffe1cf 0%, rgba(255,225,207,0) 60%),
  radial-gradient(44% 42% at 84% 14%, #ffd2e0 0%, rgba(255,210,224,0) 62%),
  radial-gradient(52% 54% at 74% 82%, #ecdcf6 0%, rgba(236,220,246,0) 64%),
  radial-gradient(44% 50% at 24% 82%, #f7e7bf 0%, rgba(247,231,191,0) 62%);}
.mesh-2{background-color:#eef5ef;background-image:
  radial-gradient(44% 48% at 18% 22%, #d8ecdc 0%, rgba(216,236,220,0) 62%),
  radial-gradient(46% 44% at 82% 16%, #c6e6d6 0%, rgba(198,230,214,0) 62%),
  radial-gradient(52% 54% at 72% 84%, #dcefe8 0%, rgba(220,239,232,0) 64%),
  radial-gradient(44% 48% at 26% 80%, #eef0cf 0%, rgba(238,240,207,0) 62%);}
.mesh-3{background-color:#eef1fb;background-image:
  radial-gradient(44% 48% at 18% 20%, #d7e4f7 0%, rgba(215,228,247,0) 62%),
  radial-gradient(46% 44% at 84% 16%, #cdd8f2 0%, rgba(205,216,242,0) 62%),
  radial-gradient(52% 54% at 74% 84%, #e6dcf3 0%, rgba(230,220,243,0) 64%),
  radial-gradient(44% 48% at 24% 82%, #d9ecef 0%, rgba(217,236,239,0) 62%);}
.mesh-4{background-color:#fdf8dd;background-image:
  radial-gradient(46% 50% at 20% 22%, #f7ec9e 0%, rgba(247,236,158,0) 62%),
  radial-gradient(44% 42% at 82% 16%, #f3ecc4 0%, rgba(243,236,196,0) 62%),
  radial-gradient(52% 54% at 74% 84%, #e8efd0 0%, rgba(232,239,208,0) 64%),
  radial-gradient(44% 48% at 26% 80%, #fbe6cf 0%, rgba(251,230,207,0) 62%);}
.mesh-5{background-color:#f8eef4;background-image:
  radial-gradient(44% 48% at 18% 20%, #f4d9ea 0%, rgba(244,217,234,0) 62%),
  radial-gradient(46% 44% at 84% 16%, #ecd6ee 0%, rgba(236,214,238,0) 62%),
  radial-gradient(52% 54% at 74% 84%, #e3d7f2 0%, rgba(227,215,242,0) 64%),
  radial-gradient(44% 48% at 24% 82%, #f7e2d6 0%, rgba(247,226,214,0) 62%);}
.mesh-6{background-color:#eaf5f3;background-image:
  radial-gradient(44% 48% at 18% 22%, #cdebe6 0%, rgba(205,235,230,0) 62%),
  radial-gradient(46% 44% at 82% 16%, #c7e6ee 0%, rgba(199,230,238,0) 62%),
  radial-gradient(52% 54% at 74% 84%, #daecdf 0%, rgba(218,236,223,0) 64%),
  radial-gradient(44% 48% at 26% 80%, #eef0cf 0%, rgba(238,240,207,0) 62%);}
.mesh-7{background-color:#f4f0ee;background-image:
  radial-gradient(40% 46% at 14% 20%, #ffe0d0 0%, rgba(255,224,208,0) 58%),
  radial-gradient(40% 40% at 50% 10%, #f7d7e6 0%, rgba(247,215,230,0) 60%),
  radial-gradient(46% 48% at 86% 26%, #e3ddf5 0%, rgba(227,221,245,0) 62%),
  radial-gradient(46% 50% at 30% 84%, #d6ecdf 0%, rgba(214,236,223,0) 62%),
  radial-gradient(42% 46% at 78% 82%, #eef0cd 0%, rgba(238,240,205,0) 62%);}
.mesh-8{background-color:#eef0f5;background-image:
  radial-gradient(44% 48% at 18% 20%, #e6dcef 0%, rgba(230,220,239,0) 62%),
  radial-gradient(46% 44% at 84% 16%, #d7def0 0%, rgba(215,222,240,0) 62%),
  radial-gradient(52% 54% at 74% 84%, #dfe9ec 0%, rgba(223,233,236,0) 64%),
  radial-gradient(44% 48% at 24% 82%, #f2e4d9 0%, rgba(242,228,217,0) 62%);}
/* Knowledge, een zachte grijze gradient met warme gloed, in de geest van Leonard. */
.mesh-knowledge{background-color:#a6aab2;background-image:
  radial-gradient(58% 62% at 6% 90%, rgba(232,152,110,.55) 0%, rgba(232,152,110,0) 60%),
  radial-gradient(52% 56% at 94% 16%, rgba(210,214,224,.72) 0%, rgba(210,214,224,0) 60%),
  radial-gradient(60% 60% at 72% 82%, rgba(150,150,170,.42) 0%, rgba(150,150,170,0) 62%),
  linear-gradient(150deg,#b6bac2 0%,#a2a6b0 52%,#989ca6 100%);}
/* Aurora, gekozen in het gradient-lab. Een donkere glow voor de avond. */
.mesh-aurora{background-color:#122735;background-image:
  radial-gradient(65% 60% at 28% 34%, rgba(120,229,180,.12) 0%, transparent 60%),
  radial-gradient(65% 60% at 72% 30%, rgba(99,199,210,.12) 0%, transparent 60%),
  radial-gradient(65% 60% at 60% 74%, rgba(169,150,234,.12) 0%, transparent 60%),
  radial-gradient(65% 60% at 36% 70%, rgba(209,229,169,.12) 0%, transparent 60%),
  linear-gradient(180deg,#112735 0%,#1a4547 50%,#285f55 100%);}

/* Fijne korrel over alles, zodat de vlakken kwaliteit krijgen. */
.korrel{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---- Fade-veld -----------------------------------------------------
   Twee lagen die los ademen en bij een wissel in elkaar overvloeien. */
.veld{position:fixed;inset:0;z-index:0}
.laag{position:absolute;inset:0;opacity:0;transition:opacity 2000ms ease;will-change:opacity,transform}
.laag.a{animation:adem 34s ease-in-out infinite}
.laag.b{animation:adem 42s ease-in-out infinite reverse}
.laag.actief{opacity:1}
.laag::after{content:'';position:absolute;inset:0;background:radial-gradient(58% 52% at 34% 30%,rgba(255,255,255,.42),transparent 70%);mix-blend-mode:soft-light}
@keyframes adem{0%{transform:scale(1) translate(0,0)}50%{transform:scale(1.06) translate(-1.5%,1%)}100%{transform:scale(1) translate(0,0)}}

/* ---- Losse drift ---------------------------------------------------- */
.f1{animation:zw 14s ease-in-out infinite}
.f2{animation:zw 18s ease-in-out infinite reverse}
.f3{animation:zw2 22s ease-in-out infinite}
.f4{animation:zw2 16s ease-in-out infinite reverse}
.f5{animation:zw 25s ease-in-out infinite}
.f6{animation:zw2 20s ease-in-out infinite reverse}
@keyframes zw{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,-15px)}}
@keyframes zw2{0%,100%{transform:translate(0,0)}50%{transform:translate(-8px,-12px)}}

/* ---- Typografie ---------------------------------------------------- */
.merk{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--soft)}
.onder{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.tekst{font-size:clamp(19px,2.4vw,26px);line-height:1.55;letter-spacing:-.005em;color:var(--ink);font-weight:400}
.tekst em{font-style:normal;font-weight:600}
.klein{font-size:clamp(14px,1.6vw,16.5px);line-height:1.7;color:var(--body);font-weight:300}
.woord{font-size:clamp(56px,13vw,150px);font-weight:600;letter-spacing:-.03em;color:var(--ink);line-height:.95}
.citaat{font-size:clamp(24px,4vw,44px);font-weight:500;line-height:1.28;letter-spacing:-.015em;color:var(--ink)}

/* Markeerstift, geel achter de onderste helft, hele regel. Schakelbaar. */
.stift{background:linear-gradient(180deg,transparent 42%,rgba(245,233,148,.9) 42%);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 .04em}

/* ---- Componenten --------------------------------------------------- */
/* Foto's krijgen een dunne rand, geen dikke passe-partout. Variant met streepjes. */
.foto{position:relative;line-height:0;background:#fff;border:1px solid rgba(74,74,77,.42);box-shadow:var(--schaduw-zacht)}
.foto.streep{border-style:dashed;border-color:rgba(74,74,77,.5)}
.foto.mat{padding:6px}
.foto .beeld{position:relative;overflow:hidden;background-size:cover;background-position:center}
.foto .beeld::after{content:'';position:absolute;inset:0;opacity:.13;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");}
.foto .tag{position:absolute;left:10px;bottom:9px;line-height:1;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(74,74,77,.72);text-shadow:0 1px 2px rgba(255,255,255,.55)}

/* Notitieblok-register: een zacht papiervlak voor het persoonlijke deel. */
.notitie{background:rgba(255,255,255,.74);border:1px solid rgba(74,74,77,.14);border-radius:3px;padding:26px 30px;box-shadow:var(--schaduw-zacht);backdrop-filter:blur(2px);color:#5a5a5d}
.notitie .merk{color:#7a7a7d}
.notitie .tekst{font-family:var(--serif);color:#4a4a4d}
.notitie .caret{background:#4a4a4d}

/* Knipperend streepje dat uitnodigt tot schrijven. */
.caret{display:inline-block;width:1px;height:1.05em;background:var(--ink);vertical-align:-0.14em;animation:knipper 1.06s steps(1) infinite}
@keyframes knipper{0%,50%{opacity:1}50.01%,100%{opacity:0}}

.venster{background:var(--veil);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--schaduw);overflow:hidden;backdrop-filter:blur(2px)}
.venster .balk{display:flex;align-items:center;gap:9px;padding:9px 14px;background:linear-gradient(90deg,#f5e994,#f3ecc4);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#6a6338}
.venster .balk .sluit{margin-left:auto;opacity:.7}
.venster .body{padding:22px}

.terminal{font-family:var(--mono);background:var(--veil);border:1px dashed rgba(74,74,77,.3);border-radius:6px;padding:24px 28px;color:var(--body);font-size:13px;line-height:2}
.terminal .titel{color:var(--soft);letter-spacing:.08em;margin-bottom:12px}
.terminal b{color:var(--ink);font-weight:500}

.knop{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--ink);background:none;color:var(--ink);
  padding:12px 24px;border-radius:2px;cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;transition:all .25s}
.knop:hover{background:var(--ink);color:#fff}
.knop.stil{border-color:var(--line);color:var(--soft)}
.knop.stil:hover{border-color:var(--ink);background:none;color:var(--ink)}

.badge{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);border:1px solid var(--line);border-radius:20px;padding:3px 11px}
.badge.nieuw{color:#6a6338;border-color:transparent;background:linear-gradient(180deg,transparent 40%,rgba(245,233,148,.9) 40%)}

.pill{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--soft);border:1px solid var(--line);background:rgba(255,255,255,.5);border-radius:14px;padding:4px 12px}

/* Register linksboven, klikbaar. */
.legenda{position:fixed;top:22px;left:24px;z-index:6;display:flex;flex-direction:column;gap:4px;opacity:.34;transition:opacity .4s}
.legenda:hover{opacity:1}
.legenda button{background:none;border:none;cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--soft);text-align:left;padding:2px 6px;border-radius:3px;transition:color .25s}
.legenda button:hover{color:var(--ink)}
.legenda button.nu{color:#5c5530;background:linear-gradient(180deg,transparent 42%,rgba(245,233,148,.85) 42%)}
.legenda .n{color:var(--mist);margin-right:8px}

/* Jukebox rechtsboven. */
.jukebox{position:fixed;top:22px;right:24px;z-index:6;display:flex;align-items:center;gap:14px;opacity:.4;transition:opacity .4s}
.jukebox:hover{opacity:1}
.jknop{background:none;border:none;cursor:pointer;padding:6px 2px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);display:flex;align-items:center;gap:7px;transition:color .3s}
.jknop:hover{color:var(--ink)}
.golf{display:flex;align-items:flex-end;gap:2px;height:12px}
.golf span{width:2px;background:var(--soft);border-radius:1px;height:4px;transition:background .3s}
.jukebox.speelt .golf span{animation:puls 2.4s ease-in-out infinite;background:var(--ink)}
.golf span:nth-child(2){animation-delay:.4s}.golf span:nth-child(3){animation-delay:.8s}.golf span:nth-child(4){animation-delay:1.2s}
@keyframes puls{0%,100%{height:4px}50%{height:12px}}
.nutrack{font-family:var(--mono);color:var(--mist);font-size:10px;letter-spacing:.04em}

.tik{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);z-index:5;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mist);opacity:.55;transition:opacity 1.2s;pointer-events:none}