/* Studio Bouza — the shelf on the homepage: one rendered image (2 : 1) */

.shelf-page { background: var(--paper); overflow-x: hidden; }   /* the rendered wall is the page colour */

/* the scene fills the window. The image keeps its proportions, fills the
   window height (on windows wider than 2 : 1, the width) and stays centred;
   when the window is narrower than the part with objects, a scroll bar (a
   finger on phones) shows either side. */
.shelf-scene { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.shelf-scroll {
  position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
}
@media (pointer: coarse) {
  .shelf-scroll { scrollbar-width: none; }
  .shelf-scroll::-webkit-scrollbar { display: none; }
}
.shelf-track { position: relative; height: 100%; width: max(100%, var(--reach)); overflow: hidden; }
.shelf {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  height: max(100%, 100vw / var(--ratio)); aspect-ratio: var(--ratio);
  container-type: inline-size;
  transition: opacity 350ms ease-out;
}
/* film finish over the whole scene (background and clickable objects alike):
   fine grain and a faint vignette */
.shelf-scene::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    radial-gradient(ellipse 75% 70% at 50% 48%, rgba(40, 30, 20, 0) 55%, rgba(40, 30, 20, 0.09) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .27 0 0 0 0 .23 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* the shelf appears once the image has decoded (after 5 s whatever happens) */
.shelf.wait { opacity: 0; animation: shelf-show 0s 5s forwards; }
@keyframes shelf-show { to { opacity: 1; } }
.shelf-bg { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }

/* ---------- clickable objects ---------- */
.spot { position: absolute; display: block; }
.spot:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.lift { position: absolute; inset: 0; transition: transform 260ms cubic-bezier(0.2, 0, 0.2, 1); }
.lift img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
/* hover or keyboard focus: the object lifts a little off the shelf */
.spot:hover .lift, .spot:focus-visible .lift { transform: translateY(-0.22cqw); }
/* text on a brochure cover or the card: a title in spaced capitals, lines as
   written ("Studio\nBouza"), and an optional italic subline */
.spot-label { position: absolute; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.spot-text {
  display: flex; flex-direction: column; align-items: center; transform: rotate(var(--turn, 0deg));
  font-family: var(--serif); font-size: calc(var(--size, 0.62) * 1cqw); line-height: 1.3; color: var(--ink);
}
.spot-title {
  white-space: pre; text-align: center; letter-spacing: 0.16em; text-transform: uppercase;
  padding-left: 0.16em;   /* centred spaced capitals: balance the trailing letter-spacing */
}
.spot-sub { margin-top: 0.5em; font-style: italic; font-size: 0.86em; color: var(--muted); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .shelf { transition: none; }
  .lift { transition: none; }
  .spot:hover .lift, .spot:focus-visible .lift { transform: none; }
}

/* the page footer sits in the shadow of the bottom board (93.5–97.8 % of the
   image height), which runs the full width */
.shelf-page .site-foot { position: fixed; z-index: 5; padding: 0; bottom: calc(4.3svh - 7px); left: var(--margin); right: var(--margin); }