:root { --ease-in-out: cubic-bezier(.77,0,.175,1); }
#portfolio-intro { display: none; }
html[data-intro] #portfolio-intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; background: #fff; }
html[data-intro] :is(.sidebar, .content-pane, .portfolio-bottom-blur, .skip-link) { opacity: 0; pointer-events: none; }
html[data-intro="revealing"] :is(.sidebar, .content-pane, .portfolio-bottom-blur, .skip-link) { opacity: 1; pointer-events: auto; }
html[data-intro="revealing"] #portfolio-intro { pointer-events: none; }
html[data-intro="revealing"] .bio .signature img { visibility: hidden; }
.intro-signature { display: block; width: clamp(240px,40vw,480px); height: auto; overflow: visible; transform-origin: 0 0; }
/* The ink is revealed by a threshold over the progress map. intro.js moves the
   threshold each frame so the whole signature follows one eased pen timeline. */
.intro-ink { display: block; width: 100%; height: auto; overflow: visible; transform-origin: center; opacity: 1; }
@media (max-width:760px) { .intro-signature { width: min(75vw,360px); } }