:root {
  --bg-image: url("/assets/bg.jpg");
  --image-ratio: 1672 / 941;
  --amber: 255, 166, 84;
  --sunset: 255, 120, 48;
  --shadow: 5, 8, 12;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgb(var(--shadow));
  font-family: system-ui, sans-serif;
}

body {
  position: relative;
}

.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  transform-origin: center center;
}

.image-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, calc(100vh * var(--image-ratio)));
  aspect-ratio: var(--image-ratio);
  transform: translate(-50%, -50%);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.38)),
    var(--bg-image) center center / cover no-repeat;
}

.brand-mark {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 100px;
  height: 100px;
  object-fit: contain;
  pointer-events: none;
  z-index: 9999;
}

.glow-zone {
  position: absolute;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(var(--glow-blur, 8px));
  opacity: var(--glow-opacity, 0.6);
  animation: var(--glow-animation, sunsetPulse) var(--glow-duration, 12s) var(--glow-timing, ease-in-out) infinite;
}

.rack-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.rack-lights span {
  position: absolute;
  width: clamp(1px, 0.14vw, 3px);
  height: clamp(1px, 0.14vw, 3px);
  border-radius: 50%;
  background: var(--led-color, rgba(97, 205, 255, 0.8));
  translate: -50% -50%;
  box-shadow:
    0 0 5px var(--led-glow, rgba(97, 205, 255, 0.7)),
    0 0 14px var(--led-glow, rgba(97, 205, 255, 0.34));
  opacity: 0.18;
  animation: ledPulse var(--led-duration, 9s) infinite var(--led-delay, 0s);
}

.rack-lights span::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--led-glow, rgba(97, 205, 255, 0.72));
  filter: blur(2px);
  opacity: 0.42;
}

.steam {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(var(--steam-blur, 7px));
  opacity: var(--steam-opacity, 0.88);
  z-index: 2;
}

.steam span {
  position: absolute;
  left: var(--steam-x);
  top: var(--steam-y);
  width: var(--steam-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--steam-color, rgba(242, 248, 238, 0.48)), rgba(216, 225, 210, 0.24) 42%, transparent 70%);
  animation: steamRise var(--steam-duration) ease-out infinite;
  animation-delay: var(--steam-delay);
  opacity: 0;
}

.shimmer-zone {
  position: absolute;
  pointer-events: none;
  overflow: hidden;
  opacity: var(--shimmer-opacity, 0.12);
  mix-blend-mode: soft-light;
  z-index: 3;
}

.shimmer-zone::before,
.shimmer-zone::after {
  content: "";
  position: absolute;
  inset: -6%;
  background-image: var(--bg-image);
  background-repeat: no-repeat;
  background-size: var(--shimmer-bg-size);
  background-position: var(--shimmer-bg-position);
  filter: blur(var(--shimmer-blur, 0.7px)) brightness(1.12) contrast(1.08);
  transform: translate3d(0, 0, 0) scale(var(--shimmer-scale, 1.02));
  animation: heatShimmer var(--shimmer-duration, 7s) ease-in-out infinite;
  will-change: transform, opacity;
}

.shimmer-zone::after {
  opacity: 0.34;
  background-image:
    repeating-linear-gradient(96deg,
      rgba(255, 255, 255, 0.22) 0px,
      rgba(255, 255, 255, 0.22) 1px,
      transparent 5px,
      transparent 13px);
  filter: blur(1.8px);
  mix-blend-mode: screen;
  animation-duration: calc(var(--shimmer-duration, 7s) * 0.72);
}

.glint-line {
  position: absolute;
  width: var(--glint-width, 2px);
  height: var(--glint-line-length);
  transform-origin: 50% 0;
  transform: rotate(var(--glint-angle));
  pointer-events: none;
  overflow: hidden;
  opacity: var(--glint-opacity, 0.28);
  mix-blend-mode: screen;
  z-index: 4;
}

.glint-line::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--glint-length, 90px) * -1);
  width: 100%;
  height: var(--glint-length, 90px);
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    linear-gradient(to bottom, transparent, var(--glint-color, rgba(255, 186, 104, 0.75)) 45%, transparent);
  box-shadow:
    -1px 0 2px var(--glint-color, rgba(255, 186, 104, 0.45)),
    1px 0 2px var(--glint-color, rgba(255, 186, 104, 0.45)),
    0 0 8px var(--glint-color, rgba(255, 186, 104, 0.75)),
    0 0 18px var(--glint-color, rgba(255, 186, 104, 0.38));
  animation: glintScan var(--glint-duration, 11s) ease-in-out infinite;
  animation-delay: var(--glint-delay, 0s);
}

