.cinema-atmosphere {
  position: fixed;
  z-index: 12;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  contain: strict;
}

.cinema-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.72;
}

.cinema-flare,
.cinema-orb {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform, opacity;
}

.cinema-flare {
  filter: blur(18px);
}

.cinema-flare-one {
  top: -22vmax;
  right: -28vmax;
  width: 70vmax;
  height: 48vmax;
  opacity: 0.42;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 241, 211, 0.18) 0%,
    rgba(191, 73, 65, 0.055) 24%,
    rgba(140, 103, 72, 0.025) 44%,
    transparent 70%
  );
  animation: cinema-flare-one 18s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.cinema-flare-two {
  bottom: -28vmax;
  left: -30vmax;
  width: 68vmax;
  height: 52vmax;
  opacity: 0.24;
  background: radial-gradient(
    ellipse at center,
    rgba(191, 73, 65, 0.105) 0%,
    rgba(145, 92, 68, 0.035) 35%,
    transparent 70%
  );
  animation: cinema-flare-two 23s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

.cinema-flare-three {
  top: 28%;
  left: 39%;
  width: 32vmax;
  height: 12vmax;
  opacity: 0.13;
  background: radial-gradient(
    ellipse at center,
    rgba(239, 238, 233, 0.13) 0%,
    rgba(239, 238, 233, 0.025) 38%,
    transparent 72%
  );
  transform: rotate(-18deg);
  animation: cinema-flare-three 27s ease-in-out infinite alternate;
}

.cinema-orb {
  border: 1px solid rgba(239, 238, 233, 0.08);
  opacity: 0.2;
  box-shadow:
    inset 0 0 18px rgba(239, 238, 233, 0.025),
    0 0 18px rgba(191, 73, 65, 0.018);
}

.cinema-orb-one {
  top: 19%;
  right: 21%;
  width: clamp(34px, 4.6vw, 82px);
  height: clamp(34px, 4.6vw, 82px);
  animation: cinema-orb-one 19s ease-in-out infinite alternate;
}

.cinema-orb-two {
  right: 35%;
  bottom: 19%;
  width: clamp(18px, 2.4vw, 43px);
  height: clamp(18px, 2.4vw, 43px);
  opacity: 0.13;
  animation: cinema-orb-two 24s ease-in-out infinite alternate;
}

@keyframes cinema-flare-one {
  0% {
    opacity: 0.24;
    transform: translate3d(0, 0, 0) scale(0.9) rotate(-5deg);
  }
  46% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.3;
    transform: translate3d(-12vw, 17vh, 0) scale(1.13) rotate(6deg);
  }
}

@keyframes cinema-flare-two {
  0% {
    opacity: 0.13;
    transform: translate3d(0, 0, 0) scale(0.86);
  }
  55% {
    opacity: 0.28;
  }
  100% {
    opacity: 0.18;
    transform: translate3d(17vw, -13vh, 0) scale(1.12);
  }
}

@keyframes cinema-flare-three {
  0% {
    opacity: 0.07;
    transform: translate3d(-10vw, 4vh, 0) rotate(-18deg) scale(0.75);
  }
  45% {
    opacity: 0.16;
  }
  100% {
    opacity: 0.09;
    transform: translate3d(23vw, -7vh, 0) rotate(-12deg) scale(1.25);
  }
}

@keyframes cinema-orb-one {
  to {
    opacity: 0.08;
    transform: translate3d(-15vw, 12vh, 0) scale(1.5);
  }
}

@keyframes cinema-orb-two {
  to {
    opacity: 0.22;
    transform: translate3d(12vw, -17vh, 0) scale(0.7);
  }
}

@media (max-width: 760px) {
  .cinema-atmosphere {
    opacity: 0.72;
  }

  .cinema-particles {
    opacity: 0.58;
  }

  .cinema-flare-one {
    top: -13vmax;
    right: -47vmax;
    width: 102vmax;
    height: 69vmax;
  }

  .cinema-flare-two {
    bottom: -39vmax;
    left: -50vmax;
    width: 104vmax;
    height: 76vmax;
  }

  .cinema-flare-three,
  .cinema-orb-two {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cinema-flare,
  .cinema-orb {
    animation: none !important;
  }

  .cinema-flare-one {
    opacity: 0.2;
  }

  .cinema-flare-two {
    opacity: 0.1;
  }

  .cinema-flare-three,
  .cinema-orb {
    display: none;
  }
}