* {
  box-sizing: border-box;
}

:root {
  color-scheme: dark;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #05070a;
}

body {
  min-height: 100svh;
}

.stage {
  position: relative;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #05070a;
}

.moving-wall {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  transform: scale(1.03);
}

.row {
  display: flex;
  width: max-content;
  min-width: 200%;
  overflow: hidden;
  will-change: transform;
}

.strip {
  display: flex;
  flex-shrink: 0;
  height: 100%;
}

.strip img {
  display: block;
  width: auto;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.08) brightness(0.82);
}

.row--left {
  animation-name: slide-left;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.row--right {
  animation-name: slide-right;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.row--slow {
  animation-duration: 14s;
}

.row--medium {
  animation-duration: 10s;
}

.row--fast {
  animation-duration: 7s;
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at center, transparent 0 24%, rgba(0, 0, 0, 0.18) 52%, rgba(0, 0, 0, 0.72) 100%),
    linear-gradient(rgba(2, 6, 12, 0.1), rgba(2, 6, 12, 0.35));
  backdrop-filter: blur(1.5px);
}

.title-card {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 2rem;
  text-align: center;
}

h1 {
  margin: 0;
  max-width: 12ch;
  color: #ff1919;
  font-size: clamp(3.5rem, 10vw, 10rem);
  line-height: 0.88;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  text-wrap: balance;
  -webkit-text-stroke: clamp(2px, 0.22vw, 5px) #220000;
  paint-order: stroke fill;
  text-shadow:
    0 0 0.04em #ffffff,
    0 0 0.12em #ff0000,
    0 0 0.25em #ff0000,
    0 0 0.55em #ff2a00,
    0 0 0.9em rgba(255, 0, 0, 0.95),
    0 0.12em 0 rgba(0, 0, 0, 0.9);
  animation:
    title-flash 0.7s steps(2, end) infinite,
    title-pulse 1.4s ease-in-out infinite;
}

@keyframes title-flash {
  0%,
  18%,
  24%,
  55%,
  100% {
    filter: brightness(1) saturate(1.15);
    opacity: 1;
  }

  20%,
  22%,
  57% {
    filter: brightness(2.3) saturate(1.8);
    opacity: 0.82;
  }
}

@keyframes title-pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.045);
  }
}

@keyframes slide-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes slide-right {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

@media (max-width: 700px) {
  .moving-wall {
    grid-template-rows: repeat(5, 1fr);
  }

  h1 {
    font-size: clamp(3rem, 15vw, 6rem);
    line-height: 0.92;
  }
}

@media (prefers-reduced-motion: reduce) {
  .row,
  h1 {
    animation-play-state: paused;
  }
}