/* The letters are holes in this veil, exposing the original site's hero. */
html.intro-active,
html.intro-hold {
    overflow: hidden;
    overscroll-behavior: none;
    scrollbar-gutter: stable;
}

html { scrollbar-gutter: stable; }
.intro-active body,
.intro-hold body { overflow: hidden; }
.intro-active #site-shell { pointer-events: none; }
.intro-active .hero-inner,
.intro-active .sidebar,
.intro-active .topbar,
.intro-active .scroll-cue { opacity: var(--site-reveal, 0); }

.intro {
    position: fixed;
    inset: 0;
    z-index: 1000;
    touch-action: none;
    overscroll-behavior: none;
}
.intro[hidden] { display: none; }
.intro-mask { position: absolute; inset: 0; opacity: var(--veil-opacity, 1); }
.intro-word {
    font-family: var(--font-serif);
    font-size: clamp(4.5rem, 16vw, 15.5rem);
    font-weight: 400;
    letter-spacing: -0.03em;
}
.intro-outline {
    fill: none;
    stroke: rgba(36, 46, 34, 0.32);
    stroke-width: 1.5px;
}
.intro-desk {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 var(--pad) calc(var(--pad) * 0.6);
    opacity: var(--details-opacity, 1);
}
.intro-desk > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line-soft);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-45);
}
.intro-controls {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    white-space: nowrap;
    font: 0.62rem var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-70);
}
.intro-controls button { font: inherit; text-transform: inherit; letter-spacing: inherit; padding: 0.8rem 0; }
.intro-track { position: absolute; top: 100%; left: 0; width: 100%; height: 1px; background: var(--line-soft); }
.intro-track span { display: block; height: 100%; background: var(--patina); transform: scaleX(var(--intro-progress, 0)); transform-origin: left; }
@media (max-width: 640px) {
    .intro-desk > div { flex-direction: column; gap: 0.45rem; }
    .intro-controls { gap: 1rem; }
}