/* ============ 01 · Abertura ============ */
.abertura {
  --sol-x: 56%;      /* recalculado em JS: posição do sol na tela */
  --sol-y: 54%;
  --foco: 56% 55%;   /* mesmo enquadramento para vídeo, quadro final e shader */
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background: var(--igapo);
  z-index: 2;
}

.ab-cena {
  position: absolute; inset: 0;
  transform-origin: var(--sol-x) var(--sol-y);
  will-change: transform;
}
.ab-final, .ab-video, .ab-rio {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--foco);
}
.ab-rio { opacity: 0; }
.ab-video { transition: opacity .3s linear; }
.ab-video.terminou { opacity: 0; }

.ab-s-veu { position: absolute; inset: 0; }
.ab-veu {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 13, 8, .78) 0%, rgba(5, 13, 8, .42) 34%, rgba(5, 13, 8, 0) 62%),
    linear-gradient(0deg, rgba(5, 13, 8, .7) 0%, rgba(5, 13, 8, 0) 38%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(5, 13, 8, .55) 100%);
  opacity: .35;
  transition: opacity 1.4s var(--ease-org);
}
.abertura.revelada .ab-veu { opacity: 1; }

/* Silhuetas botânicas em primeiro plano (parallax) */
.ab-folhas { position: absolute; inset: 0; pointer-events: none; }
.ab-folha { position: absolute; color: var(--igapo); }
.ab-folha--esq { left: -6vw; bottom: -14vh; width: 34vw; height: 70vh; transform-origin: 20% 100%; filter: blur(1.5px); opacity: .92; }
.ab-folha--dir { right: -8vw; bottom: -20vh; width: 30vw; height: 64vh; transform-origin: 80% 100%; filter: blur(3px); opacity: .85; }
.ab-folha--topo { right: 8vw; top: -12vh; width: 40vw; height: 34vh; filter: blur(5px); opacity: .55; }
.ab-folha--esq svg, .ab-folha--dir svg { animation: balanco 7s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.ab-folha--dir svg { animation-duration: 9s; animation-delay: -3s; }
@keyframes balanco {
  from { transform: rotate(-1.4deg); }
  to { transform: rotate(1.6deg); }
}

/* Conteúdo */
.ab-conteudo {
  position: absolute;
  left: var(--margem);
  bottom: clamp(56px, 11vh, 130px);
  width: min(58vw, 880px);
  z-index: 3;
}
.ab-marca {
  --seiva: 0;
  position: relative;
  width: clamp(104px, 10.5vw, 178px);
  margin-bottom: clamp(18px, 3vh, 36px);
}
.ab-marca img {
  width: 100%; height: auto;
  /* revelação "seiva": a máscara sobe das raízes ao globo */
  -webkit-mask-image: linear-gradient(to top, #000 calc(var(--seiva) * 1% - 14%), transparent calc(var(--seiva) * 1%));
          mask-image: linear-gradient(to top, #000 calc(var(--seiva) * 1% - 14%), transparent calc(var(--seiva) * 1%));
  filter: drop-shadow(0 0 var(--brilho, 0px) rgba(242, 200, 138, .75));
}
html.reduzido .ab-marca, html:not(.anim) .ab-marca { --seiva: 120; }
.ab-marca-brilho {
  position: absolute; left: 50%; top: calc(100% - var(--seiva) * 1%);
  width: 70%; height: 2px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--ouro-reflexo), transparent);
  filter: blur(2px);
  opacity: var(--brilho-linha, 0);
}

.ab-sobre {
  margin: 0 0 1.4em;
  font-size: 11px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase;
  color: var(--ouro-reflexo);
}
.ab-titulo {
  font-size: clamp(36px, 5vw, 92px);
  text-shadow: 0 2px 40px rgba(5, 13, 8, .35);
  --soft: 0;
  text-wrap: balance;
}
.ab-titulo em { color: var(--ouro-reflexo); }
.ab-titulo .palavra { white-space: nowrap; }
@media (min-width: 861px) {
  .ab-conteudo { width: auto; right: calc(var(--margem) + 90px); }
  .ab-titulo .l { display: block; white-space: nowrap; }
}
.ab-cta { margin-top: clamp(24px, 4vh, 44px); }

/* Convite para rolar — em destaque: texto, linha com gota de luz e seta que pulsa para baixo */
.ab-s-rolar { position: absolute; right: calc(var(--margem) + 56px); bottom: clamp(28px, 4.5vh, 48px); z-index: 3; }
.ab-rolar {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font: 800 21px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase;
  color: var(--bege);
  text-shadow: 0 1px 2px rgba(5, 13, 8, .8), 0 0 18px rgba(5, 13, 8, .7);
}
.ab-rolar::before {
  /* halo escuro suave atrás do conjunto, para contraste sobre o pôr do sol */
  content: ''; position: absolute; inset: -34px -42px; z-index: -1;
  background: radial-gradient(closest-side, rgba(5, 13, 8, .55), transparent);
  pointer-events: none;
}
.ab-rolar span { padding-left: .34em; } /* compensa o espaçamento da última letra, centralizando */
html.anim .ab-rolar { opacity: 0; }
.ab-rolar i {
  width: 2px; height: 70px; border-radius: 2px;
  background: linear-gradient(rgba(242, 200, 138, .45), var(--ouro));
  position: relative; overflow: hidden;
}
.ab-rolar i::after {
  content: ''; position: absolute; left: 0; top: -40%; width: 2px; height: 40%;
  background: var(--ouro-reflexo);
  box-shadow: 0 0 10px 2px rgba(242, 200, 138, .8);
  animation: gota 1.8s var(--ease-org) infinite;
}
/* seta dentro de um anel dourado que pulsa — leitura imediata de "role para baixo" */
.ab-rolar-seta {
  box-sizing: content-box;
  width: 34px; height: 34px; padding: 15px;
  border: 2px solid var(--ouro);
  border-radius: 50%;
  background: rgba(5, 13, 8, .35);
  fill: none; stroke: var(--ouro-reflexo); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  box-shadow: 0 0 0 0 rgba(242, 200, 138, .55);
  animation: seta-rolar 1.8s var(--ease-org) infinite, anel-rolar 1.8s ease-out infinite;
}
@keyframes gota { to { top: 110%; } }
@keyframes seta-rolar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}
@keyframes anel-rolar {
  0% { box-shadow: 0 0 0 0 rgba(242, 200, 138, .55); }
  100% { box-shadow: 0 0 0 18px rgba(242, 200, 138, 0); }
}

