/* ==========================================================================
   JS TEC SOLUÇÕES — animations.css
   Microanimações e keyframes. Tudo em transform/opacity (GPU accelerated).
   --------------------------------------------------------------------------
   ÍNDICE
   01. Keyframes
   02. Scroll Reveal
   03. Floating / Bob
   04. Glow & Pulse
   05. Shimmer / Skeleton
   06. Trilhas de circuito animadas
   07. Marquee (badges)
   08. Gráficos animados
   09. Parallax & Mouse Tracking
   10. Preferência por movimento reduzido
   ========================================================================== */

/* ==========================================================================
   01. KEYFRAMES
   ========================================================================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translate3d(-34px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translate3d(34px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes floatBob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -9px, 0); }
}
@keyframes floatBobSoft {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -5px, 0); }
}
@keyframes pulseGlow {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.9;  transform: scale(1.10); }
}
@keyframes ledBlink {
  0%, 45%, 100% { opacity: 1; }
  55%, 92%      { opacity: 0.22; }
}
@keyframes waPulse {
  0%   { transform: scale(1);    opacity: 0.75; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
@keyframes ripple {
  to { transform: scale(26); opacity: 0; }
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes railTravel {
  0%   { top: -6px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@keyframes dashFlow {
  to { stroke-dashoffset: -220; }
}
@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}
@keyframes barGrow {
  from { transform: scaleY(0.04); }
  to   { transform: scaleY(1); }
}
@keyframes meterGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes orbDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(38px, -26px, 0) scale(1.06); }
  66%      { transform: translate3d(-26px, 22px, 0) scale(0.96); }
}
@keyframes caretBlink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes spinSlow {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   02. SCROLL REVEAL
   Elementos com [data-reveal] iniciam ocultos e ganham .is-visible via
   IntersectionObserver em js/animations.js.
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
}
[data-reveal].is-visible {
  animation: fadeUp 780ms var(--ease-out-expo) both;
  animation-delay: var(--reveal-delay, 0ms);
}
[data-reveal="fade"].is-visible   { animation-name: fadeIn; }
[data-reveal="zoom"].is-visible   { animation-name: zoomIn; }
[data-reveal="left"].is-visible   { animation-name: slideLeft; }
[data-reveal="right"].is-visible  { animation-name: slideRight; }

/* Fallback: se o JS não executar, o conteúdo permanece visível */
.no-js [data-reveal] { opacity: 1; }

/* ==========================================================================
   03. FLOATING / BOB
   ========================================================================== */
.anim-float      { animation: floatBob 6.5s ease-in-out infinite; }
.anim-float-soft { animation: floatBobSoft 5.2s ease-in-out infinite; }
.float-card--tl  { animation: floatBob 7s ease-in-out infinite; }
.float-card--br  { animation: floatBob 8.5s ease-in-out infinite 1.2s; }
.chip            { animation: floatBobSoft 6s ease-in-out infinite; }

/* Orbes de fundo em deriva lenta */
.bg-orb--green  { animation: orbDrift 26s ease-in-out infinite; }
.bg-orb--blue   { animation: orbDrift 32s ease-in-out infinite reverse; }
.bg-orb--purple { animation: orbDrift 38s ease-in-out infinite 3s; }

/* ==========================================================================
   04. GLOW & PULSE
   ========================================================================== */
.anim-pulse { animation: pulseGlow 3.2s ease-in-out infinite; }
.led--blink { animation: ledBlink 2.4s steps(1, end) infinite; }
.dash__live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
  animation: ledBlink 1.8s steps(1, end) infinite;
}
.eyebrow::before { animation: pulseGlow 2.8s ease-in-out infinite; }

/* ==========================================================================
   05. SHIMMER
   ========================================================================== */
.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.09) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: shimmer 3.4s var(--ease) infinite;
  pointer-events: none;
}

/* Brilho que percorre a borda superior do dashboard */
.dash__sheen {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  overflow: hidden;
  border-radius: inherit;
}
.dash__sheen::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  animation: shimmer 4.5s var(--ease) infinite;
}

