/* ==========================================================================
   CANACO Tonalá — Motor de Transiciones · Publicidad B2B
   Fase 1: 4 efectos base + 4 premium.
   Fase 2: velocidad (--ad-speed) y dirección (ad-dir-*) por zona,
           + estilos de la Vista Previa en vivo del editor.
   Diseño autocontenido: cada efecto controla su propia opacidad, por lo que
   NO depende de utilidades externas y sirve igual en el sitio y en la preview.
   Velocidad = multiplicador unitario: normal=1, lenta=1.7, rápida=0.55.
   ========================================================================== */

/* Recorte de contenedores del sitio público (evita scroll horizontal). */
#hero-slider-container,
#interstitial-container,
#ad-eventos-container,
#ad-servicios-container,
#ad-capacitacion-container {
  overflow: hidden;
}

/* Base común de cada capa de banner. */
.ad-trans-fade, .ad-trans-slide, .ad-trans-zoom, .ad-trans-blur,
.ad-trans-ken,  .ad-trans-flip,  .ad-trans-reveal, .ad-trans-push {
  position: absolute;
  inset: 0;
  will-change: transform, opacity, filter;
}

/* Multiplicadores de velocidad. */
.ad-speed-slow   { --ad-speed: 1.7; }
.ad-speed-normal { --ad-speed: 1; }
.ad-speed-fast   { --ad-speed: .55; }

/* -------------------------- 1) CROSSFADE ------------------------------ */
.ad-trans-fade { transition: opacity calc(var(--ad-speed, 1) * 1s) ease; }
.ad-trans-fade.ad-hidden { opacity: 0; }
.ad-trans-fade.ad-active { opacity: 1; }

/* -------------------------- 2) DESLIZAMIENTO -------------------------- */
.ad-trans-slide { transition: transform calc(var(--ad-speed, 1) * .8s) cubic-bezier(.65, 0, .35, 1); opacity: 1 !important; }
.ad-trans-slide.ad-hidden { transform: translateX(100%); }
.ad-trans-slide.ad-active { transform: translateX(0); }
.ad-trans-slide.ad-dir-ltr.ad-hidden { transform: translateX(-100%); }

/* -------------------------- 3) ZOOM IN -------------------------------- */
.ad-trans-zoom { transition: transform calc(var(--ad-speed, 1) * 1.1s) ease, opacity calc(var(--ad-speed, 1) * .8s) ease; }
.ad-trans-zoom.ad-hidden { transform: scale(1.25); opacity: 0; }
.ad-trans-zoom.ad-active { transform: scale(1); opacity: 1; }

/* -------------------------- 4) DESENFOQUE ----------------------------- */
.ad-trans-blur { transition: filter calc(var(--ad-speed, 1) * 1s) ease, opacity calc(var(--ad-speed, 1) * .9s) ease, transform calc(var(--ad-speed, 1) * 1s) ease; }
.ad-trans-blur.ad-hidden { filter: blur(22px); transform: scale(1.08); opacity: 0; }
.ad-trans-blur.ad-active { filter: blur(0); transform: scale(1); opacity: 1; }

/* ============================== PREMIUM =============================== */

/* -------------------------- 5) KEN BURNS ------------------------------ */
.ad-trans-ken { transition: opacity calc(var(--ad-speed, 1) * 1.1s) ease; }
.ad-trans-ken.ad-hidden { opacity: 0; }
.ad-trans-ken.ad-active { opacity: 1; animation: adKenBurns calc(var(--ad-speed, 1) * 7s) ease-out forwards; }
@keyframes adKenBurns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.18) translate(-3%, -2%); }
}

/* -------------------------- 6) FLIP 3D -------------------------------- */
.ad-trans-flip { transition: transform calc(var(--ad-speed, 1) * .85s) cubic-bezier(.6, .05, .3, 1); backface-visibility: hidden; opacity: 1 !important; }
.ad-trans-flip.ad-hidden { transform: perspective(1200px) rotateY(90deg); }
.ad-trans-flip.ad-active { transform: perspective(1200px) rotateY(0deg); }

/* -------------------------- 7) CORTINA / REVELADO -------------------- */
.ad-trans-reveal {
  transition: clip-path calc(var(--ad-speed, 1) * 1s) cubic-bezier(.77, 0, .18, 1),
              -webkit-clip-path calc(var(--ad-speed, 1) * 1s) cubic-bezier(.77, 0, .18, 1);
  opacity: 1 !important;
}
.ad-trans-reveal.ad-hidden {
  -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
          clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
.ad-trans-reveal.ad-active {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* -------------------------- 8) PARALLAX PUSH + DESTELLO -------------- */
.ad-trans-push { transition: transform calc(var(--ad-speed, 1) * .9s) cubic-bezier(.7, 0, .2, 1), filter calc(var(--ad-speed, 1) * .9s) ease; opacity: 1 !important; }
.ad-trans-push.ad-hidden { transform: translateX(100%) scale(.94); filter: brightness(.85); }
.ad-trans-push.ad-active { transform: translateX(0) scale(1); filter: brightness(1); }
.ad-trans-push.ad-dir-ltr.ad-hidden { transform: translateX(-100%) scale(.94); }
.ad-trans-push.ad-active::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: adShine calc(var(--ad-speed, 1) * 1.1s) ease .1s 1;
}
@keyframes adShine { to { transform: translateX(120%); } }

/* ============ VISTA PREVIA EN VIVO (editor Publicidad B2B) ============ */
.ad-preview { position: relative; overflow: hidden; border-radius: 8px; }
.ad-preview .ad-preview-slide {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-weight: 800; font-size: .72rem; letter-spacing: .03em; color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
.ad-preview .ad-active { z-index: 2; }
.ad-preview .ad-hidden { z-index: 1; }

/* ==================== ACCESIBILIDAD (reduce motion) ================== */
@media (prefers-reduced-motion: reduce) {
  .ad-trans-fade, .ad-trans-slide, .ad-trans-zoom, .ad-trans-blur,
  .ad-trans-ken, .ad-trans-flip, .ad-trans-reveal, .ad-trans-push {
    transition: opacity .3s ease !important;
    animation: none !important;
  }
  .ad-trans-slide.ad-hidden, .ad-trans-flip.ad-hidden,
  .ad-trans-reveal.ad-hidden, .ad-trans-push.ad-hidden {
    transform: none !important; filter: none !important;
    -webkit-clip-path: none !important; clip-path: none !important;
    opacity: 0 !important;
  }
  .ad-trans-slide.ad-active, .ad-trans-flip.ad-active,
  .ad-trans-reveal.ad-active, .ad-trans-push.ad-active {
    transform: none !important; filter: none !important;
    -webkit-clip-path: none !important; clip-path: none !important;
    opacity: 1 !important;
  }
}