/* Octo — home da essência (01/11/2026): o Octo potencializa as habilidades intelectuais humanas.
   Arte e movimento da home: rede viva no herói, aurora, polvo com braços em órbita, equação da essência,
   bagagem, holofote nos cartões e barra de leitura. Só a home carrega este arquivo; depende dos tokens de octo.css. */

/* 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; }

/* herói */
.heroi-essencia { isolation: isolate; }
.heroi-essencia > .wrap, .heroi-essencia > .faixa { position: relative; 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: .38; animation: deriva 22s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 560px; height: 560px; background: #1463ff; top: -220px; left: -140px; }
.aurora i:nth-child(2) { width: 460px; height: 460px; background: #00c2e0; top: 30%; right: -160px; opacity: .26; animation-duration: 28s; animation-delay: -6s; }
.aurora i:nth-child(3) { width: 420px; height: 420px; background: #00e08a; bottom: -220px; left: 30%; opacity: .2; 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); } }

.heroi-essencia h1 { max-width: 15ch; font-size: clamp(2.5rem, 6vw, 5.8rem); }
.heroi-essencia h1 .linha { display: block; overflow: hidden; padding-bottom: .06em; }
.heroi-essencia h1 .linha > span { display: inline-block; transform: translateY(105%); animation: sobe .9s cubic-bezier(.2, .8, .2, 1) forwards; }
.heroi-essencia h1 .linha:nth-child(2) > span { animation-delay: .12s; }
.heroi-essencia h1 .linha:nth-child(3) > span { animation-delay: .24s; }
.heroi-essencia .degrade { background-size: 220% 100%; animation: brilho 7s ease-in-out infinite alternate; }
@keyframes sobe { to { transform: none; } }
@keyframes brilho { from { background-position: 0 50%; } to { background-position: 100% 50%; } }
.heroi-essencia .limite { margin-top: 26px; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.15rem, 1.9vw, 1.7rem); color: #fff; max-width: 30ch; line-height: 1.25; opacity: 0; animation: aparece 1s .55s ease forwards; }
.heroi-essencia .lide { margin-top: 20px; opacity: 0; animation: aparece 1s .75s ease forwards; }
.heroi-essencia .acoes { opacity: 0; animation: aparece 1s .95s ease forwards; }
@keyframes aparece { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* polvo: os oito braços giram devagar em volta da cabeça, sempre de pé */
@property --giro { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.heroi-essencia .octo { animation: orbita 80s linear infinite; }
.heroi-essencia .octo-braco { transform: translate(-50%, -50%) rotate(calc(var(--i) * 45deg + var(--giro))) translateY(calc(var(--r) * -1)) rotate(calc(var(--i) * -45deg - var(--giro))); }
@keyframes orbita { to { --giro: 360deg; } }
.octo-pulso { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%; border: 1.5px solid rgba(0, 224, 138, .55); animation: onda 4.5s ease-out infinite; pointer-events: none; }
.octo-pulso + .octo-pulso { animation-delay: 1.5s; }
.octo-pulso + .octo-pulso + .octo-pulso { animation-delay: 3s; }
@keyframes onda { from { transform: scale(1); opacity: .8; } to { transform: scale(2.6); opacity: 0; } }
.heroi-essencia .octo-cabeca { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .16), 0 0 0 16px rgba(255, 255, 255, .05), 0 0 140px rgba(0, 224, 138, .5), 0 0 60px rgba(20, 99, 255, .45); }

/* essência: a equação */
.essencia { overflow: hidden; }
.equacao { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.2fr); align-items: stretch; gap: clamp(12px, 2vw, 28px); margin-bottom: clamp(56px, 7vw, 100px); }
.termo { position: relative; border: 1px solid var(--linha); border-radius: 22px; padding: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 32px); background: #fff; display: flex; flex-direction: column; justify-content: flex-end; min-height: 250px; overflow: hidden; }
.termo .mono { color: var(--azul); margin-bottom: auto; }
.termo b { font-family: var(--display); font-weight: 800; letter-spacing: -.04em; font-size: clamp(1.7rem, 2.8vw, 2.6rem); line-height: 1; color: var(--tinta); margin-top: 22px; }
.termo small { margin-top: 10px; color: var(--cinza); font-size: .93rem; }
.termo-voce .semente { width: 46px; height: 46px; border-radius: 50%; background: var(--tinta); box-shadow: 0 0 0 10px rgba(6, 10, 16, .06); margin-top: 18px; animation: respira 4s ease-in-out infinite; }
.termo-octo { background: var(--tinta); border-color: var(--tinta); }
.termo-octo b { color: #fff; }
.termo-octo small { color: var(--neblina); }
.termo-octo .mono { color: var(--verde-vivo); }
.termo-octo svg { width: 92px; height: 70px; margin-top: 14px; filter: drop-shadow(0 0 24px rgba(0, 224, 138, .5)); animation: flutua 5s ease-in-out infinite; }
.termo-limite { background: radial-gradient(circle at 70% 30%, rgba(0, 194, 224, .16), transparent 60%), var(--gelo); border-color: transparent; }
.termo-limite b { background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ondas { position: absolute; right: 18%; top: 34%; width: 10px; height: 10px; }
.ondas i { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 2px solid var(--ciano); animation: onda-grande 3.6s ease-out infinite; }
.ondas i:nth-child(2) { animation-delay: 1.2s; border-color: var(--azul); }
.ondas i:nth-child(3) { animation-delay: 2.4s; border-color: #00e08a; }
@keyframes onda-grande { from { transform: scale(.4); opacity: 1; } to { transform: scale(5); opacity: 0; } }
@keyframes respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.op { align-self: center; font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 3.4vw, 3.4rem); color: var(--azul); line-height: 1; animation: respira 3s ease-in-out infinite; }

/* essência: os três pilares */
.pilares { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.pilar { border-top: 2px solid var(--tinta); padding-top: 22px; }
.pilar .icone { width: 56px; height: 56px; border-radius: 16px; background: var(--tinta); display: grid; place-items: center; margin-bottom: 22px; }
.pilar .icone svg { width: 30px; height: 30px; fill: none; stroke: url(#oito-g); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pilar .icone svg .traco { stroke-dasharray: 80; stroke-dashoffset: 80; }
.pilar.visto .icone svg .traco { animation: traca 1.6s .3s ease forwards; }
@keyframes traca { to { stroke-dashoffset: 0; } }
.pilar h3 { font-size: clamp(1.3rem, 1.9vw, 1.75rem); margin-bottom: 10px; }
.pilar p { color: var(--cinza); font-size: .98rem; }

/* essência: o ciclo pergunta, prepara, assina */
.essencia-ciclo { margin-top: clamp(56px, 7vw, 100px); padding-top: 28px; border-top: 1px solid var(--linha); }
.essencia-ciclo-frase { margin: 0 0 clamp(32px, 4vw, 52px); font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-size: clamp(1.6rem, 3.4vw, 3.2rem); line-height: 1.08; color: var(--tinta); max-width: 22ch; }
.essencia-ciclo-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); }
.essencia-ciclo-passos li { position: relative; border: 1px solid var(--linha); border-radius: var(--raio); padding: 26px 24px; background: #fff; color: var(--cinza); font-size: .95rem; }
.essencia-ciclo-passos li:nth-child(2) { background: var(--tinta); border-color: var(--tinta); color: var(--neblina); }
.essencia-ciclo-passos li:nth-child(2) b { color: #fff; }
.essencia-ciclo-passos li:nth-child(2) .mono { color: var(--verde-vivo); }
.essencia-ciclo-passos .mono { display: block; color: var(--azul); margin-bottom: 18px; }
.essencia-ciclo-passos b { display: block; color: var(--tinta); font-family: var(--display); font-size: 1.3rem; letter-spacing: -.02em; margin-bottom: 8px; }
.essencia-ciclo-passos li + li::before { content: '→'; position: absolute; left: calc(-1 * clamp(28px, 3vw, 48px)); width: clamp(28px, 3vw, 48px); top: 50%; transform: translateY(-50%); text-align: center; font-family: var(--display); font-weight: 800; font-size: 1.4rem; color: var(--azul); }
.essencia-ciclo-nota { margin: 26px 0 0; color: var(--cinza); font-size: .98rem; font-style: italic; }

/* bagagem */
.bagagem { overflow: hidden; }
.bagagem-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.marca-bagagem { position: relative; font-family: var(--display); font-weight: 800; letter-spacing: -.06em; line-height: 1.15; font-size: clamp(3.6rem, 9vw, 8.4rem); color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .22); user-select: none; }
.marca-bagagem span { position: absolute; inset: 0; background: var(--grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; clip-path: inset(100% 0 0 0); transition: clip-path 1.8s cubic-bezier(.2, .8, .2, 1); animation: brilho 6s ease-in-out infinite alternate; }
.marca-bagagem.visto span { clip-path: inset(0 0 0 0); }
.marca-legenda { margin-top: 18px; color: var(--neblina); font-size: .98rem; max-width: 38ch; }
.bagagem .lide { color: #b9c6dc; font-size: clamp(1.05rem, 1.3vw, 1.22rem); margin-top: 22px; max-width: 48ch; }
.bagagem-itens { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.bagagem-itens li { position: relative; background: rgba(255, 255, 255, .04); border: 1px solid var(--linha-escura); border-radius: var(--raio); padding: 26px 24px; color: var(--neblina); font-size: .95rem; overflow: hidden; }
.bagagem-itens li::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s .2s ease; }
.bagagem-itens li.visto::before { transform: scaleX(1); }
.bagagem-itens b { display: block; color: #fff; font-family: var(--display); font-size: 1.2rem; letter-spacing: -.02em; margin-bottom: 8px; }
.manifesto { margin-top: clamp(56px, 7vw, 100px); padding-top: 28px; border-top: 1px solid var(--linha-escura); font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-size: clamp(1.6rem, 3.4vw, 3.2rem); line-height: 1.08; color: #fff; max-width: 26ch; }

/* aplicações logo depois da bagagem: fundo um tom acima para as duas seções escuras não se fundirem */
.bagagem + #areas { background: radial-gradient(900px 400px at 85% 0%, rgba(20, 99, 255, .14), transparent 70%), #0a111b; border-top: 1px solid var(--linha-escura); }

/* aplicações: holofote que segue o cursor nos cartões */
.areas .area { position: relative; overflow: hidden; }
.areas .area::before { content: ''; position: absolute; inset: 0; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, -200px), rgba(0, 194, 224, .16), transparent 60%); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.areas .area:hover::before { opacity: 1; }
.areas .area > * { position: relative; }

/* oito braços: o mesmo Octo em qualquer tela (aplicativo, terminal, editor), ligado ao mesmo polvo */
.mesmo-octo { margin-top: clamp(56px, 7vw, 100px); padding-top: 28px; border-top: 1px solid var(--linha-escura); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(32px, 4vw, 56px); align-items: center; }
.mesmo-octo-texto { grid-column: span 5; }
.mesmo-octo-texto .mono { color: var(--neblina); }
.mesmo-octo-texto h3 { font-size: clamp(1.6rem, 2.8vw, 2.6rem); line-height: 1.08; margin: 16px 0 18px; }
.mesmo-octo-texto p { color: var(--neblina); }
.mesmo-octo-itens { list-style: none; margin: 24px 0 0; padding: 0; }
.mesmo-octo-itens li { padding: 12px 0 12px 22px; border-top: 1px solid var(--linha-escura); color: var(--neblina); font-size: .95rem; position: relative; }
.mesmo-octo-itens li::before { content: ''; position: absolute; left: 0; top: 1.15em; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.mesmo-octo-itens b { color: #fff; font-weight: 600; }
.mesmo-octo-arte { grid-column: 7 / span 6; min-width: 0; }
.mesmo-octo-svg { width: 100%; height: auto; overflow: visible; }
.mesmo-octo-alto { display: none; max-width: 360px; margin: 0 auto; }
.mo-moldura { fill: var(--carvao); stroke: var(--linha-escura); stroke-width: 1.2; }
.mo-terminal { fill: #03060a; }
.mo-ponto { fill: rgba(255, 255, 255, .22); }
.mo-lateral { fill: rgba(255, 255, 255, .04); }
.mo-arq { fill: rgba(255, 255, 255, .16); }
.mo-cod-a { fill: #2f7bff; opacity: .8; }
.mo-cod-b { fill: #00c2e0; opacity: .7; }
.mo-cod-c { fill: rgba(255, 255, 255, .2); }
.mo-balao { fill: rgba(255, 255, 255, .12); }
.mo-balao-octo { fill: url(#oito-g); opacity: .85; }
.mo-prompt { fill: none; stroke: var(--verde-vivo); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mo-cursor { fill: var(--verde-vivo); animation: pisca 1.1s steps(1) infinite; }
.mo-fio-base { fill: none; stroke: url(#oito-g); stroke-width: 1.4; opacity: .22; }
.mo-fio { fill: none; stroke: url(#oito-g); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 6 9; animation: corre 1.6s linear infinite; }
.mo-polvo { filter: drop-shadow(0 0 24px rgba(0, 224, 138, .5)); animation: flutua 5s ease-in-out infinite; }
@keyframes pisca { 50% { opacity: 0; } }
@keyframes corre { to { stroke-dashoffset: -30; } }
.mesmo-octo-selos { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mesmo-octo-selos li { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; border: 1px solid var(--linha-escura); border-radius: 999px; padding: 7px 14px 7px 12px; display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .03); }
.mesmo-octo-selos li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); }
.mesmo-octo-frase { grid-column: 1 / -1; margin: 0; padding-top: 28px; border-top: 1px solid var(--linha-escura); font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-size: clamp(1.4rem, 2.6vw, 2.4rem); line-height: 1.1; color: #fff; max-width: 34ch; }

/* responsivo */
@media (max-width: 1100px) {
    .equacao { grid-template-columns: 1fr; }
    .op { justify-self: center; }
    .termo { min-height: 0; }
    .pilares, .bagagem-itens, .essencia-ciclo-passos { grid-template-columns: 1fr; }
    .essencia-ciclo-passos li + li::before { content: '↓'; left: 50%; top: auto; bottom: 100%; width: auto; transform: translateX(-50%); line-height: clamp(28px, 3vw, 48px); }
    .bagagem-grade { grid-template-columns: 1fr; }
    .mesmo-octo-texto, .mesmo-octo-arte { grid-column: 1 / -1; }
    .mesmo-octo-arte { max-width: 680px; }
}
@media (max-width: 600px) {
    .cab .num, .cab h2, .cab p { grid-column: 1 / -1; }
    .cab .num { margin-bottom: 14px; }
    .aurora i:nth-child(1) { width: 340px; height: 340px; }
    .aurora i:nth-child(2), .aurora i:nth-child(3) { width: 280px; height: 280px; }
    .octo-pulso { width: 100px; height: 100px; margin: -50px 0 0 -50px; }
    .mesmo-octo-largo { display: none; }
    .mesmo-octo-alto { display: block; }
}
@media (max-width: 900px) and (min-width: 601px) {
    .octo-pulso { width: 124px; height: 124px; margin: -62px 0 0 -62px; }
}
@media (prefers-reduced-motion: reduce) {
    .aurora i, .heroi-essencia .octo, .octo-pulso, .ondas i, .op, .termo-voce .semente, .termo-octo svg, .heroi-essencia .degrade, .marca-bagagem span { animation: none; }
    .heroi-essencia h1 .linha > span, .heroi-essencia .limite, .heroi-essencia .lide, .heroi-essencia .acoes { animation: none; transform: none; opacity: 1; }
    .pilar .icone svg .traco { stroke-dashoffset: 0; animation: none; }
    .marca-bagagem span { clip-path: none; transition: none; }
    .bagagem-itens li::before { transform: none; transition: none; }
    .octo-pulso { display: none; }
    .mo-cursor, .mo-fio, .mo-polvo { animation: none; }
}