:root { color-scheme: dark; background: #050207; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
body { background: #050207; overflow: hidden; }
.holding-page { --brand-size: clamp(190px, 23vw, 340px); --teaser-gap: clamp(24px, 8svh, 88px); position: relative; isolation: isolate; width: 100%; height: 100vh; height: 100svh; overflow: hidden; background: #030104; }
.atmosphere, #light, .edge-light, .vignette { position: absolute; inset: 0; pointer-events: none; }
.atmosphere {
  background:
    radial-gradient(ellipse at 0% 52%, #7036b24d 0%, #41207525 28%, transparent 62%),
    radial-gradient(ellipse at 100% 47%, #9b41d24a 0%, #4d208029 29%, transparent 62%),
    radial-gradient(ellipse at 50% 53%, #13091e 0%, #08040d 43%, #030104 74%);
}
#light { width: 100%; height: 100%; opacity: 0; transition: opacity 2.8s ease; }
#light.is-ready { opacity: 1; }
.edge-light {
  background: radial-gradient(ellipse 44% 55% at -7% 50%, #9257eb20, transparent 78%), radial-gradient(ellipse 44% 55% at 107% 50%, #b067ed1c, transparent 78%);
}
.vignette { background: linear-gradient(0deg, #02010399, transparent 28%, transparent 75%, #020103b3), radial-gradient(ellipse at center, transparent 24%, #01000212 65%, #01000270 112%); }
.brand {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: var(--brand-size); margin: 0; line-height: 0; mix-blend-mode: screen;
  filter: drop-shadow(0 0 30px #aa78e712); animation: reveal 2.6s cubic-bezier(.2,.7,.2,1) both;
}
/* The accepted artwork is clipped by the logo's visible bounds, so its
   silhouette, not the original poster canvas, sits at the viewport center. */
.logo-window { display: block; position: relative; width: 100%; aspect-ratio: 595 / 397; overflow: hidden; }
.logo-window img { position: absolute; width: 210.756303%; max-width: none; height: auto; left: -60%; top: -109.06801%; filter: contrast(1.45) brightness(1.1); user-select: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.teaser { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; line-height: 0; mix-blend-mode: screen; animation: reveal 2.8s ease .5s both; }
.teaser-top { bottom: calc(50% + var(--brand-size) * .33361345 + var(--teaser-gap)); width: clamp(210px, 22vw, 310px); }
.teaser-bottom { top: calc(50% + var(--brand-size) * .33361345 + var(--teaser-gap)); width: clamp(280px, 31vw, 430px); animation-delay: .9s; }
.lettering { display: block; position: relative; width: 100%; overflow: hidden; animation: drift 10s ease-in-out infinite; }
.lettering img { position: absolute; max-width: none; height: auto; user-select: none; }
.lettering-top { aspect-ratio: 449 / 69; }
.lettering-top img { width: 279.287305%; left: -90.200445%; top: -231.884058%; }
.lettering-bottom { aspect-ratio: 485 / 40; opacity: .9; animation-duration: 12s; animation-delay: -4s; }
.lettering-bottom img { width: 258.556701%; left: -79.381443%; top: -2300%; }
@keyframes reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (max-width: 600px) { .holding-page { --brand-size: clamp(182px, 48vw, 258px); } .teaser-top { width: min(65vw, 260px); } .teaser-bottom { width: min(86vw, 390px); } }
@media (max-height: 430px) { .holding-page { --teaser-gap: 24px; --brand-size: min(23vw, 40svh); } .teaser-top { width: min(28vw, 210px); } .teaser-bottom { width: min(48vw, 300px); } }
@media (prefers-reduced-motion: reduce) { .brand, .teaser, .lettering { animation: none; } #light { transition: none; } }