:root {
  color-scheme: dark;
  --mx: 0;
  --my: 0;
  --scroll: 0;
  --bg-a: #0d0e12;
  --bg-b: #07080b;
  --bg-c: #020203;
  --ink: #f4f1ec;
  --whisper: color-mix(in srgb, var(--ink), transparent 84%);
  --murmur: color-mix(in srgb, var(--ink), transparent 60%);
  --matrix: rgba(220, 230, 245, 0.7);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at calc(50% + var(--mx) * 4vw) calc(50% + var(--my) * 4vh),
      var(--bg-a) 0%, var(--bg-b) 38%, var(--bg-c) 100%);
}

.matrix {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.7;
}

.stage {
  position: relative;
  z-index: 1;
  display: grid;
  height: 100svh;
  place-items: center;
  isolation: isolate;
}

.mark {
  position: relative;
  z-index: 5;
  margin: 0;
  transform:
    translate(calc(var(--mx) * -0.5rem), calc(var(--my) * -0.5rem))
    scale(calc(1 + var(--scroll) * 0.04));
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mark img {
  display: block;
  width: clamp(4.2rem, 8.4vw, 6.6rem);
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 14px 24px color-mix(in srgb, var(--ink), transparent 78%));
}

@media (max-width: 720px) {
  .mark img { width: 22vw; }
}