/* A visible, browser-independent signature transition. Ordinary links remain the fallback. */
@view-transition { navigation: none; }
.route-stroke { display:none; }
.page-curtain {
  position:fixed; inset:0; z-index:1000; overflow:hidden;
  background:#222820; color:#f5f4ef; pointer-events:none; visibility:hidden;
  transform:translateY(101%); contain:layout paint;
}
.motion-incoming .page-curtain { visibility:visible; transform:translateY(0); }
.curtain-grid { position:absolute; inset:0; opacity:.17; background-image:linear-gradient(#79816d 1px,transparent 1px),linear-gradient(90deg,#79816d 1px,transparent 1px); background-size:80px 80px; }
.curtain-content { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(640px,90%); display:flex; flex-direction:column; align-items:center; text-align:center; }
.curtain-eyebrow,.curtain-index,.curtain-footer { font:400 10px/1.5 'IBM Plex Mono',monospace; letter-spacing:.13em!important; color:#c0c6b4!important; }
.curtain-sculpture { position:relative; width:240px; height:240px; display:grid; place-items:center; margin:20px 0 8px; }
.curtain-symbol { width:100px; height:100px; overflow:visible; color:#d69b74; }
.curtain-symbol path { stroke:currentColor; stroke-width:.8; stroke-linecap:round; stroke-linejoin:round; }
.curtain-orbit { position:absolute; inset:0; width:100%; height:100%; color:#c49070; }
.curtain-orbit ellipse { stroke:currentColor; stroke-width:.7; opacity:.5; }
.curtain-orbit circle { fill:currentColor; }
.curtain-title { display:block; font:400 clamp(48px,7vw,88px)/1.06 'Instrument Serif',Georgia,serif!important; letter-spacing:-.035em!important; color:#f5f4ef!important; max-width:100%; overflow-wrap:break-word; }
.curtain-index { margin-top:24px; font-size:9px; }
.curtain-footer { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:8px; opacity:.7; }
.curtain-corner { position:absolute; font:24px 'IBM Plex Mono',monospace; color:#c49070!important; }
.curtain-corner-a { left:40px; top:35px; }.curtain-corner-b { right:40px; bottom:35px; }
.motion-active .curtain-outline { animation:curtain-draw 740ms cubic-bezier(.22,1,.36,1) both; stroke-dasharray:1; }
.motion-active .curtain-fold { animation:curtain-draw 720ms 100ms cubic-bezier(.22,1,.36,1) both; stroke-dasharray:1; }
.motion-active .curtain-symbol { animation:curtain-assemble 850ms cubic-bezier(.22,1,.36,1) both; }
.motion-active .curtain-orbit { animation:curtain-orbit 1600ms cubic-bezier(.22,1,.36,1) both; }
.motion-active .curtain-title { animation:curtain-title 570ms 110ms cubic-bezier(.22,1,.36,1) both; }
@keyframes curtain-draw { from{stroke-dashoffset:1}to{stroke-dashoffset:0} }
@keyframes curtain-assemble { from{transform:rotate(-22deg) scale(.65)}to{transform:rotate(0) scale(1)} }
@keyframes curtain-orbit { from{transform:rotate(-50deg) scale(.8);opacity:0}to{transform:rotate(30deg) scale(1);opacity:1} }
@keyframes curtain-title { from{transform:translateY(22px);opacity:0}to{transform:translateY(0);opacity:1} }

/* An editorial motion study: signal → layers → connected system. Plays once, can be replayed. */
.connection-study { margin:36px 0 0; max-width:360px; width:100%; }
.connection-caption { display:flex; align-items:center; justify-content:space-between; font:8px/1.5 'IBM Plex Mono',monospace; letter-spacing:.045em; color:#676861; }
.connection-caption>span:last-child { font-size:18px; color:#b94e2b; }
.connection-drawing { display:block; width:100%; height:auto; overflow:visible; }
.connection-drawing text { text-anchor:middle; fill:#676861; font:8px 'IBM Plex Mono',monospace; letter-spacing:.09em; }
.connection-track { stroke:#b5b8aa; stroke-width:1; }
.connection-signal { stroke:#b94e2b; stroke-width:2; stroke-linecap:round; stroke-dasharray:.13 .87; stroke-dashoffset:1; opacity:0; }
.connection-node { stroke:#b94e2b; stroke-width:1.3; }
.connection-ripple { opacity:0; transform-box:fill-box; transform-origin:center; }
.connection-layer { stroke:#b94e2b; stroke-width:1.1; fill:#f5f4ef; }
.layer-back { transform:translateY(35px);opacity:.4; }
.layer-middle { transform:translateY(17px);opacity:.65; }
.layer-front { transform:translateY(0); }
.connection-tick { stroke:#9da191;stroke-width:.7; }
.connection-replay { display:none; align-items:center; justify-content:space-between; width:100%; border:0; border-top:1px solid #dcdcd4; padding:12px 0; color:#676861; background:none; font:10px 'DM Sans',sans-serif; cursor:pointer; }
.connection-replay span { font-size:19px;color:#b94e2b; }.connection-replay:hover{color:#b94e2b}.connection-replay:focus-visible{outline:2px solid #b94e2b;outline-offset:5px}
.motion-enabled .connection-replay { display:flex; }
.connection-playing .connection-signal { animation:signal-travel 3.4s linear both; }
.connection-playing .node-idea .connection-ripple { animation:connection-pulse 1.2s .1s ease-out both; }
.connection-playing .node-system .connection-ripple { animation:connection-pulse 1.2s 2.2s ease-out both; }
.connection-playing .layer-back { animation:stack-back 3.4s cubic-bezier(.22,1,.36,1) both; }
.connection-playing .layer-middle { animation:stack-middle 3.4s cubic-bezier(.22,1,.36,1) both; }
.connection-playing .layer-front { animation:stack-front 3.4s cubic-bezier(.22,1,.36,1) both; }
@keyframes signal-travel { 0%{stroke-dashoffset:1;opacity:0}10%{opacity:1}90%{opacity:1}100%{stroke-dashoffset:-1;opacity:0} }
@keyframes connection-pulse { 0%{transform:scale(.45);opacity:.8}100%{transform:scale(1.8);opacity:0} }
@keyframes stack-back { 0%,100%{transform:translateY(35px)}35%,60%{transform:translateY(47px)} }
@keyframes stack-middle { 0%,100%{transform:translateY(17px)}35%,60%{transform:translateY(13px)} }
@keyframes stack-front { 0%,100%{transform:translateY(0)}35%,60%{transform:translateY(-22px)} }
@media(max-width:760px){.connection-study{margin-top:28px;max-width:360px}.curtain-sculpture{width:200px;height:200px}.curtain-symbol{width:86px;height:86px}.curtain-corner-a{left:22px;top:22px}.curtain-corner-b{right:22px;bottom:22px}.curtain-footer{font-size:6px;bottom:25px}}
@media(prefers-reduced-motion:reduce){.page-curtain{display:none!important}.connection-replay{display:none!important}.connection-study *{animation:none!important}}