/* The Art Room: a walkable 3D gallery (art.js) inside the site's shell.
   The page is a tall scroll track (.art-journey) with a full-screen stage pinned inside it; scrolling moves
   the camera along the room. The site header floats over the stage and leaves with it, and the footer follows.
   The 3D room keeps its own look; everything drawn in HTML here uses the site's fonts and colours.
   Ported from extras/projects/art-room. */

.art-page { background: var(--paper); }
.art-shell { position: relative; }

/* ---------- Header, floating over the exhibition ---------- */
.art-header { position: sticky; top: 0; z-index: 10; margin-bottom: -118px; background: linear-gradient(#fffffff2 20%, #ffffffa6 62%, #fff0); pointer-events: none; }
.art-header .site-header { pointer-events: auto; }
.art-flat .art-header { background: var(--paper); margin-bottom: 0; }
/* Back button: hangs just under the header row without adding to the header's height. */
.art-back-row { height: 0; }
.art-back { position: relative; top: -20px; pointer-events: auto; }
.art-back span { transition: translate .25s; }
.art-back:hover span { translate: -3px 0; }

/* ---------- The stage ---------- */
.art-journey { height: 800vh; }
.art-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #d5e9ee; }
.art-scene, .art-scene canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.art-scene canvas { cursor: grab; }
.art-scene canvas:active { cursor: grabbing; }
/* A soft floor of light so the controls stay readable over any part of the room. */
.art-stage::after { content: ''; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 150px; background: linear-gradient(#fff0, #ffffffd9); pointer-events: none; }
.art-status { position: absolute; z-index: 2; top: 48%; left: 0; right: 0; margin: 0; text-align: center; font-size: 14px; color: #4c4f55; }
.art-status[hidden] { display: none; }

/* ---------- Controls over the stage ---------- */
.art-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid #d8d9d8; border-radius: 99px; background: #fffffff2; color: var(--ink); font-size: 13px; font-weight: 500; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.art-pill:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.art-caption { position: absolute; z-index: 2; left: max(28px, calc((100% - 1240px) / 2)); bottom: 30px; pointer-events: none; }
.art-eyebrow { display: block; font-size: 12px; color: #5c6066; }
.art-caption h1 { margin: 6px 0 12px; max-width: none; font-family: var(--display); font-size: 28px; font-weight: 600; line-height: 1.05; letter-spacing: -.04em; color: var(--ink); text-align: left; }
.art-caption-actions { display: flex; flex-wrap: wrap; gap: 8px; pointer-events: auto; }

.art-guide { position: absolute; z-index: 2; right: max(28px, calc((100% - 1240px) / 2)); bottom: 30px; display: flex; align-items: center; gap: 16px; font-size: 12px; color: #5c6066; }
.art-arrows { display: flex; gap: 8px; }
.art-arrows button { width: 44px; height: 44px; border: 1px solid #d8d9d8; border-radius: 50%; background: #fffffff2; color: var(--ink); font-size: 16px; transition: background .2s, color .2s, border-color .2s; }
.art-arrows button:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.art-stops { position: absolute; z-index: 2; right: max(28px, calc((100% - 1240px) / 2)); bottom: 92px; display: flex; gap: 8px; }
.art-stops button { width: 32px; height: 32px; border-radius: 50%; background: #ffffffd9; color: #6d7379; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background .2s, color .2s; }
.art-stops button:hover { color: var(--ink); }
.art-stops button[aria-current=true] { background: var(--blue); color: #fff; }

/* ---------- Collection (flat view) ---------- */
.art-flat .art-journey { display: none; }
.art-collection { padding-top: 56px; padding-bottom: 96px; }
.art-collection .section-heading { align-items: flex-end; margin-bottom: 36px; }
.art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 24px; }
.art-grid button { display: block; width: 100%; padding: 0; background: none; text-align: left; }
.art-grid img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 22px; border-radius: 18px; background: #f0f0ed; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.art-grid button:hover img { transform: translateY(-4px); box-shadow: 0 14px 26px #243b5b12; }
.art-grid span { display: flex; justify-content: space-between; gap: 12px; padding: 14px 2px 0; font-size: 14px; }
.art-tag { flex: none; align-self: flex-start; padding: 3px 10px; border: 1px solid var(--line); border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--ink); }
.art-tag[data-kind=NFT] { color: var(--blue); border-color: #c9d5fb; background: var(--ice); }
.art-note { margin-top: 44px; max-width: 560px; font-size: 13px; line-height: 1.7; color: var(--muted); }

/* ---------- Artwork viewer ---------- */
.art-detail { max-width: min(94vw, 980px); max-height: 94vh; padding: 22px; border: 0; border-radius: 22px; background: var(--paper); color: var(--ink); }
.art-detail::backdrop { background: #232426cc; backdrop-filter: blur(6px); }
.art-detail .art-pill { float: right; }
.art-detail img { clear: both; display: block; max-width: 100%; max-height: 72vh; margin: 56px auto 0; object-fit: contain; }
.art-detail p { margin: 16px 0 0; font-size: 14px; color: var(--muted); }

@media (max-width: 1000px) {
  .art-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .art-header { margin-bottom: -88px; }
  .art-back { top: -8px; padding: 8px 14px; }
  .art-flat .art-collection { padding-top: 62px; }
  .art-stage::after { height: 240px; }
  .art-caption { left: 20px; right: 20px; bottom: 22px; }
  .art-caption h1 { font-size: 24px; }
  .art-guide { left: 20px; right: 20px; bottom: 128px; justify-content: space-between; font-size: 11px; }
  .art-stops { left: 20px; right: auto; bottom: 186px; }
  .art-collection { padding-top: 30px; padding-bottom: 60px; }
  .art-collection .section-heading { align-items: flex-start; }
  .art-grid { gap: 22px 14px; }
  .art-grid img { padding: 12px; border-radius: 14px; }
  .art-grid span { display: block; font-size: 13px; padding-top: 10px; }
  .art-tag { display: inline-block; margin-top: 6px; }
  .art-detail { padding: 16px; }
}