:root{
  --bg:#070912; --card:rgba(255,255,255,.05); --line:rgba(255,255,255,.12);
  --txt:#eef3ff; --muted:#93a0bd; --acc:#00e5ff; --acc2:#7c5cff;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Space Grotesk',system-ui,sans-serif;color:var(--txt);background:var(--bg);
  min-height:100vh;padding:50px 16px 60px;overflow-x:hidden}
.bg-glow{position:fixed;inset:0;background:
  radial-gradient(620px 360px at 15% 8%, rgba(0,229,255,.24), transparent 65%),
  radial-gradient(620px 360px at 90% 92%, rgba(124,92,255,.3), transparent 65%);
  animation:drift 17s ease-in-out infinite alternate}
@keyframes drift{to{transform:scale(1.15) translate(22px,-20px)}}

.wrap{position:relative;width:min(1100px,100%);margin:0 auto}
.head{text-align:center;margin-bottom:30px;animation:up .7s cubic-bezier(.2,.8,.2,1) both}
.pill{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);
  border:1px solid var(--line);padding:7px 15px;border-radius:99px;background:var(--card)}
h1{font-size:clamp(32px,6.5vw,52px);margin:16px 0 8px;letter-spacing:-.02em}
h1 span{background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.head p{color:var(--muted);font-size:15px}
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.thumb{position:relative;padding:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:#0f1220;cursor:zoom-in;aspect-ratio:4/3;
  opacity:0;transform:translateY(26px);animation:tileIn .6s cubic-bezier(.2,.8,.2,1) forwards;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s}
.thumb:nth-child(2){animation-delay:.07s}.thumb:nth-child(3){animation-delay:.14s}
.thumb:nth-child(4){animation-delay:.21s}.thumb:nth-child(5){animation-delay:.28s}
.thumb:nth-child(6){animation-delay:.35s}
@keyframes tileIn{to{opacity:1;transform:none}}
.thumb:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(0,0,0,.6);border-color:var(--acc)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.22,1,.32,1)}
.thumb:hover img{transform:scale(1.12)}
.thumb span{position:absolute;left:0;right:0;bottom:0;padding:34px 15px 13px;font-size:14px;font-weight:600;
  text-align:left;background:linear-gradient(to top,rgba(5,7,18,.95),transparent);
  transform:translateY(8px);opacity:.85;transition:.4s}
.thumb:hover span{transform:none;opacity:1}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(4,5,14,.9);backdrop-filter:blur(16px);
  display:grid;grid-template-rows:auto 1fr auto;opacity:0;visibility:hidden;transition:.4s}
.lightbox.show{opacity:1;visibility:visible}
.lb-top{display:flex;justify-content:space-between;align-items:center;padding:16px 18px}
.counter{font-variant-numeric:tabular-nums;font-size:14px;letter-spacing:.14em;color:var(--muted)}
.counter b{color:var(--acc);font-size:17px}
.lb-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.07);
  color:var(--txt);font-size:17px;cursor:pointer;transition:.3s}
.lb-btn:hover{background:var(--acc);color:#05070f;transform:rotate(90deg);border-color:transparent}

.stage{position:relative;display:grid;place-items:center;padding:0 66px;min-height:0}
.stage img{max-width:100%;max-height:64vh;border-radius:18px;box-shadow:0 40px 90px rgba(0,0,0,.7);
  transform:scale(.9);opacity:0;transition:.5s cubic-bezier(.22,1,.32,1)}
.lightbox.show .stage img{transform:scale(1);opacity:1}
.stage figcaption{margin-top:16px;font-size:15.5px;font-weight:600;letter-spacing:.02em;color:#cfd8ee;
  animation:capIn .5s .1s both}
@keyframes capIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.07);color:var(--txt);font-size:26px;
  cursor:pointer;transition:.3s;z-index:5}
.arrow:hover{background:linear-gradient(135deg,var(--acc),var(--acc2));border-color:transparent;
  transform:translateY(-50%) scale(1.12);box-shadow:0 14px 32px rgba(0,229,255,.4)}
.arrow.left{left:14px}.arrow.right{right:14px}

.thumbs-strip{display:flex;gap:10px;justify-content:center;padding:16px;overflow-x:auto;scrollbar-width:none}
.thumbs-strip::-webkit-scrollbar{display:none}
.thumbs-strip button{width:74px;height:52px;padding:0;border-radius:11px;overflow:hidden;flex:none;
  border:2px solid transparent;background:none;cursor:pointer;opacity:.5;transition:.3s}
.thumbs-strip button img{width:100%;height:100%;object-fit:cover}
.thumbs-strip button.on{opacity:1;border-color:var(--acc);transform:translateY(-4px);
  box-shadow:0 10px 22px rgba(0,229,255,.35)}
.thumbs-strip button:hover{opacity:1}

@media (max-width:640px){
  .stage{padding:0 12px}
  .arrow{width:42px;height:42px;font-size:21px}
  .arrow.left{left:6px}.arrow.right{right:6px}
  .stage img{max-height:56vh}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}