/* ══════════════════════════════════════════
   GALLERY — "The Collection" museum walkthrough + cover-ups before/after
══════════════════════════════════════════ */
#gallery {
  position: relative; overflow: hidden; padding: 140px 0 150px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(200,150,12,.10), transparent 70%),
    linear-gradient(180deg, #0d0b07 0%, #14110b 55%, #0d0b07 100%);
  color: #fff;
}
#gallery .sec-label { color: var(--gold-light); }
#gallery .sec-title { color: #f4efe2; }
#gallery .sec-title em { color: var(--gold-light); }
.gl-intro { text-align: center; max-width: 560px; margin: 22px auto 0; font-size: 15px; font-weight: 300; line-height: 1.85; color: rgba(255,255,255,.62); text-wrap: pretty; }

/* Stage */
.gl-stage {
  position: relative; height: clamp(420px, 46vw, 560px); margin-top: 64px;
  perspective: 1800px; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.gl-spot {
  position: absolute; left: 50%; top: -60px; width: min(720px, 90vw); height: calc(100% + 120px);
  transform: translateX(-50%); pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 42% 60% at 50% 30%, rgba(255,236,180,.13), rgba(255,236,180,.04) 45%, transparent 70%);
}
.gl-floor {
  position: absolute; left: 0; right: 0; bottom: -40px; height: 120px; pointer-events: none;
  background: radial-gradient(ellipse 40% 60% at 50% 0%, rgba(200,150,12,.12), transparent 70%);
}
.gl-slide {
  position: absolute; top: 0; left: 50%;
  width: clamp(230px, 27vw, 360px); aspect-ratio: 4 / 5; margin-left: calc(clamp(230px, 27vw, 360px) / -2);
  transform-style: preserve-3d;
  transition: transform .95s cubic-bezier(.22,.8,.24,1), opacity .95s ease, filter .95s ease;
  will-change: transform; cursor: pointer;
}
.gl-frame {
  position: absolute; inset: 0; padding: 14px; background: #1b160e;
  border: 1px solid rgba(200,150,12,.55);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 6px #120f09, inset 0 0 0 7px rgba(237,213,112,.25);
}
.gl-art { position: relative; width: 100%; height: 100%; overflow: hidden; background: #0f0c08; }
.gl-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-slide.is-active .gl-art img { animation: glDrift 9s ease-in-out both; }
.gl-stage.dragging .gl-slide { transition: none; }
.gl-stage.dragging .gl-art img { animation: none; }
.gl-slide img { -webkit-user-drag: none; pointer-events: none; }
@keyframes glDrift { from { transform: scale(1.06); } to { transform: scale(1); } }

/* Placeholder art */
.gl-ph {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 35%, rgba(200,150,12,.18), transparent 70%),
    linear-gradient(160deg, #241e13 0%, #120f09 70%);
}
.gl-ph-num { font-family: 'Cormorant', serif; font-weight: 600; font-size: clamp(64px, 7vw, 96px); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(237,213,112,.55); }
.gl-ph-label { font-size: 10px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: rgba(237,213,112,.55); }

/* Reflection on the floor under the active piece */
.gl-slide::after {
  content: ''; position: absolute; left: 6%; right: 6%; top: 100%; height: 38px; margin-top: 14px;
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(0,0,0,.55), transparent 70%);
  pointer-events: none;
}

