/* 💚 Super Premium Gallery CSS */

*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:Poppins,sans-serif;
  background:linear-gradient(120deg,#ffcba7,#ffebe0);
  min-height:100vh;
  padding-bottom:40px;
  overflow-x:hidden;
}

/* Back button */
.back-btn{
  position:fixed;top:14px;left:14px;
  background:#0f172a;color:#fff;
  border:none;padding:8px 14px;border-radius:10px;
  cursor:pointer;z-index:999;
}

/* Floating header */
.gallery-top{
  text-align:center;margin-top:90px;
  animation:fadeIn .8s ease-in-out;
}
.gallery-top h1{
  font-size:2.1rem;font-weight:800;
}
.gallery-top p{
  opacity:.7;margin-top:4px;
}

/* Filter bar */
.filter-bar{
  display:flex;gap:10px;justify-content:center;
  margin:18px 0;flex-wrap:wrap;
}
.filter-btn{
  padding:8px 14px;border:none;border-radius:8px;
  background:#ffffffb0;backdrop-filter:blur(6px);
  cursor:pointer;font-size:.9rem;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
  transition:.2s ease;
}
.filter-btn:hover{transform:scale(1.1);}
.filter-btn.active{background:#0f172a;color:white;}

/* Grid */
.gallery-grid{
  padding:20px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
}

/* Image card */
.img-card{
  background:rgba(255,255,255,.88);
  border-radius:16px;
  padding:10px;
  box-shadow:0 12px 32px rgba(0,0,0,0.2);
  backdrop-filter:blur(8px);
  cursor:pointer;
  animation:fadeInUp .7s ease;
  transform-style:preserve-3d;
  transition:.25s ease;
}
.img-card:hover{
  transform:translateY(-6px) rotateX(5deg);
  box-shadow:0 18px 42px rgba(0,0,0,0.25);
}

.img-card img{
  width:100%;height:230px;object-fit:cover;border-radius:12px;
}

/* Fullscreen viewer */
.image-view{
  position:fixed;inset:0;background:rgba(0,0,0,.9);
  display:flex;justify-content:center;align-items:center;
  z-index:999;backdrop-filter:blur(6px);
}
.image-view.hidden{display:none;}
.image-view img{
  max-width:92%;max-height:90%;border-radius:12px;
}
.close-btn{
  position:absolute;top:20px;right:26px;color:white;
  font-size:2.8rem;cursor:pointer;
}

/* Animations */
@keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}
@keyframes fadeInUp{
  0%{opacity:0;transform:translateY(24px);}
  100%{opacity:1;transform:translateY(0);}
}