/* ==========================================================
   ABERTURA – ONG OCA
   Tudo isolado com prefixo .ab- para não conflitar com o site
   ========================================================== */

:root {
  --ab-creme: #fbf8ec;
  --ab-verde: #47b449; /* verde do logotipo */
  --ab-verde-escuro: #1f6b32; /* verde dos títulos do post */
  --ab-amarelo: #f4b93a;
}

/* trava a rolagem enquanto a abertura está na tela */
html.ab-ativa,
html.ab-ativa body {
  overflow: hidden;
}

/* visita repetida na mesma sessão: nem aparece */
html.ab-pula #abertura {
  display: none;
}

#abertura {
  position: fixed;
  inset: 0;
  z-index: 9999;
  font-family: "Poppins", sans-serif;
}

.ab-verde,
.ab-creme {
  position: absolute;
  inset: 0;
}

.ab-verde {
  background: var(--ab-verde);
}

.ab-creme {
  background: var(--ab-creme);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- folhas e estrelas ---------- */
.ab-defs {
  position: absolute;
  width: 0;
  height: 0;
}

.ab-folha {
  position: absolute;
  top: var(--t, auto);
  right: var(--r, auto);
  bottom: var(--b, auto);
  left: var(--l, auto);
  width: var(--w, 120px);
  aspect-ratio: 2 / 1;
  color: var(--c, #4caf50);
  opacity: 0;
  pointer-events: none;
}

.ab-folha svg,
.ab-estrela svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ab-estrela {
  position: absolute;
  top: var(--t, auto);
  right: var(--r, auto);
  bottom: var(--b, auto);
  left: var(--l, auto);
  width: var(--s, 22px);
  aspect-ratio: 1;
  opacity: 0;
  pointer-events: none;
}

/* ---------- logotipo em camadas ---------- */
.ab-centro {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.2rem, 4vh, 2.2rem);
  padding: 0 1.5rem;
}

.ab-logo {
  position: relative;
  width: min(78vw, 520px);
  aspect-ratio: 777 / 422;
}

.ab-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  user-select: none;
  -webkit-user-drag: none;
}

.ab-o {
  transform-origin: 17% 43%;
}

.ab-frase {
  max-width: 28rem;
  text-align: center;
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ab-verde-escuro);
  text-wrap: balance;
  opacity: 0;
}

.ab-frase span {
  display: inline-block;
  white-space: pre;
}

/* ---------- barra e botão ---------- */
.ab-barra {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(1.5rem, 8vh, 4rem);
  width: min(60vw, 280px);
  height: 4px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: rgba(71, 180, 73, 0.18);
  overflow: hidden;
}

.ab-barra span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: var(--ab-verde);
  transform-origin: left center;
  transform: scaleX(0);
}

.ab-pular {
  position: absolute;
  z-index: 3;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  padding: 0.55rem 1.1rem;
  font: 500 0.85rem "Poppins", sans-serif;
  color: var(--ab-verde-escuro);
  background: var(--ab-creme);
  border: 2px solid var(--ab-verde);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: background 0.25s, color 0.25s;
}

.ab-pular:hover {
  background: var(--ab-verde);
  color: #fff;
}

.ab-pular:focus-visible {
  outline: 3px solid var(--ab-verde-escuro);
  outline-offset: 3px;
}

/* ---------- movimento reduzido: mostra tudo parado ---------- */
#abertura.ab-reduz .ab-logo img,
#abertura.ab-reduz .ab-frase,
#abertura.ab-reduz .ab-folha,
#abertura.ab-reduz .ab-estrela {
  opacity: 1;
}

#abertura.ab-reduz .ab-barra,
#abertura.ab-reduz .ab-pular {
  display: none;
}

/* ---------- telas pequenas ---------- */
@media (max-width: 600px) {
  .ab-frase {
    max-width: 18rem;
  }

  .ab-pular {
    left: 50%;
    right: auto;
    bottom: 1rem;
    transform: translateX(-50%);
    font-size: 0.8rem;
  }

  .ab-barra {
    bottom: 4.2rem;
  }
}