/* Placard */
.gl-placard { position: relative; text-align: center; margin-top: 46px; min-height: 92px; }
.gl-placard-inner { transition: opacity .45s ease, transform .45s ease; }
.gl-placard.swap .gl-placard-inner { opacity: 0; transform: translateY(10px); }
.gl-no { font-family: 'Cinzel', serif; font-size: 12px; font-weight: 600; letter-spacing: .32em; color: var(--gold); }
.gl-title { font-family: 'Cormorant', serif; font-style: italic; font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); color: #f4efe2; margin: 6px 0 8px; }
.gl-meta { font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.gl-meta b { color: var(--gold-light); font-weight: 600; }

/* Controls */
.gl-controls { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 30px; }
.gl-arrow {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(200,150,12,.45); background: transparent;
  color: var(--gold-light); font-size: 18px; display: flex; align-items: center; justify-content: center;
  transition: background .3s, border-color .3s, transform .3s;
}
.gl-arrow:hover { background: rgba(200,150,12,.12); border-color: var(--gold); transform: scale(1.06); }
.gl-count { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .2em; color: rgba(255,255,255,.6); min-width: 86px; text-align: center; }
.gl-count b { color: var(--gold-light); font-weight: 500; }
.gl-progress { width: min(240px, 60vw); height: 1px; margin: 22px auto 0; background: rgba(255,255,255,.12); overflow: hidden; }
.gl-progress span { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }
.gl-progress.run span { animation: glProg var(--gl-dur, 5.5s) linear forwards; }
@keyframes glProg { to { transform: scaleX(1); } }

/* ── Cover-ups ── */
.cu-wrap { margin-top: 130px; padding-top: 110px; border-top: 1px solid rgba(200,150,12,.18); }
.cu-text { text-align: center; max-width: 620px; margin: 0 auto; }
.cu-text .sec-label { display: block; }
.cu-body { font-size: 15px; font-weight: 300; line-height: 1.85; color: rgba(255,255,255,.62); margin: 22px auto 0; max-width: 520px; text-wrap: pretty; }

.cu-carousel {
  --cu-w: clamp(260px, 32vw, 440px);
  position: relative; height: calc(var(--cu-w) * 1.25); margin-top: 56px;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.cu-track { position: absolute; inset: 0; }
.cu-compare {
  position: absolute; top: 0; left: 50%; width: var(--cu-w); margin-left: calc(var(--cu-w) / -2); aspect-ratio: 4 / 5;
  padding: 14px; background: #1b160e; border: 1px solid rgba(200,150,12,.55);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 6px #120f09, inset 0 0 0 7px rgba(237,213,112,.25);
  transition: transform .8s cubic-bezier(.22,.8,.24,1), opacity .8s ease, filter .8s ease;
  will-change: transform;
}
.cu-carousel.dragging .cu-compare { transition: none; }
.cu-compare:not(.is-active) { cursor: pointer; }
.cu-compare:not(.is-active) .cu-knob, .cu-compare:not(.is-active) .cu-handle { opacity: 0; }
.cu-view { position: relative; width: 100%; height: 100%; overflow: hidden; }
.cu-layer { position: absolute; inset: 0; }
.cu-layer img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
.cu-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); z-index: 2; }
.cu-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.cu-after .cu-ph { background: radial-gradient(ellipse 70% 55% at 55% 40%, rgba(200,150,12,.24), transparent 70%), linear-gradient(160deg, #241e13, #0f0c08); }
.cu-before .cu-ph { background: linear-gradient(160deg, #5a5247, #3a352d); }
.cu-ph span { font-family: 'Cinzel', serif; font-size: clamp(30px, 4vw, 46px); letter-spacing: .22em; color: transparent; -webkit-text-stroke: 1px rgba(237,213,112,.55); }
.cu-before .cu-ph span { -webkit-text-stroke-color: rgba(255,255,255,.55); }
.cu-tag {
  position: absolute; top: 14px; z-index: 4; padding: 6px 12px; font-size: 10px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  background: rgba(13,11,7,.72); color: #fff; pointer-events: none;
}
.cu-tag--before { left: 14px; }
.cu-tag--after { right: 14px; color: var(--gold-light); }
.cu-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 5; width: 2px; margin-left: -1px;
  background: var(--gold-light); box-shadow: 0 0 14px rgba(237,213,112,.6); pointer-events: none; transition: opacity .4s;
}
.cu-knob {
  position: absolute; top: 50%; left: var(--pos); z-index: 6; width: 50px; height: 50px; margin: -25px 0 0 -25px;
  border-radius: 50%; border: 1.5px solid var(--gold-light); background: rgba(13,11,7,.82);
  color: var(--gold-light); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px;
  box-shadow: 0 6px 24px rgba(0,0,0,.5); touch-action: none; transition: opacity .4s;
}
.cu-knob:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.cu-compare.hint .cu-before, .cu-compare.hint .cu-handle, .cu-compare.hint .cu-knob { transition: clip-path .9s cubic-bezier(.65,0,.35,1), left .9s cubic-bezier(.65,0,.35,1); }
.cu-hint { text-align: center; margin-top: 30px; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.cu-bar { position: relative; width: min(240px, 60vw); height: 2px; margin: 22px auto 0; background: rgba(255,255,255,.12); overflow: hidden; }
.cu-bar span { position: absolute; top: 0; left: 0; height: 100%; width: calc(100% / var(--cu-n, 3)); background: var(--gold-light); transition: transform .8s cubic-bezier(.22,.8,.24,1); }
.cu-carousel.dragging ~ .cu-bar span { transition: none; }
.cu-count { text-align: center; margin-top: 14px; font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .2em; color: rgba(255,255,255,.5); }
.cu-count b { color: var(--gold-light); font-weight: 500; }

@media (max-width: 768px) {
  #gallery { padding: 96px 0 104px; }
  .gl-stage { height: clamp(360px, 108vw, 470px); margin-top: 44px; }
  .gl-slide { width: min(64vw, 300px); margin-left: calc(min(64vw, 300px) / -2); }
  .cu-wrap { margin-top: 90px; padding-top: 80px; }
  .cu-carousel { --cu-w: min(74vw, 340px); margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .gl-slide, .gl-placard-inner, .cu-compare { transition: none; }
  .gl-slide.is-active .gl-art img, .gl-progress.run span { animation: none; }
}