* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; overflow: hidden; }
.stage {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #000; isolation: isolate;
}
.stage.is-mosh {
  filter: contrast(1.45) saturate(1.35) hue-rotate(8deg);
}
.stage.is-flicker { filter: contrast(1.8) brightness(1.15); }
.field { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.bar {
  position: absolute; left: 0; width: 100%;
  background: #fff;
  mix-blend-mode: difference;
  opacity: 0.85;
}
.bar.chromatic { mix-blend-mode: screen; opacity: 0.55; }
.logo-wander {
  --ax: min(28vw, calc(50vw - 50% - 32px));
  --ay: min(26vh, calc(50vh - 50% - 32px));
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(24vw, 211px);
  animation: wander 24s linear infinite;
  will-change: transform;
}
.logo-spin {
  width: 100%;
  animation: spin 12s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}
.logo-rig {
  position: relative; width: 100%;
  transform: translateZ(0);
}
.logo {
  display: block; width: 100%; height: auto;
  user-select: none; pointer-events: none; -webkit-user-drag: none;
}
.logo--main { position: relative; z-index: 2; }
.logo--shift {
  position: absolute; inset: 0; width: 100%; height: auto;
  z-index: 1; mix-blend-mode: screen; opacity: 0.28;
  animation: split 2.8s ease-in-out infinite alternate;
}
.logo--red {
  transform: translate(-3px, 0);
  filter: saturate(0) sepia(1) hue-rotate(-40deg) saturate(8) brightness(1.1);
}
.logo--cyan {
  transform: translate(3px, 0);
  animation-delay: -1.4s;
  filter: saturate(0) sepia(1) hue-rotate(150deg) saturate(8) brightness(1.1);
}
.logo-rig.is-glitch .logo--red { opacity: 0.8; transform: translate(-9px, 1px); }
.logo-rig.is-glitch .logo--cyan { opacity: 0.75; transform: translate(10px, -1px); }
.logo-rig.is-tear .logo--main { clip-path: inset(26% 0 42% 0); transform: translateX(20px); filter: contrast(1.3); }
.logo-slices { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.logo-slice {
  position: absolute; left: -8%; width: 116%; overflow: hidden;
}
.logo-slice img {
  display: block; width: 100%; height: auto;
  position: absolute; left: 0; top: 0;
  /* top set in JS so the crop matches the source logo */
}
.scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.3) 3px);
  opacity: 0.4; mix-blend-mode: multiply;
}
.grain {
  position: absolute; inset: -25%; pointer-events: none; z-index: 5;
  background: url(/assets/noise.png) repeat; background-size: 150px 150px;
  opacity: 0.22; mix-blend-mode: screen;
  animation: grain 0.24s steps(4) infinite;
}
.vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: radial-gradient(ellipse at center, transparent 36%, rgba(0,0,0,0.82) 100%);
  box-shadow: inset 0 0 180px 50px #000;
}
@keyframes split {
  0% { opacity: 0.18; }
  40% { opacity: 0.32; }
  70% { opacity: 0.22; }
  100% { opacity: 0.4; }
}
@keyframes grain {
  0% { transform: translate(0,0); }
  25% { transform: translate(-4%,3%); }
  50% { transform: translate(3%,-5%); }
  75% { transform: translate(-2%,6%); }
  100% { transform: translate(4%,-3%); }
}
@keyframes wander {
  0.000% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 0.00000), calc(var(--ay) * 0.00000)); }
  2.083% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 0.13053), calc(var(--ay) * 0.25882)); }
  4.167% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 0.25882), calc(var(--ay) * 0.50000)); }
  6.250% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 0.38268), calc(var(--ay) * 0.70711)); }
  8.333% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 0.50000), calc(var(--ay) * 0.86603)); }
  10.417% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 0.60876), calc(var(--ay) * 0.96593)); }
  12.500% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 0.70711), calc(var(--ay) * 1.00000)); }
  14.583% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 0.79335), calc(var(--ay) * 0.96593)); }
  16.667% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 0.86603), calc(var(--ay) * 0.86603)); }
  18.750% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 0.92388), calc(var(--ay) * 0.70711)); }
  20.833% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 0.96593), calc(var(--ay) * 0.50000)); }
  22.917% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 0.99144), calc(var(--ay) * 0.25882)); }
  25.000% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 1.00000), calc(var(--ay) * 0.00000)); }
  27.083% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 0.99144), calc(var(--ay) * -0.25882)); }
  29.167% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 0.96593), calc(var(--ay) * -0.50000)); }
  31.250% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 0.92388), calc(var(--ay) * -0.70711)); }
  33.333% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 0.86603), calc(var(--ay) * -0.86603)); }
  35.417% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 0.79335), calc(var(--ay) * -0.96593)); }
  37.500% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 0.70711), calc(var(--ay) * -1.00000)); }
  39.583% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 0.60876), calc(var(--ay) * -0.96593)); }
  41.667% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 0.50000), calc(var(--ay) * -0.86603)); }
  43.750% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 0.38268), calc(var(--ay) * -0.70711)); }
  45.833% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 0.25882), calc(var(--ay) * -0.50000)); }
  47.917% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 0.13053), calc(var(--ay) * -0.25882)); }
  50.000% { transform: translate(-50%, -50%) translate(calc(var(--ax) * 0.00000), calc(var(--ay) * -0.00000)); }
  52.083% { transform: translate(-50%, -50%) translate(calc(var(--ax) * -0.13053), calc(var(--ay) * 0.25882)); }
  54.167% { transform: translate(-50%, -50%) translate(calc(var(--ax) * -0.25882), calc(var(--ay) * 0.50000)); }
  56.250% { transform: translate(-50%, -50%) translate(calc(var(--ax) * -0.38268), calc(var(--ay) * 0.70711)); }
  58.333% { transform: translate(-50%, -50%) translate(calc(var(--ax) * -0.50000), calc(var(--ay) * 0.86603)); }
  60.417% { transform: translate(-50%, -50%) translate(calc(var(--ax) * -0.60876), calc(var(--ay) * 0.96593)); }
  62.500% { transform: translate(-50%, -50%) translate(calc(var(--ax) * -0.70711), calc(var(--ay) * 1.00000)); }
  64.583% { transform: translate(-50%, -50%) translate(calc(var(--ax) * -0.79335), calc(var(--ay) * 0.96593)); }
  66.667% { transform: translate(-50%, -50%) translate(calc(var(--ax) * -0.86603), calc(var(--ay) * 0.86603)); }
  68.750% { transform: translate(-50%, -50%) translate(calc(var(--ax) * -0.92388), calc(var(--ay) * 0.70711)); }
  70.833% { transform: translate(-50%, -50%) translate(calc(var(--ax) * -0.96593), calc(var(--ay) * 0.50000)); }
  72.917% { transform: translate(-50%, -50%) translate(calc(var(--ax) * -0.99144), calc(var(--ay) * 0.25882)); }
  75.000% { transform: translate(-50%, -50%) translate(calc(var(--ax) * -1.00000), calc(var(--ay) * 0.00000)); }
  77.083% { transform: translate(-50%, -50%) translate(calc(var(--ax) * -0.99144), calc(var(--ay) * -0.25882)); }
  79.167% { transform: translate(-50%, -50%) translate(calc(var(--ax) * -0.96593), calc(var(--ay) * -0.50000)); }
  81.250% { transform: translate(-50%, -50%) translate(calc(var(--ax) * -0.92388), calc(var(--ay) * -0.70711)); }
  83.333% { transform: translate(-50%, -50%) translate(calc(var(--ax) * -0.86603), calc(var(--ay) * -0.86603)); }
  85.417% { transform: translate(-50%, -50%) translate(calc(var(--ax) * -0.79335), calc(var(--ay) * -0.96593)); }
  87.500% { transform: translate(-50%, -50%) translate(calc(var(--ax) * -0.70711), calc(var(--ay) * -1.00000)); }
  89.583% { transform: translate(-50%, -50%) translate(calc(var(--ax) * -0.60876), calc(var(--ay) * -0.96593)); }
  91.667% { transform: translate(-50%, -50%) translate(calc(var(--ax) * -0.50000), calc(var(--ay) * -0.86603)); }
  93.750% { transform: translate(-50%, -50%) translate(calc(var(--ax) * -0.38268), calc(var(--ay) * -0.70711)); }
  95.833% { transform: translate(-50%, -50%) translate(calc(var(--ax) * -0.25882), calc(var(--ay) * -0.50000)); }
  97.917% { transform: translate(-50%, -50%) translate(calc(var(--ax) * -0.13053), calc(var(--ay) * -0.25882)); }
  100.000% { transform: translate(-50%, -50%) translate(calc(var(--ax) * -0.00000), calc(var(--ay) * -0.00000)); }
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .grain, .logo--shift, .logo-spin, .logo-wander { animation: none; }
  .logo-wander { transform: translate(-50%, -50%); }
  .logo--red, .logo--cyan { opacity: 0; }
}