/* =====================================================================
   depth.css: the den as a physical space (js/depth.js draws the geometry).
   Recess walls inside the cubbies and bookcase cells, top/side faces on the TV and the VCR, the top of every
   standing box, contact shadows. Every face is decor: pointer-events none, clip-path only, never layout.
   ===================================================================== */
.dp-recess, .dp-box { position: absolute; pointer-events: none; display: block; }
.dp-recess { inset: 0; overflow: hidden; border-radius: inherit; }
.dp-box { inset: 0; z-index: -1; }
.dp-cv { position: absolute; display: block; pointer-events: none; }
.dp-recess > .dp-cv { inset: 0; width: 100%; height: 100%; }
/* the back corners read as a crease, not a seam: a soft occlusion ring around the opening */
.dp-recess::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.45), inset 0 14px 22px -8px rgba(0,0,0,.7); }
/* bookcase cells already paint their own top shadow and side vignettes: let the walls carry it instead */
.shelf-cell { box-shadow: inset 6px 0 8px -6px rgba(0,0,0,.7), inset -6px 0 8px -6px rgba(0,0,0,.7); }
.shelf-cell > .dp-recess::after { box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset 0 10px 16px -8px rgba(0,0,0,.65); }

/* ---------- boxes: the Solara's cabinet, the deck's lid (faces outside the front, under it) */
.tv { isolation: isolate; }
.vcr { isolation: isolate; }
/* contact shadow where the box meets the shelf */
.dp-box .dp-cs { position: absolute; display: block; left: calc(var(--dp-ox, 0px) - var(--dp-w, 0px) * .02); top: calc(var(--dp-oy, 0px) + var(--dp-h, 0px) - 9px);
  width: calc(var(--dp-w, 0px) * 1.04); height: 20px;
  background: radial-gradient(50% 50% at 50% 45%, rgba(0,0,0,.75), rgba(0,0,0,.35) 55%, transparent); }
.tv > .dp-box .dp-cs { top: calc(var(--dp-oy, 0px) + var(--dp-h, 0px) - 12px); height: 26px; }

