/* =====================================================================
   NICOLAI KRÜGER — Personal Brand Foundation
   Same colour DNA as Forschungsimpuls (green #8CE000 + tech glows),
   but no podcast logo. Person-first: "NK" monogram, calmer motion,
   and BOTH dark (keynote) + light (web) surfaces.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

:root {
  /* shared colour DNA */
  --nk-green:    #8ce000;
  --nk-green-2:  #aef13a;
  --nk-green-ink:#5b9400;   /* deeper green that stays legible on light */
  --nk-magenta:  #c0267f;
  --nk-purple:   #6a2bb0;
  --nk-teal:     #15b9c9;

  /* dark surface (keynotes / explainer) */
  --nk-d-bg:     #0a0d17;
  --nk-d-bg2:    #11152a;
  --nk-d-ink:    #f3f6f2;
  --nk-d-dim:    #9fb0bd;
  --nk-d-line:   rgba(255,255,255,0.12);

  /* light surface (web) */
  --nk-l-bg:     #f4f2ea;   /* warm paper */
  --nk-l-bg2:    #ffffff;
  --nk-l-ink:    #14171f;
  --nk-l-dim:    #5d6470;
  --nk-l-line:   rgba(10,15,25,0.12);

  --nk-font: 'Varela Round', system-ui, sans-serif;
  --u: 1px;
}

*, *::before, *::after { box-sizing: border-box; }

/* =====================================================================
   NK MONOGRAM — geometric, logo-free personal signet
   Size via font-size on .nk-mono (em-based).
   ===================================================================== */
.nk-mono {
  display: inline-flex; align-items: center; gap: 0.34em;
  font-family: var(--nk-font); line-height: 1;
}
.nk-mono .glyph {
  position: relative; width: 1em; height: 1em; flex: none;
  border-radius: 0.26em;
  background: linear-gradient(150deg, var(--nk-green), var(--nk-green-2));
  display: grid; place-items: center;
  color: #0a1400; font-size: 0.62em; font-weight: 400;
  box-shadow: 0 0.06em 0.4em rgba(140,224,0,0.35);
}
.nk-mono .glyph::after { content: "NK"; letter-spacing: -0.02em; }
.nk-mono.ring .glyph {
  background: transparent; color: var(--nk-green);
  border: 0.09em solid var(--nk-green); box-shadow: none;
}
.nk-mono .word { font-size: 0.92em; letter-spacing: 0.01em; }
.nk-mono .word b { font-weight: 400; }
.nk-mono.on-light .word { color: var(--nk-l-ink); }
.nk-mono.on-dark  .word { color: var(--nk-d-ink); }

/* wordmark only (no glyph) */
.nk-word {
  font-family: var(--nk-font); letter-spacing: 0.005em; line-height: 1;
  display: inline-flex; align-items: baseline; gap: 0.3em;
}
.nk-word .accent { color: var(--nk-green-ink); }
.on-dark .nk-word .accent, .nk-word.on-dark .accent { color: var(--nk-green); }

/* =====================================================================
   CALM MOTION — drifting aurora glows (no equalizer)
   Apply .nk-aurora to a full-bleed layer. aurora.js seeds particles.
   ===================================================================== */
.nk-aurora { position: absolute; inset: 0; overflow: hidden; }
.nk-aurora.dark {
  background:
    radial-gradient(60% 50% at 18% 22%, rgba(106,43,176,0.30), transparent 60%),
    radial-gradient(55% 50% at 85% 18%, rgba(192,38,127,0.26), transparent 60%),
    radial-gradient(70% 60% at 80% 92%, rgba(21,185,201,0.26), transparent 62%),
    linear-gradient(160deg, #0b0f1f 0%, #0a0d17 60%, #080a14 100%);
}
.nk-aurora.light {
  background:
    radial-gradient(60% 50% at 12% 18%, rgba(140,224,0,0.14), transparent 60%),
    radial-gradient(55% 50% at 90% 12%, rgba(21,185,201,0.12), transparent 60%),
    radial-gradient(70% 60% at 88% 96%, rgba(192,38,127,0.08), transparent 62%),
    var(--nk-l-bg);
}
/* slow-drifting blobs layered on top */
.nk-aurora .blob {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5;
  mix-blend-mode: screen;
}
.nk-aurora.light .blob { mix-blend-mode: multiply; opacity: 0.35; filter: blur(70px); }
@media (prefers-reduced-motion: no-preference) {
  .nk-aurora .blob { animation: nk-drift var(--dur, 22s) ease-in-out var(--del, 0s) infinite alternate; }
}
@keyframes nk-drift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(var(--dx, 60px), var(--dy, -40px)) scale(var(--ds, 1.15)); }
}

/* floating particles (seeded by aurora.js) */
.nk-particle {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--nk-teal); box-shadow: 0 0 8px 1px currentColor; opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .nk-particle { animation: nk-float var(--dur, 9s) ease-in-out var(--del, 0s) infinite; }
}
@keyframes nk-float {
  0%   { opacity: 0; transform: translateY(10px) scale(0.6); }
  25%  { opacity: 0.8; }
  75%  { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-26px) scale(1); }
}

/* =====================================================================
   ACCENTS shared
   ===================================================================== */
.nk-rule {
  height: calc(var(--u)*3); border-radius: 99px;
  background: linear-gradient(90deg, var(--nk-green), var(--nk-teal));
}
.nk-kicker {
  font-family: var(--nk-font); text-transform: uppercase; letter-spacing: 0.22em;
  display: inline-flex; align-items: center; gap: 0.7em;
}
.nk-kicker::before { content: ""; width: 2.4em; height: 2px; background: currentColor; border-radius: 99px; }

.nk-pill {
  display: inline-flex; align-items: center; font-family: var(--nk-font);
  border-radius: 999px; line-height: 1;
}
.nk-pill.solid { background: var(--nk-green); color: #0a1400; }
.nk-pill.outline-dark { border: 2px solid var(--nk-d-line); color: var(--nk-d-ink); }
.nk-pill.outline-light { border: 2px solid var(--nk-l-line); color: var(--nk-l-ink); }