/* Estados de entrada ativados pelo IntersectionObserver */
html.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity .85s var(--ease-out) var(--delay, 0s),
    transform .85s var(--ease-out) var(--delay, 0s);
  will-change: opacity, transform;
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.js .comparison-generic[data-reveal] {
  transform: translate3d(-34px, 24px, 0);
}

html.js .comparison-maidstec[data-reveal] {
  transform: translate3d(34px, 24px, 0);
}

html.js .comparison-generic[data-reveal].is-visible,
html.js .comparison-maidstec[data-reveal].is-visible {
  transform: translate3d(0, 0, 0);
}

html.js .service-card[data-reveal],
html.js .package-card[data-reveal] {
  transform: translate3d(0, 32px, 0) scale(.975);
}

html.js .service-card[data-reveal].is-visible,
html.js .package-card[data-reveal].is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

html.js .package-featured[data-reveal] {
  transform: translate3d(0, 32px, 0) scale(.975);
}

html.js .package-featured[data-reveal].is-visible {
  transform: translate3d(0, -10px, 0) scale(1);
}

html.js .pipeline-step.is-visible .pipeline-icon,
html.js .method-step.is-visible .method-icon {
  animation: icon-arrive .75s var(--ease-spring) both;
  animation-delay: calc(var(--delay, 0s) + .15s);
}

html.js .service-card.is-visible .mini-bars i {
  animation: bar-grow .85s var(--ease-out) both;
}

html.js .service-card.is-visible .mini-bars i:nth-child(2) { animation-delay: .08s; }
html.js .service-card.is-visible .mini-bars i:nth-child(3) { animation-delay: .16s; }
html.js .service-card.is-visible .mini-bars i:nth-child(4) { animation-delay: .24s; }
html.js .service-card.is-visible .mini-bars i:nth-child(5) { animation-delay: .32s; }

html.js .hero-product.is-visible .chart-line {
  stroke-dasharray: 760;
  stroke-dashoffset: 760;
  animation: draw-line 1.8s .5s var(--ease-out) forwards;
}

html.js .hero-product.is-visible .chart-area {
  opacity: 0;
  animation: area-in .8s 1.25s ease forwards;
}

html.js .hero-product.is-visible .chart-points circle {
  opacity: 0;
  transform-origin: center;
  animation: point-in .45s var(--ease-spring) forwards;
}

html.js .hero-product.is-visible .chart-points circle:nth-child(1) { animation-delay: .85s; }
html.js .hero-product.is-visible .chart-points circle:nth-child(2) { animation-delay: 1.12s; }
html.js .hero-product.is-visible .chart-points circle:nth-child(3) { animation-delay: 1.39s; }
html.js .hero-product.is-visible .chart-points circle:nth-child(4) { animation-delay: 1.66s; }

@keyframes pulse-ring {
  0% { opacity: .8; transform: scale(.6); }
  70%, 100% { opacity: 0; transform: scale(1.8); }
}

@keyframes button-shine {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

@keyframes float-y {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -10px, 0); }
}

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

@keyframes card-shine {
  0%, 65% { transform: translateX(-30%) rotate(24deg); }
  100% { transform: translateX(260%) rotate(24deg); }
}

@keyframes flow-dot {
  from { left: 0; }
  to { left: calc(100% - 5px); }
}

@keyframes ai-ring {
  0% { opacity: .55; transform: scale(.48); }
  80%, 100% { opacity: 0; transform: scale(1.15); }
}

@keyframes pipeline-light {
  from { transform: translateX(-120%); }
  to { transform: translateX(390%); }
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes orbit-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes orbit-spin-reverse {
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes icon-arrive {
  0% { opacity: 0; transform: scale(.62) rotate(-8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes bar-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

@keyframes area-in {
  to { opacity: 1; }
}

@keyframes point-in {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: scale(1); }
}

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

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

  html.js [data-reveal],
  html.js [data-reveal].is-visible,
  html.js .comparison-generic[data-reveal],
  html.js .comparison-maidstec[data-reveal],
  html.js .service-card[data-reveal],
  html.js .package-card[data-reveal],
  html.js .package-featured[data-reveal] {
    opacity: 1;
    transform: none;
  }

  .pointer-glow,
  .hero-orb,
  .floating-chip,
  .md-floating-card {
    display: none;
  }
}