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

body {
  background: #000;
  cursor: crosshair;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  user-select: none;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

/* Flashlight */
#flashlight {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  background: radial-gradient(
    circle 20vmax at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,0.08) 0%,
    rgba(0,0,0,0.8) 60%,
    rgba(0,0,0,1) 100%
  );
}

/* Noise */
.noise {
  position: fixed;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 50;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  transform: translate(var(--nx, 0px), var(--ny, 0px));
  transition: transform 0.05s linear;
}

/* Glitch */
@keyframes glitch {
  0%   { transform: translate(0); text-shadow: none; opacity: 1; }
  5%   { transform: translate(-5px, 3px); text-shadow: 3px 0 #ff0000, -3px 0 #00ffff; opacity: 0.7; }
  10%  { transform: translate(5px, -3px); text-shadow: -3px 0 #ff0000, 3px 0 #00ffff; opacity: 0.8; }
  15%  { transform: translate(-2px, 5px); text-shadow: none; opacity: 0.9; }
  20%  { transform: translate(0); text-shadow: none; opacity: 1; }
  80%  { transform: translate(1px, -1px); text-shadow: 1px 0 #ff0000; }
  100% { transform: translate(0); }
}

.brand:hover {
  font-family: 'Jacquard 24', system-ui;
  color: #fff;
  letter-spacing: 0.12em;
  animation: glitch 0.15s steps(1) infinite;
}

/* Sparks */
.spark {
  position: fixed;
  pointer-events: none;
  z-index: 60;
  border-radius: 0;
  background: #ff4500;
  box-shadow: 0 0 6px 2px #ff4500, 0 0 12px 4px rgba(255,69,0,0.4);
  opacity: 1;
}

@keyframes spark-rise {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  40%  { opacity: 0.9; }
  100% { transform: translate(var(--sx), var(--sy)) scale(0); opacity: 0; }
}

/* Smoke */
.smoke {
  position: fixed;
  pointer-events: none;
  z-index: 55;
  border-radius: 0;
  background: #222;
  opacity: 0;
}

@keyframes smoke-rise {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.15; filter: blur(4px); }
  30%  { opacity: 0.1; filter: blur(8px); }
  100% { transform: translate(var(--sx), var(--sy)) scale(3); opacity: 0; filter: blur(16px); }
}

/* Layout */
.center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand {
  font-family: 'Jacquard 12', system-ui;
  font-size: clamp(3rem, 15vw, 16rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-align: center;
  white-space: normal;
  padding: 0 1rem;
  color: #ffdd00;
  position: relative;
  z-index: 45;
  cursor: none;
  transition: letter-spacing 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.2s;
}