:root{
/*  --bg:#061029; */
  --track-h:500px; /* change this value to set slider height for all slides */
  --gap:14px;
  --slide-w:460px;
  --duration:30s;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Roboto,Arial;background:var(--bg);color:#fff}
.wrap{max-width:1200px;margin:28px auto;padding:18px}
h1{font-size:18px;margin:0 0 12px;color:#dbeafe}

/* Slider sizing */
.slider { height: var(--track-h); position:relative; overflow:hidden; border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); display:flex; align-items:center; }

.track{display:flex;gap:var(--gap);align-items:center;padding:12px;animation:scroll var(--duration) linear infinite;will-change:transform}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(var(--scroll-size))}}

.slide{
  width: var(--slide-w);
  height: calc(var(--track-h) - 24px);
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  transition: transform .32s ease;
  /*box-shadow: 0 10px 30px rgba(2,6,23,0.6); */
  background: #071022;
  cursor: zoom-in;
}

/* images always fill the slide area */
.slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  user-select:none;
}

.slide:hover { transform: translateY(-6px) scale(1.02); }

.meta{margin-top:10px;color:#94a3b8;font-size:13px}

/* Overlay & clone viewer */
.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(6,10,20,0.6);z-index:9999}
.overlay.open{display:flex}

/* Zoom clone: center box; JS sets exact left/top/width/height */
.zoom-clone{
  position:fixed;
  z-index:10000;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(2,6,23,0.7);
  will-change:transform,left,top,width,height;
  touch-action:none;
  background:#000;
  object-fit:contain; /* show whole image inside the zoom box */
  box-sizing: border-box;
}

.viewer-controls{position:fixed;right:18px;top:18px;display:flex;gap:8px;z-index:10001}
.btn{background:rgba(255,255,255,0.08);border:0;color:#fff;padding:8px;border-radius:8px;cursor:pointer;backdrop-filter:blur(6px)}
.close-btn{background:rgba(255,255,255,0.12);border-radius:10px;padding:8px;font-size:18px}
.caption{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:10001;background:rgba(0,0,0,0.36);padding:8px 12px;border-radius:8px;color:#fff}
.helper{position:fixed;left:18px;top:18px;color:#cbd5e1;z-index:10001;font-size:13px}

@media (max-width:880px){:root{--slide-w:260px;--track-h:260px}}
@media (max-width:520px){:root{--slide-w:200px;--track-h:180px;--duration:12s}}