/* The stage stays fixed; only drawing layers and story text move inside it. */
.intro-page{--intro-max:1600px;--intro-header:88px;--intro-footer:80px;--intro-title:clamp(64px,6.5vw,100px);--intro-body:18px;--intro-rule:#44545d;--intro-accent:#e9d9b9;min-height:100svh;display:flex;flex-direction:column}
.intro-header,.intro-footer{padding-inline:var(--gutter);max-width:var(--intro-max);width:100%;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}
.intro-header{min-height:var(--intro-header);border-bottom:1px solid var(--line)}
.intro-header-actions{display:flex;align-items:center;gap:var(--space-7)}
.intro-stage{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;align-items:center;flex:1;min-height:600px;max-width:var(--intro-max);width:100%;margin:auto;padding:var(--space-8) var(--gutter);overflow:hidden}
.intro-grid{position:absolute;z-index:-1;inset:var(--space-6);border:1px solid var(--etched);background-image:var(--registration);pointer-events:none}
.intro-copy{position:relative;z-index:2;padding-block:var(--space-8);max-width:650px}
.intro-copy .eyebrow{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-6)}
.intro-dot{width:6px;height:6px;background:var(--accent);display:inline-block}
.intro-copy h1{font-size:var(--intro-title);letter-spacing:-.02em;line-height:1.04}
.intro-title-second{color:var(--intro-accent)}
.intro-story{display:grid;margin-top:var(--space-6);font-size:var(--intro-body);line-height:1.8;min-height:100px;max-width:38ch}
.intro-story p{grid-area:1/1;opacity:0;align-self:start;white-space:pre-line}
.intro-story p:first-child{opacity:1}
.intro-practices{display:flex;margin:var(--space-5) 0 var(--space-8);gap:var(--space-6)}
.intro-practices>span{display:flex;flex-direction:column;position:relative;border-top:1px solid var(--intro-rule);padding-top:var(--space-3);width:112px}
.intro-practices>span::after{content:'';position:absolute;top:-1px;left:0;width:100%;height:2px;background:var(--accent);transform:scaleX(var(--revealed,0));transform-origin:left}
.intro-practices i{font:400 11px/1 var(--body);color:var(--muted);margin-bottom:var(--space-3)}
.intro-practices b{font-size:var(--text-lg);font-weight:500}
.intro-enter{display:inline-flex;min-width:240px;justify-content:space-between}
.intro-character{position:relative;align-self:end;width:112%;margin-left:-8%;z-index:1}
.intro-character svg{width:100%;height:min(66svh,650px);display:block;overflow:visible}
.intro-character figcaption{display:flex;align-items:center;gap:var(--space-3);font-size:10px;letter-spacing:.07em;justify-content:center;margin-top:var(--space-3);color:var(--muted)}
.intro-character figcaption>span:nth-child(2){color:var(--text);white-space:nowrap}
.intro-character-rule{width:var(--space-7);height:1px;background:var(--line)}
.intro-slug{position:absolute;top:var(--space-9);right:var(--gutter);font-size:10px;letter-spacing:.18em;color:var(--muted)}
.intro-footer{min-height:var(--intro-footer);border-top:1px solid var(--line)}
.intro-playback{display:flex;align-items:center;gap:var(--space-4);white-space:nowrap}
.intro-playback button{min-height:44px;padding:var(--space-2) var(--space-3);font-size:var(--text-xs);border:1px solid var(--line);border-radius:var(--radius)}
.intro-playback button:hover:not(:disabled){background:var(--paper);color:var(--ink)}
.intro-playback button:disabled{cursor:default}
.intro-time{font-size:var(--text-xs);font-variant-numeric:tabular-nums;color:var(--muted)}
.intro-timeline{height:2px;background:var(--line);flex:1;max-width:340px}
.intro-timeline span{display:block;height:100%;background:var(--accent);transform:scaleX(var(--progress,0));transform-origin:left}
.intro-footer-note{font-size:9px;letter-spacing:.1em;color:var(--muted)}
@media(min-width:1100px) and (min-height:850px){.intro-stage{min-height:720px}.intro-character{max-width:740px;justify-self:end}}
@media(max-width:1000px){.intro-page{--intro-title:64px;--intro-body:15px}.intro-stage{min-height:660px;grid-template-columns:1.05fr 1fr}.intro-practices{gap:var(--space-4)}.intro-character{width:115%;margin-left:-12%;align-self:center}.intro-footer-note{display:none}.intro-character figcaption{font-size:9px}.intro-character figcaption>span:last-child{display:none}}
@media(max-width:600px){
  .intro-page{--intro-header:76px;--intro-footer:100px;--intro-title:clamp(48px,13vw,62px);--intro-body:14px}
  .intro-header{gap:var(--space-2);padding-inline:var(--space-5)}.intro-header .wordmark{font-size:28px}.intro-header-actions{gap:var(--space-3)}.intro-header-actions .text-link{font-size:10px}.intro-header .language-switch button{min-width:44px;padding:var(--space-2)}
  .intro-stage{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:var(--space-7) var(--space-5) var(--space-6)}
  .intro-grid{inset:var(--space-2)}.intro-copy{padding:0}.intro-copy .eyebrow{font-size:9px;margin-bottom:var(--space-4)}
  .intro-story{min-height:76px;margin-top:var(--space-4);max-width:35ch;font-size:var(--intro-body)}
  .intro-practices{margin:var(--space-3) 0 var(--space-5);gap:var(--space-4)}.intro-practices>span{width:100%}.intro-practices b{font-size:var(--text-sm)}.intro-practices i{font-size:9px;margin-bottom:var(--space-2)}
  .intro-character{width:90%;max-width:390px;margin:-6px -6px 0 0;align-self:flex-end}
  .intro-character svg{height:auto}
  .intro-character figcaption{margin-top:var(--space-2)}.intro-enter{min-height:44px;min-width:210px;font-size:var(--text-xs)}.intro-enter>span:last-child{width:44px}
  .intro-slug{display:none}.intro-footer{flex-wrap:wrap;padding:var(--space-4) var(--space-5);gap:var(--space-4)}.intro-playback{width:100%;justify-content:space-between;gap:var(--space-2)}.intro-timeline{flex-basis:100%;max-width:none}.intro-time{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.intro-page *{animation:none;transition:none}}