/* Opening brand banner: a spotlight sweeps the dark, lands on the wordmark, then opens onto the street.
   Hidden unless the inline flag in index.html sets html.intro-on (first visit per session, motion allowed, JS on). */
.intro{display:none}
html.intro-on .intro{display:block;position:fixed;inset:0;z-index:1000;background:#0b0c0f;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent}
html.intro-on .intro.open{background:transparent;pointer-events:none;cursor:auto}
.intro canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.intro-stage{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:clamp(14px,2vw,24px);transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.intro.open .intro-stage{opacity:0;transform:scale(1.06)}
.intro-mark{display:flex;align-items:baseline;font:800 clamp(50px,14vw,150px)/1 "Inter Tight",Inter,sans-serif;letter-spacing:-.05em;color:#222328;white-space:nowrap;opacity:0;transition:opacity .35s ease}
.intro.go .intro-mark{opacity:1}
.intro-word span{display:inline-block}
.intro-dot{opacity:.1;box-shadow:none}  /* JS drives the flicker: opacity + glow */
.intro-tag{font:italic 400 clamp(22px,2.6vw,34px)/1 "Instrument Serif",serif;letter-spacing:-.01em;color:rgba(255,255,255,.62);opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.intro-tag em{color:#ffd23f}
.intro-tag.on{opacity:1;transform:none}
.intro-skip{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font:600 11px Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.28)}
.intro.open .intro-skip{opacity:0}
/* the hero waits in the wings: its entrance plays as the curtain opens, not behind it */
html.intro-hold .up,html.intro-hold .yours{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){html.intro-on .intro{display:none}}