/*
 * Style Studio – biblioteca de animaciones.
 * Todos los keyframes llevan el prefijo "sst-". Se cargan solo si alguna regla usa una animación.
 *
 * Dos decisiones para que no «salten»:
 *  · Los movimientos usan las propiedades individuales translate / rotate / scale (no `transform`), así se SUMAN
 *    al transform propio del elemento (el de Enfold, el que pongas en Diseño…) en lugar de pisarlo.
 *  · Las entradas solo definen el punto de partida (`from`): el final es el estilo real del elemento, de modo que
 *    al terminar no hay ningún cambio brusco, aunque el elemento tenga opacidad, giro o escala propios.
 *  · Distancia de las entradas: variable --sst-d (por defecto 40px), ajustable en la pestaña Animación.
 */

/* Entradas: fundido */
@keyframes sst-fadeIn        { from { opacity: 0; } }
@keyframes sst-fadeInUp      { from { opacity: 0; translate: 0 var(--sst-d, 40px); } }
@keyframes sst-fadeInDown    { from { opacity: 0; translate: 0 calc(var(--sst-d, 40px) * -1); } }
@keyframes sst-fadeInLeft    { from { opacity: 0; translate: calc(var(--sst-d, 40px) * -1) 0; } }
@keyframes sst-fadeInRight   { from { opacity: 0; translate: var(--sst-d, 40px) 0; } }

/* Entradas: zoom, deslizamiento, giro */
@keyframes sst-zoomIn        { from { opacity: 0; scale: .6; } }
@keyframes sst-zoomOutIn     { from { opacity: 0; scale: 1.35; } }
@keyframes sst-zoomInUp      { from { opacity: 0; scale: .6; translate: 0 var(--sst-d, 40px); } }
@keyframes sst-zoomInDown    { from { opacity: 0; scale: .6; translate: 0 calc(var(--sst-d, 40px) * -1); } }
@keyframes sst-slideInUp     { from { translate: 0 100%; visibility: visible; } }
@keyframes sst-slideInDown   { from { translate: 0 -100%; visibility: visible; } }
@keyframes sst-slideInLeft   { from { translate: -100% 0; visibility: visible; } }
@keyframes sst-slideInRight  { from { translate: 100% 0; visibility: visible; } }
@keyframes sst-flipInX       { from { opacity: 0; transform: perspective(600px) rotateX(90deg); } to { opacity: 1; transform: perspective(600px) rotateX(0); } }
@keyframes sst-flipInY       { from { opacity: 0; transform: perspective(600px) rotateY(90deg); } to { opacity: 1; transform: perspective(600px) rotateY(0); } }
@keyframes sst-rotateIn      { from { opacity: 0; rotate: -200deg; scale: .6; } }
@keyframes sst-bounceIn {
	0%   { opacity: 0; scale: .3; }
	20%  { scale: 1.1; }
	40%  { scale: .92; }
	60%  { opacity: 1; scale: 1.03; }
	80%  { scale: .97; }
}
@keyframes sst-popIn {
	0%   { opacity: 0; scale: .5; }
	70%  { opacity: 1; scale: 1.08; }
}

/* Entradas: efectos de revelado */
@keyframes sst-blurIn        { from { opacity: 0; filter: blur(14px); } }
@keyframes sst-skewIn        { from { opacity: 0; translate: -30px 0; transform: skewX(-12deg); } to { opacity: 1; translate: 0 0; transform: skewX(0); } }
@keyframes sst-clipRevealUp  { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sst-clipRevealLeft{ from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Atención (para hover, clic o bucle) */
@keyframes sst-pulse {
	50% { scale: 1.06; }
}
@keyframes sst-heartBeat {
	14% { scale: 1.18; }
	28% { scale: 1; }
	42% { scale: 1.18; }
	70% { scale: 1; }
}
@keyframes sst-bounce {
	0%, 20%, 53%, 100% { translate: 0 0; animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
	40%, 43%           { translate: 0 -26px; animation-timing-function: cubic-bezier(.755, .05, .855, .06); }
	70%                { translate: 0 -12px; animation-timing-function: cubic-bezier(.755, .05, .855, .06); }
	90%                { translate: 0 -4px; }
}
@keyframes sst-shake {
	0%, 100% { translate: 0 0; }
	10%, 30%, 50%, 70%, 90% { translate: -8px 0; }
	20%, 40%, 60%, 80%      { translate: 8px 0; }
}
@keyframes sst-headShake {
	0%   { translate: 0 0; rotate: 0deg; }
	6.5% { translate: -6px 0; rotate: -9deg; }
	18.5%{ translate: 5px 0; rotate: 7deg; }
	31.5%{ translate: -3px 0; rotate: -5deg; }
	43.5%{ translate: 2px 0; rotate: 3deg; }
	50%  { translate: 0 0; rotate: 0deg; }
}
@keyframes sst-wiggle {
	25% { rotate: -4deg; }
	75% { rotate: 4deg; }
}
@keyframes sst-swing {
	20% { rotate: 15deg; }
	40% { rotate: -10deg; }
	60% { rotate: 5deg; }
	80% { rotate: -5deg; }
	100% { rotate: 0deg; }
}
@keyframes sst-tada {
	10%, 20% { scale: .9; rotate: -3deg; }
	30%, 50%, 70%, 90% { scale: 1.1; rotate: 3deg; }
	40%, 60%, 80% { scale: 1.1; rotate: -3deg; }
	100% { scale: 1; rotate: 0deg; }
}
@keyframes sst-rubberBand {
	30% { scale: 1.25 .75; }
	40% { scale: .75 1.25; }
	50% { scale: 1.15 .85; }
	65% { scale: .95 1.05; }
	75% { scale: 1.05 .95; }
	100% { scale: 1; }
}
@keyframes sst-jello {
	11.1% { transform: none; }
	22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
	33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
	44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
	55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
	66.6% { transform: skewX(-.78125deg) skewY(-.78125deg); }
	77.7% { transform: skewX(.390625deg) skewY(.390625deg); }
	88.8% { transform: skewX(-.1953125deg) skewY(-.1953125deg); }
}
@keyframes sst-flash {
	25%, 75% { opacity: 0; }
}

/* Bucles suaves */
@keyframes sst-float {
	50% { translate: 0 -10px; }
}
@keyframes sst-breathe {
	50% { scale: 1.04; }
}
@keyframes sst-wave {
	10%, 30%, 50%, 70% { rotate: 14deg; }
	20%, 40%, 60%      { rotate: -8deg; }
	80%                { rotate: 0deg; }
}
@keyframes sst-spin    { to { rotate: 360deg; } }
@keyframes sst-glow {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); }
	50%      { box-shadow: 0 0 0 14px color-mix(in srgb, currentColor 0%, transparent); }
}
@keyframes sst-gradientShift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Si el runtime no llega a cargarse (caché agresiva, JS bloqueado), no se queda nada oculto esperando */
html.sst-fail [data-sst],
html.sst-fail [data-sst] * { animation-play-state: running !important; }

/* Resaltado que usa el editor en la vista previa (no afecta al sitio público) */
.sst-flash { outline: 2px solid #2271b1 !important; outline-offset: 2px !important; transition: outline-color .6s ease; }

@media (prefers-reduced-motion: reduce) {
	.sst-reduce-aware { animation: none !important; transition: none !important; }
}