/* The studio wall and the dialog that shows one piece large. */

.studio { overflow: clip; padding-bottom: clamp(64px, 8vw, 110px); }
.studio .chapter-head { margin-bottom: 26px; }
.studio-kinds { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-bottom: clamp(40px, 6vw, 72px); }
.studio-kinds p { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; color: var(--mist); }
.studio-kinds svg { width: 20px; height: 20px; color: var(--copper-lite); }
.studio-kinds strong { font-weight: 620; color: var(--frost); }
.wall { --h: 210px; perspective: 1500px; perspective-origin: 50% 0%; }
.wall-inner {
  display: grid; gap: 14px; transform-origin: 50% 0%; will-change: transform;
  transform: rotateX(calc(var(--tilt, 0) * 1deg)) scale(calc(1 - var(--tilt, 0) * 0.005));
}
.wall-row {
  overflow: hidden; padding-block: 2px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.wall-track { display: flex; width: max-content; animation: wall var(--dur, 160s) linear infinite; }
.wall-row.rev .wall-track { animation-direction: reverse; }
.wall-row:hover .wall-track, .wall-row:focus-within .wall-track { animation-play-state: paused; }
@keyframes wall { to { transform: translateX(-50%); } }
.wall-set { display: flex; gap: 14px; padding-right: 14px; }
.wt {
  position: relative; flex: none; height: var(--h); width: calc(var(--h) * var(--r)); overflow: hidden;
  border-radius: 14px; border: 1px solid var(--line); background: var(--panel);
  transition: border-color 0.3s, box-shadow 0.5s var(--ease);
}
.wt img, .wt video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.wt:hover img, .wt:hover video { transform: scale(1.04); }
.wt:hover, .wt:focus-visible { border-color: rgba(240, 196, 143, 0.55); box-shadow: 0 0 0 1px rgba(240, 196, 143, 0.25), 0 20px 50px -16px rgba(0, 0, 0, 0.9); }
.wt:focus-visible { outline-offset: -3px; }
.wt-cap {
  position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; color: var(--frost);
  background: rgba(6, 10, 18, 0.74); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(4px); transition: opacity 0.3s, transform 0.4s var(--ease);
}
.wt-cap i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.wt:hover .wt-cap, .wt:focus-visible .wt-cap { opacity: 1; transform: none; }
.wt-video::after {
  content: ""; position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(6, 10, 18, 0.62) no-repeat 55% 50% / 9px 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'%3E%3Cpath d='M0 0l9 5-9 5z' fill='%23e8eef6'/%3E%3C/svg%3E");
}
.wall.still .wall-track { animation: none; }
.wall.still .wall-row { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
.wall.still .wall-set + .wall-set { display: none; }
@media (max-width: 759px) { .wall { --h: 128px; } .wall-inner, .wall-set { gap: 10px; } .wall-set { padding-right: 10px; } }

.lightbox {
  width: min(960px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: 18px; background: #070c17; color: var(--frost);
  box-shadow: 0 50px 140px -30px rgba(0, 0, 0, 0.9);
}
.lightbox::backdrop { background: rgba(3, 6, 12, 0.84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lightbox[open] { animation: dialog-in 0.45s var(--ease); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
.lightbox figure { display: grid; }
.lightbox-media img, .lightbox-media video { width: 100%; height: auto; max-height: calc(100dvh - 120px); object-fit: contain; background: #000; }
.lightbox figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 18px; }
.lightbox figcaption span { font-size: 0.875rem; color: var(--fog); }
.lightbox-close {
  position: absolute; top: 10px; right: 10px; z-index: 1; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; color: var(--frost); background: rgba(6, 10, 18, 0.66);
}
.lightbox-close:hover { background: rgba(6, 10, 18, 0.9); }
.lightbox-close svg { width: 18px; height: 18px; }