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

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}

#noise {
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0.12;
}

#vignette {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.85) 100%
  );
}

#scanlines {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.18) 3px,
    rgba(0, 0, 0, 0.18) 4px
  );
  animation: scanlines-scroll 12s linear infinite;
}

@keyframes scanlines-scroll {
  from { background-position: 0 0; }
  to   { background-position: 0 -400px; }
}

#glitch-tint {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  animation: tint-flicker 0.1s steps(1) infinite;
}

@keyframes tint-flicker {
  0%   { background: transparent; }
  92%  { background: transparent; }
  93%  { background: rgba(255, 0, 60, 0.04); transform: skewX(-0.8deg) translateX(-2px); }
  94%  { background: rgba(0, 255, 220, 0.04); transform: skewX(0.8deg) translateX(2px); }
  95%  { background: transparent; transform: none; }
  96%  { background: rgba(255, 0, 60, 0.03); transform: skewX(0.4deg); }
  97%  { background: transparent; transform: none; }
  100% { background: transparent; }
}

#glitch-bars {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.scene {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
}

.date {
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(2.8rem, 9vw, 7.5rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.08em;
  position: relative;
  user-select: none;
  animation: date-shake 7s infinite;
}

.date::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #ff003c;
  opacity: 0;
  animation: glitch-red 7s infinite;
}

.date::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #00ffe0;
  opacity: 0;
  animation: glitch-cyan 7s infinite;
}

@keyframes date-shake {
  0%, 86%, 100% { transform: translate(0, 0); }
  87%  { transform: translate(-5px, 1px); }
  88%  { transform: translate(5px, -1px); }
  89%  { transform: translate(-3px, 2px); }
  90%  { transform: translate(0, 0); }
}

@keyframes glitch-red {
  0%, 85%, 100% { opacity: 0; transform: translate(0); clip-path: none; }
  86% {
    opacity: 1;
    transform: translate(-6px, 2px);
    clip-path: polygon(0 12%, 100% 12%, 100% 38%, 0 38%);
  }
  87% {
    opacity: 1;
    transform: translate(4px, -1px);
    clip-path: polygon(0 55%, 100% 55%, 100% 72%, 0 72%);
  }
  88% {
    opacity: 1;
    transform: translate(-2px, 0);
    clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
  }
  89% { opacity: 0; }
}

@keyframes glitch-cyan {
  0%, 85%, 100% { opacity: 0; transform: translate(0); clip-path: none; }
  86% {
    opacity: 1;
    transform: translate(6px, -2px);
    clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%);
  }
  87% {
    opacity: 1;
    transform: translate(-4px, 1px);
    clip-path: polygon(0 25%, 100% 25%, 100% 45%, 0 45%);
  }
  88% {
    opacity: 1;
    transform: translate(2px, 0);
    clip-path: polygon(0 70%, 100% 70%, 100% 90%, 0 90%);
  }
  89% { opacity: 0; }
}

.label {
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(0.6rem, 1.6vw, 0.95rem);
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  animation: label-blink 9s infinite;
}

@keyframes label-blink {
  0%, 38%, 40%, 78%, 80%, 100% { opacity: 0.35; }
  39%, 79% { opacity: 0.05; }
}

.rule {
  width: clamp(120px, 30vw, 340px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.25) 30%,
    rgba(255,255,255,0.25) 70%,
    transparent
  );
  animation: rule-glitch 7s infinite;
}

@keyframes rule-glitch {
  0%, 86%, 100% { transform: scaleX(1); opacity: 1; }
  87% { transform: scaleX(1.15) translateX(-5%); opacity: 0.5; }
  88% { transform: scaleX(0.9) translateX(3%);  opacity: 1; }
  89% { transform: scaleX(1); }
}

#sound-hint {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 20;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.22);
  pointer-events: none;
  transition: opacity 0.6s ease;
  animation: hint-pulse 3s ease-in-out infinite;
}

@keyframes hint-pulse {
  0%, 100% { opacity: 0.22; }
  50%       { opacity: 0.06; }
}