* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  font-family: "Exo 2", sans-serif;
  overflow: hidden; /* Убраны все скроллы */
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.stage {
  width: 100%;
  height: 100%;
  padding: 5vw 6vw;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#stub-art {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100vh;
  object-fit: contain;
}

.stage svg text,
#stub-art text {
  font-family: "Exo 2", sans-serif;
}

@media (max-width: 640px) {
  .stage {
    padding: 8vw 5vw;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Стили для логотипа и анимаций (перенесены из предыдущей версии) */
#nighttech-logo {
  isolation: isolate;
}
.nt-layer { opacity: 0; }
.nt-red path { fill: #ff2952 !important; }
.nt-cyan path { fill: #23e6ff !important; }
.nt-red { mix-blend-mode: screen; }
.nt-cyan { mix-blend-mode: screen; }
.nt-base { mix-blend-mode: normal; }
.nt-scan { opacity: 0; }
.nt-scan-w { fill: #ffffff; }
.nt-scan-y { fill: #f5fa28; }

/* Анимации остаются без изменений (nt-glitch-red, nt-glitch-cyan и т.д.) */
#nighttech-logo.play .nt-red { animation: nt-glitch-red 2.6s steps(1, end) forwards; }
#nighttech-logo.play .nt-cyan { animation: nt-glitch-cyan 2.6s steps(1, end) forwards; }
#nighttech-logo.play .nt-base { animation: nt-base-reveal 2.6s steps(1, end) forwards; }
#nighttech-logo.play .nt-scan { animation-name: nt-scanline-flicker; animation-timing-function: steps(1, end); animation-fill-mode: forwards; }

#stub-art.mobile-mode .subtitle-group {
  font-size: 19px;
}

@keyframes nt-glitch-red {
  0% {
    opacity: 0;
    transform: translate(0, 0) skewX(0deg);
    clip-path: inset(0 0 100% 0);
  }
  2% {
    opacity: 0.9;
    transform: translate(-13px, 2px) skewX(2deg);
    clip-path: inset(6% 0 48% 0);
  }
  5% {
    opacity: 0;
  }
  9% {
    opacity: 0.85;
    transform: translate(11px, -3px) skewX(-3deg);
    clip-path: inset(55% 0 4% 0);
  }
  12% {
    opacity: 0;
  }
  17% {
    opacity: 0.8;
    transform: translate(-10px, 0) skewX(1deg);
    clip-path: inset(15% 0 60% 0);
  }
  20% {
    opacity: 0;
  }
  26% {
    opacity: 0.7;
    transform: translate(9px, 3px) skewX(-2deg);
    clip-path: inset(0 0 22% 0);
  }
  29% {
    opacity: 0;
  }
  36% {
    opacity: 0.65;
    transform: translate(-8px, 0) skewX(2deg);
    clip-path: inset(35% 0 10% 0);
  }
  39% {
    opacity: 0;
  }
  47% {
    opacity: 0.5;
    transform: translate(6px, -2px);
    clip-path: inset(0 0 0 0);
  }
  51% {
    opacity: 0;
  }
  58% {
    opacity: 0.35;
    transform: translate(-5px, 0);
  }
  62% {
    opacity: 0;
  }
  70% {
    opacity: 0.2;
    transform: translate(3px, 0);
  }
  74% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translate(0, 0) skewX(0deg);
  }
}

@keyframes nt-glitch-cyan {
  0% {
    opacity: 0;
    transform: translate(0, 0) skewX(0deg);
    clip-path: inset(0 0 100% 0);
  }
  4% {
    opacity: 0;
  }
  7% {
    opacity: 0.85;
    transform: translate(12px, -2px) skewX(-2deg);
    clip-path: inset(42% 0 12% 0);
  }
  10% {
    opacity: 0;
  }
  15% {
    opacity: 0.8;
    transform: translate(-11px, 3px) skewX(3deg);
    clip-path: inset(4% 0 62% 0);
  }
  18% {
    opacity: 0;
  }
  24% {
    opacity: 0.7;
    transform: translate(10px, 0) skewX(-1deg);
    clip-path: inset(0 0 38% 0);
  }
  28% {
    opacity: 0;
  }
  34% {
    opacity: 0.6;
    transform: translate(-9px, -2px) skewX(2deg);
    clip-path: inset(28% 0 15% 0);
  }
  38% {
    opacity: 0;
  }
  45% {
    opacity: 0.5;
    transform: translate(7px, 0);
    clip-path: inset(0 0 0 0);
  }
  49% {
    opacity: 0;
  }
  56% {
    opacity: 0.35;
    transform: translate(-6px, 0);
  }
  60% {
    opacity: 0;
  }
  68% {
    opacity: 0.2;
    transform: translate(4px, 0);
  }
  72% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translate(0, 0) skewX(0deg);
  }
}

@keyframes nt-base-reveal {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
  2% {
    opacity: 1;
    clip-path: inset(0 0 55% 0);
  }
  5% {
    opacity: 0.1;
    clip-path: inset(30% 0 25% 0);
  }
  9% {
    opacity: 1;
    clip-path: inset(0 0 32% 0);
  }
  12% {
    opacity: 0.15;
  }
  17% {
    opacity: 1;
    clip-path: inset(0 0 18% 0);
  }
  20% {
    opacity: 0.25;
  }
  26% {
    opacity: 1;
    clip-path: inset(0 0 6% 0);
  }
  29% {
    opacity: 0.3;
  }
  36% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  39% {
    opacity: 0.45;
  }
  47% {
    opacity: 1;
  }
  51% {
    opacity: 0.55;
  }
  58% {
    opacity: 1;
  }
  62% {
    opacity: 0.7;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes nt-scanline-flicker {
  0% {
    opacity: 0.65;
  }
  8% {
    opacity: 0;
  }
  17% {
    opacity: 0.5;
  }
  23% {
    opacity: 0;
  }
  34% {
    opacity: 0.55;
  }
  41% {
    opacity: 0;
  }
  52% {
    opacity: 0.35;
  }
  60% {
    opacity: 0;
  }
  73% {
    opacity: 0.2;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nt-red,
  .nt-cyan,
  .nt-scanlines {
    display: none;
  }
  .nt-base {
    opacity: 1;
    animation: none;
  }
}