/* Simblos — Logo: het woordmerk simbloς.ai dat inklapt tot de korf (de korf groeit en de stroken slaan om naar oker).
   Gebruikt --ink, --oker en --font-display uit tokens.css. Toestanden staan op het stateElement:
   np-collapsed (ingeklapt) en, kort na het uitklappen, np-expanding. */
.np-logo { --np-ink: var(--ink, #141412); --np-ok: var(--oker, #e0b04a); display: inline-flex; align-items: baseline; white-space: nowrap; line-height: 1; text-decoration: none;
  font-family: var(--font-display, "Familjen Grotesk", sans-serif); font-weight: 700; font-size: var(--np-logo-size, 28px); letter-spacing: -0.025em; color: var(--np-ink); }

/* Letters: elke letter is een kolom die naar 0 krimpt. --dc = vertraging bij inklappen, --do = bij uitklappen. */
.np-logo .np-l { display: inline-grid; grid-template-columns: 1fr; opacity: 1; --d: var(--do);
  transition: grid-template-columns .55s cubic-bezier(.65,0,.35,1) var(--d), opacity .4s ease var(--d); }
.np-logo .np-l > span { min-width: 0; overflow-x: clip; }
.np-logo .np-gr > span { font-family: "Inter", var(--font-text, sans-serif); }
.np-logo .np-ai { color: var(--np-ok); }
.np-collapsed .np-logo .np-l { --d: var(--dc); grid-template-columns: 0fr; opacity: 0; }

/* De korf: open een punt van 0,42 em op de basislijn, ingeklapt 0,92 em. */
.np-logo .np-hv { position: relative; flex: none; width: .42em; height: .42em; margin: 0 .06em;
  transition: width .55s cubic-bezier(.65,0,.35,1) .1s, height .55s cubic-bezier(.65,0,.35,1) .1s, margin .55s cubic-bezier(.65,0,.35,1) .1s; }
.np-collapsed .np-logo .np-hv { width: .92em; height: .92em; margin: 0; transition-delay: .65s, .65s, .65s; }

/* De korf: zes stroken geknipt papier (pen en vijf ringen), aan de voorkant inkt en aan de achterkant oker.
   Bij inklappen slaat iedere strook om, van boven naar beneden, en laat halverwege haar okerkant zien.
   --kc / --ko = begin van het omslaan bij in- en uitklappen; de kleur wisselt halverwege (.21 s later). */
.np-logo .np-hv svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.np-logo .np-r { fill: var(--np-ink); transform-box: fill-box; transform-origin: 50% 50%; transition: fill 0s calc(var(--ko) + .21s); }
.np-collapsed .np-logo .np-r { fill: var(--np-ok); transition-delay: calc(var(--kc) + .21s); animation: np-om .42s cubic-bezier(.45,0,.55,1) var(--kc) both; }
.np-expanding .np-logo .np-r { animation: np-terug .42s cubic-bezier(.45,0,.55,1) var(--ko) both; }
.np-logo .np-r0 { --kc: .7s;  --ko: .25s; }
.np-logo .np-r1 { --kc: .78s; --ko: .2s; }
.np-logo .np-r2 { --kc: .86s; --ko: .15s; }
.np-logo .np-r3 { --kc: .94s; --ko: .1s; }
.np-logo .np-r4 { --kc: 1.02s; --ko: .05s; }
.np-logo .np-r5 { --kc: 1.1s; --ko: 0s; }
/* Twee namen voor dezelfde beweging, zodat zij bij iedere wissel opnieuw begint. */
@keyframes np-om { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.06) translateY(4%); } }
@keyframes np-terug { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.06) translateY(4%); } }

/* Bijen in vier lagen: .np-bee = horizontaal + zichtbaarheid, .np-by = verticaal + schaal, .np-bw = rustig wiegen,
   .np-bi = het lijfje. Omdat x en y elk een eigen ritme hebben, vliegen ze in vloeiende bogen zonder stops.
   Lijfje: ovaal in oker met twee vaste donkerbruine strepen (op ivoor en zwart hetzelfde), één vleugel. */
