/* A fixed wall of shelves; the optical seals and their projections travel. */
body{background:#b9b6b0}
.room{width:min(100vw,150svh);aspect-ratio:3/2;isolation:isolate}
.backdrop{object-fit:cover}
header{top:3%;z-index:2}
header p{background:none;margin-top:10px}
#shelves{position:absolute;inset:0;pointer-events:none}
.wall-shelf{position:absolute;width:20%;height:auto;translate:0 -30%;filter:drop-shadow(0 7px 4px #24211d28)}
.relic{width:22%;height:var(--relic-height);transform-origin:50% 100%;perspective:850px;z-index:1}
.projection-light{position:absolute;inset:0;display:block;perspective:850px;opacity:1;pointer-events:none}
.relic[data-power=off] .projection-light{opacity:0}
.relic[data-power=off] .lantern-base{filter:brightness(.78) drop-shadow(0 2px 1px #201d1940)}
.relic .lantern-base{transition:filter .4s ease}
.relic.in-flight{z-index:3}
.artifact{position:relative;display:block;width:100%;height:100%;padding:0;background:none;border:0;outline:0;border-radius:0;box-shadow:none;transform:none;perspective:850px}
.artifact::after{display:none}
.relic:hover .artifact,.relic:focus-visible .artifact{transform:none;box-shadow:none}
.projection{position:absolute;top:0;left:50%;height:64%;aspect-ratio:1;translate:-50% 0;display:block;transform:rotateY(0deg);transform-style:preserve-3d;background:#f6f7ec52;border:2px solid #fffffff5;outline:1px solid #fff8;outline-offset:4px;box-shadow:inset 0 0 16px #fff9,0 0 7px #fff,0 0 20px #fff9;pointer-events:none;overflow:hidden}
.relic .project-art{display:block;width:100%;height:100%;object-fit:contain;padding:12%;border:0;background:transparent;opacity:.88;filter:grayscale(1) contrast(1.12);mix-blend-mode:multiply;transition:opacity .45s ease,filter .45s ease}
.projection-face::before{content:'';position:absolute;inset:7px;background:linear-gradient(#fff,#fff) left top/9px 1px no-repeat,linear-gradient(#fff,#fff) left top/1px 9px no-repeat,linear-gradient(#fff,#fff) right top/9px 1px no-repeat,linear-gradient(#fff,#fff) right top/1px 9px no-repeat,linear-gradient(#fff,#fff) left bottom/9px 1px no-repeat,linear-gradient(#fff,#fff) left bottom/1px 9px no-repeat,linear-gradient(#fff,#fff) right bottom/9px 1px no-repeat,linear-gradient(#fff,#fff) right bottom/1px 9px no-repeat;z-index:2}
.projection-face::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,#fff0 0 2px,#fff8 2px 3px,#3b393910 3px 4px);box-shadow:inset 0 0 15px #fff7;pointer-events:none;animation:scanline-drift 12s linear infinite;transition:opacity .45s ease}
.projection{animation:lantern-breathe 8s ease-in-out infinite}
.relic:nth-child(2n) .projection{animation-delay:-3s}
.relic:nth-child(3n) .projection{animation-delay:-5s}
.projection.is-clear .projection-face::after{opacity:0}
.projection.is-clear .project-art{opacity:1;filter:none;mix-blend-mode:normal}
.relic .projection.is-spinning{animation:hologram-turn 14s linear infinite;animation-delay:0s}
@keyframes scanline-drift{from{background-position:0 0}to{background-position:0 16px}}
@keyframes lantern-breathe{0%,100%{opacity:.97}23%{opacity:1}43%{opacity:.95}62%{opacity:.99}78%{opacity:.96}}
@keyframes hologram-turn{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
.projection-beam{position:absolute;left:50%;translate:-50% 0;top:64%;width:2px;height:calc(8% + 2px);background:linear-gradient(#fff9,#fff);box-shadow:0 0 4px 1px #fffd,0 0 9px 2px #fff8;opacity:.85;pointer-events:none}
.relic .lantern-base{position:absolute;left:50%;bottom:calc(-2% - 2px);translate:-50% 0;height:30%;width:auto;max-width:75%;object-fit:contain;border:0;background:none;filter:drop-shadow(0 2px 1px #201d1940);pointer-events:none}
.lantern-label{position:absolute;left:50%;translate:-50% 0;top:111%;width:max-content;max-width:110%;padding:3px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#eeece2df;border:1px solid #68625255;pointer-events:none}
.relic strong{font:clamp(13px,1.3vw,22px)/1 Pirata,Georgia,serif;margin:0}
.relic small{font:clamp(7px,.55vw,10px)/1 monospace;letter-spacing:.08em;margin:0;color:#484139}
.relic:hover .projection-beam,.relic:focus-visible .projection-beam{opacity:1}
.relic::before,.relic.in-flight::before{content:none;animation:none}
.relic[hidden]{display:none}
@media(max-width:650px){main{padding-bottom:150px}.room{width:100%;aspect-ratio:auto;min-height:1100px;overflow:hidden}.backdrop{object-fit:cover;object-position:center}.wall-shelf{width:70%}.relic{width:76%;height:auto;aspect-ratio:1}.projection{height:64%}.lantern-label{top:111%;max-width:100%}.relic strong{font-size:21px}.relic small{font-size:10px}header{top:18px}}


.relic .project-art.logo-ink,.projection.is-clear .project-art.logo-ink{filter:brightness(0)}

/* Four larger projections, with room for their bases and labels. */
html:not(.handheld-scene) .relic{width:28%;aspect-ratio:auto}
html:not(.handheld-scene) .wall-shelf{width:26%}
html:not(.handheld-scene) .projection{height:74%}
html:not(.handheld-scene) .projection-beam{top:74%;height:calc(6% + 2px)}
html:not(.handheld-scene) .relic .lantern-base{height:20%}
html:not(.handheld-scene) .lantern-label{top:103%;max-width:100%}
html:not(.handheld-scene) .relic strong{font-size:clamp(15px,1.4vw,22px)}

/* Two printed faces keep the logo legible through a complete rotation. */
.projection{overflow:visible;background:none;border:0;outline:0;box-shadow:none}
.projection-face{position:absolute;inset:0;display:block;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(.1px);background:#f6f7ec52;border:2px solid #fffffff5;outline:1px solid #fff8;outline-offset:4px;box-shadow:inset 0 0 16px #fff9,0 0 7px #fff,0 0 20px #fff9}
.projection-back{transform:rotateY(180deg) translateZ(.1px)}

/* Arrow-selected work shares the illuminated hover treatment. */
.relic.keyboard-selected .projection-beam{opacity:1}

/* The colored, spinning projection is the work selection indicator. */
.relic:focus,.relic:focus-visible{outline:none}

/* A grounded contact shadow and a quiet label while the lamp is airborne. */
.landing-shadow{position:absolute;height:5px;border-radius:50%;background:#181715;opacity:.24;transform:translateX(-50%);filter:blur(1px);pointer-events:none}
.landing-shadow[hidden]{display:none}
.lantern-label{transition:opacity .2s ease}
.relic.in-flight .lantern-label{opacity:0}