/* Motion uses the original composition as one plane; hotspots travel with its artwork. */
.reference-plane{position:absolute;inset:0;transform:translate3d(var(--art-x,0px),var(--art-y,0px),0);will-change:transform}
.reference-stage{perspective:1200px}
.header nav a{position:relative}
.header nav a::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.header nav a:hover::after,.header nav a:focus-visible::after{transform:scaleX(1)}
.art-link{transition:background .3s,box-shadow .3s;box-shadow:none}
.art-link:hover,.art-link:focus-visible{background:#85d7dc12;box-shadow:inset 0 -2px var(--orange)}
.art-link::after{content:'↗';position:absolute;right:8px;bottom:8px;color:var(--orange);font:24px var(--mono);opacity:0;transform:translate(-8px,8px);transition:opacity .25s,transform .35s}
.art-link:hover::after,.art-link:focus-visible::after{opacity:1;transform:none}
.open-archive::after{display:none}
.index-row{position:relative;transition:background .35s,opacity .75s,transform .75s}
.index-row::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.index-row:hover,.index-row:focus-visible{background:#85d7dc09}
.index-row:hover::after,.index-row:focus-visible::after{transform:scaleX(1)}
.index-row h3,.index-row .tag{transition:transform .35s,color .35s}
.index-row:hover h3,.index-row:focus-visible h3{transform:translateX(6px);color:var(--orange)}
a.index-row:hover .tag{transform:translate(3px,-3px)}
.js-reveal{transition:opacity .85s ease,transform .85s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0ms)}
.js-reveal:not(.visible){transform:translateY(38px)}
body{animation:arrival .7s ease both}
body.leaving{opacity:0;transform:translateY(-12px);transition:opacity .24s,transform .24s}
@keyframes arrival{from{opacity:0}to{opacity:1}}
.reading-progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--cyan);transform:scaleX(var(--read-progress,0));transform-origin:left;z-index:20;pointer-events:none}
html[data-reduced=true] .reference-plane{transform:none!important}
html[data-reduced=true] .js-reveal{opacity:1;transform:none}
html[data-reduced=true] body.leaving{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reference-plane{transform:none!important}.js-reveal:not(.visible){opacity:1;transform:none}}
@media(hover:none){.art-link::after{display:none}}
/* Independent, stationary-at-rest artwork slices. */
.independent-art{position:absolute;left:0;top:-5.675914cqw;width:100%;height:auto;overflow:visible;pointer-events:none}
.reference-stage:has(.independent-art)>.reference-art{visibility:hidden}
.independent-art g{transition:transform .3s cubic-bezier(.2,.8,.2,1);transform-box:view-box}
.art-link:hover{background:transparent;box-shadow:none}
html[data-reduced=true] .independent-art g{transform:none!important}
.case-art>img{transform:none!important}
@media(max-width:760px){.independent-art{display:none}.reference-stage:has(.independent-art)>.reference-art{visibility:visible}}
@media(prefers-reduced-motion:reduce){.independent-art g{transform:none!important}}
.disc-control{position:absolute;left:61.5%;top:42%;width:10%;height:15%;z-index:3;border:0;border-radius:50%;background:transparent;cursor:pointer}
.disc-control:focus-visible{outline:2px dashed var(--cyan)}
.vinyl-spin{transform-origin:1095px 590px;animation:vinyl-turn 4s linear infinite;animation-play-state:paused}
.vinyl-hover .vinyl-spin{animation-play-state:running}
@keyframes vinyl-turn{to{transform:rotate(360deg)}}
.music-panel{position:fixed;right:24px;bottom:24px;width:min(400px,calc(100vw - 32px));z-index:30;padding:16px;background:var(--paper);color:#1b1712;box-shadow:0 12px 45px #0009;border-top:3px solid var(--orange)}
.music-panel[hidden]{display:none}
.music-heading{display:flex;align-items:center;justify-content:space-between;font:12px var(--mono);margin-bottom:12px}
.music-heading button{border:0;background:transparent;font-size:26px;cursor:pointer}
.music-panel iframe{width:100%;height:300px;border:0;display:block}
.music-panel>a{display:block;font:11px var(--mono);margin-top:12px;text-decoration:underline}
@media(max-width:760px){.disc-control{left:auto;right:4%;top:auto;bottom:2%;width:auto;height:auto;border-radius:0;padding:7px;color:var(--cyan);font:12px var(--mono)}.disc-control::after{content:'MÚSICA ♫'}}
.image-viewer{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:56px 24px 24px;border:0;background:#070a09f5;color:var(--paper);overflow:hidden}
.image-viewer::backdrop{background:#070a09}
.image-viewer img{display:block;width:100%;height:100%;object-fit:contain}
.image-viewer button{position:absolute;right:20px;top:12px;background:var(--paper);color:#1b1712;border:0;padding:8px 16px;cursor:pointer;font:14px var(--mono)}
img[data-enlarge]{cursor:zoom-in}
html:has(.image-viewer[open]){overflow:hidden}
.archive-entering [data-piece="file-cockpit"]{animation:folder-arrive .6s cubic-bezier(.16,1,.3,1) both}
.archive-entering [data-piece="file-breach"]{animation:folder-arrive .6s .1s cubic-bezier(.16,1,.3,1) both}
.archive-entering [data-piece="file-areal"]{animation:folder-arrive .6s .2s cubic-bezier(.16,1,.3,1) both}
@keyframes folder-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.intro-rule{position:absolute;left:5.5%;right:3.8%;top:79.5%;height:1px;background:var(--cyan);transform-origin:left;animation:archive-rule .6s .35s both;pointer-events:none}
@keyframes archive-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:760px){.intro-rule{display:none}}
.intro-replay{font:11px var(--mono);background:transparent;color:var(--cyan);border:1px solid var(--line);padding:7px 10px;cursor:pointer;white-space:nowrap}
.archive-entering [data-piece="file-cockpit"]{animation-duration:1s}
.archive-entering [data-piece="file-breach"]{animation-duration:1s;animation-delay:.15s}
.archive-entering [data-piece="file-areal"]{animation-duration:1s;animation-delay:.3s}
@keyframes folder-arrive{from{opacity:.25;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.intro-replay{font-size:10px}}