/*
 * tv-transitions.css — Mapeo id → animación de transición de entrada.
 * Fuente única para la TV (index.html) y la página de preview del admin
 * (transition-preview.html), así el preview es idéntico a lo que se ve en pantalla.
 *
 * Duración y "sensación" por variables (las pone el carrusel por diapositiva):
 *   --on6-tdur  duración (p.ej. 0.7s)   --on6-tease  curva de easing
 *
 * Los nombres de keyframes (wipe-in-left, circle-in-center, …) los provee
 * css/transition.css (Adam Argyle, clip-path). 'none' no lleva animación.
 */

:root { --on6-tdur: 0.7s; --on6-tease: cubic-bezier(.4, 0, .2, 1); }

/* Básicas (propias: opacidad/transform) */
.slide.enter.t-fade  { animation: t-fade  var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-slide { animation: t-slide var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-zoom  { animation: t-zoom  var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-flip  { animation: t-flip  var(--on6-tdur) var(--on6-tease) both; }

@keyframes t-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-slide { from { opacity: 0; transform: translateX(8%); } to { opacity: 1; transform: none; } }
@keyframes t-zoom  { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }
@keyframes t-flip  { from { opacity: 0; transform: perspective(1200px) rotateY(35deg); } to { opacity: 1; transform: none; } }

/* Cortinas (wipe) */
.slide.enter.t-wipe-in-left         { animation: wipe-in-left         var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-wipe-in-right        { animation: wipe-in-right        var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-wipe-in-top          { animation: wipe-in-top          var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-wipe-in-bottom       { animation: wipe-in-bottom       var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-wipe-in-top-left     { animation: wipe-in-top-left     var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-wipe-in-top-right    { animation: wipe-in-top-right    var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-wipe-in-bottom-left  { animation: wipe-in-bottom-left  var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-wipe-in-bottom-right { animation: wipe-in-bottom-right var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-wipe-cinematic-in    { animation: wipe-cinematic-in    var(--on6-tdur) var(--on6-tease) both; }

/* Círculo */
.slide.enter.t-circle-in-center       { animation: circle-in-center       var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-circle-in-top-left     { animation: circle-in-top-left     var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-circle-in-top-right    { animation: circle-in-top-right    var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-circle-in-bottom-left  { animation: circle-in-bottom-left  var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-circle-in-bottom-right { animation: circle-in-bottom-right var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-circle-in-hesitate     { animation: circle-in-hesitate     var(--on6-tdur) var(--on6-tease) both; }

/* Cuadrado */
.slide.enter.t-square-in-center       { animation: square-in-center       var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-square-in-top-left     { animation: square-in-top-left     var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-square-in-top-right    { animation: square-in-top-right    var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-square-in-bottom-left  { animation: square-in-bottom-left  var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-square-in-bottom-right { animation: square-in-bottom-right var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-square-in-hesitate     { animation: square-in-hesitate     var(--on6-tdur) var(--on6-tease) both; }

/* Formas */
.slide.enter.t-diamond-in-center       { animation: diamond-in-center       var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-diamond-in-double-scale { animation: diamond-in-double-scale var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-polygon-in-opposing-corners { animation: polygon-in-opposing-corners var(--on6-tdur) var(--on6-tease) both; }

/* Alias retrocompatibles (diapositivas creadas antes del catálogo ampliado) */
.slide.enter.t-wipe      { animation: wipe-in-left                var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-wipe-up   { animation: wipe-in-bottom              var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-circle    { animation: circle-in-center            var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-diamond   { animation: diamond-in-center           var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-cinematic { animation: wipe-cinematic-in           var(--on6-tdur) var(--on6-tease) both; }
.slide.enter.t-corners   { animation: polygon-in-opposing-corners var(--on6-tdur) var(--on6-tease) both; }