/* ============================================================
 * virtus-motion.css — Camada de movimento
 * ------------------------------------------------------------
 * REGRA DE SEGURANÇA:
 * Todo estado inicial escondido (opacity 0, blur, translate) vive
 * sob `html.motion-on`. Essa classe só é adicionada pelo JS DEPOIS
 * de ele confirmar que consegue revelar os elementos.
 *
 * Sem JS, com JS falhando, com CDN fora do ar: a página aparece
 * inteira. Já escondi conteúdo uma vez por não fazer isso.
 * ============================================================ */

:root{
  --mo-curva:   cubic-bezier(.16, 1, .3, 1);
  --mo-curva-2: cubic-bezier(.22, .61, .36, 1);
  --mo-azul:    #3b82f6;
  --mo-viol:    #7c3aed;
  --mo-ciano:   #21d4fd;
}

/* ═══════════ 1. Barra de progresso de leitura ═══════════ */

.mo-progresso{
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 9999;
  pointer-events: none;
  background: transparent;
}
.mo-progresso i{
  display: block; height: 100%;
  width: var(--mo-scroll, 0%);
  background: linear-gradient(90deg, var(--mo-azul), var(--mo-viol), var(--mo-ciano));
  box-shadow: 0 0 12px -2px rgba(124,58,237,.8);
  transition: width 120ms linear;
}

/* ═══════════ 2. Luz que acompanha o cursor ═══════════ */

/* Uma única camada fixa para a página inteira. Quase invisível:
   o usuário não deve notar, só sentir que o ambiente reage. */
.mo-luz{
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease;
  background: radial-gradient(circle 340px at var(--mo-x, 50%) var(--mo-y, 50%),
              rgba(80,120,255,.075), transparent 70%);
}
html.motion-on .mo-luz{ opacity: 1; }

/* ═══════════ 3. Header ═══════════ */

html.motion-on .nav,
html.motion-on header.nav{
  animation: mo-header 780ms var(--mo-curva) 120ms both;
  transition: background 420ms ease, backdrop-filter 420ms ease,
              border-color 420ms ease, box-shadow 420ms ease;
}
@keyframes mo-header{
  from{ opacity: 0; transform: translateY(-10px); }
  to  { opacity: 1; transform: none; }
}

/* Vidro ao rolar. A classe entra pelo JS depois de ~64px. */
body .nav.mo-fixo,
body header.nav.mo-fixo{
  background: rgba(6,10,26,.66) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(148,163,184,.10);
  box-shadow: 0 10px 34px -26px rgba(0,0,0,.9);
}

/* ═══════════ 4. Entrada do hero ═══════════ */

/* Revelação editorial: cada bloco entra com um atraso curto.
   Blur saindo é o que dá a sensação de foco, não o deslocamento. */
html.motion-on .h5-pill,
html.motion-on .h5-titulo,
html.motion-on .h5-sub,
html.motion-on .h5-ctas,
html.motion-on .h5-prova,
html.motion-on .h5-cards{
  animation: mo-entrar 900ms var(--mo-curva) both;
}
html.motion-on .h5-pill  { animation-delay: 140ms; }
html.motion-on .h5-titulo{ animation-delay: 220ms; }
html.motion-on .h5-sub   { animation-delay: 400ms; }
html.motion-on .h5-ctas  { animation-delay: 520ms; }
html.motion-on .h5-prova { animation-delay: 620ms; }
html.motion-on .h5-cards { animation-delay: 700ms; }

@keyframes mo-entrar{
  from{ opacity: 0; transform: translateY(20px); filter: blur(8px); }
  60% { filter: blur(1.5px); }
  to  { opacity: 1; transform: none; filter: blur(0); }
}

/* ═══════════ 5. Capelo ═══════════ */

/* O fundo do hero é a imagem inteira; o "capelo" aqui é a camada
   de luz que respira sobre ele, mais o parallax do fundo. */
html.motion-on .hero-v2::after{
  content:'';
  position: absolute;
  left: 52%; top: 44%;
  width: 46%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(124,58,237,.20), rgba(59,130,246,.06) 46%, transparent 70%);
  filter: blur(60px);
  animation: mo-respirar 6.5s ease-in-out infinite;
}
@keyframes mo-respirar{
  0%,100%{ opacity: .35; transform: translate(-50%,-50%) scale(1); }
  50%    { opacity: .55; transform: translate(-50%,-50%) scale(1.08); }
}

/* Parallax do fundo: movimento mínimo, como pede o briefing. */
html.motion-on .hero-v2{
  background-position: calc(50% + var(--mo-px, 0px) * .35)
                       calc(50% + var(--mo-py, 0px) * .35);
  transition: background-position 900ms var(--mo-curva-2);
}

/* Cartões do hero: mais movimento que o fundo, para criar camadas. */
html.motion-on .h5-cards{
  transform: translate3d(calc(var(--mo-px, 0px) * -1.1), calc(var(--mo-py, 0px) * -.8), 0);
  transition: transform 900ms var(--mo-curva-2);
}
/* O texto quase não anda: mover manchete cansa a leitura. */
html.motion-on .hero-v2 .vh-inner > div:first-child{
  transform: translate3d(calc(var(--mo-px, 0px) * .18), calc(var(--mo-py, 0px) * .12), 0);
  transition: transform 1100ms var(--mo-curva-2);
}

/* Flutuação contínua dos cartões, com giro quase imperceptível. */
html.motion-on .h5-card:nth-child(1){ animation: mo-flutuar 7s ease-in-out infinite; }
html.motion-on .h5-card:nth-child(2){ animation: mo-flutuar 8.4s ease-in-out .9s infinite reverse; }
html.motion-on .h5-card:nth-child(3){ animation: mo-flutuar 7.7s ease-in-out 1.6s infinite; }
@keyframes mo-flutuar{
  0%,100%{ translate: 0 -5px;  rotate: -.4deg; }
  50%    { translate: 0  5px;  rotate:  .4deg; }
}