.np-logo .np-bee { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; pointer-events: none; }
.np-logo .np-by, .np-logo .np-bw { position: absolute; left: 0; top: 0; }
.np-logo .np-bw { animation: np-wob var(--wd, .44s) ease-in-out infinite alternate; }
.np-logo .np-bi { position: absolute; left: -.09em; top: -.065em; width: .18em; height: .13em; border-radius: 50%;
  background: linear-gradient(90deg, var(--np-ok) 0 34%, #2b2218 34% 46%, var(--np-ok) 46% 60%, #2b2218 60% 72%, var(--np-ok) 72% 100%); }
.np-logo .np-bi::before { content: ""; position: absolute; left: 50%; top: -.045em; width: .11em; height: .07em; margin-left: -.055em; border-radius: 50%;
  background: rgba(255,255,255,.8); border: .012em solid rgba(43,34,24,.45); box-sizing: border-box; transform: rotate(-32deg); transform-origin: 30% 100%; }
@keyframes np-wob { 0% { translate: 0 -.022em; } 100% { translate: 0 .022em; } }
@keyframes np-bxi { 0% { translate: var(--sx) 0; opacity: 0; scale: .8; } 12% { opacity: 1; scale: 1; } 86% { opacity: 1; } 100% { translate: 0 0; opacity: 0; scale: .4; } }
@keyframes np-byi { 0% { translate: 0 var(--sy); } 50% { translate: 0 var(--py); } 100% { translate: 0 0; } }
@keyframes np-bxo { 0% { translate: 0 0; opacity: 0; scale: .4; } 14% { opacity: 1; scale: 1; } 86% { opacity: 1; scale: 1; } 100% { translate: var(--ax) 0; opacity: 0; scale: 1.3; } }
@keyframes np-byo { 0% { translate: 0 0; } 50% { translate: 0 var(--qy); } 100% { translate: 0 var(--ay); } }
/* De ene bij die af en toe uitvliegt als het logo ingeklapt staat: cyclus van 14 s, eerste vlucht ±3 s na inklappen. */
@keyframes np-ix { 0%, 60% { translate: 0 0; opacity: 0; } 62% { opacity: 1; } 70% { translate: .72em 0; } 74% { translate: .62em 0; } 76% { translate: .66em 0; } 90% { translate: -.72em 0; } 97% { opacity: 1; } 100% { translate: 0 0; opacity: 0; } }
@keyframes np-iy { 0%, 60% { translate: 0 0; scale: .4; } 64% { scale: 1; } 72% { translate: 0 -.75em; } 78% { translate: 0 -.6em; } 84% { translate: 0 -.85em; } 96% { scale: 1; } 100% { translate: 0 0; scale: .4; } }
.np-collapsed .np-logo .np-bee { animation: np-bxi var(--du) cubic-bezier(.35,0,.65,1) var(--bd) both; }
.np-collapsed .np-logo .np-bee .np-by { animation: np-byi var(--du) ease-in-out var(--bd) both; }
.np-expanding .np-logo .np-bee { animation: np-bxo var(--du) cubic-bezier(.35,0,.65,1) calc(var(--bd) + .35s) both; }
.np-expanding .np-logo .np-bee .np-by { animation: np-byo var(--du) ease-in-out calc(var(--bd) + .35s) both; }
.np-collapsed .np-logo .np-bee.np-idle { animation: np-ix 14s ease-in-out -5.4s infinite; }
.np-collapsed .np-logo .np-bee.np-idle .np-by { animation: np-iy 14s ease-in-out -5.4s infinite; }
.np-expanding .np-logo .np-bee.np-idle, .np-expanding .np-logo .np-bee.np-idle .np-by { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .np-logo .np-l, .np-logo .np-hv, .np-logo .np-r { transition-duration: .01s !important; transition-delay: 0s !important; }
  .np-logo .np-bee, .np-logo .np-by, .np-logo .np-bw, .np-logo .np-r { animation: none !important; }
  .np-logo .np-bee { opacity: 0 !important; }
}