/* ============================================================
   FORBS ELETROPOSTOS — camada "energia"
   Estilos da assinatura de movimento. O roteiro de cada efeito está
   em assets/js/energia.js; a troca de página, no <head> (build.py).

   Quase tudo aqui depende de classes que o JavaScript coloca (en-*),
   e ele só as coloca quando o sistema da pessoa não pede menos
   movimento. Sem isso, a página fica exatamente como era.
   ============================================================ */

/* ---------- 0. MARCADOR DO MENU ----------
   O traço verde sob a página atual. Na troca de página ele desliza
   do item antigo para o novo, em vez de sumir e reaparecer. */
.nav__link { position: relative; }
.nav__link[aria-current="page"] { box-shadow: none; }
.nav__marcador {
  position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px;
  border-radius: 2px; background: var(--cor-acao);
  box-shadow: 0 0 10px rgba(0, 190, 68, .55);
  view-transition-name: nav-marcador;
}

/* ---------- 1. TROCA DE PÁGINA ----------
   A página antiga recua e escurece; a nova entra por trás de uma
   frente de energia inclinada que atravessa a tela. O cabeçalho, o
   botão do WhatsApp e a barra do celular não piscam: ficam no lugar. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.cabecalho      { view-transition-name: cabecalho; }
.zap-flutuante  { view-transition-name: zap; }
.barra-mobile   { view-transition-name: barra-mobile; }

::view-transition-old(root) {
  animation: en-recuar 760ms cubic-bezier(.65, 0, .35, 1) both;
  transform-origin: 50% 30vh;
}
::view-transition-new(root) { animation: none; }
::view-transition-group(nav-marcador) {
  animation-duration: 640ms;
  animation-timing-function: cubic-bezier(.65, 0, .35, 1);
}
@keyframes en-recuar {
  to { transform: scale(.95); opacity: .4; filter: brightness(.55) saturate(.6); }
}
/* a faixa de luz que acompanha a borda da página nova (largura,
   inclinação e posição vêm do script do <head>) */
.en-frente {
  position: fixed; top: 0; left: 0; height: 100vh; z-index: 2147483000; pointer-events: none;
  transform-origin: 100% 0;
  background: linear-gradient(90deg,
    rgba(47, 230, 166, 0) 0%, rgba(47, 230, 166, .28) 55%,
    rgba(0, 190, 68, .9) 88%, #EFFFF6 100%);
  filter: drop-shadow(0 0 18px rgba(47, 230, 166, .7));
}

/* ---------- 2. TÍTULOS PALAVRA POR PALAVRA ---------- */
.en-titulo .palavra {
  display: inline-block; vertical-align: top;
  overflow: hidden;
  /* folga para as letras com perna (g, p, ç) não serem cortadas */
  padding-bottom: .14em; margin-bottom: -.14em;
}
.en-titulo .palavra__miolo {
  display: inline-block;
  transform: translateY(108%) rotate(4deg);
  transform-origin: 0 100%;
  transition: transform 900ms cubic-bezier(.16, .84, .32, 1);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.en-titulo--visivel .palavra__miolo { transform: none; }

/* a linha de energia embaixo dos títulos de seção */
.secao__titulo::after {
  content: ""; display: block;
  width: 56px; height: 3px; margin: 16px auto 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--cor-acao), var(--cor-viva), var(--cor-viva-clara));
}
.secao--escura .secao__titulo::after {
  background: linear-gradient(90deg, #15B683, var(--painel-verde));
  box-shadow: 0 0 12px rgba(47, 230, 166, .45);
}
.secao__titulo.en-titulo--esq::after { margin-left: 0; }
.en-titulo.secao__titulo::after {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 900ms cubic-bezier(.65, 0, .35, 1);
  transition-delay: var(--atraso-linha, 400ms);
}
.en-titulo--visivel.secao__titulo::after { transform: scaleX(1); }

/* ---------- 3. LUZ QUE SEGUE O PONTEIRO ---------- */
.en-luz { isolation: isolate; }
.faq details.en-luz, .estado-vazio.en-luz { position: relative; }
.en-luz::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(380px circle at var(--luz-x, 50%) var(--luz-y, 50%),
              rgba(0, 190, 68, .11), transparent 60%);
  opacity: 0; transition: opacity 400ms ease;
}
.en-luz--escura::after {
  background: radial-gradient(380px circle at var(--luz-x, 50%) var(--luz-y, 50%),
              rgba(47, 230, 166, .16), transparent 60%);
}
.en-luz:hover::after { opacity: 1; }
.card.en-luz:hover, .passos li.en-luz:hover, .selo-numero.en-luz:hover { border-color: rgba(0, 117, 45, .38); }
.passos li.en-luz, .selo-numero.en-luz, .painel-recarga.en-luz {
  transition: transform 260ms cubic-bezier(.2, .7, .3, 1), box-shadow var(--transicao), border-color var(--transicao);
}

