/* ============================================================
   ENDLINGX - Componentes parte 2
   (bioma video-bg sections, editorial gallery masonry/lazy,
    counter chip nos tiers, scroll indicator)
   ============================================================ */

/* ---------- SECTION COM VÍDEO DE BIOMA ---------- */
/* vídeo de bioma: cover proporcional + véu claro por cima p/ leitura */
.biomasec .bio-video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  z-index:0; opacity:.48;
}
.biomasec .bio-veil {
  position:absolute; inset:0; z-index:1;
  background:radial-gradient(120% 90% at 50% 10%, rgba(255,255,255,.30) 0%, rgba(255,255,255,.48) 45%, rgba(255,255,255,.66) 100%);
}
.biomasec {
  position:relative; overflow:hidden;
  min-height:100vh;                          /* cada seção = uma página cheia */
  display:flex; align-items:center;          /* conteúdo centrado verticalmente */
  padding:96px 0;
  isolation:isolate;
  scroll-margin-top:0;                       /* ancora já na borda da seção */
}
/* corte LIMPO entre seções: sem dissolve branco - o bioma da seção só nela */
.biomasec .wrap { position: relative; z-index: 2; width:100%; }
/* etiqueta do bioma */
.bio-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono'; font-size: .62rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--lime-ink);
  background: #fff; border: 1px solid var(--line-2);
  padding: 7px 13px; border-radius: 999px; margin-bottom: 14px;
}
.bio-tag::before { content: ''; width: 6px; height: 6px; background: var(--lime-ink); border-radius: 50%; }

/* ---------- EDITORIAL GALLERY (sv-efferd image-gallery: masonry por colunas + lazy reveal) ---------- */
.gal {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  grid-auto-rows:8px; /* masonry CSS puro */
}
.gal figure {
  margin:0; border-radius:14px; overflow:hidden; position:relative;
  border:1px solid var(--line); background:var(--paper-3);
  /* spans calculados por aspect-ratio via JS (row span) */
}
.gal img {
  width:100%; display:block; opacity:0; transform:scale(1.04);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.gal img.in { opacity:1; transform:scale(1); }
.gal figure:hover img { transform:scale(1.05); }
.gal figcaption {
  position:absolute; inset:auto 0 0 0; padding:12px 14px;
  background:linear-gradient(transparent, rgba(14,16,11,.85));
  color:#fff; font-size:.72rem; font-family:'JetBrains Mono';
  letter-spacing:.08em; opacity:0; transform:translateY(8px);
  transition:all .35s ease;
}
.gal figure:hover figcaption { opacity:1; transform:none; }
@media (max-width:900px) { .gal { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { .gal { grid-template-columns:1fr; } }

/* ---------- TIER COUNTER CHIP (nº de cartas com pill mono) ---------- */
.tier-box .q {
  display:inline-flex; align-items:center; gap:8px; margin-top:6px;
}
.tier-box .q::after {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--lime-ink); opacity:.6;
}

/* ---------- SCROLL INDICATOR (hero) ---------- */
.scroll-ind {
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px;
  text-decoration:none;
}
.scroll-ind span {
  font-family:'JetBrains Mono'; font-size:.58rem; letter-spacing:.3em;
  color:var(--ink-soft); text-transform:uppercase;
}
.scroll-ind .wheel {
  width:22px; height:34px; border:1.5px solid var(--ink-soft); border-radius:12px;
  position:relative;
}
.scroll-ind .wheel::after {
  content:''; position:absolute; top:6px; left:50%; width:3px; height:7px;
  background:var(--lime-ink); border-radius:2px; transform:translateX(-50%);
  animation: wheelDown 1.8s ease-in-out infinite;
}
@keyframes wheelDown {
  0% { top:6px; opacity:1; }
  70% { top:18px; opacity:0; }
  100% { top:6px; opacity:0; }
}