/* Keep the same cloud frame on screen while the next document loads. */
html::after {
  content: ''; position: fixed; inset: 0; z-index: 2147483647;
  background: #101319 var(--studio-handoff-frame, url("/assets/hero-cloud-glitch.jpg")) center / cover no-repeat;
  opacity: 0; pointer-events: none;
  transition: opacity 300ms ease;
}
html.leaving-for-studio::after,
html.studio-fade-entry::after { opacity: 1; pointer-events: auto; }
/* The incoming cover must be fully opaque on its very first paint. */
html.studio-fade-entry::after { transition: none; }
html.studio-fade-entry.studio-cloud-visible::after {
  opacity: 0; pointer-events: none; transition: opacity 450ms ease;
}
.cloud-intro { background: #101319; overflow: hidden; }
/* Match Studio's first canvas frame, including when rendering is delayed. */
.cloud-intro::before {
  content: ''; position: absolute; inset: 0;
  background: url("/assets/hero-cloud-glitch.jpg") 78% 72% / cover no-repeat;
  transform: scale(1.3); transform-origin: 78% 72%;
  pointer-events: none;
}
.cloud-intro.is-dissolving { background: transparent; }
.cloud-intro.is-dissolving::before { display: none; }
/* The cover provides the reveal; a second canvas fade would expose the fallback. */
.studio-canvas-handoff #backgroundCanvas { transition: none; }
.intro-wordmark { width: min(86vw, 760px); }
@media (max-width: 520px) { .intro-wordmark { width: min(90vw, 560px); } }
@media (max-height: 480px) and (orientation: landscape) {
  .intro-wordmark { width: min(70vw, 600px); }
}
@media (prefers-reduced-motion: reduce) {
  html::after { display: none; transition: none; }
}