/* ---------- 4. BOTÕES ---------- */
.en-btn { position: relative; overflow: hidden; isolation: isolate; }
/* brilho que atravessa ao passar o mouse */
.en-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .42) 50%, transparent 70%);
  transform: translateX(-120%);
}
.en-btn:hover::before { transform: translateX(120%); transition: transform 760ms cubic-bezier(.2, .7, .3, 1); }
.btn--contorno.en-btn::before, .btn--claro.en-btn::before {
  background: linear-gradient(105deg, transparent 30%, rgba(0, 190, 68, .16) 50%, transparent 70%);
}
/* faísca no clique */
.en-faisca {
  position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .18) 38%, transparent 62%);
  transform: scale(0); animation: en-faisca 640ms cubic-bezier(.2, .7, .3, 1) forwards;
}
.btn--contorno .en-faisca, .btn--claro .en-faisca {
  background: radial-gradient(circle, rgba(0, 190, 68, .32) 0%, rgba(0, 190, 68, .1) 38%, transparent 62%);
}
@keyframes en-faisca { to { transform: scale(1); opacity: 0; } }

/* o botão flutuante do WhatsApp chama a atenção de tempos em tempos.
   Ele é fixo na tela: o "position: relative" dos outros botões não vale aqui. */
.zap-flutuante.en-btn { position: fixed; overflow: visible; }
.zap-flutuante.en-btn::before { display: none; }
.zap-flutuante.en-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25D366; pointer-events: none;
  animation: en-onda 6s cubic-bezier(.2, .7, .3, 1) 2s infinite;
  opacity: 0;
}
@keyframes en-onda {
  0%   { transform: scale(1); opacity: .8; }
  22%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ---------- 5. LISTAS COM CHECK ---------- */
.en-lista li {
  opacity: 0; transform: translateX(-16px);
  transition: opacity 520ms ease, transform 640ms cubic-bezier(.16, .84, .32, 1);
  transition-delay: calc(var(--i, 0) * 90ms + 160ms);
}
.en-lista li::before {
  transform: scale(0) rotate(-120deg);
  transition: transform 560ms cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: calc(var(--i, 0) * 90ms + 320ms);
}
.en-lista--viva li { opacity: 1; transform: none; }
.en-lista--viva li::before { transform: none; }

/* ---------- 6. PASSOS QUE ACENDEM ---------- */
.en-passos li::before { background: var(--cor-borda-media); }
.en-passos--acesos li::before {
  animation: en-acender 1s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 280ms + 250ms);
}
@keyframes en-acender {
  0%   { background: var(--cor-borda-media); transform: scale(.82); box-shadow: 0 0 0 0 rgba(0, 190, 68, .6); }
  55%  { background: var(--cor-viva); color: var(--cor-sobre-viva); transform: scale(1.14); box-shadow: 0 0 0 12px rgba(0, 190, 68, 0); }
  100% { background: var(--cor-acao); transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 190, 68, 0); }
}

/* ---------- 7. VISORES QUE LIGAM ---------- */
.en-visor { opacity: .16; }
.en-visor--ligado {
  animation: en-ligar 1.1s linear both;
  animation-delay: calc(var(--i, 0) * 120ms + 120ms);
}
@keyframes en-ligar {
  0%       { opacity: .16; }
  7%       { opacity: 1; }
  12%      { opacity: .3; }
  20%      { opacity: 1; }
  27%      { opacity: .55; }
  36%, 100% { opacity: 1; }
}

