:root {
  --bg: #050505;
  --ink: #e8ece9;
  --block: #bcc4bf;   /* gevulde blokken: zacht wit, tussen "te fel" en "te grijs" */
  --accent: #8dffc0;
  --ease: cubic-bezier(.22, .8, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--bg); }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* a single, very faint pool of light behind the logo */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(55% 45% at 50% 50%, rgba(232, 236, 233, .05), transparent 72%);
}

main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.logo { width: min(86vw, 620px); max-height: 86vh; height: auto; overflow: visible; }

/* visible to screen readers and search engines only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- logo blocks ---------- */

.blk .shell {
  fill: #0c0d0c;
  stroke: rgba(255, 255, 255, .08);
  stroke-width: 2;
}
.blk .fill {
  fill: var(--block);
  transform: scaleY(var(--p, 0));
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.blk .edge {
  fill: var(--accent);
  opacity: 0;
  transform: translateY(calc(var(--p, 0) * -230.6px));
  filter: drop-shadow(0 0 7px rgba(141, 255, 192, .75));
}
.blk[data-state="active"] .edge { opacity: 1; animation: edge 3.2s ease-in-out infinite; }
.blk[data-state="active"] .shell { stroke: rgba(141, 255, 192, .35); animation: breathe 4.8s ease-in-out infinite; }

@keyframes edge    { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes breathe { 0%, 100% { stroke-opacity: .45; } 50% { stroke-opacity: 1; } }

/* ---------- afgerond blok: "lock-in" ---------- */

/* ring die eenmalig naar buiten uitdijt en vervaagt */
.blk .ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  pointer-events: none;
}
/* gloed over het blok zelf */
.blk .glow {
  fill: var(--accent);
  opacity: 0;
  pointer-events: none;
}

/* blijvende staat: een dun, stil groen randje = "vergrendeld" */
.blk[data-state="done"] .shell { stroke: rgba(141, 255, 192, .22); }

.blk.lock .ring { animation: ring 2.4s cubic-bezier(.2, .7, .2, 1) 1 both; }
.blk.lock .glow { animation: glow 2.4s ease-out 1 both; }
.blk.lock .shell { animation: lockstroke 2.4s ease-out 1 both; }

@keyframes ring {
  0%   { opacity: .9; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.22); }
}
@keyframes glow {
  0%   { opacity: 0; }
  12%  { opacity: .30; }
  100% { opacity: 0; }
}
@keyframes lockstroke {
  0%   { stroke: rgba(141, 255, 192, 1);  stroke-width: 4; }
  100% { stroke: rgba(141, 255, 192, .22); stroke-width: 2; }
}

/* ---------- geheime code: tap-reactie, knop, verrassing ---------- */

.logo { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.blk.tap { animation: tap .4s ease-out 1; }
@keyframes tap { 40% { opacity: .72; } }

.egg {
  position: fixed;
  left: 0; right: 0;
  bottom: max(6vh, 40px);
  display: grid;
  justify-items: center;
  pointer-events: none;
}
.egg > * { grid-area: 1 / 1; }

.egg-btn {
  pointer-events: auto;
  font: 500 12px/1 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing: .5em;
  padding: 15px 18px 15px calc(18px + .5em);
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255, 255, 255, .02);
  border: 1px solid rgba(141, 255, 192, .35);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 0s 1s, border-color .3s, background .3s, box-shadow .3s;
}
.egg.show-btn .egg-btn { opacity: 1; visibility: visible; transition: opacity 1.2s ease, border-color .3s, background .3s, box-shadow .3s; }
.egg-btn:hover, .egg-btn:focus-visible {
  outline: none;
  border-color: rgba(141, 255, 192, .8);
  background: rgba(141, 255, 192, .06);
  box-shadow: 0 0 24px rgba(141, 255, 192, .18);
}

.egg-msg {
  display: grid;
  gap: 8px;
  text-align: center;
  font: 300 13px/1 ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transition: opacity 1.4s ease;
}
.egg-msg span:first-child  { padding-left: .45em; }
.egg-msg span:last-child   { padding-left: .45em; color: var(--accent); opacity: .85; }
.egg.show-msg .egg-msg { opacity: 1; }

/* tijdens de verrassing: vullen volgt het beeld direct; daarna rustig terug naar echt */
.demo.boot .blk .fill,
.demo.boot .blk .edge { transition: none !important; }
.rewind.boot.live .blk .fill,
.rewind.boot.live .blk .edge { transition: transform 2.2s cubic-bezier(.65, 0, .35, 1); }

/* ---------- boot sequence (only when JS is running) ---------- */

.boot .blk .shell { opacity: 0; transition: opacity 1.2s ease calc(var(--i) * 110ms + 250ms); }
.boot.ready .blk .shell { opacity: 1; }

/* fill animation on first load, staggered, then calm 1s steps while live */
.boot.ready .blk .fill,
.boot.ready .blk .edge {
  transition: transform 3.2s var(--ease) calc(1000ms + var(--i) * 170ms);
}
.boot.live .blk .fill,
.boot.live .blk .edge { transition: transform 1s linear; }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .blk[data-state="active"] .edge { opacity: 1; }
}