/**
 * BXC Base - Sistema de animaciones (bxc-).
 * -----------------------------------------------------------
 * Keyframes y clases utilitarias. Combinable con los modificadores:
 *   .bxc-animation-duration_{n}   segundos
 *   .bxc-animation-count_{n|infinite}
 *   .bxc-animation-delay_{n}      segundos
 *   .bxc-opacity_{0..1}
 *   .bxc-showIntoViewport         dispara animación al entrar en viewport
 *   .bxc-efx-{nombre}             tipo de efecto a disparar
 */

/* ===================================================================
 * KEYFRAMES
 * =================================================================== */
/* Fade */
@keyframes bxc-fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes bxc-fadeOut {
	from { opacity: 1; }
	to   { opacity: 0; }
}
@keyframes bxc-fadeInUp {
	from { opacity: 0; transform: translateY(40px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes bxc-fadeInDown {
	from { opacity: 0; transform: translateY(-40px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes bxc-fadeInLeft {
	from { opacity: 0; transform: translateX(-40px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes bxc-fadeInRight {
	from { opacity: 0; transform: translateX(40px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* Slide */
@keyframes bxc-slideInFromLeft {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(0%); }
}
@keyframes bxc-slideOutToLeft {
	0%   { transform: translateX(0%); }
	100% { transform: translateX(-100%); }
}
@keyframes bxc-slideInFromRight {
	0%   { transform: translateX(100%); }
	100% { transform: translateX(0%); }
}
@keyframes bxc-slideOutToRight {
	0%   { transform: translateX(0%); }
	100% { transform: translateX(100%); }
}
@keyframes bxc-slideInFromTop {
	0%   { transform: translateY(-200%); }
	100% { transform: translateY(0%); }
}
@keyframes bxc-slideInFromBottom {
	0%   { transform: translateY(200%); }
	100% { transform: translateY(0%); }
}

/* Scale / zoom */
@keyframes bxc-zoomIn {
	from { opacity: 0; transform: scale(0.6); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes bxc-zoomOut {
	from { opacity: 1; transform: scale(1); }
	to   { opacity: 0; transform: scale(0.6); }
}

/* Pulse / bounce / shake / float */
@keyframes bxc-pulse {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.2); }
	100% { transform: scale(1); }
}
@keyframes bxc-bounce {
	0%, 100% { transform: translateY(0); }
	25%      { transform: translateY(-15px); }
	50%      { transform: translateY(0); }
	75%      { transform: translateY(-8px); }
}
@keyframes bxc-shake {
	0%, 100% { transform: translateX(0); }
	10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
	20%, 40%, 60%, 80% { transform: translateX(8px); }
}
@keyframes bxc-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-12px); }
}

/* Rotaciones */
@keyframes bxc-spinLeft {
	0%   { transform: rotateZ(0deg); }
	100% { transform: rotateZ(-360deg); }
}
@keyframes bxc-spinRight {
	0%   { transform: rotateZ(0deg); }
	100% { transform: rotateZ(360deg); }
}
@keyframes bxc-flip {
	from { transform: perspective(400px) rotateY(0); }
	to   { transform: perspective(400px) rotateY(360deg); }
}
@keyframes bxc-tilt {
	0%, 100% { transform: rotate(0deg); }
	25%      { transform: rotate(5deg); }
	75%      { transform: rotate(-5deg); }
}

/* Efectos modernos */
@keyframes bxc-shimmer {
	0%   { background-position: -1000px 0; }
	100% { background-position: 1000px 0; }
}
@keyframes bxc-glow {
	0%, 100% { box-shadow: 0 0 4px rgba(255,255,255,0.6); }
	50%      { box-shadow: 0 0 20px rgba(255,255,255,1), 0 0 40px rgba(255,255,255,0.7); }
}
@keyframes bxc-gradientShift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
@keyframes bxc-blurIn {
	from { opacity: 0; filter: blur(12px); }
	to   { opacity: 1; filter: blur(0); }
}
@keyframes bxc-skewIn {
	from { opacity: 0; transform: skewX(-25deg) translateX(-100%); }
	to   { opacity: 1; transform: skewX(0deg) translateX(0); }
}
@keyframes bxc-ripple {
	0%   { transform: scale(0); opacity: 1; }
	100% { transform: scale(4); opacity: 0; }
}

/* ===================================================================
 * CLASES UTILITARIAS
 * =================================================================== */
.bxc-fadeIn            { animation: bxc-fadeIn 1s;            animation-fill-mode: forwards; }
.bxc-fadeOut           { animation: bxc-fadeOut 1s;           animation-fill-mode: forwards; }
.bxc-fadeInUp          { animation: bxc-fadeInUp 0.8s;        animation-fill-mode: forwards; }
.bxc-fadeInDown        { animation: bxc-fadeInDown 0.8s;      animation-fill-mode: forwards; }
.bxc-fadeInLeft        { animation: bxc-fadeInLeft 0.8s;      animation-fill-mode: forwards; }
.bxc-fadeInRight       { animation: bxc-fadeInRight 0.8s;     animation-fill-mode: forwards; }
.bxc-slideInFromLeft   { animation: bxc-slideInFromLeft 1s;   animation-fill-mode: forwards; }
.bxc-slideInFromRight  { animation: bxc-slideInFromRight 1s;  animation-fill-mode: forwards; }
.bxc-slideInFromTop    { animation: bxc-slideInFromTop 1s;    animation-fill-mode: forwards; }
.bxc-slideInFromBottom { animation: bxc-slideInFromBottom 1s; animation-fill-mode: forwards; }
.bxc-zoomIn            { animation: bxc-zoomIn 0.6s;          animation-fill-mode: forwards; }
.bxc-zoomOut           { animation: bxc-zoomOut 0.6s;         animation-fill-mode: forwards; }
.bxc-pulse             { animation: bxc-pulse 1s;             animation-iteration-count: infinite; transform-origin: 50% 50%; }
.bxc-bounce            { animation: bxc-bounce 1.5s;          animation-iteration-count: infinite; }
.bxc-shake             { animation: bxc-shake 0.6s;           animation-iteration-count: infinite; }
.bxc-float             { animation: bxc-float 3s ease-in-out; animation-iteration-count: infinite; }
.bxc-spinLeft          { animation: bxc-spinLeft 1s linear;   animation-iteration-count: infinite; }
.bxc-spinRight         { animation: bxc-spinRight 1s linear;  animation-iteration-count: infinite; }
.bxc-flip              { animation: bxc-flip 1.5s;            animation-iteration-count: infinite; }
.bxc-tilt              { animation: bxc-tilt 1s;              animation-iteration-count: infinite; }
.bxc-shimmer           { background: linear-gradient(90deg, #ececec 0%, #f5f5f5 50%, #ececec 100%); background-size: 1000px 100%; animation: bxc-shimmer 2s infinite linear; }
.bxc-glow              { animation: bxc-glow 2s ease-in-out infinite; }
.bxc-blurIn            { animation: bxc-blurIn 0.7s forwards; }
.bxc-skewIn            { animation: bxc-skewIn 0.7s forwards; }
.bxc-gradientShift     { background-size: 200% 200%; animation: bxc-gradientShift 4s ease infinite; }

/* ===================================================================
 * MODIFIADORES POR CLASE (parseados por JS)
 * =================================================================== */
/* .bxc-animation-duration_{segundos} */
/* .bxc-animation-count_{numero|infinite} */
/* .bxc-animation-delay_{segundos} */
/* .bxc-opacity_{0..1} */
/* .bxc-easing_{ease|ease-in|ease-out|ease-in-out|linear} */

/* ===================================================================
 * SHOW-ON-VIEWPORT (entradas con retardo)
 * =================================================================== */
.bxc-showIntoViewport {
	opacity: 0;
	transition: opacity 0.6s ease;
	will-change: opacity, transform;
}
.bxc-showIntoViewport.bxc-is-visible {
	opacity: 1;
}