/* ---------- 8. ÍCONES QUE LIGAM ---------- */
.en-icone { transform: scale(.6); opacity: .3; }
.en-icone--ligado { animation: en-icone 900ms cubic-bezier(.34, 1.56, .64, 1) 180ms both; }
@keyframes en-icone {
  0%   { transform: scale(.6); opacity: .3; box-shadow: 0 0 0 0 rgba(0, 190, 68, .5); }
  60%  { transform: scale(1.08); opacity: 1; box-shadow: 0 0 0 12px rgba(0, 190, 68, 0); }
  100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(0, 190, 68, 0); }
}

/* ---------- 9. LUZ AMBIENTE QUE RESPIRA ----------
   O véu verde das faixas escuras, do topo e da chamada final se move
   devagar, como luz refletida. Só transform: não pesa. */
.mv-ativo .secao--escura::after,
.mv-ativo .hero::before,
.mv-ativo .secao--cta::before {
  /* maior que a seção, para a borda do véu nunca aparecer quando ele anda */
  inset: -10%;
  animation: en-aurora 16s ease-in-out infinite alternate;
}
@keyframes en-aurora {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.14); }
}

/* a faixa verde "Tem espaço?" ganha um reflexo que passa de vez em quando */
.mv-ativo .faixa-parceiro::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: translateX(-120%) skewX(-18deg);
  animation: en-reflexo 7s cubic-bezier(.65, 0, .35, 1) 1.5s infinite;
  pointer-events: none;
}
@keyframes en-reflexo {
  0%        { transform: translateX(-120%) skewX(-18deg); }
  26%, 100% { transform: translateX(330%) skewX(-18deg); }
}

/* ---------- 10. PERGUNTAS QUE ABREM SUAVE ----------
   Navegadores que ainda não sabem animar a abertura simplesmente
   abrem na hora, como antes. */
.faq summary::after { transition: transform 360ms cubic-bezier(.2, .7, .3, 1); }
.faq details[open] summary::after { transform: rotate(180deg); }
@supports selector(::details-content) {
  .mv-ativo .faq details { interpolate-size: allow-keywords; }
  .mv-ativo .faq details::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size 460ms cubic-bezier(.16, .84, .32, 1),
                content-visibility 460ms allow-discrete;
  }
  .mv-ativo .faq details[open]::details-content { block-size: auto; }
}

/* ---------- 11. MENU DO CELULAR ---------- */
.mv-ativo .menu-mobile[data-aberto="true"] li,
.mv-ativo .menu-mobile[data-aberto="true"] .btn {
  animation: en-menu 460ms cubic-bezier(.16, .84, .32, 1) both;
}
.mv-ativo .menu-mobile li:nth-child(2) { animation-delay: 40ms; }
.mv-ativo .menu-mobile li:nth-child(3) { animation-delay: 80ms; }
.mv-ativo .menu-mobile li:nth-child(4) { animation-delay: 120ms; }
.mv-ativo .menu-mobile li:nth-child(5) { animation-delay: 160ms; }
.mv-ativo .menu-mobile li:nth-child(6) { animation-delay: 200ms; }
.mv-ativo .menu-mobile li:nth-child(7) { animation-delay: 240ms; }
.mv-ativo .menu-mobile li:nth-child(8) { animation-delay: 280ms; }
.mv-ativo .menu-mobile[data-aberto="true"] .btn { animation-delay: 320ms; }
@keyframes en-menu {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- segunda tranca para quem pede menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .en-titulo .palavra__miolo, .en-lista li, .en-lista li::before,
  .en-visor, .en-icone { transform: none !important; opacity: 1 !important; transition: none !important; animation: none !important; }
  .en-titulo.secao__titulo::after { transform: none !important; transition: none !important; }
  .en-passos li::before { animation: none !important; background: var(--cor-acao) !important; }
  .zap-flutuante::after, .faixa-parceiro::before,
  .secao--escura::after, .hero::before, .secao--cta::before { animation: none !important; }
  .en-frente { display: none !important; }
}

/* impressão: tudo aceso e parado */
@media print {
  .en-titulo .palavra__miolo, .en-lista li, .en-lista li::before, .en-visor, .en-icone {
    transform: none !important; opacity: 1 !important; animation: none !important;
  }
}