/* Fundo vivo e efeitos, a partir da amostra versão B.
   A linha do tempo da abertura é só CSS (classe "abrindo" posta pelo script do <head>),
   para a tela nunca ficar coberta se o JavaScript principal falhar. */

/* ---------- fundo vivo ---------- */
.fundo-vivo::before,
.fundo-vivo::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.fundo-vivo::before {
  inset: -20%;
  background:
    radial-gradient(40% 45% at 72% 38%, rgba(169, 184, 174, .38), transparent 70%),
    radial-gradient(35% 40% at 25% 70%, rgba(201, 194, 176, .22), transparent 70%),
    radial-gradient(60% 60% at 50% 110%, rgba(21, 21, 21, .55), transparent 70%),
    var(--verde);
  animation: desliza 18s cubic-bezier(.45, 0, .2, 1) infinite alternate;
}
.fundo-vivo::after {
  inset: 0; opacity: .14; mix-blend-mode: overlay;
  background-image: url("../img/granulado.svg");
}
@keyframes desliza {
  0%   { transform: translate3d(-8%, 0, 0) scale(1.08); }
  50%  { transform: translate3d(3%, -2%, 0) scale(1.15); }
  100% { transform: translate3d(9%, 1%, 0) scale(1.1); }
}

/* ---------- abertura ---------- */
.abertura { display: none; }
.abrindo .abertura {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center;
  background: var(--verde);
  pointer-events: none;
  animation: some .5s var(--suave) 1s both;
}
.abertura img { width: 56px; height: auto; }
.abrindo .abertura img { animation: logo-entra .7s var(--suave) .15s both; }
.aberto .abertura { display: none; }

@keyframes logo-entra {
  from { opacity: 0; transform: translateY(12px) scale(.96); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes some { to { opacity: 0; visibility: hidden; } }

/* primeira tela: a tela se afasta e o título sobe linha por linha */
.abrindo .primeira-tela .conteudo { animation: afasta 2.2s var(--suave) 1s both; }
@keyframes afasta { from { transform: scale(1.08); } to { transform: none; } }

[data-i="0"] { --i: 0; }
[data-i="1"] { --i: 1; }
[data-i="2"] { --i: 2; }
[data-i="3"] { --i: 3; }
[data-i="4"] { --i: 4; }
[data-i="5"] { --i: 5; }
[data-i="6"] { --i: 6; }
.abrindo .entra { animation: sobe .9s var(--suave) both; animation-delay: calc(1.35s + var(--i) * .12s); }
@keyframes sobe { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }

/* ---------- aparece ao rolar ---------- */
.js [data-revela] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s var(--suave), transform .8s var(--suave);
}
.js [data-revela].visivel { opacity: 1; transform: none; }
.js .cartoes > :nth-child(2),
.js .colunas > :nth-child(2),
.js .lista-incluso > :nth-child(2) { transition-delay: .08s; }
.js .cartoes > :nth-child(3),
.js .lista-incluso > :nth-child(3) { transition-delay: .16s; }
.js .cartoes > :nth-child(4),
.js .lista-incluso > :nth-child(4) { transition-delay: .24s; }
.js .cartoes > :nth-child(5) { transition-delay: .32s; }

/* ---------- grifo na palavra de destaque ---------- */
.destaque { transition: color .6s var(--suave); }
.destaque::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .07em;
  background: var(--pedra); transform: scaleX(0); transform-origin: left;
}
.fundo-vivo .destaque.grifado { color: var(--pedra); }
.destaque.grifado::after { animation: risca .9s var(--suave) .2s both; }
.abrindo .primeira-tela .destaque.grifado { transition-delay: 2.4s; }
.abrindo .primeira-tela .destaque.grifado::after { animation-delay: 2.4s; }
@keyframes risca { to { transform: scaleX(1); } }

/* ---------- pulso do botão principal ---------- */
.pulso::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor;
  animation: pulsa 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes pulsa { 75%, 100% { transform: scale(2.6); opacity: 0; } }

/* ---------- os 5 lugares ---------- */
.js .lugares li {
  opacity: .4;
  transition: opacity .6s var(--suave), border-color .6s var(--suave);
}
.js .lugares li.aceso { opacity: 1; border-top-color: var(--pedra); }

/* ---------- etapas ---------- */
.js [role="tabpanel"]:not([hidden]) { animation: troca .4s var(--suave) both; }
@keyframes troca { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- reduzir movimento: tudo parado e visível ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important;
    animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important;
  }
  .fundo-vivo::before { animation: none !important; }
  .abrindo .abertura { display: none; }
  .js [data-revela] { opacity: 1; transform: none; }
  .js .lugares li { opacity: 1; }
  .destaque::after { transform: scaleX(1); animation: none !important; }
}