/* =========================
   Start-UP • galeria.css
   ========================= */

/* HERO da Galeria — mesmo padrão (imagem bem suave) */
.hero-gallery{
  min-height: 56vh;
  position: relative;
  background-image:
    radial-gradient(1200px 600px at 15% 20%, rgba(251,0,0,.10), transparent 60%),
    radial-gradient(1000px 600px at 85% 80%, rgba(251,0,0,.06), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.86), rgba(0,0,0,.96)),
    url('../img/img_nobreak.jpg'); /* troque se quiser outra imagem */
  background-size: auto, auto, auto, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat;
  background-attachment: scroll, scroll, scroll, fixed;
}
@media (max-width:1024px){
  .hero-gallery{ background-attachment: scroll, scroll, scroll, scroll; }
}
.hero-gallery .subtitle{
  color:#dcdcdc; margin-top:8px; font-size:clamp(16px,2.1vw,20px);
}

/* overlay de grade sutil (futurista) */
.grid-overlay{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.02) 0 1px, transparent 1px 80px);
  mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,.7) 20%, rgba(0,0,0,.9));
}

/* ===== Filtros (chips) ===== */
.filters{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:18px;
}
.filter-chip{
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.04);
  color:#fff; padding:10px 14px; border-radius:999px; font-weight:600;
  transition:.2s; cursor:pointer;
}
.filter-chip:hover{ border-color: rgba(251,0,0,.55); box-shadow:0 6px 18px rgba(251,0,0,.12); }
.filter-chip.active{ background:#fb0000; border-color:#fb0000; }

/* ===== GRID COMPACTO (cards menores, look futurista) ===== */
.masonry{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:14px;
  perspective: 800px;   /* para o tilt 3D opcional */
}
@media (min-width:600px){
  .masonry{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap:16px; }
}
@media (min-width:992px){
  .masonry{ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:18px; }
}

/* Card padrão: 3/2 (mais “wide” e compacto) */
.masonry-item{
  position:relative; display:block; overflow:hidden;
  aspect-ratio: 3 / 2;              /* tamanho MENOR e consistente */
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    filter .25s ease;
  will-change: transform;
  backface-visibility: hidden;
}
.masonry-item img{
  width:100%; height:100%; display:block;
  object-fit:cover;                   /* corte perfeito */
  transform:scale(1.02);
  filter:grayscale(18%) contrast(.95) brightness(.95);
  opacity:.96;
  transition: transform .35s ease, filter .35s ease, opacity .35s ease;
}

/* neon/glow + varredura de luz */
.masonry-item::before{
  content:"";
  position:absolute; inset:-1px; border-radius:16px;
  background: linear-gradient(120deg,
              rgba(251,0,0,0) 25%,
              rgba(251,0,0,.28) 50%,
              rgba(251,0,0,0) 75%);
  background-size: 200% 200%;
  mix-blend-mode: screen;
  opacity:0; transition:.35s;
}
.masonry-item::after{
  content:"";
  position:absolute; inset:-1px; border-radius:16px;
  background: radial-gradient(70% 50% at 50% 120%, rgba(251,0,0,.18), transparent 60%),
              radial-gradient(30% 50% at -10% -10%, rgba(255,255,255,.05), transparent 60%);
  opacity:0; transition:.25s;
}

/* legenda (chip) – discreta, mostra no hover */
.masonry-item .cap{
  position:absolute; left:10px; bottom:10px; z-index:2;
  background:rgba(0,0,0,.55); color:#fff; font-size:11px;
  padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(2px);
  opacity:0; transform:translateY(6px); transition:.25s;
}

/* Hover — compacto, moderno */
.masonry-item:hover{
  box-shadow:0 12px 28px rgba(251,0,0,.12), inset 0 0 0 1px rgba(251,0,0,.35);
  border-color: rgba(251,0,0,.35);
}
.masonry-item:hover img{
  transform:scale(1.06);
  filter:none; opacity:1;
}
.masonry-item:hover::before{ opacity:1; animation: sweep 1.2s linear infinite; }
.masonry-item:hover::after{ opacity:.95; }
.masonry-item:hover .cap{ opacity:1; transform:none; }

@keyframes sweep{
  from{ background-position:0% 50%; }
  to  { background-position:200% 50%; }
}

/* Reveal ao rolar (entrada suave) */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in-view{ opacity:1; transform:none; }

/* Ajustes gerais */
.section-gap{ padding:72px 0; }
.text-center{ text-align:center; }