/* Oito Solucoes — movimento da home (01/11/2026): barra de leitura, rede viva e aurora no heroi,
   titulo subindo linha a linha, blocos revelados ao rolar, holofote nos cartoes e aurora na secao do Octo.
   So a index.html carrega este arquivo; depende dos tokens de oito.css. Nada aqui muda texto. */

/* barra de leitura */
.progresso { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 60; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* heroi: rede viva + aurora no lugar das duas manchas fixas */
.heroi-vivo { isolation: isolate; }
.heroi-vivo::before, .heroi-vivo::after { display: none; }
.heroi-vivo > .container { z-index: 2; }
.rede { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .9; }
.aurora { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .42; animation: deriva 22s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 560px; height: 560px; background: var(--azul); top: -200px; left: -160px; }
.aurora i:nth-child(2) { width: 460px; height: 460px; background: var(--ciano); top: 30%; right: -160px; opacity: .24; animation-duration: 28s; animation-delay: -6s; }
.aurora i:nth-child(3) { width: 440px; height: 440px; background: #00e08a; bottom: -240px; left: 30%; opacity: .24; animation-duration: 34s; animation-delay: -12s; }
@keyframes deriva { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, 40px) scale(1.12); } 100% { transform: translate(-40px, 70px) scale(.94); } }

