/* ============================================================
   Accordion Gallery — estilos (porte do componente React Bits)
   As transições fazem o papel da timeline do GSAP: o JS só troca os
   valores-alvo (assets/js/accordion-gallery.js).
   ============================================================ */

.accordion-gallery {
  --ag-accent: #8fe93c;
  --ag-overlay: #060806;
  --ag-text: #f2f5ef;
  --ag-gap: 10px;
  --ag-radius: 16px;
  --ag-media-size: 320px;
  --ag-dur: .6s;
  --ag-stagger: .06s;
  /* power3.out do GSAP */
  --ag-ease: cubic-bezier(.215, .61, .355, 1);

  display: flex;
  flex-direction: row;
  gap: var(--ag-gap);
  width: 100%;
  max-width: 100%;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}

.ag-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--ag-radius);
  cursor: pointer;
  display: block;
  text-decoration: none;
  outline: none;
  transform-style: preserve-3d;
  transform-origin: center center;
  background: #0b100c;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8);
  will-change: flex-grow, transform;
  -webkit-tap-highlight-color: transparent;
  transition: flex-grow var(--ag-dur) var(--ag-ease),
              transform var(--ag-dur) var(--ag-ease),
              box-shadow var(--ag-dur) var(--ag-ease);
}
.ag-panel--active {
  box-shadow: 0 24px 54px -26px rgba(143, 233, 60, .35),
              0 10px 30px -18px rgba(0, 0, 0, .8);
}
.ag-panel:focus-visible {
  box-shadow: 0 0 0 2px var(--ag-accent), 0 10px 30px -18px rgba(0, 0, 0, .8);
}

.ag-panel__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.ag-panel__media {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ag-media-size);
  height: 100%;
  will-change: transform, filter;
  transition: transform var(--ag-dur) var(--ag-ease),
              filter var(--ag-dur) var(--ag-ease);
}
.ag-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* escurecimento dos painéis fechados — camada própria animável */
.ag-panel__dim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--ag-overlay);
  opacity: .4;
  transition: opacity var(--ag-dur) var(--ag-ease);
}
.ag-panel--active .ag-panel__dim { opacity: 0; }

/* gradiente de legibilidade do rótulo */
.ag-panel__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(4, 7, 4, .82) 100%);
}

.ag-panel__label {
  position: absolute;
  left: 18px;
  bottom: 16px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  z-index: 2;
}
.ag-panel__bar {
  flex: 0 0 auto;
  width: 3px;
  height: 30px;
  border-radius: 3px;
  background: var(--ag-accent);
  box-shadow: 0 0 12px rgba(143, 233, 60, .6);
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity calc(var(--ag-dur) * .7) var(--ag-ease),
              transform calc(var(--ag-dur) * .7) var(--ag-ease);
}
.ag-panel__text {
  min-width: 0;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity var(--ag-dur) var(--ag-ease) var(--ag-stagger),
              transform var(--ag-dur) var(--ag-ease) var(--ag-stagger);
}
.ag-panel__text b {
  display: block;
  color: var(--ag-text);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}
.ag-panel__text small {
  display: block;
  margin-top: 2px;
  color: rgba(194, 247, 109, .8);
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ag-panel--active .ag-panel__bar,
.ag-panel--active .ag-panel__text {
  opacity: 1;
  transform: translateX(0);
}

/* ============================================================
   Ligação com a home: só no desktop a galeria substitui as duas
   grades da seção #sites (o JS adiciona .ag-on quando monta)
   ============================================================ */
@media (min-width: 1024px) {
  #sites.ag-on .lp-grid,
  #sites.ag-on .shot-grid { display: none; }
}
.ag-stage { margin-top: 8px; }