/* TV Mágica — camada de movimento. Carregada depois de styles.css.
   Tudo que esconde ou desloca conteúdo fica dentro de (prefers-reduced-motion: no-preference). */

main { overflow-x: clip; }
.topo__progresso { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--marca), var(--acento)); transform: scaleX(0); transform-origin: left; }
.banner { overflow: hidden; }
/* fotos com paralaxe têm folga de 10% em cima e embaixo para o deslocamento */
.banner img[data-paralaxe] { top: -10%; bottom: auto; height: 120%; will-change: transform; }
.serv > :not(.serv__canto) { position: relative; z-index: 1; }
.serv::before { content: ""; position: absolute; inset: 0; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(126,230,238,.2), transparent 70%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.serv:hover::before { opacity: 1; }
.palavra, .palavra > span { display: inline-block; }
.risco { padding-bottom: .12em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C50 2 130 1 205 3 S285 3 298 2 L299 6 C250 6 170 5 110 7 S30 10 4 11 Z' fill='%23ffd23f'/%3E%3C/svg%3E") no-repeat 0 100% / 100% .2em; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes sobe { from { transform: translateY(115%); } }
  @keyframes surge { from { opacity: 0; transform: translateY(26px); } }
  @keyframes abre { from { opacity: 0; transform: scale(.965); } }
  @keyframes zoomfora { from { transform: scale(1.16); } }
  @keyframes pulso { 0%, 100% { opacity: .22; } 40% { opacity: 1; } }
  @keyframes halo { from { transform: scale(1); opacity: 1; } to { transform: scale(1.75); opacity: 0; } }
  @keyframes flutua { from, to { transform: rotate(1.5deg); } 50% { transform: translateY(-8px) rotate(.6deg); } }
  @keyframes brilho { to { transform: translateX(420%) skewX(-20deg); } }

  /* Início: o quadro abre, a foto recua, o título sobe palavra por palavra */
  .hero__quadro { animation: abre 1s cubic-bezier(.2,.7,.2,1) both; }
  .hero__foto { animation: zoomfora 2.6s cubic-bezier(.2,.7,.2,1) both; }
  .palavra { overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
  .palavra > span { animation: sobe .95s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(.25s + var(--i, 0) * 70ms); }
  .hero__texto > p { animation: surge .9s cubic-bezier(.2,.7,.2,1) .85s both; }
  .hero__acoes { animation: surge .9s cubic-bezier(.2,.7,.2,1) 1s both; }
  .hero__selos li { animation: surge .8s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(1.15s + var(--i, 0) * 110ms); }
  .hero__selos li:nth-child(2) { --i: 1; }
  .hero__selos li:nth-child(3) { --i: 2; }
  .hero__canto { animation: surge 1s cubic-bezier(.2,.7,.2,1) 1.2s both; }

  /* Variações de entrada ao rolar (a base, de baixo para cima, está em styles.css) */
  .js [data-revela="esq"] { transform: translateX(-56px); }
  .js [data-revela="dir"] { transform: translateX(56px); }
  .js [data-revela="zoom"] { transform: scale(.88); }
  .js [data-revela="cortina"] { opacity: 1; transform: scale(1.1); clip-path: inset(0 100% 0 0 round var(--raio)); transition: clip-path 1.2s cubic-bezier(.7,0,.2,1), transform 1.7s cubic-bezier(.2,.7,.2,1); }
  .js [data-revela="cortina"].is-visivel { clip-path: inset(0 0 0 0 round var(--raio)); }
  .js .risco { background-size: 0% .2em; transition: background-size 1s cubic-bezier(.7,0,.2,1) .35s; }
  .js .risco.is-visivel { background-size: 100% .2em; }

  /* Sinal do logotipo pulsando */
  .onda { animation: pulso 2.2s ease-in-out infinite; }
  .o2 { animation-delay: .25s; }
  .o3 { animation-delay: .5s; }
  .banner__halo::before { animation: halo 2.2s ease-out infinite; }

  /* Botões: brilho que atravessa e ícone que avança */
  .botao { position: relative; overflow: hidden; }
  .botao::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); pointer-events: none; }
  .botao:hover::after { animation: brilho .7s ease-out; }
  .botao .lucide, .serv a .lucide { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .botao:hover .lucide, .serv a:hover .lucide { transform: translateX(4px); }

  /* Cartões e ícones */
  .serv__icone { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
  .serv:hover .serv__icone { transform: rotate(-8deg) scale(1.12); }
  .faixa:hover .faixa__trilho { animation-play-state: paused; }
  .equipe__lista { animation: flutua 5s ease-in-out infinite; }
  .js .equipe__lista li { opacity: 0; transform: translateX(18px); transition: opacity .5s, transform .5s cubic-bezier(.2,.7,.2,1); }
  .js .is-visivel .equipe__lista li { opacity: 1; transform: none; transition-delay: calc(.5s + var(--i, 0) * 110ms); }
  .equipe__lista li:nth-child(2) { --i: 1; }
  .equipe__lista li:nth-child(3) { --i: 2; }
  .equipe__lista li:nth-child(4) { --i: 3; }
  .equipe__lista li:nth-child(5) { --i: 4; }
  .icone { transition: background .35s, color .35s, transform .45s cubic-bezier(.2,.7,.2,1); }
  .sobre__itens li:hover .icone { background: var(--tinta); color: var(--acento); transform: translateY(-4px); }

  /* Diferenciais: no computador, a descrição aparece ao passar o mouse (como na referência) */
  @media (hover: hover) and (min-width: 921px) {
    .dif p { max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.2,.7,.2,1), opacity .4s, margin-top .4s; }
    .dif:hover p, .dif:focus-within p { max-height: 80px; margin-top: 6px; opacity: 1; }
  }
  /* No celular, entradas laterais viram verticais para não criar rolagem lateral */
  @media (max-width: 920px) {
    .js [data-revela="esq"], .js [data-revela="dir"] { transform: translateY(28px); }
  }
}