/* ============================================================================
   AYC MOTION — animación de entrada (jun-2026, v2 DRAMÁTICA)
   ----------------------------------------------------------------------------
   El cliente "no veía vida": la v1 (blur sutil 6px / 30px en 1s) era demasiado
   suave. v2 = entradas CLARAS y visibles tipo Elementor Pro (mismas animaciones
   animate.css: rise/slide/zoom + wipe en imágenes), con keyframes (más fiables
   que transitions) y stagger marcado. HERO en la carga, resto en scroll.
   SEGURIDAD: anima solo WIDGETS-HOJA (nunca contenedores con hijos absolutos);
   el JS excluye filosofía, conector, timeline, header/footer, carruseles, forms.
   reduced-motion → fade suave (NO se desactiva del todo: el cliente quiere vida).
   Fail-open: el estado oculto solo lo aplican clases que pone el JS.
   ============================================================================ */

/* ---- keyframes (a nivel raíz; las aplican las reglas @media de abajo) ---- */
@keyframes ayc-rise {
  from { opacity: 0; transform: translateY(56px) scale(.965); }
  to   { opacity: 1; transform: none; }
}
@keyframes ayc-rise-l {
  from { opacity: 0; transform: translateX(-64px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ayc-rise-r {
  from { opacity: 0; transform: translateX(64px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ayc-zoom {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: none; }
}
@keyframes ayc-wipe {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: scale(1.06); }
  55%  { opacity: 1; }
  to   { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes ayc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ayc-pop {            /* "pop" con overshoot — burbujas filosofía / promesa */
  0%   { opacity: 0; transform: scale(.55); }
  68%  { opacity: 1; transform: scale(1.07); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes ayc-wipe-x {         /* el diagrama "se dibuja" de izquierda a derecha */
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@media (min-width: 1025px) {

  /* estado preparado (oculto) — lo pone el JS con .ayc-mo / .ayc-mo-img / .ayc-mo-fade */
  .ayc-mo, .ayc-mo-img, .ayc-mo-fade { opacity: 0; }

  /* revelado → reproduce la animación, escalonada por --mo-i */
  .ayc-mo.ayc-mo-in {
    animation: ayc-rise 1.05s cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: calc(var(--mo-i, 0) * 140ms);
  }
  .ayc-mo.ayc-mo-l.ayc-mo-in { animation-name: ayc-rise-l; }
  .ayc-mo.ayc-mo-r.ayc-mo-in { animation-name: ayc-rise-r; }
  .ayc-mo.ayc-mo-zoom.ayc-mo-in { animation-name: ayc-zoom; }

  .ayc-mo-img.ayc-mo-in {
    animation: ayc-wipe 1.35s cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: calc(var(--mo-i, 0) * 140ms);
  }

  /* HERO: en la carga, cascada un poco más marcada (primer impacto). */
  .ayc-mo-hero .ayc-mo.ayc-mo-in     { animation-delay: calc(180ms + var(--mo-i, 0) * 160ms); }
  .ayc-mo-hero .ayc-mo-img.ayc-mo-in { animation-delay: calc(120ms + var(--mo-i, 0) * 160ms); }

  /* FILOSOFÍA: las burbujas/arco son ABSOLUTOS (transform los rompe) → solo fade.
     Conservan .ayc-d-reveal.is-revealed (sistema viejo) cuya neutralización fuerza
     opacity:1 !important (0,5,0) → se gana con (0,6,0)+!important. */
  /* ARCO (domo): fade suave, primero */
  .ayc-native.ayc-native.ayc-native .qs-philo-stage .qs-philo-arc.ayc-mo-fade { opacity: 0 !important; }
  .ayc-native.ayc-native.ayc-native .qs-philo-stage .qs-philo-arc.ayc-mo-fade.ayc-mo-in {
    animation: ayc-fade 1.1s ease-out both !important; opacity: 1 !important;
  }
  /* BURBUJAS: POP con overshoot, escalonado centro→afuera. Scale en el .qs-philo-item
     (top/left fijos → no se desposiciona); la animación vence al transform:none !important
     de la neutralización (las animaciones CSS ganan a !important). */
  /* Se anima el .e-con-inner del item (la neutralización solo toca el item con .ayc-d-reveal,
     NO su inner) → el keyframe controla opacidad+escala SIN pelear con !important, y el
     backwards-fill mantiene cada burbuja oculta durante SU delay (aparecen UNA POR UNA). */
  .ayc-native.ayc-native.ayc-native .qs-philo-stage .qs-philo-item.ayc-mo-pop > .elementor-element {
    opacity: 0 !important;
    transform: scale(.5) !important;
    transition: opacity .8s ease-out, transform 1.0s cubic-bezier(.34, 1.56, .64, 1) !important;
    transition-delay: calc(120ms + var(--mo-i, 0) * 300ms) !important;  /* stagger CENTRO→AFUERA */
  }
  .ayc-native.ayc-native.ayc-native .qs-philo-stage .qs-philo-item.ayc-mo-pop.ayc-mo-in > .elementor-element {
    opacity: 1 !important;
    transform: none !important;
  }

  /* "QUÉ NOS HACE DIFERENTES": el diagrama (serpentín + discos) SE DIBUJA izq→der (wipe). */
  .ayc-diff-prep { clip-path: inset(0 100% 0 0); }
  .ayc-diff-prep.ayc-diff-in { animation: ayc-wipe-x 2.1s cubic-bezier(.22, 1, .3, 1) both; }

  /* "NUESTRA PROMESA" (Home): el círculo del logo entra con POP. */
  .ayc-promesa-prep { opacity: 0; }
  .ayc-promesa-prep.ayc-mo-in { animation: ayc-pop 1.15s cubic-bezier(.34, 1.56, .64, 1) both; }
}

/* Anti-FOUC: oculta los widgets del PRIMER bloque (hero) ANTES del primer paint
   mientras <html> esté "armado" (script inline del <head>); ayc-motion.js lo
   desarma al preparar (failsafe: el head lo desarma solo a los 2s). */
@media (min-width: 1025px) {
  html.ayc-mo-arm .elementor:not(.elementor-location-header):not(.elementor-location-footer) > .elementor-element:first-child :is(
    .elementor-widget-heading, .elementor-widget-text-editor, .elementor-widget-button,
    .elementor-widget-image, .elementor-widget-icon-box, .elementor-widget-icon-list,
    .elementor-widget-image-box, .elementor-widget-counter
  ) { opacity: 0 !important; }
}

/* Accesibilidad: con reduced-motion NO se desactiva del todo (el cliente quiere
   vida) — solo se hace un fade suave SIN desplazamiento. En móvil, todo visible. */
@media (prefers-reduced-motion: reduce) and (min-width: 1025px) {
  .ayc-mo.ayc-mo-in, .ayc-mo-img.ayc-mo-in,
  .ayc-diff-prep.ayc-diff-in, .ayc-promesa-prep.ayc-mo-in,
  .ayc-native.ayc-native.ayc-native .qs-philo-stage .qs-philo-item.ayc-mo-pop.ayc-mo-in > .elementor-element,
  .ayc-native.ayc-native.ayc-native .qs-philo-stage .qs-philo-arc.ayc-mo-fade.ayc-mo-in {
    animation: ayc-fade .6s ease-out both !important;
    clip-path: none !important; transform: none !important;
  }
}
@media (max-width: 1024px) {
  .ayc-mo, .ayc-mo-img, .ayc-mo-fade, .ayc-mo-pop, .ayc-diff-prep, .ayc-promesa-prep,
  .qs-philo-stage .qs-philo-item.ayc-mo-pop > .elementor-element {
    opacity: 1 !important; transform: none !important; filter: none !important;
    clip-path: none !important; animation: none !important;
  }
}