:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #090704;
  color: #fff7df;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  background:
    radial-gradient(circle at 50% 65%, rgba(225, 142, 13, 0.22), transparent 44%),
    #090704;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 2vw, 2rem);
}

.poster {
  position: relative;
  width: min(100%, 1402px);
  overflow: hidden;
  border: 1px solid rgba(255, 190, 62, 0.28);
  border-radius: clamp(0.75rem, 2vw, 1.5rem);
  background: #000;
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.7);
}

.poster__image {
  display: block;
  width: 100%;
  height: auto;
  animation: image-breathe 12s ease-in-out infinite alternate;
  filter: brightness(0.78) contrast(1.08) saturate(0.88);
  transform: scale(1.01);
  transform-origin: center;
}

.atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.atmosphere::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 58%, rgba(255, 196, 75, 0.2), transparent 32%),
    radial-gradient(circle at 50% 110%, rgba(255, 169, 38, 0.28), transparent 44%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.32), transparent 26%, transparent 74%, rgba(0, 0, 0, 0.32));
  mix-blend-mode: screen;
  animation: stage-pulse 9s ease-in-out infinite alternate;
}

.atmosphere::after {
  content: "";
  position: absolute;
  inset: 34% -45% 4%;
  background:
    radial-gradient(ellipse at 18% 55%, rgba(255, 244, 219, 0.5), transparent 23%),
    radial-gradient(ellipse at 52% 68%, rgba(255, 196, 86, 0.46), transparent 29%),
    radial-gradient(ellipse at 84% 48%, rgba(255, 235, 201, 0.48), transparent 24%);
  filter: blur(34px);
  mix-blend-mode: screen;
  opacity: 0.48;
  animation: fog-sweep 13s ease-in-out infinite alternate;
}

.light,
.fog {
  position: absolute;
  display: block;
}

.light {
  top: -20%;
  width: 44%;
  height: 100%;
  opacity: 0.28;
  filter: blur(24px);
  mix-blend-mode: screen;
  transform-origin: top center;
  animation: light-sway 10s ease-in-out infinite alternate;
}

.light--left {
  left: -5%;
  background: linear-gradient(105deg, transparent 18%, rgba(255, 181, 48, 0.75) 54%, transparent 78%);
  transform: rotate(7deg);
}

.light--center {
  left: 29%;
  width: 42%;
  height: 108%;
  background: linear-gradient(90deg, transparent 15%, rgba(255, 205, 99, 0.58) 50%, transparent 85%);
  opacity: 0.18;
  animation: center-light 7.5s ease-in-out -2.3s infinite alternate;
}

.light--right {
  right: -5%;
  background: linear-gradient(75deg, transparent 18%, rgba(255, 159, 25, 0.68) 54%, transparent 78%);
  transform: rotate(-7deg);
  animation-delay: -4s;
}

.fog {
  left: -30%;
  width: 160%;
  background:
    radial-gradient(ellipse at 12% 58%, rgba(255, 221, 166, 0.32), transparent 24%),
    radial-gradient(ellipse at 40% 72%, rgba(255, 185, 66, 0.26), transparent 26%),
    radial-gradient(ellipse at 70% 55%, rgba(255, 224, 174, 0.3), transparent 25%),
    radial-gradient(ellipse at 92% 76%, rgba(255, 177, 50, 0.24), transparent 22%);
  filter: blur(28px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.fog--back {
  top: 22%;
  height: 66%;
  opacity: 0.52;
  animation: fog-drift-back 17s ease-in-out infinite alternate;
}

.fog--front {
  top: 46%;
  height: 52%;
  opacity: 0.42;
  filter: blur(32px);
  animation: fog-drift-front 11s ease-in-out infinite alternate-reverse;
}

.floor-fog {
  position: absolute;
  left: -42%;
  bottom: -5%;
  width: 185%;
  height: 35%;
  background:
    radial-gradient(ellipse at 8% 74%, rgba(255, 247, 225, 0.76), transparent 13%),
    radial-gradient(ellipse at 21% 54%, rgba(255, 222, 166, 0.64), transparent 17%),
    radial-gradient(ellipse at 39% 78%, rgba(255, 249, 231, 0.72), transparent 14%),
    radial-gradient(ellipse at 58% 55%, rgba(255, 212, 138, 0.62), transparent 18%),
    radial-gradient(ellipse at 76% 76%, rgba(255, 247, 225, 0.7), transparent 15%),
    radial-gradient(ellipse at 93% 58%, rgba(255, 218, 151, 0.64), transparent 16%);
  filter: blur(18px);
  mix-blend-mode: screen;
  opacity: 0;
  will-change: transform, opacity;
}

.floor-fog--one {
  animation: floor-fog-left 14s ease-in-out -1s infinite;
}

.floor-fog--two {
  bottom: 3%;
  height: 27%;
  filter: blur(26px);
  transform: scaleX(-1);
  animation: floor-fog-right 18s ease-in-out -8s infinite;
}

.floor-fog--three {
  bottom: 10%;
  height: 22%;
  filter: blur(34px);
  animation: floor-fog-burst 11s ease-in-out -5s infinite;
}

.poster__caption {
  position: absolute;
  inset: auto 0 0;
  padding: clamp(1rem, 4vw, 3rem);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.94));
  text-align: center;
  text-shadow: 0 2px 20px #000;
  z-index: 2;
}

