/* ═══════════════════════════════════════════
   ANIMATIONS (ITCSS: Generic/Utilities Layer)
   Keyframes + anime.js v4 initial states
   ═══════════════════════════════════════════ */

/* ── Ambient Keyframes ── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ── Scroll Progress Bar ── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--gradient-brand);
  z-index: 9999;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.6), 0 0 4px rgba(34, 211, 238, 0.4);
  pointer-events: none;
}

/* ── Hero Particles ── */
.hero__particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hero__particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--blue-accent);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 6px rgba(14, 165, 233, 0.4);
}

/* ── anime.js v4: Scroll-animated elements start hidden ── */
.reveal {
  opacity: 0;
}

/* ── anime.js v4: Hero initial states (anti-FOUC) ── */
.hero__badge,
.hero__title,
.hero__description,
.hero__actions,
.hero__stats,
.hero__hex-container {
  opacity: 0;
}

/* ── Section headers initial state ── */
.services__header .section-label,
.services__header .section-title,
.services__header .section-subtitle,
.tech__header .section-label,
.tech__header .section-title,
.tech__header .section-subtitle,
.pilares__header .section-label,
.pilares__header .section-title,
.pilares__header .section-subtitle,
.clients__header .section-label,
.clients__header .section-title,
.clients__header .section-subtitle,
.portfolio__header .section-label,
.portfolio__header .section-title,
.portfolio__header .section-subtitle {
  opacity: 0;
}

/* ── Cards initial state ── */
.service-card,
.pilar-card,
.client-card,
.delivery__card,
.ai-cap,
.diferencial__feature,
.metodologia__step,
.portfolio__tab {
  opacity: 0;
}

/* ── Special elements initial state ── */
.ai-section__visual,
.diferencial__visual,
.founder__avatar,
.clients__testimonial,
.delivery__note,
.numbers__item {
  opacity: 0;
}

/* ── Code typing cursor ── */
.diferencial__code-cursor {
  display: inline-block;
  width: 8px;
  height: 1.1em;
  background: var(--blue-accent);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: blink-cursor 1s step-end infinite;
}

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.diferencial__code-line {
  display: block;
  opacity: 0;
}

/* ── CTA section ── */
.cta__inner .section-label,
.cta__title,
.cta__subtitle,
.cta__buttons {
  opacity: 0;
}

.cta__glow {
  will-change: transform, opacity;
}

/* ── Founder info initial state ── */
.founder__info .section-label,
.founder__name,
.founder__role,
.founder__bio,
.founder__quote,
.founder__certs {
  opacity: 0;
}

/* ── Metodologia text initial state ── */
.metodologia__content > div:first-child .section-label,
.metodologia__content > div:first-child .section-title,
.metodologia__content > div:first-child .section-subtitle {
  opacity: 0;
}

/* ── Delivery initial state ── */
.delivery__content .section-label,
.delivery__content .section-title,
.delivery__content .section-subtitle {
  opacity: 0;
}

/* ── AI section text initial state ── */
.ai-section__content > div:last-child .section-label,
.ai-section__content > div:last-child .section-title,
.ai-section__content > div:last-child .section-subtitle {
  opacity: 0;
}

/* ── Diferencial text initial state ── */
.diferencial__text .section-label,
.diferencial__text .section-title,
.diferencial__text .section-subtitle {
  opacity: 0;
}

/* ── Tech categories initial state ── */
.tech__categories > div {
  opacity: 0;
}

/* ── Founder certs initial state ── */
.founder__cert-badge {
  opacity: 0;
}

/* ── Accessibility: Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .hero__badge,
  .hero__title,
  .hero__description,
  .hero__actions,
  .hero__stats,
  .hero__hex-container,
  .service-card,
  .pilar-card,
  .client-card,
  .delivery__card,
  .ai-cap,
  .diferencial__feature,
  .metodologia__step,
  .ai-section__visual,
  .diferencial__visual,
  .founder__avatar,
  .clients__testimonial,
  .delivery__note,
  .numbers__item,
  .portfolio__tab,
  .cta__title,
  .cta__subtitle,
  .cta__buttons,
  .diferencial__code-line {
    opacity: 1 !important;
    transform: none !important;
  }
}