/* ============================================
   GALLERY SECTION — 炫技图片展示
   ============================================ */

/* Gallery Section Wrapper */
.gallery-section {
  padding:7rem 2rem;
  position:relative; z-index:1;
  overflow:hidden;
}

/* ---- Filter Tabs ---- */
.gallery-filters {
  display:flex; gap:0.6rem; justify-content:center;
  flex-wrap:wrap; margin-bottom:3rem;
}
.gallery-filters button {
  padding:0.55rem 1.5rem;
  border-radius:50px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.03);
  color:var(--text-2);
  font-size:0.85rem; font-weight:500;
  cursor:pointer; font-family:var(--font-cn);
  letter-spacing:0.5px;
  transition:all var(--transition-smooth);
  backdrop-filter:blur(8px);
}
.gallery-filters button:hover {
  border-color:rgba(0,198,255,0.3);
  color:var(--blue);
  background:rgba(0,198,255,0.06);
}
.gallery-filters button.active {
  background:linear-gradient(135deg, rgba(0,198,255,0.2), rgba(139,92,246,0.2));
  border-color:var(--blue);
  color:#fff;
  box-shadow:0 0 20px rgba(0,198,255,0.15);
}

/* ---- Masonry Grid ---- */
.masonry-grid {
  columns:4;
  column-gap:1.5rem;
  max-width:1350px;
  margin:0 auto;
}
@media (max-width:1100px) { .masonry-grid { columns:3; } }
@media (max-width:768px) { .masonry-grid { columns:2; column-gap:0.8rem; } }
@media (max-width:480px) { .masonry-grid { columns:1; } }

/* ---- Masonry Item ---- */
.masonry-item {
  break-inside:avoid;
  margin-bottom:1.5rem;
  position:relative;
  border-radius:var(--radius-md);
  overflow:hidden;
  cursor:pointer;
  background:var(--bg-deep);
  transform:translateY(40px);
  opacity:0;
  transition:all 0.7s cubic-bezier(0.4,0,0.2,1);
}
.masonry-item.visible {
  transform:translateY(0);
  opacity:1;
}
.masonry-item:hover {
  transform:translateY(-4px);
}

/* Image wrapper for hover effects */
.masonry-item .img-wrap {
  position:relative;
  overflow:hidden;
  width:100%;
}
.masonry-item .img-wrap img {
  width:100%;
  display:block;
  transition:transform 0.7s cubic-bezier(0.4,0,0.2,1), filter 0.7s ease;
  filter:brightness(0.85) saturate(0.9);
}
.masonry-item:hover .img-wrap img {
  transform:scale(1.08);
  filter:brightness(1.05) saturate(1.1);
}

/* ---- Gradient Overlays (unique per item) ---- */
.masonry-item .img-overlay {
  position:absolute; inset:0;
  opacity:0;
  transition:opacity 0.5s ease;
  pointer-events:none;
  z-index:2;
}
.masonry-item:hover .img-overlay { opacity:1; }

/* Different overlay gradient per item */
.masonry-item:nth-child(6n+1) .img-overlay {
  background:linear-gradient(180deg, transparent 40%, rgba(0,198,255,0.4) 100%);
}
.masonry-item:nth-child(6n+2) .img-overlay {
  background:linear-gradient(180deg, transparent 40%, rgba(139,92,246,0.4) 100%);
}
.masonry-item:nth-child(6n+3) .img-overlay {
  background:linear-gradient(180deg, transparent 40%, rgba(0,255,200,0.35) 100%);
}
.masonry-item:nth-child(6n+4) .img-overlay {
  background:linear-gradient(180deg, transparent 40%, rgba(255,60,120,0.35) 100%);
}
.masonry-item:nth-child(6n+5) .img-overlay {
  background:linear-gradient(135deg, rgba(0,198,255,0.3) 0%, transparent 60%);
}
.masonry-item:nth-child(6n+6) .img-overlay {
  background:linear-gradient(225deg, rgba(139,92,246,0.3) 0%, transparent 60%);
}

/* ---- Glowing Border on Hover ---- */
.masonry-item .glow-border {
  position:absolute; inset:0;
  border-radius:var(--radius-md);
  border:2px solid transparent;
  transition:all 0.5s ease;
  pointer-events:none; z-index:3;
}
.masonry-item:nth-child(6n+1):hover .glow-border {
  border-color:rgba(0,198,255,0.5);
  box-shadow:inset 0 0 30px rgba(0,198,255,0.1), 0 0 25px rgba(0,198,255,0.2);
}
.masonry-item:nth-child(6n+2):hover .glow-border {
  border-color:rgba(139,92,246,0.5);
  box-shadow:inset 0 0 30px rgba(139,92,246,0.1), 0 0 25px rgba(139,92,246,0.2);
}
.masonry-item:nth-child(6n+3):hover .glow-border {
  border-color:rgba(0,255,200,0.5);
  box-shadow:inset 0 0 30px rgba(0,255,200,0.1), 0 0 25px rgba(0,255,200,0.2);
}
.masonry-item:nth-child(6n+4):hover .glow-border {
  border-color:rgba(255,60,120,0.5);
  box-shadow:inset 0 0 30px rgba(255,60,120,0.1), 0 0 25px rgba(255,60,120,0.2);
}
.masonry-item:nth-child(6n+5):hover .glow-border {
  border-color:rgba(0,198,255,0.5);
  box-shadow:inset 0 0 30px rgba(0,198,255,0.1), 0 0 25px rgba(0,198,255,0.2);
}
.masonry-item:nth-child(6n+6):hover .glow-border {
  border-color:rgba(139,92,246,0.5);
  box-shadow:inset 0 0 30px rgba(139,92,246,0.1), 0 0 25px rgba(139,92,246,0.2);
}

