/* austinavian.com: site layer. deep2.css styles the starfield and its chrome; this file owns everything above it. */
#site { position: fixed; inset: 0; z-index: 10; pointer-events: none; font-family: "Avian Pro", system-ui, sans-serif; }
/* anything clickable inside #site opts back in, so the rest of the screen still orbits the sky */
#site .interactive, #site a, #site button, #site input, #site textarea, #site select { pointer-events: auto; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* logo-only fallback. Same maths as the engine's final frame (framing 'cover'): focal = 0.78125 · max(W, H · 7680/3213),
   SVG drawn at 2.0717e-5 · focal px per unit (8534-unit viewBox → 0.176796 · focal), its centre point (4263.9, 4266.7)
   placed 0.016417 · focal above the middle of the viewport. */
#still { position: absolute; inset: 0; overflow: hidden; display: none; --f: calc(0.78125 * max(100vw, 100vh * 2.3902894)); }
@supports (width: 1cqw) { #stage { container-type: size; } #still { --f: calc(0.78125 * max(100cqw, 100cqh * 2.3902894)); } }
#still img { position: absolute; width: calc(0.176796 * var(--f)); height: calc(0.176796 * var(--f));
  left: calc(50% - 0.0883329 * var(--f)); top: calc(50% - 0.1048071 * var(--f)); }
html:not(.js) #still, html.still #still { display: block; }
html:not(.js) #sky, html.still #sky { display: none; }

/* bottom link: the Avian Uno wordmark in faint white. Fades in once the mark has first formed and stays through replays;
   dragging the sky hides it until the view is back at rest */
#social { position: absolute; left: 50%; bottom: max(26px, calc(env(safe-area-inset-bottom) + 10px)); transform: translateX(-50%);
  display: flex; opacity: 0; transition: opacity 1.6s ease; }
#social.on { opacity: 1; }
#social:not(.on) a { pointer-events: none; }
#social.leaving { transition-duration: 0.35s; }
#social a { display: block; padding: 8px; opacity: 0.4; transition: opacity 0.4s; -webkit-tap-highlight-color: transparent; }
#social a:hover, #social a:focus-visible { opacity: 0.85; outline: none; }
#social img { display: block; width: 92px; height: auto; }
@media (prefers-reduced-motion: reduce) { #social { transition: none; } }