/* Artwork remains the visual system; controls live outside the fitted page. */
#portal-directory{background:#dfdcfb}
#portal-directory .directory-scene{visibility:visible;overflow:visible;display:grid;place-items:center}
#portal-directory .index-artboard{position:relative;width:min(100vw,calc(100dvh * 2752 / 1536));aspect-ratio:2752/1536;max-height:100dvh}
#portal-directory .index-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#portal-directory .index-link{position:absolute;border:0;background:transparent;transition:background .2s,box-shadow .2s;pointer-events:auto;border-radius:18px;touch-action:manipulation}
.index-about{left:30%;top:39%;width:14%;height:24%;transform:rotate(-41deg)}
.index-work{left:46%;top:27%;width:29%;height:21%;transform:rotate(-7deg)}
.index-contact{left:65%;top:39%;width:28%;height:25%;transform:rotate(28deg)}
#portal-directory .index-link:hover,#portal-directory .index-link:focus-visible{background:#ffffff18;box-shadow:0 0 0 2px #ffffff95,0 8px 28px #4d40bf30;outline:0}
.index-link span{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);white-space:nowrap;border-radius:5px;background:#211866e8;color:white;padding:7px 12px;font-size:13px;opacity:0;transition:opacity .2s}
.index-link:hover span,.index-link:focus-visible span{opacity:1}
.index-mobile{display:none}
#reader[hidden]{display:none!important}
#reader{position:fixed;inset:0;z-index:80;background:#eae6fe;display:grid;place-items:center;overflow:hidden;color:#161167;touch-action:pan-y}
#reader-sheet{position:relative;width:100%;height:100%;transform-origin:center;will-change:transform,opacity}
#reader-image{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
#art-actions{position:absolute;pointer-events:none}
#art-actions button,#art-actions a{position:absolute;pointer-events:auto;display:block;border:0;background:transparent;color:transparent;border-radius:8px;cursor:pointer}
#art-actions button:hover,#art-actions a:hover,#art-actions :focus-visible{background:#514bff16;box-shadow:0 0 0 2px #7169f7;outline:0}
#reader-tools{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;white-space:nowrap;padding:6px;border:1px solid #b6aee4;background:#f6f4fff2;box-shadow:0 6px 24px #28206724;border-radius:12px;z-index:3}
#reader-tools button{min-height:36px;min-width:38px;padding:7px 13px;background:transparent;color:#211377;border:1px solid transparent;border-radius:7px;font-size:13px}
#reader-tools button:hover{background:#ddd8ff}#reader-tools button:disabled{opacity:.3;cursor:default}
#reader-count{font:12px Consolas,monospace;min-width:65px;text-align:center;color:#342887}
#reader-message{position:absolute;top:12px;left:50%;transform:translateX(-50%);color:#211377;background:#fff9;border-radius:6px;padding:6px 12px}#reader-message:empty{display:none}
body[data-reader="open"]{overscroll-behavior:none}
@media(max-width:700px){#reader-tools{gap:2px;max-width:98vw}#reader-tools button{padding:7px 9px;font-size:12px}#reader-count{min-width:55px}.index-link span{display:none}.index-mobile{display:flex;position:absolute;bottom:85px;gap:8px}.index-mobile button{background:#ece8ff;color:#211377;border-color:#bab1e9}#directory-hint{display:none}}
@media(prefers-reduced-motion:reduce){.index-link,.index-link span{transition:none!important}}
#reader-tools{flex-wrap:nowrap}
#art-actions button:hover,#art-actions a:hover{box-shadow:none;background:#514bff08}
#art-actions :focus-visible{box-shadow:0 0 0 2px #7169f7}

.work-video{position:absolute;left:2.97%;top:14.08%;width:67.45%;height:69.7%;object-fit:contain;background:#000;border-radius:10px;pointer-events:auto}
/* Motion feedback replaces pointer-hover frames and tooltips. */
#portal-directory .index-link,#portal-directory .index-link:hover,#portal-directory .index-link:focus-visible{background:transparent;box-shadow:none;outline:0;border:0;border-radius:0;padding:0}
#portal-directory .index-link span{display:none}
.index-motion{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#portal-directory .index-about{left:27%;top:15%;width:31%;height:57%;transform:none;clip-path:polygon(0% 68%,70% 0%,100% 15%,58% 42%,56% 78%,26% 100%,0% 87%);z-index:2}
#portal-directory .index-work{left:44%;top:22%;width:34%;height:38%;transform:none;clip-path:polygon(7% 20%,95% 0%,100% 35%,75% 38%,52% 100%,8% 100%,0% 46%);z-index:3}
#portal-directory .index-contact{left:60%;top:32%;width:36%;height:45%;transform:none;clip-path:polygon(22% 0%,100% 49%,90% 100%,0% 60%);z-index:4}
#portal-directory .index-toy{position:absolute;background:transparent;border:0;border-radius:50%;padding:0;z-index:5;cursor:pointer;pointer-events:auto;touch-action:manipulation;outline:0}
#portal-directory .index-toy:hover{background:transparent}
.index-smile{left:26%;top:76%;width:11%;height:16%}
.index-key{left:76%;top:79%;width:13%;height:17%}
#portal-directory .index-home{left:42%;top:69%;width:18%;height:24%;border-radius:12%;z-index:6}
#portal-directory .index-link:focus-visible::after,#portal-directory .index-toy:focus-visible::after{content:'';position:absolute;left:35%;right:35%;bottom:28%;height:3px;background:#fff;box-shadow:0 0 9px #5c3fff}

/* The MP4 includes the complete designed artwork, including all three display frames.
   Match its poster rectangle exactly: no stretching, no separate frame calibration. */
#art-actions .page-movie{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent;border:0;border-radius:0;pointer-events:none;opacity:0;transition:opacity .12s linear}
#art-actions .page-movie.frame-ready{opacity:1}
@media(prefers-reduced-motion:reduce){#art-actions .page-movie{transition:none}}