:root {
  color-scheme: dark;
  --bg: #020304;
  --edge: rgba(255, 255, 255, 0.07);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
}

body {
  min-height: 100vh;
  min-height: 100svh;
  cursor: none;
}

.ambient-canvas,
.screen {
  display: block;
  pointer-events: none;
  user-select: none;
}

.ambient-canvas {
  opacity: 0;
  transition: opacity 520ms ease;
}

.ambient-canvas.is-live {
  opacity: 1;
}

.backdrop-canvas {
  position: fixed;
  inset: -6vh -6vw;
  z-index: 0;
  width: 112vw;
  height: 112vh;
  filter: blur(34px) saturate(1.22) brightness(0.34) contrast(1.06);
  transform: translateZ(0) scale(1.02);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(circle at center, rgba(2, 3, 4, 0.08) 0 28%, rgba(2, 3, 4, 0.42) 62%, rgba(2, 3, 4, 0.92) 100%),
    linear-gradient(180deg, rgba(2, 3, 4, 0.78), rgba(2, 3, 4, 0.24) 48%, rgba(2, 3, 4, 0.82));
}

body::after {
  background:
    linear-gradient(90deg, rgba(2, 3, 4, 0.82), transparent 24%, transparent 76%, rgba(2, 3, 4, 0.82)),
    radial-gradient(ellipse at center, transparent 0 42%, rgba(2, 3, 4, 0.5) 78%, rgba(2, 3, 4, 0.96) 100%);
}

.stage {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3.5vw, 48px);
  isolation: isolate;
}

.cinema {
  position: relative;
  display: grid;
  place-items: center;
  width: min(80vw, 1240px);
  max-width: calc(100vw - 28px);
  aspect-ratio: 16 / 9;
  max-height: min(76vh, calc(100svh - 28px));
}

.cinema::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 2;
  pointer-events: none;
  box-shadow:
    inset 0 0 32px rgba(2, 3, 4, 0.52),
    0 0 42px rgba(2, 3, 4, 0.42);
}

.halo,
.screen,
.logo-reveal {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
}

.halo {
  position: absolute;
  z-index: 0;
  transform: translateZ(0);
  mix-blend-mode: screen;
}

.halo-wide {
  transform: translateZ(0) scale(1.3);
  filter: blur(42px) saturate(1.32) brightness(0.64);
}

.halo-near {
  transform: translateZ(0) scale(1.1);
  filter: blur(18px) saturate(1.18) brightness(0.72);
  opacity: 0;
}

.halo-near.is-live {
  opacity: 0.58;
}

.screen {
  position: relative;
  z-index: 1;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.18);
  border: 0;
  box-shadow:
    0 22px 68px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(255, 255, 255, 0.045);
}

.logo-reveal {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateZ(0) scale(0.98);
  transition:
    opacity 900ms ease,
    transform 1200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.logo-reveal.is-visible {
  opacity: 1;
  transform: translateZ(0) scale(1);
}

.logo-reveal img {
  display: block;
  width: min(42%, 380px);
  max-height: 34%;
  object-fit: contain;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
}

@media (max-aspect-ratio: 1 / 1) {
  .cinema {
    width: min(94vw, 1240px);
    max-height: 68vh;
  }
}

@media (max-width: 720px), (prefers-reduced-motion: reduce) {
  .backdrop-canvas {
    filter: blur(24px) saturate(1.12) brightness(0.29) contrast(1.04);
  }

  .halo-wide {
    transform: translateZ(0) scale(1.2);
    filter: blur(24px) saturate(1.18) brightness(0.54);
  }

  .halo-near {
    display: none;
  }
}

@media (max-width: 720px) {
  body::before {
    background:
      radial-gradient(circle at center, rgba(2, 3, 4, 0.1) 0 22%, rgba(2, 3, 4, 0.38) 58%, rgba(2, 3, 4, 0.94) 100%),
      linear-gradient(180deg, rgba(2, 3, 4, 0.86), rgba(2, 3, 4, 0.18) 42%, rgba(2, 3, 4, 0.86));
  }

  body::after {
    background:
      linear-gradient(90deg, rgba(2, 3, 4, 0.74), transparent 18%, transparent 82%, rgba(2, 3, 4, 0.74)),
      radial-gradient(ellipse at center, transparent 0 34%, rgba(2, 3, 4, 0.42) 74%, rgba(2, 3, 4, 0.96) 100%);
  }

  .stage {
    padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }

  .cinema {
    width: min(94vw, 620px);
    height: auto;
    max-width: none;
    max-height: 64svh;
    aspect-ratio: 16 / 9;
  }

  .cinema::after {
    inset: -1px;
    box-shadow:
      inset 0 0 22px rgba(2, 3, 4, 0.48),
      0 0 34px rgba(2, 3, 4, 0.36);
  }

  .screen {
    object-fit: contain;
    box-shadow: none;
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 3%, #000 97%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-composite: intersect;
  }

  .logo-reveal img {
    width: min(58%, 300px);
    max-height: 36%;
  }

  .halo-wide {
    width: 100%;
    height: 100%;
    transform: translateZ(0) scale(1.26);
    filter: blur(28px) saturate(1.18) brightness(0.52);
  }
}

@media (max-width: 720px) and (orientation: portrait) {
  .cinema {
    width: min(96vw, 620px);
    max-height: 58svh;
  }

  .backdrop-canvas {
    inset: -4vh -10vw;
    width: 120vw;
    height: 108vh;
    filter: blur(28px) saturate(1.14) brightness(0.27) contrast(1.06);
  }

  .halo-wide {
    transform: translateZ(0) scale(1.34);
    filter: blur(32px) saturate(1.2) brightness(0.54);
  }
}

@media (max-width: 720px) and (orientation: landscape) {
  .stage {
    padding: max(10px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  }

  .cinema {
    width: min(82vw, 760px);
    max-height: 86svh;
  }

  .halo-wide {
    transform: translateZ(0) scale(1.22);
    filter: blur(24px) saturate(1.16) brightness(0.5);
  }
}

@media (max-width: 390px) and (orientation: portrait) {
  .cinema {
    width: 96vw;
    max-height: 54svh;
  }

  .halo-wide {
    transform: translateZ(0) scale(1.3);
    filter: blur(26px) saturate(1.14) brightness(0.5);
  }
}