:root {
  color-scheme: dark;
  background: #07080c;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: #07080c;
}

.scene__photograph,
.scene__signal,
.scene__glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene__photograph { object-fit: cover; object-position: center; }
.scene__signal { display: block; opacity: 0; transition: opacity 800ms ease; }
.scene[data-ready="true"] .scene__signal { opacity: 1; }
.scene[data-ready="true"] .scene__photograph { visibility: hidden; }

.scene__glass {
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 35%, rgb(0 0 8 / 27%) 100%);
}

.brand {
  position: fixed;
  z-index: 2;
  left: max(40px, env(safe-area-inset-left));
  bottom: max(36px, env(safe-area-inset-bottom));
  width: clamp(260px, 24vw, 420px);
  aspect-ratio: 3308 / 331;
  overflow: hidden;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 75%));
}

.brand__logo {
  /* Crop the supplied PNG's transparent padding without changing the artwork. */
  position: absolute;
  display: block;
  left: -4.3833%;
  top: -47.432%;
  width: 107.9202%;
  height: auto;
  max-width: none;
  filter: brightness(0) invert(1);
}

@media (max-width: 900px), (max-aspect-ratio: 1 / 1) {
  .brand {
    left: 50%;
    bottom: max(28px, env(safe-area-inset-bottom));
    width: min(340px, calc(100vw - 64px));
    transform: translateX(-50%);
  }
}

@media (max-width: 900px) and (max-height: 500px) {
  .brand {
    bottom: max(12px, env(safe-area-inset-bottom));
    width: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene__signal { transition: none; }
}