/* =====================================================================
   3D ROOM — the gallery is the front wall, About is the black wall on the right.
   Camera = the .room turning around the viewer: clicking "About" turns it 90° to the right.
   Geometry (W = viewport width, H = viewport height): the viewer stands in the middle of a W×W room,
   perspective = W/2, so a wall that faces the viewer is shown 1:1 (no scaling) — the gallery at rest and About at the end.
   Everything is a flat plane, so the gallery / About code does not know about 3D.
   ===================================================================== */
:root { --cam-t: 1.6s; --floor-tile: 11.1111vw; }   /* floor tile = 1/9 of the room width */

.world { position: fixed; inset: 0; overflow: hidden; overflow: clip; perspective: 50vw; perspective-origin: 50% 50%; background: #000; }
.room { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.world.is-turning .room, .world.is-about .room { transition: transform var(--cam-t) var(--ease); }
.world.is-turning .room { transform: translateZ(50vw) rotateY(0deg) translateZ(-50vw); }
.world.is-about .room, .world.is-about.is-turning .room { transform: translateZ(50vw) rotateY(90deg) translateZ(-50vw); }

.wall { position: absolute; overflow: hidden; }
.wall--front, .wall--about { left: -50vw; top: -50vh; width: 100vw; height: 100vh; }
.wall--front { background: var(--bg); }
.wall--about { transform: translate3d(50vw, 0, 50vw) rotateY(-90deg); background: #181818; }
.wall--floor, .wall--ceil { left: -50vw; top: -50vw; width: 100vw; height: 100vw; }
.wall--floor { transform: translate3d(0, 50vh, 50vw) rotateX(90deg); background: #fff url("img/floor-marble.jpg") 0 0 / calc(var(--floor-tile) * 14) calc(var(--floor-tile) * 8) repeat; }
.wall--floor::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 55%); pointer-events: none; }   /* a little shade towards the far wall */
/* ceiling = a black cellular grid ceiling (open-cell / "грильято"): two sets of vertical blades hanging from the ceiling plane.
   All numbers come from the tuner (Room → Ceiling): --c-n cells, --c-depth, --c-rise (vw), colours. The plane is lifted by --c-rise so the blades end at the top edge of the screen. */
:root { --c-n: 22; --c-depth: 1.58; --c-rise: 7.2; --c-edge-w: .16vw; --c-back: #070707; --c-bx: #2a2a2a; --c-by: #202020; --c-edge: #6d6b68; --c-shade: .35; }
.wall--ceil { --pitch: calc(100vw / var(--c-n)); --bh: calc(var(--pitch) * var(--c-depth));
  transform: translate3d(0, calc(-50vh - var(--c-rise) * 1vw), 50vw) rotateX(-90deg); transform-style: preserve-3d; overflow: visible; background: var(--c-back); }
.wall--ceil .bl { position: absolute; backface-visibility: visible; }
.wall--ceil .bl--x { left: 0; width: 100vw; height: var(--bh); transform-origin: 50% 0; transform: rotateX(90deg);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c-bx) 55%, #000), var(--c-bx)); box-shadow: inset 0 calc(-1 * var(--c-edge-w)) 0 var(--c-edge); }
.wall--ceil .bl--y { top: 0; height: 100vw; width: var(--bh); transform-origin: 0 50%; transform: rotateY(-90deg);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c-by) 55%, #000), var(--c-by)); box-shadow: inset calc(-1 * var(--c-edge-w)) 0 0 color-mix(in srgb, var(--c-edge) 85%, #000); }
.wall--ceil::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,var(--c-shade)) 100%); pointer-events: none; transform: translateZ(calc(var(--bh) + .05vw)); }
/* the side walls reach up to the lifted ceiling (a band above the screen edge in the wall colour) */
.wall--front, .wall--about { overflow: visible; clip-path: inset(calc(var(--c-rise) * -1vw) 0 0 0); }
.wall--front { box-shadow: 0 calc(var(--c-rise) * -1vw) 0 0 var(--bg); }
.wall--about { box-shadow: 0 calc(var(--c-rise) * -1vw) 0 0 #181818; }

/* the pieces that were fixed to the screen live on their wall now */
.wall .top, .wall .stage, .wall .counter, .wall .listbtn, .wall .list, .wall .about { position: absolute; }

/* settled on About: drop the 3D (the picture is identical) so the wall is hit-testable and crisp */
.world.is-about:not(.is-turning) .room { transform: none; transition: none; }
.world.is-about:not(.is-turning) .wall--about { transform: none; }
.world.no-anim .room { transition: none !important; }

/* at rest only the wall that faces the viewer is drawn */
.world:not(.is-turning):not(.is-about) :is(.wall--about, .wall--floor, .wall--ceil) { visibility: hidden; }
.world.is-about:not(.is-turning) :is(.wall--front, .wall--floor, .wall--ceil) { visibility: hidden; }

/* small screens: no room, About is a plain page over the gallery */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .world { perspective: none; }
  .room { position: static; transform: none !important; transition: none !important; transform-style: flat; }   /* preserve-3d would make .room the containing block of the fixed walls (0×0) */
  .wall--front { position: fixed; inset: 0; width: auto; height: auto; left: 0; top: 0; }
  .wall--about { position: fixed; left: 0; top: 0; width: 100%; height: 100%; transform: none; overflow-x: hidden; overflow-y: auto; z-index: 5; }
  .wall--floor, .wall--ceil { display: none; }
  .world:not(.is-about) .wall--about { visibility: hidden; }
  .world.is-about .wall--front { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .world .room { transition: none !important; } }

/* About: every case except the central one leaves before the camera turns */
.card { transition: opacity .35s ease, translate .75s cubic-bezier(.55, 0, .25, 1), scale .75s cubic-bezier(.55, 0, .25, 1); }
.card.no-tr { transition: none !important; }
body.cards-clear .card:not([data-keep]) { opacity: 0; pointer-events: none; transition: opacity .22s ease .5s, translate .75s cubic-bezier(.55, 0, .25, 1), scale .75s cubic-bezier(.55, 0, .25, 1); }   /* they slide behind the central case and only then fade */

/* the gallery wall: the edges sink into a deeper tone of the current case colour (where the cases blur) for depth; header and counter stay above it */
.wall--front { --vg: color-mix(in srgb, var(--bg) 46%, #000); }
.wall--front::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .42; transition: opacity .35s ease;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--vg) 92%, transparent) 0%, color-mix(in srgb, var(--vg) 74%, transparent) 7%, color-mix(in srgb, var(--vg) 50%, transparent) 14%,
      color-mix(in srgb, var(--vg) 28%, transparent) 22%, color-mix(in srgb, var(--vg) 11%, transparent) 30%, color-mix(in srgb, var(--vg) 0%, transparent) 40%,
      color-mix(in srgb, var(--vg) 0%, transparent) 60%, color-mix(in srgb, var(--vg) 11%, transparent) 70%, color-mix(in srgb, var(--vg) 28%, transparent) 78%,
      color-mix(in srgb, var(--vg) 50%, transparent) 86%, color-mix(in srgb, var(--vg) 74%, transparent) 93%, color-mix(in srgb, var(--vg) 92%, transparent) 100%),
    radial-gradient(ellipse 85% 75% at 50% 50%, transparent 55%, color-mix(in srgb, var(--vg) 38%, transparent) 100%); }
body.list-open .wall--front::after { opacity: 0; }

/* while the room turns, nothing under the (still) cursor may react: the walls sweep past it and hover on/off would make the page flicker (nav blur, card zoom, links) */
.world.is-turning .wall { pointer-events: none; }
.world.is-turning .wall * { pointer-events: none !important; }