/* ==========================================================================
   06. TRILHAS DE CIRCUITO ANIMADAS
   ========================================================================== */
.pcb-trace--flow {
  stroke-dasharray: 6 10;
  animation: dashFlow 5.5s linear infinite;
}
.pcb-trace--flow-slow {
  stroke-dasharray: 4 14;
  animation: dashFlow 9s linear infinite;
}
.pcb-via--blink { animation: ledBlink 2.2s steps(1, end) infinite; }
.pcb-via--blink:nth-of-type(2n) { animation-delay: 0.6s; }
.pcb-via--blink:nth-of-type(3n) { animation-delay: 1.3s; }

/* ==========================================================================
   07. MARQUEE (badges de tecnologia)
   ========================================================================== */
.tech-track { animation: marquee 42s linear infinite; }
.tech-marquee:hover .tech-track { animation-play-state: paused; }

/* ==========================================================================
   08. GRÁFICOS ANIMADOS
   Disparados quando a seção entra em viewport (.is-visible).
   ========================================================================== */
.bars__bar { transform: scaleY(0.04); }
.is-visible .bars__bar,
.dash .bars__bar { animation: barGrow 900ms var(--ease-out-expo) both; }
.bars__col:nth-child(1) .bars__bar { animation-delay: 60ms; }
.bars__col:nth-child(2) .bars__bar { animation-delay: 140ms; }
.bars__col:nth-child(3) .bars__bar { animation-delay: 220ms; }
.bars__col:nth-child(4) .bars__bar { animation-delay: 300ms; }
.bars__col:nth-child(5) .bars__bar { animation-delay: 380ms; }
.bars__col:nth-child(6) .bars__bar { animation-delay: 460ms; }
.bars__col:nth-child(7) .bars__bar { animation-delay: 540ms; }

/* 340 ≈ comprimento real do traçado; manter alinhado evita "atraso" na animação */
.line-chart__path {
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  animation: drawLine 1.8s var(--ease-out-expo) 300ms both;
}
.line-chart__dot { animation: fadeIn 400ms ease 2.1s both; }

.meter__fill { transform-origin: left; animation: meterGrow 1.1s var(--ease-out-expo) both; }
.meters .meter:nth-child(1) .meter__fill { animation-delay: 200ms; }
.meters .meter:nth-child(2) .meter__fill { animation-delay: 320ms; }
.meters .meter:nth-child(3) .meter__fill { animation-delay: 440ms; }
.meters .meter:nth-child(4) .meter__fill { animation-delay: 560ms; }

/* Cursor piscando no terminal */
.term__caret { display: inline-block; animation: caretBlink 1.05s steps(1, end) infinite; color: var(--primary); }

/* ==========================================================================
   09. PARALLAX & MOUSE TRACKING
   Os valores --px/--py/--tilt-x/--tilt-y são atualizados em js/animations.js.
   ========================================================================== */
[data-parallax] {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
[data-tilt] {
  transform: perspective(1200px)
             rotateX(var(--tilt-x, 0deg))
             rotateY(var(--tilt-y, 0deg))
             translate3d(0, 0, 0);
  transition: transform 420ms var(--ease-out-expo);
  will-change: transform;
}
[data-tilt].is-tilting { transition: transform 90ms linear; }

/* Deslocamento sutil de camadas conforme o mouse */
[data-mouse-shift] {
  transform: translate3d(calc(var(--mx-shift, 0) * 1px), calc(var(--my-shift, 0) * 1px), 0);
  transition: transform 620ms var(--ease-out-expo);
}

/* ==========================================================================
   10. MOVIMENTO REDUZIDO (acessibilidade)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; }
  .bars__bar { transform: scaleY(1) !important; }
  .line-chart__path { stroke-dashoffset: 0 !important; }
  .meter__fill { transform: scaleX(1) !important; }
  [data-tilt] { transform: none !important; }
}