/* Opening experience lives in a modal and is removed after entry. */
.portfolio-intro{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;padding:0;margin:0;border:0;overflow:hidden;color:#f4f6ff;background:transparent;--glass-ink:#fff;--glass-fill:#ffffff12;--glass-edge:#ffffff40;--glass-shadow:#0005}
.portfolio-intro::backdrop{background:transparent}.intro-backdrop{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,#192033 0%,#0b0e17 44%,#05070b 100%);transition:opacity .8s ease}
.intro-brand{position:absolute;top:clamp(25px,5vh,55px);left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;letter-spacing:.2em;font-size:24px;font-weight:600}.intro-brand small{display:block;font-size:9px;font-weight:400;letter-spacing:.33em;margin-top:10px;color:#b0b7c8}
.portfolio-intro .intro-enter{position:absolute;inset:100px 0 120px;width:100%;height:auto;border:0!important;border-radius:0!important;padding:0;background:transparent!important;box-shadow:none!important;backdrop-filter:none;-webkit-backdrop-filter:none;translate:none!important;scale:1!important;cursor:pointer;transition:none}
.intro-enter canvas{width:100%;height:100%;display:block;pointer-events:none}
.intro-bottom{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:20px;right:20px;text-align:center}.intro-bottom p{font-size:14px;letter-spacing:.05em;margin:0 0 18px;color:#e1e6f0}.intro-shapes{display:flex;justify-content:center;gap:8px}.portfolio-intro .intro-shapes button{padding:9px 17px;font-size:12px;cursor:pointer}
.portfolio-intro.is-bursting .intro-backdrop{opacity:0}.portfolio-intro.is-bursting :is(.intro-brand,.intro-bottom){opacity:0;transition:opacity .25s;pointer-events:none}.portfolio-intro.is-bursting .intro-enter{inset:0;pointer-events:none}
@media(max-width:600px){.intro-brand{top:65px;font-size:21px}.portfolio-intro .intro-enter{inset:115px 0 130px}.portfolio-intro.is-bursting .intro-enter{inset:0}.intro-bottom p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.portfolio-intro *{transition:none!important}}

/* Seven shapes remain selectable on narrow screens. */
.intro-shapes{flex-wrap:wrap;max-width:680px;margin:0 auto;gap:8px}
.portfolio-intro .intro-shapes button[aria-pressed="true"]{color:#f3ffb0!important;border-color:#d8ed78!important;background:linear-gradient(135deg,#afbd432f,#e6ff7820)!important}
@media(max-width:600px){.intro-bottom{bottom:max(18px,env(safe-area-inset-bottom))}.intro-bottom p{font-size:11px;margin-bottom:12px}.portfolio-intro .intro-shapes button{font-size:11px;padding:8px 13px}.portfolio-intro .intro-enter{inset:108px 0 155px}.portfolio-intro.is-bursting .intro-enter{inset:0}}

/* Fade the blur with the opening layer, never with modal removal. */
.portfolio-intro::backdrop{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.intro-backdrop{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);transition:opacity 1.25s cubic-bezier(.22,.61,.36,1)}

/* The particle canvas has no pointer-hover frame. */
.portfolio-intro .intro-enter,.portfolio-intro .intro-enter:hover,.portfolio-intro .intro-enter:active,.portfolio-intro .intro-enter:focus{outline:none!important;border:0!important;box-shadow:none!important}
.portfolio-intro:has(.intro-enter:focus-visible) .intro-bottom p{text-decoration:underline;text-underline-offset:6px}