/* ═══════════ 6. Botões ═══════════ */

/* O brilho só existe no hover. Brilho contínuo vira anúncio. */
.h5-btn--p, .h4-btn--p, .btn-primary, .vh-btn-primary{
  position: relative; overflow: hidden;
  transition: transform 320ms var(--mo-curva), box-shadow 320ms ease;
}
.h5-btn--p:hover, .h4-btn--p:hover{ transform: scale(1.02) translateY(-1px); }

html.motion-on .h5-btn--p::before,
html.motion-on .h4-btn--p::before{
  content:''; position:absolute; inset:0;
  pointer-events:none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.30) 50%, transparent 70%);
  background-size: 260% 100%;
  background-position: -100% 0;
  opacity: 0;
}
html.motion-on .h5-btn--p:hover::before,
html.motion-on .h4-btn--p:hover::before{
  opacity: 1;
  animation: mo-brilho 720ms var(--mo-curva-2) forwards;
}
@keyframes mo-brilho{ to{ background-position: 100% 0; } }

/* O reflexo automático que existia some: agora o brilho é no hover.
   Dois brilhos no mesmo botão viram poluição. */
html.motion-on .h5-btn--p::after{ animation: none; opacity: 0; }

.h5-btn--s:hover, .h4-btn--s:hover{
  transform: translateY(-2px);
  border-color: rgba(124,58,237,.55);
  background: rgba(255,255,255,.05);
}

/* ═══════════ 7. Revelação das seções ═══════════ */

/* Quatro variações, sorteadas pelo JS. Repetir o mesmo movimento
   em tudo é o que faz parecer template. */
html.motion-on [data-aos]:not(.anim){
  opacity: 0;
  filter: blur(5px);
  transition: opacity 820ms var(--mo-curva),
              transform 820ms var(--mo-curva),
              filter 820ms var(--mo-curva);
}
html.motion-on [data-aos][data-mo="sobe"]:not(.anim) { transform: translateY(35px); }
html.motion-on [data-aos][data-mo="esq"]:not(.anim)  { transform: translate(-26px, 18px); }
html.motion-on [data-aos][data-mo="dir"]:not(.anim)  { transform: translate(26px, 18px); }
html.motion-on [data-aos][data-mo="escala"]:not(.anim){ transform: translateY(22px) scale(.975); }

/* !important aqui não é preguiça: a página original já traz
   `[data-aos]{opacity:0}` e outras folhas podem ser somadas depois.
   O estado REVELADO precisa ser inegociável — se ele perder uma
   disputa de especificidade, o conteúdo some da tela. */
html.motion-on [data-aos].anim{
  opacity: 1 !important;
  transform: none !important;
  filter: blur(0) !important;
}

/* ═══════════ 8. Cards: luz que segue o cursor ═══════════ */

.mo-card{
  position: relative;
  transition: transform 380ms var(--mo-curva),
              border-color 320ms ease, box-shadow 380ms ease;
}
.mo-card::before{
  content:''; position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  opacity: 0;
  transition: opacity 320ms ease;
  background: radial-gradient(circle 220px at var(--mo-cx, 50%) var(--mo-cy, 50%),
              rgba(124,58,237,.16), transparent 70%);
}
.mo-card:hover{
  transform: translateY(-4px);
  border-color: rgba(148,163,184,.24);
  box-shadow: 0 30px 64px -34px rgba(0,0,0,.95);
}
.mo-card:hover::before{ opacity: 1; }

/* ═══════════ 9. Luz viva no fundo ═══════════ */

html.motion-on body.v2::before{
  content:'';
  position: fixed; inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 24% 30%, rgba(59,130,246,.055), transparent 66%),
    radial-gradient(34% 28% at 78% 66%, rgba(168,85,247,.05),  transparent 66%);
  animation: mo-deriva 18s ease-in-out infinite alternate;
}
@keyframes mo-deriva{
  from{ transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to  { transform: translate3d( 1.5%,  1%, 0) scale(1.05); }
}

/* ═══════════ 10. Mockups ═══════════ */

html.motion-on [data-mo-mockup]:not(.anim){
  opacity: 0;
  transform: scale(.97);
  filter: blur(8px);
  transition: opacity 1s var(--mo-curva), transform 1s var(--mo-curva), filter 1s var(--mo-curva);
}
html.motion-on [data-mo-mockup].anim{ opacity: 1; transform: none; filter: blur(0); }

/* ═══════════ 11. Microinterações ═══════════ */

html.motion-on a:not(.h5-btn):not(.v-btn):not(.vlogo__link),
html.motion-on .nav a{
  transition: color 220ms ease, opacity 220ms ease, transform 260ms var(--mo-curva);
}
html.motion-on .vrec-link:hover,
html.motion-on .h5-card:hover i{ transform: translateX(2px); }

/* ═══════════ 12. Movimento reduzido ═══════════ */

@media (prefers-reduced-motion: reduce){
  html.motion-on *,
  html.motion-on *::before,
  html.motion-on *::after{
    animation: none !important;
    transition-duration: .18s !important;
  }
  html.motion-on [data-aos]:not(.anim),
  html.motion-on [data-mo-mockup]:not(.anim){
    opacity: 1; transform: none; filter: none;
  }
  html.motion-on .mo-luz,
  html.motion-on body.v2::before{ display: none; }
  html.motion-on .hero-v2,
  html.motion-on .h5-cards,
  html.motion-on .hero-v2 .vh-inner > div:first-child{ transform: none !important; }
}