/* Homepage: brand surface (carried over from the retired Codex opening) and the intro overlay.
   Intro: Einstein's quote glows in word by word, dissolves, the logo forms, Tinker's head peeks over the
   letters by the d (left, right), and the logo goes up into the header. Once per session. */

/* ---------- homepage brand surface ---------- */
body.home{--bg:#141414;--text:#f1efea;--accent:#e8553f;font-family:'DM Sans',Arial,sans-serif;background:#141414}
.home .header{background:#141414f5}
.home .hero-shade{background:linear-gradient(90deg,#141414 0%,#141414ed 20%,#141414b3 42%,#14141410 80%),linear-gradient(0deg,#14141466,transparent 65%)}
.home .hero h1 em{background:none;color:#e8553f}
@media(max-width:760px){.home .hero-shade{background:linear-gradient(90deg,#141414e6,#14141455),linear-gradient(180deg,#141414f2 0%,#141414b5 27%,#14141425 68%,#141414c9 100%)}}

/* ---------- intro overlay ---------- */
html.intro-on{overflow:hidden}
#intro{position:fixed;inset:0;z-index:200;background:#111;display:grid;place-items:center;overflow:hidden}
#intro[hidden]{display:none}
#intro .stage{display:grid;place-items:center;width:100%}
#intro .stage>*{grid-area:1/1}
#intro .lockup{display:flex;flex-direction:column;align-items:center}

/* the quote */
#intro .quote{margin:0;text-align:center;max-width:min(15em,88vw);font:300 clamp(28px,4.1vw,64px)/1.18 Fraunces,Georgia,serif;color:#f1efea;letter-spacing:-.01em}
#intro .quote blockquote,#intro .quote p{margin:0}
#intro .quote p{text-wrap:balance}   /* fix #19: even line lengths, no lonely "I" on phone */
#intro .quote em{font-style:italic;font-weight:400}
#intro .quote .w{display:inline-block}
#intro .quote figcaption{margin-top:1.4em;font:500 clamp(11px,.9vw,14px)/1 'DM Sans',Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#9b958c;opacity:0}
#intro .quote figcaption::before{content:"";display:inline-block;width:1.8em;height:1px;background:currentColor;vertical-align:middle;margin-right:.8em}

/* the logo, large */
#intro .mark{position:relative;font:800 clamp(56px,9.5vw,170px)/.9 'DM Sans',Arial,sans-serif;letter-spacing:-.055em;color:#f1efea;white-space:nowrap;transform-origin:50% 50%;will-change:transform}
#intro .mark .u{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:400;font-size:1.04em;letter-spacing:-.02em}
#intro .mark .ch{display:inline-block}
#intro .mark .st{color:#e8553f}
#intro .tagline{margin:.9em 0 0;font:400 clamp(15px,1.35vw,21px)/1.3 'DM Sans',Arial,sans-serif;color:#cfcac2;letter-spacing:.01em;opacity:0}

/* Tinker peeks from behind the letters: a clipped window inside the logo, behind the glyphs */
#intro #peek{position:absolute;overflow:hidden;pointer-events:none;z-index:-1}
#intro #intro-tk{position:absolute;left:0;top:0;width:100%}
#intro #intro-tk canvas{position:absolute;inset:0;width:100%;height:100%}

/* Replay (local preview only) */
.intro-btn{position:fixed;right:16px;bottom:14px;z-index:210;border:1px solid #ffffff2a;background:#141414cc;color:#d9d5ce;border-radius:999px;padding:11px 16px;font:500 13px/1 'DM Sans',Arial,sans-serif;cursor:pointer;backdrop-filter:blur(6px)}
.intro-btn[hidden]{display:none}
.intro-btn:focus-visible{outline:2px solid #e8553f;outline-offset:3px}
@media(max-width:700px){#intro .mark{font-size:14vw}}
@media(prefers-reduced-motion:reduce){#intro{display:none!important}}
/* set by an inline head script before first paint, so first-time visitors never glimpse the page before the intro */
html.intro-pending{overflow:hidden}
html.intro-pending #intro[hidden]{display:grid}
/* hidden from the very first paint: the script fades these in. Without this, the quote and the logo
   flashed at full strength (stacked on each other) in the moment before the script started. */
#intro .quote .w,#intro .mark .ch{opacity:0}
#intro #intro-tk{transform:translateY(300%)}