/* =========================================================
   Jhow Dev — camada de efeitos e animações
   Para desligar tudo: tire as linhas de effects.css e effects.js do index.html.
   Respeita "reduzir movimento" do sistema (no fim do arquivo).
   ========================================================= */

/* ---------- Loader de entrada ---------- */
.loader {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: #05080f; color: #fff;
  transition: opacity .6s ease, visibility .6s;
  animation: loader-failsafe .6s ease 3s forwards; /* se o JS falhar, some sozinho */
}
.loader.saiu { opacity: 0; visibility: hidden; }
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }
.loader-miolo { display: grid; justify-items: center; gap: 18px; }
.loader-anel {
  position: relative; width: 88px; height: 88px; border-radius: 50%; padding: 4px;
  background: conic-gradient(from 0deg, #1e90ff, #00d4ff, transparent 70%);
  animation: girar 1s linear infinite;
}
.loader-anel img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #05080f; animation: girar 1s linear infinite reverse; }
.loader-nome { font-family: var(--fonte-titulo); font-style: italic; font-weight: 800; font-size: 1.6rem; letter-spacing: .5px; }
.loader-nome em { color: #1e90ff; font-style: inherit; }
.loader-barra { width: 160px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.loader-barra i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, #1e90ff, #00d4ff); animation: barra 1s ease-in-out infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes barra { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* ---------- Barra de progresso de leitura ---------- */
.progresso {
  position: fixed; top: 0; left: 0; z-index: 60; height: 3px; width: 100%;
  background: linear-gradient(90deg, #1e90ff, #00d4ff);
  box-shadow: 0 0 12px rgba(30, 144, 255, .8);
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}

/* ---------- Cabeçalho vira "pílula" flutuante ao rolar ---------- */
.topo { transition: top .35s ease, margin .35s ease, border-radius .35s ease, box-shadow .35s ease, max-width .35s ease, background .35s; }
@media (min-width: 900px) {
  .topo.rolou {
    top: 10px; margin-inline: auto; max-width: min(1240px, calc(100% - 32px));
    border: 1px solid var(--borda); border-radius: 18px;
    box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .7), 0 0 0 1px rgba(30, 144, 255, .08);
  }
  .topo.rolou > .linha { padding-block: 8px; }
  .topo.rolou .marca img { width: 40px; height: 40px; }
  .topo.rolou .slogan { display: none; }
  .topo.rolou .menu { border-radius: 0 0 18px 18px; }
  .topo.rolou .menu .linha { padding-block: 5px; }
  .topo .marca img, .topo > .linha, .topo .menu .linha { transition: all .35s ease; }
}

/* ---------- Revelar ao rolar ---------- */
.fx .revela { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), filter .8s; transition-delay: var(--atraso, 0ms); }
.fx .revela.visto { opacity: 1; transform: none; filter: none; }

/* títulos: palavra por palavra subindo de dentro de uma "máscara" */
.palavra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.palavra > span { display: inline-block; transform: translateY(105%); transition: transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 55ms + var(--base, 0ms)); }
.titulo-visto .palavra > span { transform: none; }

/* ---------- Banner: grade em perspectiva, brilho que segue o mouse, indicador de rolagem ---------- */
.hero { isolation: isolate; }
@media (min-width: 821px) { .hero { padding-bottom: 76px; } }
.hero-grade {
  position: absolute; left: -20%; right: -20%; bottom: -10%; height: 55%; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(30, 144, 255, .6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 144, 255, .6) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(500px) rotateX(62deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  animation: grade-anda 3.5s linear infinite;
  opacity: .7;
}
@keyframes grade-anda { to { background-position: 0 56px, 0 0; } }
.hero-luz {
  position: absolute; z-index: -1; width: 520px; height: 520px; border-radius: 50%; pointer-events: none;
  left: var(--mx, 70%); top: var(--my, 40%); transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(30, 144, 255, .28), transparent 65%);
  transition: left .25s ease-out, top .25s ease-out;
}
.arte { transform: translate3d(var(--px, 0), var(--py, 0), 0); transition: transform .3s ease-out; }
.anel::before {
  content: ""; position: absolute; inset: -16px; border-radius: 50%;
  border: 1px dashed rgba(74, 168, 255, .45); animation: girar 24s linear infinite;
}
.anel::after {
  content: ""; position: absolute; inset: -34px; border-radius: 50%;
  border: 1px solid transparent; border-top-color: rgba(0, 212, 255, .7); border-right-color: rgba(0, 212, 255, .2);
  animation: girar 6s linear infinite;
}
.rolar-dica {
  position: absolute; left: 48px; bottom: 18px; z-index: 1; display: flex; align-items: center; gap: 10px;
  font-family: var(--fonte-mono); font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; color: #8fb4e6;
}
.rolar-dica i { position: relative; width: 18px; height: 28px; border: 1.5px solid currentColor; border-radius: 10px; }
.rolar-dica i::after { content: ""; position: absolute; left: 50%; top: 5px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: rodinha 1.6s ease-in-out infinite; }
@keyframes rodinha { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(9px); } }

