:root {
  --bg-black: #000000;
  --red-core: #ff1726;
  --red-bright: #ff4d58;
  --red-hot: #ff99a0;
  --red-deep: #9e000b;
  --red-dark: #420004;
  --red-glow: rgba(255, 18, 34, 0.65);
  --red-ambient: rgba(220, 10, 25, 0.22);
}

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

html,
body {
  width: 100%;
  min-height: 100%;
  background-color: var(--bg-black);
  color: var(--red-core);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  position: relative;
  background:
    radial-gradient(
      circle at 50% 54%,
      rgba(180, 8, 20, 0.24) 0%,
      rgba(90, 0, 8, 0.12) 34%,
      rgba(0, 0, 0, 0.96) 68%,
      #000000 100%
    ),
    #000000;
}

/* Subtle retro-futuristic synth horizon grid + CRT scanlines on the black background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0px,
      rgba(255, 255, 255, 0) 2px,
      rgba(255, 20, 35, 0.03) 3px,
      rgba(0, 0, 0, 0.35) 4px
    ),
    linear-gradient(
      to bottom,
      #000000 0%,
      transparent 18%,
      transparent 82%,
      #000000 100%
    );
}

body::after {
  content: "";
  position: fixed;
  left: -25%;
  right: -25%;
  bottom: -18vh;
  height: 55vh;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255, 23, 38, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 23, 38, 0.18) 1px, transparent 1px);
  background-size: 56px 36px;
  transform: perspective(420px) rotateX(68deg);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 35%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 35%, #000 10%, transparent 75%);
  opacity: 0.75;
}

/* Main centered stage */
.stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(1.25rem, 3vh, 2.5rem) clamp(1rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.1rem, 2.6vh, 2rem);
}

/* Retro-Futuristic Red Headline: "Ringo Starr" */
.title {
  position: relative;
  font-family: "Orbitron", "Russo One", sans-serif;
  font-weight: 900;
  font-size: clamp(2.35rem, 6.4vw, 5.25rem);
  line-height: 1.05;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  transform: skewX(-9deg);
  user-select: none;
  padding: 0 0.25em 0.28em;
  animation: neon-pulse 4.5s ease-in-out infinite alternate;
}

/* 3D Extruded Red Depth + Neon Atmospheric Bloom Layer */
.title::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: 0 0.25em 0.28em;
  z-index: 1;
  color: var(--red-core);
  text-shadow:
    1px 1px 0 #7a0008,
    2px 2px 0 #660006,
    3px 3px 0 #520005,
    4px 4px 0 #3d0004,
    5px 5px 0 #290002,
    6px 6px 0 #140001,
    0 0 12px rgba(255, 23, 38, 0.9),
    0 0 28px rgba(255, 23, 38, 0.65),
    0 0 58px rgba(255, 10, 25, 0.45),
    0 0 95px rgba(200, 0, 15, 0.35);
}

/* Metallic Laser-Red Horizon Gradient Face */
.title-text {
  position: relative;
  z-index: 2;
  display: inline-block;
  background: linear-gradient(
    180deg,
    #fff5f5 0%,
    #ff858d 14%,
    #ff1e2d 44%,
    #990009 50%,
    #ff0f20 62%,
    #ff5964 86%,
    #ffd6d9 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 160, 168, 0.42);
}

/* Twin Retro-Futuristic Laser Horizon Rails under Title */
.title::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0.04em;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 23, 38, 0.15) 8%,
    #ff1726 32%,
    #ffd1d4 50%,
    #ff1726 68%,
    rgba(255, 23, 38, 0.15) 92%,
    transparent 100%
  );
  box-shadow:
    0 0 10px #ff1726,
    0 0 24px #ff1726,
    0 6px 0 -1px rgba(255, 23, 38, 0.45);
}

/* Centered Poster Frame */
.poster-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 4px;
  background: linear-gradient(
    145deg,
    rgba(255, 35, 50, 0.55) 0%,
    rgba(80, 0, 8, 0.35) 50%,
    rgba(255, 23, 38, 0.55) 100%
  );
  box-shadow:
    0 0 0 1px rgba(255, 60, 75, 0.35),
    0 0 28px rgba(255, 18, 34, 0.32),
    0 0 70px rgba(180, 0, 15, 0.28),
    0 28px 60px rgba(0, 0, 0, 0.95);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Retro-futuristic corner bracket accents */
.poster-frame::before,
.poster-frame::after {
  content: "";
  position: absolute;
  inset: -7px;
  pointer-events: none;
  border: 1px solid rgba(255, 30, 45, 0.28);
  box-shadow: inset 0 0 16px rgba(255, 23, 38, 0.18);
}

.poster-frame:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow:
    0 0 0 1px rgba(255, 95, 105, 0.65),
    0 0 38px rgba(255, 23, 38, 0.52),
    0 0 95px rgba(220, 0, 20, 0.4),
    0 34px 70px rgba(0, 0, 0, 0.98);
}

.poster-image {
  display: block;
  width: auto;
  height: auto;
  max-width: min(86vw, 540px);
  max-height: min(72vh, 720px);
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85);
}

@keyframes neon-pulse {
  0% {
    filter: drop-shadow(0 0 4px rgba(255, 23, 38, 0.35));
  }
  100% {
    filter: drop-shadow(0 0 14px rgba(255, 35, 50, 0.75));
  }
}

@media (max-width: 600px) {
  .title {
    letter-spacing: 0.09em;
    transform: skewX(-6deg);
  }

  .poster-image {
    max-width: 90vw;
    max-height: 68vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .title {
    animation: none;
  }

  .poster-frame {
    transition: none;
  }
}