/* LI2 - Treasures of the galleries (+ hero ball). Palette: paper #F4EDDC, ink #1F1A14, green #1F4D36, maroon #6B1F2A, brass #B08A3E. rem = 10px. */
.treasures { position: relative; background: #F4EDDC; color: #1F1A14; }
.tr-pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; background: #F4EDDC; }
.tr-track { display: flex; align-items: center; gap: clamp(2.4rem, 3.2vw, 5.2rem); width: max-content; padding: 0 clamp(2rem, 6vw, 9.6rem); will-change: transform; }
.tr-intro { flex: 0 0 auto; width: min(36vw, 52rem); padding-right: clamp(2rem, 4vw, 6rem); }
.tr-intro h2 { font-size: clamp(3.8rem, 5.4vw, 8.4rem); line-height: .96; text-transform: uppercase; letter-spacing: .005em; margin-bottom: 2.4rem; }
.tr-lead { font: 400 clamp(1.7rem, 1.3vw, 2rem)/1.5 var(--sans, Inter, system-ui, sans-serif); max-width: 30ch; }
.tr-cue { display: inline-block; margin-top: 4rem; font: 600 1.2rem/1 var(--sans, Inter, system-ui, sans-serif); letter-spacing: .22em; text-transform: uppercase; color: #6B1F2A; padding-right: 7rem; position: relative; }
.tr-cue::after { content: ""; position: absolute; right: 0; top: 50%; width: 5.2rem; height: 1px; background: #B08A3E; transform-origin: left; animation: tr-cue 2.4s cubic-bezier(.23, 1, .32, 1) infinite; }
@keyframes tr-cue { 0% { transform: scaleX(.15); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: .2; } }
.tr-card { flex: 0 0 auto; width: clamp(26rem, 26vw, 42rem); display: flex; flex-direction: column; }
.tr-card:nth-of-type(odd)  { transform: translateY(-5.5vh); }
.tr-card:nth-of-type(even) { transform: translateY(6vh); }
.tr-view { position: relative; width: 100%; aspect-ratio: 4 / 5; border: 1px solid rgb(176 138 62 / .55); border-radius: 2px;
  background: radial-gradient(ellipse 80% 70% at 50% 42%, rgb(255 250 238 / .9), rgb(217 207 184 / .55) 78%); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tr-view.is-3d .tr-still { opacity: 0; }
.tr-view.is-drag { cursor: grabbing; }
.tr-still { display: block; opacity: 1; transition: opacity .45s ease; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.tr-card h3 { font: 600 clamp(2.2rem, 1.7vw, 2.8rem)/1.1 var(--serif, "Cormorant Garamond", Georgia, serif); text-transform: uppercase; letter-spacing: .06em; margin: 1.8rem 0 .8rem; }
.tr-card p { font: 400 1.5rem/1.5 var(--sans, Inter, system-ui, sans-serif); color: rgb(31 26 20 / .82); max-width: 32ch; }
.tr-link { align-self: flex-start; margin-top: 1.4rem; font: 600 1.3rem/1 var(--sans, Inter, system-ui, sans-serif); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: #6B1F2A; padding-bottom: .5rem; background: linear-gradient(#B08A3E, #B08A3E) 0 100% / 100% 1px no-repeat; transition: background-size .5s cubic-bezier(.23, 1, .32, 1), color .3s; }
.tr-link:hover { color: #1F4D36; background-size: 40% 1px; }
.tr-end { flex: 0 0 clamp(2rem, 8vw, 12rem); height: 1px; }
.tr-gl { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.tr-gl canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tr-progress { position: absolute; left: clamp(2rem, 6vw, 9.6rem); right: clamp(2rem, 6vw, 9.6rem); bottom: 4.4vh; height: 1px; background: rgb(176 138 62 / .35); z-index: 3; }
.tr-progress i { position: absolute; inset: 0; background: #6B1F2A; transform-origin: left; transform: scaleX(0); }

/* narrow screens / no ScrollTrigger: the track scrolls sideways by hand (the 3D still follows each card) */
.tr-native .tr-pin { height: auto; padding: 8rem 0; overflow: visible; display: block; }
.tr-native .tr-track { width: auto; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4rem; gap: 2rem; -webkit-overflow-scrolling: touch; }
.tr-native .tr-intro { width: min(78vw, 36rem); scroll-snap-align: start; }
.tr-native .tr-card { width: min(72vw, 32rem); scroll-snap-align: center; }
.tr-native .tr-card:nth-of-type(n) { transform: none; }
.tr-native .tr-gl { overflow: hidden; }
.tr-native .tr-progress, .tr-native .tr-cue { display: none; }

/* reduced motion / no WebGL: still pictures in a wrapping grid, no pin */
.tr-still-mode .tr-pin { height: auto; padding: 8rem 0; overflow: visible; display: block; }
.tr-still-mode .tr-track { width: auto; flex-wrap: wrap; justify-content: center; gap: 4rem 3rem; transform: none !important; padding: 0 clamp(2rem, 6vw, 9.6rem); }
.tr-still-mode .tr-intro { width: 100%; text-align: center; padding: 0 0 2rem; }
.tr-still-mode .tr-lead { margin-inline: auto; }
.tr-still-mode .tr-card:nth-of-type(n) { transform: none; }
.tr-still-mode .tr-still { display: block; }
.tr-still-mode .tr-view { cursor: default; }
.tr-still-mode .tr-gl, .tr-still-mode .tr-progress, .tr-still-mode .tr-cue, .tr-still-mode .tr-end { display: none; }
@media (prefers-reduced-motion: reduce) { .tr-cue::after { animation: none; } }

/* HERO BALL (LI1 supplies <div class="hero-ball" aria-hidden="true">; :where() keeps these defaults weaker than LI1's own rules) */
:where(.hero-ball) { position: absolute; right: 7vw; bottom: 9vh; width: min(30vw, 44rem); aspect-ratio: 1; z-index: 3; pointer-events: none; }
.hero-ball__roll { position: absolute; inset: 0; will-change: transform, opacity; }
.hero-ball__roll canvas, .hero-ball__roll img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ===== LI7: Pavilion night (tokens from site.css) - treasures = s1, pictures sit in an s2 frame with a soft inner shadow ===== */
.treasures, .tr-pin { background: var(--s1); color: var(--tx-mid); }
.tr-intro h2 { color: var(--tx-hi); }
.tr-lead { color: var(--tx-mid); }
.tr-cue { color: var(--brass); }
.tr-cue::after { background: var(--brass); }
.tr-view { border: 1px solid var(--line); border-radius: 2px;
  background: radial-gradient(ellipse 80% 70% at 50% 42%, #322b22 0%, var(--s2) 62%, #1e1a15 100%);
  box-shadow: inset 0 0 3.2rem rgb(5 4 3 / .6), 0 2rem 4rem rgb(5 4 3 / .35); }
.tr-card h3 { color: var(--tx-hi); }
.tr-card p { color: var(--tx-mid); }
.tr-link { color: var(--brass); background: linear-gradient(var(--brass), var(--brass)) 0 100% / 100% 1px no-repeat; }
.tr-link:hover { color: var(--tx-hi); }
.tr-progress { background: var(--line); }
.tr-progress i { background: var(--brass); }