.atmosphere {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: screen;
  filter: blur(40px);
  background:
    radial-gradient(circle at 25% 70%, rgba(255, 255, 255, 0.08), transparent 18%),
    radial-gradient(circle at 70% 40%, rgba(255, 180, 120, 0.08), transparent 22%),
    radial-gradient(circle at 55% 80%, rgba(255, 255, 255, 0.04), transparent 25%);
  animation: fogDrift 60s ease-in-out infinite alternate;
}

.film-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.25;
  background-image:
    repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, 0.04) 0px,
      rgba(255, 255, 255, 0.04) 1px,
      transparent 2px,
      transparent 4px);
  mix-blend-mode: soft-light;
}

@keyframes sunsetPulse {

  0%,
  100% {
    opacity: 0.28;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(13px) brightness(0.82) saturate(1.05);
  }

  50% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(1.16);
    filter: blur(19px) brightness(1.45) saturate(1.3);
  }
}

@keyframes lampFlicker {

  0%,
  100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }

  4% {
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(1.04);
  }

  7% {
    opacity: 0.28;
    transform: translate(-50%, -50%) scale(0.96);
  }

  9% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.07);
  }

  13% {
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(0.98);
  }

  38% {
    opacity: 0.68;
    transform: translate(-50%, -50%) scale(1.03);
  }

  41% {
    opacity: 0.22;
    transform: translate(-50%, -50%) scale(0.94);
  }

  43% {
    opacity: 0.86;
    transform: translate(-50%, -50%) scale(1.06);
  }

  58% {
    opacity: 0.47;
    transform: translate(-50%, -50%) scale(0.99);
  }

  62% {
    opacity: 0.78;
    transform: translate(-50%, -50%) scale(1.04);
  }

  76% {
    opacity: 0.35;
    transform: translate(-50%, -50%) scale(0.97);
  }

  81% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@keyframes ledPulse {

  0%,
  75%,
  100% {
    opacity: 0.12;
    transform: scale(1);
    box-shadow:
      0 0 6px var(--led-glow, rgba(97, 205, 255, 0.7)),
      0 0 16px var(--led-glow, rgba(97, 205, 255, 0.36)),
      0 0 28px var(--led-glow, rgba(97, 205, 255, 0.18));
  }

  78% {
    opacity: 0.95;
    transform: scale(1.8);
    box-shadow:
      0 0 10px var(--led-glow, rgba(97, 205, 255, 0.92)),
      0 0 26px var(--led-glow, rgba(97, 205, 255, 0.62)),
      0 0 42px var(--led-glow, rgba(97, 205, 255, 0.34));
  }

  82% {
    opacity: 0.2;
    transform: scale(1);
    box-shadow:
      0 0 7px var(--led-glow, rgba(97, 205, 255, 0.78)),
      0 0 18px var(--led-glow, rgba(97, 205, 255, 0.44)),
      0 0 30px var(--led-glow, rgba(97, 205, 255, 0.22));
  }
}

@keyframes steamRise {
  0% {
    opacity: 0;
    transform: translate3d(0, 12%, 0) scale(0.55);
  }

  12% {
    opacity: 0.72;
  }

  48% {
    opacity: 0.52;
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--steam-drift-x, 42%), var(--steam-rise-y, -126%), 0) scale(2.05);
  }
}

@keyframes heatShimmer {

  0%,
  100% {
    opacity: 0.45;
    transform: translate3d(0, 0, 0) scale(var(--shimmer-scale, 1.02));
  }

  28% {
    opacity: 0.72;
    transform: translate3d(var(--shimmer-x, 1px), var(--shimmer-y, -2px), 0) scale(var(--shimmer-scale, 1.02));
  }

  56% {
    opacity: 0.52;
    transform: translate3d(calc(var(--shimmer-x, 1px) * -0.8), calc(var(--shimmer-y, -2px) * 0.5), 0) scale(var(--shimmer-scale, 1.02));
  }

  78% {
    opacity: 0.8;
    transform: translate3d(calc(var(--shimmer-x, 1px) * 0.5), calc(var(--shimmer-y, -2px) * -0.7), 0) scale(var(--shimmer-scale, 1.02));
  }
}

@keyframes glintScan {

  0%,
  72%,
  100% {
    opacity: 0;
    transform: translate(-50%, 0);
  }

  78% {
    opacity: 0.95;
  }

  88% {
    opacity: 0.4;
  }

  94% {
    opacity: 0;
    transform: translate(-50%, calc(var(--glint-line-length) + var(--glint-length, 90px)));
  }
}

@keyframes fogDrift {
  from {
    transform: translate3d(-1%, -1%, 0) scale(1);
  }

  to {
    transform: translate3d(1%, 1%, 0) scale(1.05);
  }
}

@keyframes cinematicDrift {
  from {
    transform: scale(1.01) translate3d(-0.3%, -0.2%, 0);
  }

  to {
    transform: scale(1.03) translate3d(0.3%, 0.2%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
  }
}