/**
 * Lego Motion — apariciones reutilizables.
 *
 * Criterio de uso (no saturar):
 * - Preferir 1 efecto por bloque / sección visible.
 * - Alternar fade-left / fade-right solo en listados largos (p. ej. unidades).
 * - En cabeceras y CTAs: fade-up o fade (suave).
 * - Delay corto (40–120ms); evitar cascadas largas.
 * - No animar el mismo patrón en toda la página: variar ritmo.
 * - Respetar prefers-reduced-motion (ya cubierto abajo).
 *
 * Uso en markup:
 *   data-cco-motion="fade-up|fade|fade-left|fade-right|zoom"
 *   data-cco-motion-stagger   (en el contenedor; anima hijos [data-cco-motion-item])
 *   style="--cco-motion-delay:120ms"  (retardo opcional)
 *
 * PHP: cco_motion_attrs( $effect, $args ) | cco_page_html_block( ..., $motion )
 * Compat: data-cco-reveal (home); .is-visible activa el efecto.
 *
 * @package CCO_Oruro
 */

[data-cco-motion],
[data-cco-reveal]:not([data-cco-reveal='eager']) {
  opacity: 0;
  transform: translate3d(0, 1.15rem, 0);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--cco-motion-delay, 0ms);
  will-change: opacity, transform;
}

[data-cco-motion='fade'] {
  transform: none;
}

[data-cco-motion='fade-up'],
[data-cco-motion=''] {
  transform: translate3d(0, 1.15rem, 0);
}

[data-cco-motion='fade-left'] {
  transform: translate3d(-3.75rem, 0.35rem, 0);
  transition-duration: 0.85s, 0.85s;
}

[data-cco-motion='fade-right'] {
  transform: translate3d(3.75rem, 0.35rem, 0);
  transition-duration: 0.85s, 0.85s;
}

[data-cco-motion='zoom'] {
  transform: scale(0.96);
}

[data-cco-motion].is-visible,
[data-cco-reveal].is-visible,
[data-cco-reveal='eager'] {
  opacity: 1;
  transform: none;
}

/* Stagger: el padre dispara; los hijos entran en cascada */
[data-cco-motion-stagger] [data-cco-motion-item] {
  opacity: 0;
  transform: translate3d(0, 0.9rem, 0);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

[data-cco-motion-stagger].is-visible [data-cco-motion-item],
[data-cco-motion-stagger][data-cco-reveal='eager'] [data-cco-motion-item] {
  opacity: 1;
  transform: none;
}

[data-cco-motion-stagger] [data-cco-motion-item]:nth-child(1) { transition-delay: 0ms; }
[data-cco-motion-stagger] [data-cco-motion-item]:nth-child(2) { transition-delay: 70ms; }
[data-cco-motion-stagger] [data-cco-motion-item]:nth-child(3) { transition-delay: 140ms; }
[data-cco-motion-stagger] [data-cco-motion-item]:nth-child(4) { transition-delay: 210ms; }
[data-cco-motion-stagger] [data-cco-motion-item]:nth-child(5) { transition-delay: 280ms; }
[data-cco-motion-stagger] [data-cco-motion-item]:nth-child(6) { transition-delay: 350ms; }
[data-cco-motion-stagger] [data-cco-motion-item]:nth-child(7) { transition-delay: 420ms; }
[data-cco-motion-stagger] [data-cco-motion-item]:nth-child(8) { transition-delay: 490ms; }

@media (prefers-reduced-motion: reduce) {
  [data-cco-motion],
  [data-cco-reveal],
  [data-cco-motion-stagger] [data-cco-motion-item] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .cco-page-hero__mark img,
  .cco-single-hero__mark img {
    animation: none !important;
  }
}

/* Marca del hero — reduce suave desde el tamaño original (un poco a la izquierda) */
@keyframes cco-hero-mark-zoom {
  from {
    transform: scale(1) translateX(0);
  }
  to {
    transform: scale(0.86) translateX(-6%);
  }
}

@keyframes cco-single-hero-mark-zoom {
  from {
    transform: translateX(48%) scale(1);
  }
  to {
    transform: translateX(40%) scale(0.86);
  }
}

.cco-page-hero__mark {
  overflow: visible;
}

.cco-page-hero__mark img {
  transform-origin: 70% 50%;
  will-change: transform;
  animation: cco-hero-mark-zoom 18s ease-out forwards;
}

.cco-single-hero__mark img {
  transform-origin: 60% 50%;
  will-change: transform;
  animation: cco-single-hero-mark-zoom 18s ease-out forwards;
}