/* ============================================================
   Proleis — sistema de animações
   Tudo é desligado sob prefers-reduced-motion (final do arquivo).
   ============================================================ */

/* ---------- reveal ao entrar na viewport --------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms var(--ease-saida), transform 700ms var(--ease-saida);
  transition-delay: var(--atraso, 0ms);
  will-change: opacity, transform;
}
[data-reveal="esquerda"] { transform: translateX(-32px); }
[data-reveal="direita"] { transform: translateX(32px); }
[data-reveal="zoom"] { transform: scale(0.94); }
[data-reveal="mascara"] { clip-path: inset(0 100% 0 0); transform: none; opacity: 1; transition: clip-path 900ms var(--ease-saida); }

[data-reveal].visivel {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* ---------- keyframes --------------------------------------- */
@keyframes pulsar {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.82); }
}

@keyframes deriva {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4%, -6%, 0) scale(1.08); }
  100% { transform: translate3d(-3%, 5%, 0) scale(0.96); }
}

@keyframes menu-item-entrada {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes zoom-entrada {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes subir-flutuando {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes girar-lento {
  to { transform: rotate(360deg); }
}

@keyframes desenhar-linha {
  to { stroke-dashoffset: 0; }
}

@keyframes brilho-passando {
  0% { background-position: -220% 0; }
  100% { background-position: 220% 0; }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes onda-som {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}

@keyframes piscar-vivo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 75, 75, 0.55); }
  70% { box-shadow: 0 0 0 14px rgba(217, 75, 75, 0); }
}

/* ---------- fundo animado (aurora) --------------------------- */
.aurora {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.aurora__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  animation: deriva 22s ease-in-out infinite alternate;
  will-change: transform;
}
.aurora__blob--1 {
  width: 46vw; aspect-ratio: 1;
  top: -14vw; left: -8vw;
  background: radial-gradient(circle, rgba(30, 90, 168, 0.5), transparent 68%);
}
.aurora__blob--2 {
  width: 38vw; aspect-ratio: 1;
  top: 6vw; right: -10vw;
  background: radial-gradient(circle, rgba(76, 175, 62, 0.45), transparent 68%);
  animation-duration: 28s;
  animation-direction: alternate-reverse;
}
.aurora__blob--3 {
  width: 30vw; aspect-ratio: 1;
  bottom: -14vw; left: 32%;
  background: radial-gradient(circle, rgba(124, 194, 74, 0.3), transparent 70%);
  animation-duration: 34s;
}
.fundo-escuro .aurora__blob { opacity: 0.6; }

/* grade em perspectiva */
.grade-perspectiva {
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(30, 90, 168, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 90, 168, 0.16) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(520px) rotateX(62deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, #000 5%, transparent 85%);
  -webkit-mask-image: linear-gradient(to top, #000 5%, transparent 85%);
}
.fundo-escuro .grade-perspectiva {
  background-image:
    linear-gradient(rgba(124, 194, 74, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 194, 74, 0.18) 1px, transparent 1px);
}

/* pontinhos */
.pontilhado {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: radial-gradient(rgba(30, 90, 168, 0.16) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
}

/* ---------- parallax pelo mouse (js define --mx/--my) -------- */
.parallax {
  transition: transform 500ms var(--ease-suave);
  will-change: transform;
  transform: translate3d(calc(var(--mx, 0) * var(--forca, 12px)),
                         calc(var(--my, 0) * var(--forca, 12px)), 0);
}

/* ---------- flutuação --------------------------------------- */
.flutua { animation: subir-flutuando 6s ease-in-out infinite; }
.flutua--lento { animation-duration: 9s; }
.flutua--atraso { animation-delay: -3s; }

/* ---------- SVG desenhado ----------------------------------- */
.traco-anima {
  stroke-dasharray: var(--comprimento, 1000);
  stroke-dashoffset: var(--comprimento, 1000);
}
.visivel .traco-anima,
.traco-anima.visivel {
  animation: desenhar-linha 1800ms var(--ease-saida) forwards;
  animation-delay: var(--atraso, 0ms);
}

/* ---------- barras de gráfico ------------------------------- */
.barra-anima {
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 900ms var(--ease-elastico);
  transition-delay: var(--atraso, 0ms);
}
.visivel .barra-anima { transform: scaleY(1); }

/* ---------- marquee ----------------------------------------- */
.marquee {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__trilha {
  display: flex;
  gap: var(--sp-5);
  flex-shrink: 0;
  padding-right: var(--sp-5);
  animation: marquee 38s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__trilha { animation-play-state: paused; }

/* ---------- texto com brilho -------------------------------- */
.brilho-texto {
  background: linear-gradient(90deg, var(--navy-800) 30%, var(--green-500) 50%, var(--navy-800) 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: brilho-passando 6s linear infinite;
}
.fundo-escuro .brilho-texto {
  background: linear-gradient(90deg, #fff 30%, var(--green-300) 50%, #fff 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---------- ondas de som (mesa de som) ---------------------- */
.ondas { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.ondas i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--green-400);
  animation: onda-som 1s ease-in-out infinite;
  transform-origin: bottom;
}
.ondas i:nth-child(2) { animation-delay: 0.15s; }
.ondas i:nth-child(3) { animation-delay: 0.3s; }
.ondas i:nth-child(4) { animation-delay: 0.45s; }
.ondas i:nth-child(5) { animation-delay: 0.6s; }

/* ---------- ponto ao vivo ----------------------------------- */
.ponto-vivo {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--red-500);
  animation: piscar-vivo 2s infinite;
}

/* ---------- reduzir movimento ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .traco-anima { stroke-dashoffset: 0 !important; }
  .barra-anima { transform: scaleY(1) !important; }
  .parallax { transform: none !important; }
  .aurora__blob, .flutua, .marquee__trilha, .ondas i { animation: none !important; }
}