/* Photograph, paired corner labels, then the bouncing scroll cue. */
.header{animation:none!important;color:var(--ink,#f7f7f7)}
.opening{background:var(--paper,#000)}
.opening-photo{opacity:0;transition:opacity 650ms cubic-bezier(.4,0,.2,1)!important}
.opening.image-ready .opening-photo{opacity:1}
.intro-pending .header #home,.intro-pending .header #theme-toggle{opacity:0;transition:opacity 450ms ease}
.intro-pending.intro-header-ready .header #home,.intro-pending.intro-header-ready .header #theme-toggle{opacity:1}
.intro-pending .header #home .link-ink:after,.intro-pending .header #theme-toggle .link-ink:after{transform:scale(1,.5);transition:none}
.intro-pending.intro-header-ready .header #header-mark{opacity:1;transition:none}
#header-mark .mark-letter{will-change:transform}
.header #header-mark .mark path{fill:var(--ink,#f7f7f7)!important}
.opening .scroll-cue{display:grid;color:var(--run-pink);opacity:0;pointer-events:none;transition:opacity 360ms ease-out,translate 360ms ease-out}
.opening.cue-ready:not(.cue-scrolled) .scroll-cue{opacity:1;pointer-events:auto}
.opening .scroll-cue>.scroll-chevron{animation:chevron-breathe 2.4s ease-in-out infinite;animation-play-state:paused}
.opening.cue-ready:not(.cue-scrolled) .scroll-cue>.scroll-chevron{animation-play-state:running}
@media(prefers-reduced-motion:reduce){.opening-photo,.header #home,.header #theme-toggle,.opening .scroll-cue{transition:none!important}.opening .scroll-cue>.scroll-chevron{animation:none}}

/* The large identity belongs only to the first visit to the opening. */
.opening-mark{opacity:1;visibility:visible;pointer-events:none}
.opening-mark .mark path{fill:var(--ink,#f7f7f7)!important}
.hero-retired .opening-mark{display:none!important}

/* Give the first-load fan a quiet black stage before the photograph. */
.opening:not(.image-ready){background:#000}
.opening:not(.image-ready) .opening-mark .mark path{fill:#f7f7f7!important}

/* Keep the cue quiet against the photography in both themes. */
.opening .scroll-cue{color:#fff}
.email-fallback{position:absolute;left:28px;right:28px;bottom:-24px;display:flex;gap:12px;align-items:center;font:400 var(--ui-size,11px)/1.4 SuisseIntl,Arial,sans-serif;color:var(--ink);z-index:4}
.email-fallback[hidden]{display:none}
.copy-email{font:inherit;color:inherit;background:none;border:0;padding:4px 0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.copy-email-status{font:inherit;text-transform:none}
@media(max-width:700px){.email-fallback{left:18px;right:18px}}

/* A complete arrow, with the shaft and point breathing as one piece. */
.opening .scroll-cue>.scroll-chevron{width:16px;height:28px;border:0;transform:none;animation-name:arrow-breathe}
.scroll-chevron>svg{display:block}
@keyframes arrow-breathe{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.opening .scroll-cue>.scroll-chevron{animation:none;transform:none}}

.ending .contact-location{margin:24px 0 0;font:400 var(--ui-size,11px)/1.5 SuisseIntl,Arial,sans-serif;color:var(--ink);opacity:.65}

/* Render the settled vector directly, without retained animated textures. */
#header-mark svg{shape-rendering:geometricPrecision}
.header-logo-settled #header-mark .mark{contain:none}
.header-logo-settled #header-mark .mark-letter,
.header-logo-settled #header-mark .mark-letter>svg{transform:none!important;will-change:auto!important;backface-visibility:visible}