/* The camera room: the iris (iris.js), the loupe (loupe.js), the filmstrip as 35mm film,
   a light leak that follows the hand, tilting prints on the wall, and a gentle develop on the photographs. */

/* a gentle develop: a touch more contrast and colour on screen; the full-photograph viewer keeps the file as it is */
#scene-image,#scene-outgoing,.ix-bg img,.f img{filter:contrast(1.05) saturate(1.12)}
.clean-view #scene-image{filter:none}

/* the iris */
.iris{position:fixed;inset:0;width:100vw;height:100vh;z-index:80;pointer-events:none;visibility:hidden;filter:drop-shadow(0 0 30px #000)}
.iris.on{visibility:visible;pointer-events:auto}

/* the loupe */
.loupe{position:fixed;left:0;top:0;z-index:70;width:240px;height:240px;border-radius:50%;pointer-events:none;opacity:0;scale:.6;transition:opacity .2s,scale .35s var(--ease);
 background-color:var(--shade);background-repeat:no-repeat;box-shadow:0 0 0 1.5px var(--tint),0 0 0 7px #0b0d0ecc,0 0 0 8px #ffffff22,0 24px 60px #000c,inset 0 0 30px #0008}
.loupe.on{opacity:1;scale:1}.loupe.off{opacity:.25}
.loupe i{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px;opacity:.7;background:linear-gradient(var(--tint),var(--tint)) center/1px 100% no-repeat,linear-gradient(var(--tint),var(--tint)) center/100% 1px no-repeat}
.loupe b{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);font:600 10px var(--label);letter-spacing:.14em;color:var(--tint);text-shadow:0 1px 6px #000}
.looking .scene{cursor:none}
@media(pointer:coarse){.loupe{width:200px;height:200px;margin-top:-150px}}

/* 35mm film: the filmstrip slides up as a strip of negatives, sprocket holes and edge codes included */
.chapter-footer{height:138px;align-items:flex-end}
.chapter-rail{position:relative;gap:6px;padding:17px 12px 25px;background:linear-gradient(#17130f,#0b0907 50%,#17130f);box-shadow:0 -2px 0 #ffffff08 inset,0 18px 50px #000b,0 0 0 1px #00000080;transform:translateY(30px) rotate(-.4deg);transition:transform .7s var(--ease)}
.rail-on .chapter-rail{transform:none}
.chapter-rail::before,.chapter-rail::after{content:"";position:absolute;left:0;right:0;height:7px;pointer-events:none;opacity:.55;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='7'%3E%3Crect x='4' width='8' height='7' rx='1.6' fill='%23e9dfc9'/%3E%3C/svg%3E") repeat-x}
.chapter-rail::before{top:5px}.chapter-rail::after{bottom:5px}
.chapter-thumb{box-shadow:0 0 0 2px #050403}
.chapter img{opacity:.6;filter:sepia(.25) saturate(.9);transition:opacity .25s,filter .25s}.chapter:hover img,.chapter[aria-current=true] img{opacity:1;filter:none}
.chapter-meta{margin-top:5px;font:600 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace!important;letter-spacing:.14em!important;color:#e09a3e}
.chapter-meta b,.chapter-meta span{color:#e09a3e!important;font-weight:600}.chapter-meta b::before{content:"▸";margin-right:3px}
.chapter[aria-current=true] .chapter-meta b,.chapter[aria-current=true] .chapter-meta span{color:#ffc56f!important}
.chapter-label{padding-bottom:30px}
@media(max-width:850px){.chapter-footer{height:118px}.chapter-rail{padding:16px 22px 24px;transform:translateY(16px)}}

/* a warm light leak drifts after the pointer while the interface is awake */
.leak{position:absolute;z-index:2;left:50%;top:50%;width:70vmax;height:70vmax;margin:-35vmax;pointer-events:none;mix-blend-mode:screen;opacity:0;
 background:radial-gradient(circle,color-mix(in srgb,var(--tint) 45%,#ffb070) 0,color-mix(in srgb,var(--tint) 30%,transparent) 18%,transparent 52%);
 transform:translate(calc(var(--px,0)*42vw),calc(var(--py,0)*40vh));transition:transform 1.4s var(--ease),opacity 1.2s}
.leak::after{content:"";position:absolute;left:-40%;right:-40%;top:50%;height:2px;margin-top:-1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--tint) 60%,#fff) 50%,transparent);opacity:.5;filter:blur(1px)}
@media(pointer:fine){.awake .leak{opacity:.13}}
.clean-view .leak,.watching .leak,.scene[data-ink=dark] .leak{opacity:0!important}

/* prints on the wall tilt toward the pointer and catch the light */
.tiles{perspective:900px}
.tiles .f:hover,.tiles .f:focus-visible{transform:translateY(-4px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s,box-shadow .4s}
.f::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),#ffffff38,transparent 55%);mix-blend-mode:soft-light}
.f:hover::before{opacity:1}

@media(prefers-reduced-motion:reduce){.leak{display:none}.chapter-rail{transform:none!important}.tiles .f:hover{transform:none}}

/* the others step back less, so the wall stays bright while one print lifts */
.tiles:hover .f img{opacity:.62}