/* ---------- the top of each standing box (the shelves are below eye level) */
.collection .spine:not(.flat) { overflow: visible; clip-path: inset(calc(-1 * var(--sw) - 20px) -26px -16px -26px); }
.collection .spine:not(.flat)::before {
  content: ''; position: absolute; left: -26px; right: -26px; bottom: 100%; height: var(--dp-th, 0px); pointer-events: none;
  clip-path: polygon(26px 100%, calc(100% - 26px) 100%, calc(100% - 26px + var(--dp-dx, 0px)) 0, calc(26px + var(--dp-dx, 0px)) 0);
  background:
    linear-gradient(0deg, rgba(255,232,200,.2) 0 1px, rgba(0,0,0,.25) 1px 2px, transparent 2px),
    linear-gradient(0deg, transparent 30%, rgba(0,0,0,.42)),
    linear-gradient(90deg, rgba(0,0,0,.25), transparent 30%, transparent 70%, rgba(0,0,0,.3)),
    color-mix(in srgb, var(--sp, #222) 42%, #0b0806);
}
.collection .spine.clam.shell-black::before { background:
    linear-gradient(0deg, rgba(255,255,255,.22) 0 1px, transparent 1px),
    linear-gradient(90deg, transparent 20%, rgba(255,255,255,.08) 45%, transparent 60%),
    linear-gradient(0deg, transparent 30%, rgba(0,0,0,.4)), #141414; }
.collection .spine.clam.shell-white::before { background:
    linear-gradient(0deg, rgba(255,255,255,.6) 0 1px, transparent 1px),
    linear-gradient(0deg, transparent 20%, rgba(0,0,0,.3)), #8f8b84; }
html.dp-touch .collection .spine:not(.flat)::before { transition: height .3s cubic-bezier(.2,.8,.3,1), clip-path .3s cubic-bezier(.2,.8,.3,1); }
/* a box sitting a touch forward or back of its neighbours: the shelf isn't a ruler */
.collection .spine:nth-child(5n+2):not(.flat, .empty, :hover) { filter: brightness(.94); }
.collection .spine:nth-child(7n+4):not(.flat, .empty, :hover) { filter: brightness(.9); }

/* ---------- the tube: convex glass whose reflections slide against the eye (js/depth.js writes --dp-gx/--dp-gy) */
.screen { --dp-gx: 0; --dp-gy: 0; }
.offglass {
  background:
    radial-gradient(ellipse 34% 22% at calc(30% - var(--dp-gx) * 40%) calc(20% - var(--dp-gy) * 18%), rgba(255,255,255,.13), transparent 70%),
    linear-gradient(172deg, transparent calc(14% - var(--dp-gx) * 10%), rgba(255,255,255,.035) calc(15% - var(--dp-gx) * 10%) calc(19% - var(--dp-gx) * 10%), transparent calc(20% - var(--dp-gx) * 10%)),
    radial-gradient(circle 1.5cqw at calc(8% - var(--dp-gx) * 12%) 28%, color-mix(in srgb, var(--bulb-red) 70%, transparent), transparent),
    radial-gradient(circle 1.2cqw at calc(13% - var(--dp-gx) * 12%) 41%, color-mix(in srgb, var(--bulb-green) 65%, transparent), transparent),
    radial-gradient(circle 1.4cqw at calc(6% - var(--dp-gx) * 12%) 53%, color-mix(in srgb, var(--bulb-amber) 70%, transparent), transparent),
    radial-gradient(circle 1.2cqw at calc(15% - var(--dp-gx) * 12%) 59%, color-mix(in srgb, var(--bulb-blue) 70%, transparent), transparent),
    radial-gradient(circle 1.3cqw at calc(9% - var(--dp-gx) * 12%) 72%, color-mix(in srgb, var(--bulb-orange) 70%, transparent), transparent),
    radial-gradient(circle 1cqw at calc(17% - var(--dp-gx) * 12%) 80%, color-mix(in srgb, var(--bulb-red) 60%, transparent), transparent),
    radial-gradient(circle 4cqw at calc(12% - var(--dp-gx) * 12%) 50%, color-mix(in srgb, var(--tree-light) 22%, transparent), transparent),
    radial-gradient(ellipse 7% 20% at calc(87% - var(--dp-gx) * 24%) calc(22% - var(--dp-gy) * 10%), rgba(140,170,230,.11), rgba(140,170,230,.04) 55%, transparent 100%),
    radial-gradient(ellipse 30% 20% at calc(80% - var(--dp-gx) * 28%) calc(6% - var(--dp-gy) * 8%), color-mix(in srgb, var(--lamp-light) 18%, transparent), transparent),
    /* the rim of the tube, where the glass curves away: a thin bright edge on the lit side */
    radial-gradient(ellipse 104% 104% at calc(50% + var(--dp-gx) * 6%) calc(50% + var(--dp-gy) * 6%), transparent 88%, rgba(255,240,220,.05) 94%, transparent 99%),
    radial-gradient(ellipse 120% 100% at 50% 45%, #27312c, #131816 70%, #0a0d0c);
}
.screen:has(> .scr-gl) > .crt {
  background:
    radial-gradient(ellipse 58% 36% at calc(27% - var(--dp-gx) * 36%) calc(13% - var(--dp-gy) * 16%), rgba(255,255,255,.11), rgba(255,255,255,.03) 45%, transparent 62%),
    linear-gradient(163deg, transparent calc(8% - var(--dp-gx) * 9%), rgba(255,255,255,.045) calc(9% - var(--dp-gx) * 9%) calc(12.5% - var(--dp-gx) * 9%), transparent calc(13.5% - var(--dp-gx) * 9%) calc(15% - var(--dp-gx) * 9%), rgba(255,255,255,.025) calc(15.5% - var(--dp-gx) * 9%) calc(17% - var(--dp-gx) * 9%), transparent calc(18% - var(--dp-gx) * 9%)),
    radial-gradient(ellipse 110% 100% at 50% 50%, transparent 70%, rgba(0,0,0,.35) 100%);
}

/* a phone with the tray up: the shelf under it is out of focus, so no box tops peeking over the tray's edge */
@media (max-width: 820px) { body.bench-open .collection .spine:not(.flat)::before { height: 0; } }

/* ---------- light with a source: the lamp and the fire brighten what's near them in proportion (overlay keeps the
   blacks black; the old soft-light washes lifted every dark into an orange haze), falling off fast with distance */
.room-light .wash-fire { right: -14vw; bottom: -22dvh; width: 52vw; height: 78dvh; mix-blend-mode: overlay;
  background: radial-gradient(closest-side, var(--fire-light), color-mix(in srgb, var(--fire-light) 45%, transparent) 30%, color-mix(in srgb, var(--fire-light) 12%, transparent) 62%, transparent); }
.room-light .wash-lamp { right: 8vw; top: -18dvh; width: 40vw; height: 58dvh; mix-blend-mode: overlay;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--lamp-light) 70%, transparent), color-mix(in srgb, var(--lamp-light) 26%, transparent) 38%, transparent); }
.room-light .wash-tree { mix-blend-mode: overlay; opacity: .7; }
/* away from all three lights the room goes properly dark: a soft falloff in the middle and low of the cabinet */
.room-light .vignette { background:
  radial-gradient(ellipse 75% 70% at 46% 46%, transparent 55%, rgba(4,2,1,.6) 100%),
  radial-gradient(ellipse 30% 26% at 58% 82%, rgba(6,3,1,.22), transparent 70%); }
@media (min-width: 821px) and (min-height: 501px) {
  /* the cabinet's side nearest the fire picks up its glow: a warm rim down the right edge */
  .unit::before { content: ''; position: absolute; top: 0; bottom: 0; right: -2px; width: 22px; pointer-events: none; z-index: 1; border-radius: 0 4px 0 0;
    background: linear-gradient(270deg, color-mix(in srgb, var(--fire-light, #ff8a3a) 55%, transparent), transparent);
    mix-blend-mode: screen; opacity: .55; }
  html.cin-movie .unit::before { opacity: .3; }
}

/* ---------- the theater stays a warm room: the tube's light on the set and the wall is the picture's colour pulled
   30% toward the lamp (a sampled palette alone turned the whole den a cold blue-grey) */
:is(html.cin-movie body[data-cam="theater"], html.cin-fromtheater body) .cam-spill { --dp-tvw: color-mix(in srgb, rgb(var(--tv-light, 0 0 0)) 70%, var(--lamp-light, #ffb46b)); }
:is(html.cin-movie body[data-cam="theater"], html.cin-fromtheater body) .cam-spill:not(.cam-wash)::before { background:
    radial-gradient(ellipse 12.5% 13.5% at 50% 50%, color-mix(in srgb, var(--dp-tvw) 50%, transparent) 68%, color-mix(in srgb, var(--dp-tvw) 20%, transparent) 82%, transparent 100%),
    radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in srgb, var(--dp-tvw) 34%, transparent) 0%, color-mix(in srgb, var(--dp-tvw) 24%, transparent) 22%, color-mix(in srgb, var(--dp-tvw) 12%, transparent) 42%, color-mix(in srgb, var(--dp-tvw) 4%, transparent) 70%, transparent 100%),
    radial-gradient(ellipse 34% 10% at 50% 66%, color-mix(in srgb, var(--dp-tvw) 18%, transparent), transparent); }
:is(html.cin-movie body[data-cam="theater"], html.cin-fromtheater body) .cam-spill.cam-wash::before { background: radial-gradient(ellipse 50% 46% at 50% 40.4%, color-mix(in srgb, var(--dp-tvw) 60%, transparent) 0%, color-mix(in srgb, var(--dp-tvw) 42%, transparent) 30%, color-mix(in srgb, var(--dp-tvw) 16%, transparent) 62%, transparent 100%); }

/* ---------- the bookcase's dim states all share one filter list (blur, brightness, saturate): a filter only
   animates between lists of the same functions, so movie-dim -> holding-blur used to jump in a single frame when an
   ejected tape's box came into your hands while the lights were still coming up */
body.holding .shelves { filter: blur(0px) brightness(.82) saturate(1); }
html.cin-movie body[data-cam] .shelves { filter: blur(0px) brightness(.55) saturate(1); }

@media (prefers-reduced-motion: reduce) {
  html.dp-touch .collection .spine:not(.flat)::before { transition: none; }
}