/* Abertura: a grade aparece, o símbolo 3D sobe girando e fica flutuando, o título revela palavra por palavra
   por máscara, e o resto entra em cascata. As entradas só rodam na primeira vez que a tela aparece. */
.inicio { display: grid; gap: var(--e8); padding-top: var(--e5); }

.inicio-heroi { display: grid; gap: var(--e5); }

.inicio-simbolo {
  --px: 0px;
  --py: 0px;
  position: relative;
  order: -1;
  justify-self: center;
  width: min(52vw, 13.5rem);
  margin-bottom: var(--e3);
  transform: translate3d(var(--px), var(--py), 0);
}
.inicio-simbolo-flutua { animation: flutua 6s ease-in-out 1.5s infinite; }
.inicio-simbolo-img { width: 100%; height: auto; }

/* Sombra de contato: a única coisa "atrás" do símbolo, e é chão, não aura */
.inicio-chao {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -1.1rem;
  height: 1rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(66, 66, 60, .2), rgba(66, 66, 60, 0));
  animation: chao 6s ease-in-out 1.5s infinite;
}
@keyframes chao {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(.88); opacity: .72; }
}

.inicio-texto { display: grid; gap: var(--e4); align-content: start; }
.titulo-abertura { font-size: var(--t-abertura); line-height: .98; }
.inicio-texto .lead { font-size: 1.125rem; }

.palavra {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .12em .04em .16em;
  margin: -.12em -.04em -.16em;
}
.palavra-interna { display: inline-block; }

.inicio-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e5); margin-top: var(--e2); }
.inicio-acoes .btn { width: 100%; }

.assinatura { display: flex; align-items: center; gap: var(--e3); margin-top: var(--e2); font-size: var(--t-apoio); color: var(--grafite-claro); text-wrap: balance; }
.sem-quebra { white-space: nowrap; }
.retrato {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--papel), 0 0 0 3.5px var(--terracota);
  margin: 4px;
}

.inicio-passos { display: grid; gap: 0; }
.inicio-passos li {
  display: grid;
  align-content: start;
  gap: .125rem;
  padding: var(--e4) 0;
  border-top: 1px solid var(--fio);
}
.inicio-passos li:last-child { border-bottom: 1px solid var(--fio); }
.inicio-passo-nome { color: var(--grafite); }
.inicio-passo-linha { font-size: var(--t-ui); color: var(--grafite-claro); }

/* Entradas: só na primeira exibição (a classe sai depois) */
.entrada-inicial .inicio-simbolo-img { animation: sobe-gira 1300ms var(--ease) 180ms backwards; }
.entrada-inicial .palavra-interna { animation: revela-palavra 900ms var(--ease) calc(420ms + var(--i, 0) * 80ms) backwards; }
.entrada-inicial .cascata { animation: cascata 800ms var(--ease) calc(900ms + var(--c, 0) * 110ms) backwards; }
.entrada-inicial .inicio-chao { animation: chao-entra 1300ms var(--ease) 180ms backwards, chao 6s ease-in-out 1.5s infinite; }
@keyframes chao-entra { from { opacity: 0; transform: scaleX(.3); } }

body.entrada-grade::before { animation: grade-aparece 1100ms var(--ease) backwards; }

@media (min-width: 30em) {
  .inicio-acoes .btn { width: auto; }
}

@media (min-width: 67.5em) {
  .inicio { gap: var(--e9); padding-top: var(--e7); }
  .inicio-heroi {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    align-items: center;
    gap: var(--e8);
    min-height: min(34rem, calc(100dvh - var(--alto-topo) - 9rem));
  }
  .inicio-simbolo { order: 2; width: min(100%, 29rem); justify-self: center; }
  .inicio-texto { order: 1; gap: var(--e5); }
  .inicio-passos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e5); }
  .inicio-passos li { padding: var(--e4) 0 0; border-bottom: 0 !important; }
}