/* ════════════════════════════════════════════════════
   CONSTRUCCIONES JOSÉ LUIS UMAÑA — animations.css
   GPU-only · prefers-reduced-motion aware
   ════════════════════════════════════════════════════ */

/* ── SCROLL REVEAL — estado inicial ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── HERO — entrada limpia y cinematográfica ── */
@keyframes heroSlideUp {
  from {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Imagen de fondo: aparece primero con un leve zoom-out */
.hero__bg-media {
  animation: heroBgReveal 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes heroBgReveal {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

/* Contenido: cada elemento entra en secuencia con blur→nitidez */
.hero__headline { animation: heroSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both; }
.hero__sub      { animation: heroSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.05s both; }
.hero__ctas     { animation: heroSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.20s both; }
.hero__trust    { animation: fadeIn      0.8s ease                           1.40s both; }

.nav { animation: fadeIn 0.6s ease 0.1s both; }

/* ── WHATSAPP float pulse ── */
@keyframes waPulse {
  0%   { transform: scale(1);    opacity: 0.6; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
.wa-float {
  position: fixed;
}
.wa-float::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: waPulse 2.8s ease-out infinite;
  pointer-events: none;
}

/* ── FAQ accordion ── */
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq__item.open .faq__a { max-height: 320px; }

/* ── Portfolio filter transition ── */
.pcard {
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.pcard.hiding {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
}

@keyframes cardIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.pcard.showing { animation: cardIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ── Loading spinner (form submit) ── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn--loading::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid rgba(10,10,10,0.3);
  border-top-color: #0A0A0A;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ════════════════════════════════════════════════════
   prefers-reduced-motion
   ════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero__headline, .hero__sub,
  .hero__ctas, .hero__trust, .nav { animation: none; opacity: 1; transform: none; }
  .wa-float::after { animation: none; }
  .hero__orb { animation: none; }
}