.background-swarm { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.intro-stage, .intro-actions { z-index: 1; }
.intro-stage { position: relative; max-width: none; min-height: calc(100svh - 70px); padding: 40px 24px; gap: 0; }
.intro-stage .mark { width: min(400px, 76vw); margin: 0; }
.intro-stage .mark img { mask-image: url('/assets/quine.png'); mask-mode: luminance; mask-size: 100% 100%; mask-repeat: no-repeat; }
.intro-stage .mark:focus-visible { outline: 1px solid #555; outline-offset: 8px; border-radius: 12px; }
.intro-wordmark { font-size: 32px; margin-top: -12px; }
.intro-wordmark span { display: inline-block; opacity: 1; transform: translateY(0); transition: opacity .55s ease, transform .65s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--letter, 0) * 95ms); }
.intro-wordmark span:nth-child(2) { --letter: 1; }
.intro-wordmark span:nth-child(3) { --letter: 2; }
.intro-wordmark span:nth-child(4) { --letter: 3; }
.intro-wordmark span:nth-child(5) { --letter: 4; }
.intro-wordmark span:nth-child(6) { --letter: 5; }
.intro-wordmark span:nth-child(7) { --letter: 6; }
.is-animating .intro-wordmark span { opacity: 0; transform: translateY(18px); transition: none; }
.is-animating .mark:not(.is-live) img { visibility: hidden; }
.intro-actions { position: relative; display: flex; justify-content: center; align-items: center; gap: 16px; padding: 20px; font-size: 12px; }
.intro-actions button { background: transparent; border: 0; padding: 8px; color: #888; font: inherit; cursor: pointer; }
.intro-actions a { color: #888; text-decoration: none; }
.intro-actions button:hover, .intro-actions a:hover { color: #eee; }
.intro-actions button:focus-visible, .intro-actions a:focus-visible { outline: 2px solid #aaa; outline-offset: 4px; }
.intro-actions [hidden] { display: none; }
.landing-stage { min-height: 0; padding: 32px 24px; }
.landing-content { width: 100%; max-width: 480px; opacity: 1; visibility: visible; transition: opacity .6s ease .7s, visibility 0s .7s; }
.landing-content .waitlist { margin-inline: auto; }
.is-animating .landing-content { opacity: 0; visibility: hidden; transition: none; }
.landing-footer { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .landing-content { transition: none; } }
@media (prefers-reduced-motion: reduce) { .intro-wordmark span { transition: none; transform: none; } }