.eyebrow,
.status,
h1 {
  margin: 0;
}

.eyebrow {
  color: #f2b83f;
  font-size: clamp(0.68rem, 1.5vw, 0.9rem);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

h1 {
  margin-top: 0.35rem;
  font-size: clamp(1.45rem, 4.3vw, 3.7rem);
  line-height: 1;
  letter-spacing: -0.035em;
}

.status {
  margin-top: 0.55rem;
  color: rgba(255, 247, 223, 0.78);
  font-size: clamp(0.78rem, 1.8vw, 1rem);
}

@keyframes image-breathe {
  0%, 18% {
    filter: brightness(0.62) contrast(1.14) saturate(0.76);
  }

  68%, 100% {
    filter: brightness(1.1) contrast(1.02) saturate(1.12);
  }
}

@keyframes stage-pulse {
  0%, 20% {
    opacity: 0.38;
    filter: hue-rotate(-7deg);
  }

  52% {
    opacity: 0.86;
    filter: hue-rotate(5deg);
  }

  100% {
    opacity: 0.55;
    filter: hue-rotate(-2deg);
  }
}

@keyframes light-sway {
  from {
    opacity: 0.16;
    transform: translateX(-3%) rotate(5deg) scaleX(0.92);
  }

  to {
    opacity: 0.38;
    transform: translateX(5%) rotate(10deg) scaleX(1.08);
  }
}

@keyframes center-light {
  0%, 22% {
    opacity: 0.05;
    transform: scaleX(0.72);
  }

  60%, 82% {
    opacity: 0.42;
    transform: scaleX(1.15);
  }

  100% {
    opacity: 0.17;
    transform: scaleX(0.9);
  }
}

@keyframes fog-drift-back {
  from {
    opacity: 0.3;
    transform: translate3d(-12%, 3%, 0) scale(1.02);
  }

  to {
    opacity: 0.68;
    transform: translate3d(14%, -7%, 0) scale(1.16);
  }
}

@keyframes fog-drift-front {
  from {
    opacity: 0.24;
    transform: translate3d(16%, 8%, 0) scale(1.04);
  }

  to {
    opacity: 0.58;
    transform: translate3d(-14%, -5%, 0) scale(1.2);
  }
}

@keyframes fog-sweep {
  from {
    opacity: 0.28;
    transform: translate3d(-10%, 4%, 0) scale(0.96);
  }

  to {
    opacity: 0.66;
    transform: translate3d(12%, -5%, 0) scale(1.12);
  }
}

@keyframes floor-fog-left {
  0%, 9% {
    opacity: 0;
    transform: translate3d(-16%, 10%, 0) scale(0.9, 0.72);
  }

  24% {
    opacity: 0.76;
  }

  56% {
    opacity: 0.52;
    transform: translate3d(5%, -7%, 0) scale(1.12, 1.04);
  }

  86%, 100% {
    opacity: 0;
    transform: translate3d(19%, -15%, 0) scale(1.28, 1.22);
  }
}

@keyframes floor-fog-right {
  0%, 16% {
    opacity: 0;
    transform: translate3d(17%, 8%, 0) scale(-0.86, 0.68);
  }

  32% {
    opacity: 0.68;
  }

  64% {
    opacity: 0.46;
    transform: translate3d(-2%, -6%, 0) scale(-1.1, 1.03);
  }

  91%, 100% {
    opacity: 0;
    transform: translate3d(-18%, -12%, 0) scale(-1.3, 1.18);
  }
}

@keyframes floor-fog-burst {
  0%, 28% {
    opacity: 0;
    transform: translate3d(-3%, 18%, 0) scale(0.72, 0.52);
  }

  43% {
    opacity: 0.78;
  }

  68% {
    opacity: 0.36;
    transform: translate3d(2%, -12%, 0) scale(1.08, 1.25);
  }

  88%, 100% {
    opacity: 0;
    transform: translate3d(5%, -24%, 0) scale(1.32, 1.55);
  }
}

@media (max-width: 600px) {
  .stage {
    align-items: start;
    padding: 0;
  }

  .poster {
    min-height: 100svh;
    border: 0;
    border-radius: 0;
    display: grid;
    align-content: center;
  }

  .poster__caption {
    position: static;
    background: #090704;
    padding: 1.3rem 1rem 1.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .poster__image,
  .light,
  .fog,
  .floor-fog,
  .atmosphere::before,
  .atmosphere::after {
    animation: none;
  }

  .poster__image {
    filter: brightness(0.92) contrast(1.06) saturate(0.96);
  }
}