/* ---- Caption ---- */
.masonry-item .caption {
  position:absolute; bottom:0; left:0; right:0;
  padding:2rem 1.5rem 1.2rem;
  z-index:4;
  transform:translateY(20px);
  opacity:0;
  transition:all 0.4s cubic-bezier(0.4,0,0.2,1) 0.1s;
  pointer-events:none;
}
.masonry-item:hover .caption {
  transform:translateY(0);
  opacity:1;
}
.masonry-item .caption h4 {
  font-size:1.05rem; font-weight:700;
  color:#fff; margin-bottom:0.3rem;
  text-shadow:0 2px 8px rgba(0,0,0,0.5);
}
.masonry-item .caption span {
  font-size:0.8rem;
  color:rgba(255,255,255,0.8);
  letter-spacing:1px;
}

/* ---- Zoom Icon ---- */
.masonry-item .zoom-icon {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(0.5);
  z-index:5;
  width:50px; height:50px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.3);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
  opacity:0;
  transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events:none;
}
.masonry-item:hover .zoom-icon {
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

/* ---- Shimmer Loading ---- */
.masonry-item .shimmer {
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.04) 50%,
    transparent 100%);
  background-size:200% 100%;
  animation:shimmer 1.5s ease-in-out infinite;
  z-index:1;
  pointer-events:none;
}
.masonry-item.loaded .shimmer { display:none; }

/* ============================================
   FULLSCREEN LIGHTBOX
   ============================================ */
.lightbox {
  position:fixed; inset:0;
  z-index:10000;
  background:rgba(6,6,14,0.95);
  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity 0.4s ease;
}
.lightbox.open {
  opacity:1; pointer-events:all;
}

.lightbox .lb-content {
  position:relative;
  max-width:90vw; max-height:85vh;
  display:flex; align-items:center; justify-content:center;
}
.lightbox .lb-content img {
  max-width:90vw; max-height:85vh;
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 20px 80px rgba(0,0,0,0.6);
  transform:scale(0.85);
  transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.lightbox.open .lb-content img {
  transform:scale(1);
}

/* Lightbox Close */
.lightbox .lb-close {
  position:absolute; top:2rem; right:2.5rem;
  width:44px; height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.05);
  color:#fff;
  font-size:1.5rem;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--transition-smooth);
  z-index:2;
  backdrop-filter:blur(10px);
}
.lightbox .lb-close:hover {
  background:rgba(255,60,120,0.2);
  border-color:var(--pink);
  box-shadow:0 0 20px rgba(255,60,120,0.2);
}

/* Lightbox Arrows */
.lightbox .lb-arrow {
  position:absolute; top:50%;
  transform:translateY(-50%);
  width:50px; height:50px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.05);
  color:#fff;
  font-size:1.3rem;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--transition-smooth);
  z-index:2;
  backdrop-filter:blur(10px);
}
.lightbox .lb-arrow:hover {
  background:rgba(0,198,255,0.15);
  border-color:var(--blue);
  box-shadow:0 0 25px rgba(0,198,255,0.2);
}
.lightbox .lb-arrow.prev { left:2rem; }
.lightbox .lb-arrow.next { right:2rem; }

/* Lightbox Counter */
.lightbox .lb-counter {
  position:absolute; bottom:2rem; left:50%;
  transform:translateX(-50%);
  font-family:var(--font-en);
  font-size:0.85rem;
  color:var(--text-2);
  letter-spacing:2px;
  background:rgba(255,255,255,0.04);
  padding:0.5rem 1.2rem;
  border-radius:50px;
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(10px);
}

/* Lightbox Caption */
.lightbox .lb-caption {
  position:absolute; bottom:4.5rem; left:50%;
  transform:translateX(-50%);
  text-align:center;
  z-index:2;
}
.lightbox .lb-caption h4 {
  font-size:1.2rem; color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,0.6);
}
.lightbox .lb-caption span {
  font-size:0.82rem; color:var(--text-2);
  letter-spacing:1px;
}

/* ============================================
   IMAGE STACK FAN EFFECT (Featured Row)
   ============================================ */
.image-stack {
  display:flex; justify-content:center;
  align-items:center;
  gap:0;
  padding:3rem 0;
  perspective:1200px;
}
.image-stack .stack-card {
  width:200px; height:280px;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--glass-border);
  transition:all 0.5s cubic-bezier(0.34,1.56,0.64,1);
  cursor:pointer;
  position:relative;
  margin:0 -12px;
  box-shadow:0 10px 40px rgba(0,0,0,0.4);
}
.image-stack .stack-card img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 0.6s ease;
}
.image-stack:hover .stack-card {
  margin:0 8px;
  transform:rotate(0) !important;
}
.image-stack .stack-card:nth-child(1) { transform:rotate(-8deg) translateY(10px); z-index:1; }
.image-stack .stack-card:nth-child(2) { transform:rotate(-3deg) translateY(-5px); z-index:2; }
.image-stack .stack-card:nth-child(3) { transform:rotate(2deg) translateY(15px); z-index:3; }
.image-stack .stack-card:nth-child(4) { transform:rotate(6deg) translateY(-8px); z-index:4; }
.image-stack .stack-card:nth-child(5) { transform:rotate(10deg) translateY(5px); z-index:5; }
.image-stack .stack-card:hover {
  transform:rotate(0) translateY(-20px) scale(1.12) !important;
  z-index:10 !important;
  box-shadow:0 25px 60px rgba(0,198,255,0.25);
  border-color:rgba(0,198,255,0.5);
}