/* The three new chapter pages reuse the approved folder-to-page transition. */
.portfolio-page-stage{position:fixed;inset:0;z-index:45;display:none;overflow:hidden;isolation:isolate;background:transparent;pointer-events:none}
.portfolio-page-stage[data-open="true"]{pointer-events:auto}
.portfolio-page-image{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#e7e4f4;opacity:0;transform-origin:0 0;will-change:transform,opacity;user-select:none;border-radius:12px}
.portfolio-folder-flight{position:fixed;left:0;top:0;z-index:3;width:1px;height:1px;visibility:hidden;transform-origin:50% 90%;backface-visibility:hidden;pointer-events:none;will-change:transform,opacity}
.portfolio-folder-flight>img{display:block;width:100%;height:100%;clip-path:url(#folder-front-cut);user-select:none}
.portfolio-flight-label{position:absolute;left:15%;right:10%;top:15%;display:flex;align-items:center;gap:3%;color:#251078;font-family:'Segoe UI','Microsoft YaHei',sans-serif;white-space:nowrap}
.portfolio-flight-label>span{font:clamp(28px,min(3.5vw,6vh),64px)/1 Arial,sans-serif;letter-spacing:-.04em}
.portfolio-flight-label strong{font-size:clamp(18px,min(1.85vw,3.3vh),36px);font-weight:650;letter-spacing:.04em}
.portfolio-flight-label small{position:absolute;left:12%;top:110%;font:clamp(12px,min(1.2vw,2.2vh),24px)/1.1 Consolas,monospace}
#motion-folder-flight .portfolio-flight-label{color:#fff8ff}
.portfolio-page-tools{position:absolute;left:50%;bottom:23px;z-index:5;display:flex;gap:9px;align-items:center;translate:-50% 0;color:#29205b;font:12px/1 'Segoe UI','Microsoft YaHei',sans-serif;white-space:nowrap;opacity:0;pointer-events:none}
.portfolio-page-tools button{position:relative;min-height:38px;padding:0 17px 0 35px;border:1px solid #d7d0ffca;border-radius:999px;background:linear-gradient(135deg,#4a338e,#26215f);box-shadow:0 6px 16px #2b165b42,0 1px 0 #ffffff54 inset;color:#fff;font:600 13px/1 'Segoe UI','Microsoft YaHei',sans-serif;letter-spacing:.04em;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.portfolio-page-tools button::before{content:'←';position:absolute;left:15px;top:50%;translate:0 -51%;font:700 17px/1 Arial,sans-serif;color:#e5dfff}
.portfolio-page-tools button:hover{transform:translateY(-2px);filter:brightness(1.12);box-shadow:0 9px 20px #2b165b50,0 1px 0 #ffffff70 inset}
.portfolio-page-tools button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.portfolio-page-tools>span{display:grid;place-items:center;min-width:29px;min-height:22px;padding:0 6px;border:1px solid #45327a50;border-radius:5px;background:#f5f1ffab;box-shadow:0 1px 0 #fff inset;color:#35246a;font:600 10px/1 Consolas,monospace}
.portfolio-page-stage[data-open="true"] .portfolio-page-tools{pointer-events:auto}
html:has(.portfolio-page-stage[data-open="true"],#about-stage[data-open="true"],#contact-stage[data-open="true"]){scrollbar-width:none}
html:has(.portfolio-page-stage[data-open="true"],#about-stage[data-open="true"],#contact-stage[data-open="true"])::-webkit-scrollbar{display:none}
@media(max-width:700px){
 .portfolio-page-image{object-fit:contain;background:#e7e4f4}
 .portfolio-page-tools{bottom:17px;gap:6px;max-width:94vw}
 .portfolio-page-tools button{min-height:35px;padding-right:14px;padding-left:31px;font-size:12px}
 .portfolio-page-tools button::before{left:13px;font-size:16px}
}
@media(prefers-reduced-motion:reduce){.portfolio-page-tools button{transition:none}}