/* Portal que se abre do sol */
.ab-portal {
  position: absolute; inset: 0; z-index: 5;
  background: var(--bege);
  clip-path: circle(0px at var(--sol-x) var(--sol-y));
  pointer-events: none;
}
.ab-anel {
  position: absolute; z-index: 6;
  left: var(--sol-x); top: var(--sol-y);
  width: 0; height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(242, 200, 138, .9), 0 0 40px 8px rgba(242, 200, 138, .45), inset 0 0 30px 6px rgba(242, 200, 138, .35);
  opacity: 0;
  pointer-events: none;
}

/* Estados iniciais (somente com JS + movimento) */
html.anim .ab-sobre, html.anim .ab-cta { opacity: 0; }
html.anim .ab-titulo { visibility: hidden; }

/* Letras soltas criadas pelo SplitText */
.ab-titulo .letra { display: inline-block; will-change: transform; }

@media (max-width: 860px) {
  .abertura { --foco: 58% 50%; }
  .ab-conteudo { left: 20px; right: 20px; width: auto; bottom: 64px; }
  .ab-veu {
    background:
      linear-gradient(0deg, rgba(5, 13, 8, .9) 0%, rgba(5, 13, 8, .55) 45%, rgba(5, 13, 8, 0) 75%),
      radial-gradient(ellipse at 50% 40%, transparent 50%, rgba(5, 13, 8, .5) 100%);
  }
  .ab-marca { width: 92px; }
  .ab-titulo { font-size: clamp(30px, 9vw, 52px); }
  .ab-s-rolar { right: 14px; bottom: 54px; }
  .ab-rolar { font-size: 14px; gap: 9px; }
  .ab-rolar i { height: 30px; }
  .ab-rolar-seta { width: 22px; height: 22px; padding: 10px; }
  .ab-folha--esq { width: 60vw; height: 46vh; left: -18vw; }
  .ab-folha--dir { width: 54vw; height: 40vh; right: -20vw; }
  .ab-folha--topo { display: none; }
}