/* A five-second drawing of the licensed mascot, then a shared-element arrival. */
.intro-layer[hidden]{display:none!important}
.intro-layer{position:fixed;inset:88px 0 0;z-index:180;isolation:isolate;overflow:clip;cursor:pointer;color:var(--ink);touch-action:pan-y}
.intro-backdrop{position:absolute;inset:0;background:var(--paper);z-index:-1}
.intro-sheet{position:relative;width:min(1360px,100%);height:100%;margin:auto;padding:65px var(--gutter);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:45px}
.intro-copy{align-self:center;max-width:30em}.intro-identity{display:flex;align-items:baseline;gap:12px;font-size:28px;font-weight:700;line-height:1.5;margin-bottom:25px}.intro-identity span{font-size:12px;font-weight:500;color:var(--signal)}
.intro-copy h2{font-size:clamp(36px,4vw,58px);line-height:1.4;letter-spacing:-.025em;font-weight:700}.intro-copy h2 span{color:var(--signal)}.intro-copy>p{font-size:14px;line-height:1.8;color:var(--ink-2);margin-top:18px}
.intro-figure{position:relative;width:min(420px,100%);aspect-ratio:1;margin:0 auto;transform-origin:center;will-change:transform;pointer-events:none}
.intro-drawing{display:block;width:100%;height:100%;overflow:visible}.intro-tonal,.intro-colour,.intro-complete{opacity:0}
.intro-outline,.intro-details{fill:none;stroke-linecap:round;stroke-linejoin:round}.intro-outline{stroke:var(--ink);stroke-width:1.7}.intro-details{stroke:var(--ink-2);stroke-width:1.05}.intro-outline path,.intro-details path{stroke-dasharray:9999;stroke-dashoffset:9999;opacity:0}
.intro-controls{position:absolute;top:18px;right:var(--gutter);display:flex;gap:10px;align-items:center}.intro-controls>span{font-size:11px;color:var(--muted)}
.intro-skip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);font-size:12px;line-height:1.5;color:var(--ink);cursor:pointer}.intro-skip .ic{width:13px;height:13px}.intro-skip:hover{background:var(--signal-soft);border-color:var(--signal);color:var(--signal)}.intro-skip:focus-visible{outline:3px solid var(--signal-cobalt);outline-offset:4px}
.intro-status{position:absolute;left:var(--gutter);bottom:55px;font-size:12px;line-height:1.8;color:var(--signal)}.intro-source{position:absolute;left:var(--gutter);right:var(--gutter);bottom:25px;font-size:10px;line-height:1.7;color:var(--muted)}
.intro-progress{position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--line);overflow:clip}.intro-progress i{display:block;width:100%;height:100%;background:var(--signal);transform:scaleX(0);transform-origin:left}
.intro-running #fish-character{visibility:hidden!important}.intro-running .hero-art{transform:none!important}.intro-running .fish-portrait #fish-character{animation:none!important}
.intro-layer[data-phase=landing] .intro-sheet{pointer-events:none}.intro-layer[data-phase=landing] .intro-controls{pointer-events:auto}
@media(max-width:1100px){.intro-sheet{padding-left:40px;padding-right:40px;gap:25px}.intro-copy h2{font-size:38px}.intro-figure{width:340px}.intro-controls{right:40px}.intro-status,.intro-source{left:40px}.intro-source{right:40px}}
@media(max-width:760px){.intro-layer{inset:72px 0 0}.intro-sheet{padding:60px 24px 85px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px}.intro-copy{text-align:center;align-self:auto}.intro-identity{justify-content:center;font-size:22px;margin-bottom:10px}.intro-copy h2{font-size:29px;line-height:1.4}.intro-copy h2 br{display:none}.intro-copy>p{margin-top:9px;font-size:12px}.intro-figure{width:min(290px,65vw,38svh);flex:none}.intro-controls{top:14px;right:22px}.intro-controls>span{display:none}.intro-status{left:24px;bottom:59px;right:24px;text-align:center}.intro-source{left:24px;right:24px;text-align:center;bottom:25px;font-size:9px}}
@media(max-height:570px) and (min-width:761px){.intro-sheet{padding-top:55px;padding-bottom:70px}.intro-figure{width:min(290px,58svh)}.intro-copy h2{font-size:36px}.intro-identity{margin-bottom:15px}.intro-copy>p{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.intro-layer{display:none!important}.intro-running #fish-character{visibility:visible!important}}