:root {
  color-scheme: dark;
  --bg: #020103;
  --bg-alt: #0a0613;
  --text: #f6f2ff;
  --ice: #d4c3ff;
  --cyan: #7f6dff;
  --blue: #5f46ff;
  --violet: #a14dff;
  --violet-deep: #220739;
  --line: rgba(255, 255, 255, 0.08);
  --display: "Bodoni Moda", Georgia, serif;
  --sans: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  color: var(--text);
  background:
    radial-gradient(circle at 17% 23%, rgba(95, 70, 255, 0.22), transparent 19%),
    radial-gradient(circle at 74% 16%, rgba(161, 77, 255, 0.2), transparent 21%),
    radial-gradient(circle at 62% 71%, rgba(76, 24, 130, 0.24), transparent 18%),
    radial-gradient(circle at 31% 82%, rgba(138, 67, 255, 0.16), transparent 24%),
    linear-gradient(145deg, #010101 0%, var(--bg-alt) 40%, #000 100%);
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 11px,
      rgba(255, 255, 255, 0.04) 11px 12px
    ),
    linear-gradient(90deg, rgba(95, 70, 255, 0.08), transparent 14%, transparent 63%, rgba(161, 77, 255, 0.09));
  mix-blend-mode: screen;
  opacity: 0.28;
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 20px;
  border: 1px solid var(--line);
  pointer-events: none;
}

.noise-field {
  position: fixed;
  inset: -12vh -12vw;
  pointer-events: none;
  overflow: hidden;
}

.noise-field__a,
.noise-field__b,
.noise-field__c {
  position: absolute;
  inset: 0;
}

.noise-field__a {
  background:
    conic-gradient(from 137deg at 48% 52%, rgba(95, 70, 255, 0) 0 12%, rgba(95, 70, 255, 0.22) 17%, rgba(161, 77, 255, 0.16) 24%, rgba(20, 6, 37, 0) 33%, rgba(161, 77, 255, 0.2) 47%, rgba(95, 70, 255, 0) 58%, rgba(78, 31, 149, 0.18) 72%, rgba(95, 70, 255, 0) 100%),
    radial-gradient(circle at 47% 53%, rgba(212, 195, 255, 0.12), transparent 30%);
  filter: blur(58px);
  transform: translate3d(-6%, 1%, 0) rotate(-9deg) scale(1.18);
  opacity: 0.72;
}

.noise-field__b {
  background:
    repeating-linear-gradient(
      117deg,
      rgba(161, 77, 255, 0.08) 0 10px,
      rgba(95, 70, 255, 0.02) 10px 17px,
      rgba(161, 77, 255, 0) 17px 31px
    ),
    repeating-linear-gradient(
      13deg,
      rgba(95, 70, 255, 0.06) 0 15px,
      rgba(95, 70, 255, 0) 15px 39px
    );
  filter: blur(1px);
  mix-blend-mode: screen;
  transform: skewY(-13deg) rotate(7deg) scale(1.28);
  opacity: 0.24;
}

.noise-field__c {
  background:
    radial-gradient(circle at 39% 44%, rgba(255, 255, 255, 0.1), transparent 8%),
    radial-gradient(circle at 57% 57%, rgba(95, 70, 255, 0.16), transparent 13%),
    radial-gradient(circle at 61% 48%, rgba(161, 77, 255, 0.2), transparent 17%),
    radial-gradient(circle at 44% 62%, rgba(61, 15, 112, 0.2), transparent 15%);
  filter: blur(110px);
  opacity: 0.8;
}

.event-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  perspective: 1600px;
}

.poster {
  display: grid;
  gap: clamp(0.08em, 0.8vw, 0.18em);
  margin: 0;
  width: min(100%, 10ch);
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-10deg) skewX(-8deg) perspective(1200px) rotateY(16deg);
  filter:
    drop-shadow(0 0 36px rgba(127, 109, 255, 0.18))
    drop-shadow(0 0 92px rgba(161, 77, 255, 0.18));
}

.poster-line {
  position: relative;
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: 0.045em;
  color: var(--text);
  text-shadow:
    0 0 0.08em rgba(255, 255, 255, 0.92),
    -0.024em 0 0 rgba(127, 109, 255, 0.48),
    0.024em 0 0 rgba(161, 77, 255, 0.48),
    0 0 0.42em rgba(255, 255, 255, 0.72),
    0 0 1.2em rgba(127, 109, 255, 0.32),
    0 0 2.3em rgba(161, 77, 255, 0.22);
  filter: blur(0.6px);
  animation: glitch-jump 5.6s steps(2, end) infinite;
}

.poster-line::before,
.poster-line::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.poster-line::before {
  color: var(--cyan);
  transform: translate(-0.042em, -0.01em);
  clip-path: inset(0);
  opacity: 0.3;
  filter: blur(14px);
  animation: slice-shift-a 7.2s steps(2, end) infinite;
}

.poster-line::after {
  color: var(--violet);
  transform: translate(0.06em, 0.018em);
  clip-path: inset(0);
  opacity: 0.28;
  filter: blur(18px);
  animation: slice-shift-b 6.4s steps(2, end) infinite;
}

.poster-line--number {
  font-size: clamp(6.2rem, 24vw, 17rem);
}

.poster-line--date {
  font-size: clamp(2.4rem, 7.2vw, 5.8rem);
  letter-spacing: 0.11em;
}

@keyframes glitch-jump {
  0%,
  9%,
  11%,
  24%,
  26%,
  51%,
  54%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  10% {
    transform: translate3d(-0.028em, 0.014em, 0);
  }

  25% {
    transform: translate3d(0.038em, -0.022em, 0);
  }

  52% {
    transform: translate3d(-0.018em, -0.012em, 0);
  }
}

@keyframes slice-shift-a {
  0%,
  100% {
    transform: translate(-0.075em, -0.028em);
  }

  30% {
    transform: translate(-0.05em, 0.014em);
  }

  60% {
    transform: translate(-0.1em, -0.012em);
  }
}

@keyframes slice-shift-b {
  0%,
  100% {
    transform: translate(0.1em, 0.045em);
  }

  35% {
    transform: translate(0.125em, -0.01em);
  }

  70% {
    transform: translate(0.045em, 0.065em);
  }
}

@media (max-width: 640px) {
  body::after {
    inset: 12px;
  }

  .poster {
    width: min(100%, 10ch);
    transform: rotate(-7deg) skewX(-8deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .poster-line,
  .poster-line::before,
  .poster-line::after {
    animation: none;
  }
}