/* titulo sobe linha a linha; o degrade ganha brilho que corre */
.heroi-vivo h1 .linha { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.04em; }
.heroi-vivo h1 .linha > span { display: inline-block; transform: translateY(110%); animation: sobe .9s cubic-bezier(.2, .8, .2, 1) .1s forwards; }
.heroi-vivo h1 .linha:nth-child(2) > span { animation-delay: .24s; }
.heroi-vivo h1 .linha > span.degrade { background-size: 220% 100%; animation: sobe .9s cubic-bezier(.2, .8, .2, 1) .24s forwards, brilho 7s ease-in-out 1.2s infinite alternate; }
@keyframes sobe { to { transform: none; } }
@keyframes brilho { from { background-position: 0 50%; } to { background-position: 100% 50%; } }
.heroi-vivo .selo { opacity: 0; animation: aparece .8s ease forwards; }
.heroi-vivo .lide { opacity: 0; animation: aparece 1s ease .55s forwards; }
.heroi-vivo .acoes { opacity: 0; animation: aparece 1s ease .75s forwards; }
.heroi-vivo .heroi-notas { opacity: 0; animation: aparece 1s ease .95s forwards; }
.heroi-vivo .octo { opacity: 0; animation: chega 1.2s cubic-bezier(.2, .8, .2, 1) .45s forwards; }
@keyframes aparece { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes chega { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
/* na primeira visita a abertura cobre a tela por 2,6 s: a entrada do heroi espera por ela */
.com-abertura .heroi-vivo .selo { animation-delay: 2.3s; }
.com-abertura .heroi-vivo h1 .linha > span { animation-delay: 2.4s; }
.com-abertura .heroi-vivo h1 .linha:nth-child(2) > span { animation-delay: 2.54s; }
.com-abertura .heroi-vivo h1 .linha > span.degrade { animation-delay: 2.54s, 3.5s; }
.com-abertura .heroi-vivo .lide { animation-delay: 2.85s; }
.com-abertura .heroi-vivo .acoes { animation-delay: 3.05s; }
.com-abertura .heroi-vivo .heroi-notas { animation-delay: 3.25s; }
.com-abertura .heroi-vivo .octo { animation-delay: 2.75s; }

/* revelar ao rolar: entrada por animacao (oito.js poe .visivel), deixando a transicao livre para o hover */
.surge { opacity: 0; transform: none; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background-color .3s ease; }
.surge.visivel { opacity: 1; animation: revela .8s cubic-bezier(.2, .8, .2, 1) var(--atraso, 0s) backwards; }
@keyframes revela { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.grade > .surge:nth-child(2) { --atraso: .08s; }
.grade > .surge:nth-child(3) { --atraso: .16s; }
.grade > .surge:nth-child(4) { --atraso: .24s; }
.grade > .surge:nth-child(5) { --atraso: .32s; }
.grade > .surge:nth-child(6) { --atraso: .4s; }
.grade > .surge:nth-child(7) { --atraso: .48s; }
.grade > .surge:nth-child(8) { --atraso: .56s; }

/* holofote que segue o cursor (--mx/--my vem do oito.js) e leve elevacao */
.cartao, .caso, .papel, .passo { position: relative; overflow: hidden; }
.cartao::after, .caso::after, .papel::after, .passo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, -200px), rgba(0, 194, 224, .14), transparent 60%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.papel::after { background: radial-gradient(300px circle at var(--mx, 50%) var(--my, -200px), rgba(61, 255, 168, .14), transparent 60%); }
.caso-convite::after { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, -200px), rgba(255, 255, 255, .22), transparent 60%); }
.cartao:hover::after, .caso:hover::after, .papel:hover::after, .passo:hover::after { opacity: 1; }
.cartao > *, .caso > *, .papel > *, .passo > * { position: relative; z-index: 1; }
.caso:hover { transform: translateY(-5px); box-shadow: var(--sombra); border-color: #c4d6e3; }
.caso-convite:hover { border-color: transparent; }
.papel:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(0, 194, 224, .6); }
.cartao:hover { border-color: #c4d6e3; }
.icone { transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.cartao:hover .icone { transform: scale(1.08) rotate(-4deg); }
/* como funciona: o passo vira cartao ao passar o mouse */
.passo { padding: 22px 20px; border-radius: var(--raio); border: 1px solid transparent; }
.passo:hover { transform: translateY(-4px); background: #fff; border-color: var(--linha); box-shadow: var(--sombra); }
.passo::before { position: relative; z-index: 1; transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), box-shadow .35s ease; }
.passo:hover::before { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(0, 194, 224, .14); }

/* secao do Octo: a mancha fixa passa a derivar e ganha uma segunda, verde */
#octo::before { animation: deriva 26s ease-in-out infinite alternate; }
#octo::after { content: ''; position: absolute; width: 440px; height: 440px; bottom: -220px; left: -120px; border-radius: 50%; background: #00e08a; opacity: .18; filter: blur(90px); pointer-events: none; animation: deriva 32s ease-in-out -10s infinite alternate-reverse; }
#octo .faixa { background-size: 160% 100%; animation: brilho 9s ease-in-out infinite alternate; }
/* polvo grande flutuando como marca-d'agua, atras do texto (o .container tem z-index 1) */
#octo .polvo-fundo { position: absolute; z-index: 0; width: 600px; height: 454px; top: 50%; right: -150px; margin-top: -227px; opacity: .08; pointer-events: none; animation: flutua-polvo 12s ease-in-out infinite; }
@keyframes flutua-polvo {
    0%, 100% { transform: translate(0, 0) rotate(-3deg); }
    50% { transform: translate(-14px, -22px) rotate(3deg); }
}

@media (max-width: 600px) {
    .aurora i:nth-child(1) { width: 340px; height: 340px; }
    .aurora i:nth-child(2), .aurora i:nth-child(3) { width: 280px; height: 280px; }
    #octo::after { width: 300px; height: 300px; }
    #octo .polvo-fundo { width: 340px; height: 257px; right: -110px; margin-top: -128px; }
}
@media (hover: none) {
    .cartao::after, .caso::after, .papel::after, .passo::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    /* !important: as regras de entrada acima tem seletores mais especificos (linha 2, abertura) */
    .aurora i, #octo::before, #octo::after, #octo .faixa, #octo .polvo-fundo { animation: none; }
    .heroi-vivo h1 .linha > span, .heroi-vivo .selo, .heroi-vivo .lide, .heroi-vivo .acoes, .heroi-vivo .heroi-notas, .heroi-vivo .octo { animation: none !important; transform: none !important; opacity: 1 !important; }
    .surge, .surge.visivel { opacity: 1; animation: none; transform: none; }
    .caso:hover, .papel:hover, .passo:hover, .cartao:hover, .cartao:hover .icone, .passo:hover::before { transform: none; }
}