/* ---------- Faixa de logos rolando (marquee) ---------- */
.marquee { position: relative; margin-top: 28px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-trilho { display: flex; gap: 14px; width: max-content; animation: marquee 32s linear infinite; }
.marquee:hover .marquee-trilho { animation-play-state: paused; }
.marquee-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid var(--borda); border-radius: 999px;
  background: var(--fundo-card); font-weight: 700; white-space: nowrap; color: var(--texto-suave);
}
.marquee-item img { width: 22px; height: 22px; object-fit: contain; background: #fff; border-radius: 5px; padding: 2px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Seção "o problema": cards empilhados ---------- */
.problema .cabecalho h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); text-transform: uppercase; }
.pilha { display: grid; gap: 24px; padding-bottom: 8vh; }
.pilha-card {
  position: sticky; top: calc(var(--topo-h, 140px) + 16px + var(--n) * 22px);
  display: grid; grid-template-columns: auto 1fr 220px; gap: 28px; align-items: center;
  min-height: 300px; padding: 36px 40px; border: 1px solid var(--borda); border-radius: 22px;
  background: linear-gradient(160deg, var(--fundo-card), var(--fundo));
  box-shadow: 0 -20px 50px -30px rgba(0, 0, 0, .8);
  transform-origin: 50% 0; transform: scale(var(--escala, 1)); filter: brightness(var(--brilho, 1));
  will-change: transform;
}
.pilha-num { align-self: start; font-family: var(--fonte-mono); font-size: 3rem; font-weight: 500; line-height: 1; color: var(--texto-suave); opacity: .6; }
.pilha-card h3 { margin: 0 0 12px; font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.3px; }
.pilha-card p { margin: 0 0 18px; color: var(--texto-suave); max-width: 520px; }
.pilha-card p em { font-style: normal; opacity: .7; }
.pilha-tag { font-family: var(--fonte-mono); font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; color: #ff8a3d; }
a.pilha-tag { color: var(--azul); font-weight: 700; }
a.pilha-tag:hover { text-decoration: underline; }
.pilha-arte { width: 200px; height: 200px; color: var(--texto); justify-self: end; }
.pilha-arte svg { width: 100%; height: 100%; overflow: visible; }
.pilha-arte .s { fill: none; stroke: currentColor; stroke-width: 2.5; }
.pilha-arte .azul { stroke: var(--azul); }
/* arte 1: átomo (duas órbitas girando) */
.orb { transform-origin: 100px 100px; animation: girar 9s linear infinite; }
.orb.b { animation-duration: 13s; animation-direction: reverse; }
/* arte 2: esfera com "fatias" respirando */
.fatia { transform-origin: 100px 100px; animation: fatia 3.2s ease-in-out infinite; }
@keyframes fatia { 50% { transform: scaleY(.15); } }
/* arte 3: escada sendo desenhada (subindo de nível) */
.escada { stroke-dasharray: 520; stroke-dashoffset: 520; animation: desenha 3.5s ease-in-out infinite; }
@keyframes desenha { 45%, 75% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -520; } }
.bolinha { animation: sobe 3.5s ease-in-out infinite; }
@keyframes sobe { 0%, 10% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 45%, 75% { transform: translate(120px, -120px); opacity: 1; } 100% { transform: translate(120px, -120px); opacity: 0; } }

/* ---------- Cards: brilho que segue o mouse + inclinação 3D ---------- */
.fx-luz { position: relative; }
.fx-luz::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(420px circle at var(--lx, 50%) var(--ly, 50%), rgba(30, 144, 255, .16), transparent 45%);
  opacity: 0; transition: opacity .3s;
}
.fx-luz:hover::after { opacity: 1; }
.card.fx-tilt { transform-style: preserve-3d; }
.card.fx-tilt:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }

/* ---------- Botões: reflexo passando + efeito ímã ---------- */
.cta, .btn-trilhas, .botoes a { position: relative; overflow: hidden; }
.cta::before, .btn-trilhas::before, .botoes a::before {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.cta:hover::before, .btn-trilhas:hover::before, .botoes a:hover::before { left: 125%; }
.cta { transform: translate(var(--bx, 0), var(--by, 0)); transition: transform .25s ease-out, box-shadow .25s; }
.cta:hover { box-shadow: 0 0 34px rgba(30, 144, 255, .75); }

/* ---------- Faixa grande de chamada final ---------- */
.faixa-cta { display: block; margin-top: 72px; padding-block: 26px; overflow: hidden; border-block: 1px solid var(--borda); background: var(--fundo-menu); }
.faixa-cta-trilho { display: flex; gap: 40px; width: max-content; animation: marquee 22s linear infinite; }
.faixa-cta:hover .faixa-cta-trilho { animation-duration: 10s; }
.faixa-cta span {
  font-family: var(--fonte-titulo); font-style: italic; font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.4rem, 7vw, 5.5rem); line-height: 1; white-space: nowrap; color: var(--texto);
}
.faixa-cta span.vazado { color: transparent; -webkit-text-stroke: 1.5px var(--azul); }
.faixa-cta span.estrela { color: var(--azul); }
.faixa-cta + .rodape { margin-top: 0; }

/* ---------- Rolagem suave (Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* ---------- Detalhes ---------- */
.secao h2 { letter-spacing: -.5px; }
.tag i { animation: tracejado 1.2s linear infinite; background-size: 8px 3px; }
@keyframes tracejado { to { background-position: 8px 0; } }
::selection { background: rgba(30, 144, 255, .35); }

/* ---------- Responsivo ---------- */
@media (max-width: 820px) {
  .rolar-dica { display: none; }
  .pilha-card { grid-template-columns: 1fr; gap: 14px; min-height: 0; padding: 26px 22px; top: calc(var(--topo-h, 170px) + 10px + var(--n) * 14px); }
  .pilha-num { font-size: 2rem; }
  .pilha-arte { position: absolute; right: 16px; top: 16px; width: 90px; height: 90px; opacity: .55; }
  .pilha-card h3 { padding-right: 90px; }
  .hero-luz { display: none; }
}

/* ---------- Reduzir movimento: desliga tudo que mexe ---------- */
@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
  .fx .revela { opacity: 1; transform: none; filter: none; }
  .palavra > span { transform: none; }
  .marquee-trilho, .faixa-cta-trilho { animation: none; flex-wrap: wrap; width: auto; }
  .pilha-card { position: relative; top: auto; transform: none; filter: none; }
}