/* LI8 - real photographs instead of 3D object pictures. Treasures cards, auction lots, bat step 07. Loaded after site.css / treasures.css / sialkot.css. */

/* ---------- Treasures: a photograph in a frame that matches the photo (2:3), sized from the viewport so picture + title + text + link always fit ---------- */
.tr-pin { box-sizing: border-box; padding-top: 7.6rem; padding-bottom: 5.6vh; }
.tr-track { --fh: min(50svh, 56rem); --cw: max(24rem, calc(var(--fh) * 2 / 3)); }
.tr-card { width: var(--cw); }
.tr-card:nth-of-type(n) { transform: none; }
.tr-view { aspect-ratio: 2 / 3; overflow: hidden; cursor: default; touch-action: pan-y; background: #25201A; perspective: 90rem; }
.tr-card h3 { margin-top: 1.4rem; }
.tr-native .tr-pin { padding-top: 8rem; }
.tr-native .tr-track { --cw: min(72vw, 32rem); }
.tr-still-mode .tr-pin { padding-top: 8rem; }
.tr-still-mode .tr-track { --cw: clamp(26rem, 26vw, 34rem); }
.tr-view .tr-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; pointer-events: none;
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) scale(var(--ts, 1)); transition: transform .7s cubic-bezier(.23, 1, .32, 1); will-change: transform; }
.tr-view::after { content: ""; position: absolute; inset: -30% -60%; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 42%, rgb(255 226 170 / .16) 50%, transparent 58%); transform: translateX(-60%); }
.tr-card.is-lit .tr-view::after { animation: li8-sweep 2.4s cubic-bezier(.23, 1, .32, 1) .15s 1 both; }
@keyframes li8-sweep { 0% { transform: translateX(-60%); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(60%); opacity: 0; } }
.tr-card.is-lit .tr-view { box-shadow: inset 0 0 3.2rem rgb(5 4 3 / .5), 0 2rem 4rem rgb(5 4 3 / .35); }

/* ---------- Auction lots: the picture fills its box, same aspect for every card ---------- */
.lots .lot__pic { height: auto; aspect-ratio: 3 / 2; display: block; overflow: hidden; background: #25201A; position: relative; }
.lots .lot__pic img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center; filter: none; transition: transform .9s cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) { .lots .lot:hover .lot__pic img { transform: scale(1.03); } }

/* ---------- Bat step 07: photograph + overlays that follow the same responsive box ---------- */
.sk-step--name .sk-namefig { background: #25201A; display: flex; justify-content: center; align-items: stretch; }
.sk-step--name .bat-photo { position: relative; height: 100%; aspect-ratio: 2 / 3; flex: 0 0 auto; overflow: hidden; transform-origin: 50% 100%; animation: li8-sway 9s ease-in-out infinite; }
.sk-step--name .bat-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-step--name .bat-photo svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; }
.sk-step--name .bat-photo::after { content: ""; position: absolute; inset: -20% -60%; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 42%, rgb(255 226 170 / .18) 50%, transparent 58%); transform: translateX(-60%); }
.sk-step--name .sk-namefig:hover .bat-photo::after { animation: li8-sweep 1.8s cubic-bezier(.23, 1, .32, 1) 1 both; }
@keyframes li8-sway { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
.sk-step--name .sk-namefig { overflow: hidden; }

@media (max-width: 640px) {
  .tr-view .tr-ph { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-view .tr-ph { transition: none; transform: none; }
  .tr-card.is-lit .tr-view::after, .sk-step--name .sk-namefig:hover .bat-photo::after { animation: none; opacity: 0; }
  .sk-step--name .bat-photo { animation: none; }
  .lots .lot__pic img { transition: none; }
}

/* ---------- Auction room: its own place (s1 band, 1px brass top rule, lighter inner surface for the lots) ---------- */
.auction { background: var(--room-auction, #1A1012); border-top: 1px solid var(--brass); padding: clamp(6rem, 9vw, 12rem) 0; position: relative; }
.auction::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 14rem; background: linear-gradient(rgb(176 138 62 / .08), transparent); pointer-events: none; }
.auction .wrap { position: relative; }
.auction h2 { color: var(--tx-hi); }
.auction__lead { margin-top: 1.6rem; max-width: 40ch; }
.auction__live { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem; margin-top: 2.4rem; font: 600 1.3rem/1 var(--sans, Inter, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-mid); }
.auction__live i { width: .9rem; height: .9rem; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 0 rgb(176 138 62 / .55); animation: li8-pulse 2.4s ease-out infinite; }
.auction__sep { width: 1px; height: 1.4rem; background: var(--line-hi); }
@keyframes li8-pulse { 0% { box-shadow: 0 0 0 0 rgb(176 138 62 / .55); } 70%, 100% { box-shadow: 0 0 0 1rem rgb(176 138 62 / 0); } }
.auction .lots { margin-top: 4rem; padding: clamp(1.6rem, 2.6vw, 3.6rem); background: color-mix(in srgb, var(--room-auction, #1A1012) 92%, #fff 8%); box-shadow: inset 0 0 0 1px var(--line), inset 0 0 4rem rgb(5 2 3 / .35); }
.auction .lot { background: var(--room-auction-card, #221517); box-shadow: inset 0 0 0 1px var(--line-hi); }
@media (prefers-reduced-motion: reduce) { .auction__live i { animation: none; } }