:root {
  --logo-width-desktop: 720px;
  --logo-width-tablet: 62vw;
  --logo-width-mobile: 82vw;
  --logo-y: 50%;
  --bg: #050505;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body { overflow: hidden; }

.stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}

.noise-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* A tiny CSS-only texture on top. Static, almost free, helps preserve the grain feeling
   even though the generated canvas is intentionally low resolution. */
.grain-overlay {
  pointer-events: none;
  position: absolute;
  inset: -10%;
  z-index: 1;
  opacity: .12;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}

.logo {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: var(--logo-y);
  width: var(--logo-width-desktop);
  max-width: 86vw;
  height: auto;
  display: block;
  transform: translate3d(-50%, -50%, 0);
  filter: invert(1);
  mix-blend-mode: exclusion;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .logo { width: var(--logo-width-tablet); }
}

@media (max-width: 640px) {
  .logo { width: var(--logo-width-mobile); }
  .grain-overlay { opacity: .08; }
}

.stage {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}