:root{
  --bg:#0d0714; --card:rgba(255,255,255,.05); --line:rgba(255,255,255,.1);
  --txt:#f6f0ff; --muted:#a396b8; --acc:#ff2d95; --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 85% 8%, rgba(255,45,149,.26), transparent 65%),
  radial-gradient(620px 360px at 8% 92%, rgba(124,92,255,.3), transparent 65%);
  animation:drift 17s ease-in-out infinite alternate}
@keyframes drift{to{transform:scale(1.15) translate(-24px,18px)}}

.wrap{position:relative;width:min(1150px,100%);margin:0 auto}
.head{text-align:center;margin-bottom:26px;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}}

.filters{display:flex;justify-content:center;gap:10px;margin-bottom:26px;flex-wrap:wrap;
  animation:up .7s .08s cubic-bezier(.2,.8,.2,1) both}
.chip{padding:11px 22px;border-radius:99px;border:1px solid var(--line);background:var(--card);
  color:var(--muted);font-family:inherit;font-size:14px;cursor:pointer;transition:.3s}
.chip:hover{color:var(--txt);border-color:var(--acc);transform:translateY(-3px)}
.chip.on{background:linear-gradient(90deg,var(--acc),var(--acc2));color:#fff;border-color:transparent;
  font-weight:600;box-shadow:0 12px 28px rgba(255,45,149,.35)}

.masonry{columns:4;column-gap:18px}
.tile{position:relative;break-inside:avoid;margin-bottom:18px;border-radius:22px;overflow:hidden;
  cursor:pointer;border:1px solid var(--line);background:#150e22;
  opacity:0;transform:translateY(30px) scale(.96);
  animation:tileIn .6s cubic-bezier(.2,.8,.2,1) forwards;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s}
@keyframes tileIn{to{opacity:1;transform:none}}
.tile:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(0,0,0,.6)}
.tile.hide{display:none}
.tile img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.32,1)}
.tile.short img{aspect-ratio:1/1}
.tile.tall img{aspect-ratio:3/4}
.tile:hover img{transform:scale(1.09)}
.ov{position:absolute;inset:auto 0 0 0;padding:52px 16px 16px;
  background:linear-gradient(to top,rgba(8,4,18,.95),transparent);
  transform:translateY(14px);opacity:0;transition:.45s cubic-bezier(.2,.8,.2,1)}
.tile:hover .ov{transform:none;opacity:1}
.ov h3{font-size:16px}
.ov p{font-size:12.5px;color:#c9bcdd;margin-top:2px}
.like{position:absolute;top:-46px;right:12px;padding:7px 13px;border-radius:99px;font-size:12.5px;
  font-weight:700;background:rgba(255,45,149,.9);color:#fff;backdrop-filter:blur(8px);
  transform:translateY(10px);opacity:0;transition:.4s .08s}
.tile:hover .like{transform:none;opacity:1}
.tile.liked .like{background:#2ef2a0;color:#06120c}

.count{text-align:center;color:var(--muted);font-size:13.5px;margin-top:24px;letter-spacing:.08em}

@media (max-width:1024px){.masonry{columns:3}}
@media (max-width:760px){.masonry{columns:2;column-gap:13px}.tile{margin-bottom:13px;border-radius:18px}}
@media (max-width:430px){.masonry{columns:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}