/**
 * Popup Rueda de Descuento – Exit Intent y Captación Email
 * Frontend Animations CSS
 *
 * @author    STARTER STARTER
 * @copyright 2025 STARTER STARTER
 * @license   Commercial
 */

/* =====================================================
   ENTRANCE ANIMATIONS
   ===================================================== */

/* Fade In */
@keyframes psolFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.psol-popup-enter-fade {
    animation: psolFadeIn 0.3s ease-out forwards;
}

/* Slide Up */
@keyframes psolSlideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.psol-popup-enter-slide-up {
    animation: psolSlideUp 0.4s ease-out forwards;
}

/* Slide Down */
@keyframes psolSlideDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.psol-popup-enter-slide-down {
    animation: psolSlideDown 0.4s ease-out forwards;
}

/* Scale */
@keyframes psolScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.psol-popup-enter-scale {
    animation: psolScale 0.3s ease-out forwards;
}

/* Bounce */
@keyframes psolBounce {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.psol-popup-enter-bounce {
    animation: psolBounce 0.5s ease-out forwards;
}

/* Flip */
@keyframes psolFlip {
    from {
        opacity: 0;
        transform: perspective(400px) rotateX(90deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotateX(0);
    }
}

.psol-popup-enter-flip {
    animation: psolFlip 0.5s ease-out forwards;
}

/* =====================================================
   EXIT ANIMATIONS
   ===================================================== */

/* Fade Out */
@keyframes psolFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.psol-popup-exit-fade {
    animation: psolFadeOut 0.2s ease-in forwards;
}

/* Scale Out */
@keyframes psolScaleOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

.psol-popup-exit-scale {
    animation: psolScaleOut 0.2s ease-in forwards;
}

/* =====================================================
   WHEEL ANIMATIONS
   ===================================================== */

/* Wheel Spin */
@keyframes psolWheelSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(var(--spin-rotation, 1800deg));
    }
}

.psol-wheel-spinning {
    animation: psolWheelSpin var(--spin-duration, 5s) cubic-bezier(0.17, 0.67, 0.12, 0.99) forwards;
}

/* Wheel Pulse (before spin) */
@keyframes psolWheelPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

.psol-wheel-pulse {
    animation: psolWheelPulse 1.5s ease-in-out infinite;
}

/* Wheel Glow */
@keyframes psolWheelGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.6);
    }
}

.psol-wheel-glow {
    animation: psolWheelGlow 2s ease-in-out infinite;
}

/* =====================================================
   BUTTON ANIMATIONS
   ===================================================== */

/* Button Pulse */
@keyframes psolButtonPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    }
}

.psol-btn-pulse {
    animation: psolButtonPulse 1.5s ease-in-out infinite;
}

/* Button Shake */
@keyframes psolButtonShake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.psol-btn-shake {
    animation: psolButtonShake 0.5s ease-in-out;
}

/* =====================================================
   WIN/LOSE ANIMATIONS
   ===================================================== */

/* Win Celebration */
@keyframes psolWinCelebration {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.psol-win-celebration {
    animation: psolWinCelebration 0.6s ease-out forwards;
}

/* Prize Reveal */
@keyframes psolPrizeReveal {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.psol-prize-reveal {
    animation: psolPrizeReveal 0.4s ease-out forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

/* Coupon Code Highlight */
@keyframes psolCouponHighlight {
    0%, 100% {
        background-color: rgba(255, 215, 0, 0.2);
    }
    50% {
        background-color: rgba(255, 215, 0, 0.5);
    }
}

.psol-coupon-highlight {
    animation: psolCouponHighlight 1s ease-in-out 3;
}

/* Lose Shake */
@keyframes psolLoseShake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-10px);
    }
    75% {
        transform: translateX(10px);
    }
}

.psol-lose-shake {
    animation: psolLoseShake 0.3s ease-in-out 2;
}

/* =====================================================
   CONFETTI ANIMATIONS
   ===================================================== */

@keyframes psolConfettiFall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

.psol-confetti-piece {
    position: fixed;
    width: 10px;
    height: 10px;
    top: 0;
    animation: psolConfettiFall 3s linear forwards;
    z-index: 100001;
    pointer-events: none;
}

.psol-confetti-piece:nth-child(odd) {
    animation-duration: 2.5s;
}

.psol-confetti-piece:nth-child(3n) {
    width: 8px;
    height: 8px;
    animation-duration: 3.5s;
}

/* =====================================================
   FORM ANIMATIONS
   ===================================================== */

/* Input Focus */
@keyframes psolInputFocus {
    0% {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.4);
    }
    100% {
        box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
    }
}

.psol-input-focus {
    animation: psolInputFocus 0.3s ease-out forwards;
}

/* Input Error */
@keyframes psolInputError {
    0%, 100% {
        border-color: #e74c3c;
    }
    50% {
        border-color: #c0392b;
    }
}

.psol-input-error {
    animation: psolInputError 0.3s ease-in-out 2;
    border-color: #e74c3c !important;
}

/* Form Slide */
@keyframes psolFormSlide {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.psol-form-slide {
    animation: psolFormSlide 0.3s ease-out forwards;
}

/* =====================================================
   LOADING ANIMATIONS
   ===================================================== */

/* Spinner */
@keyframes psolSpinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.psol-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: psolSpinner 0.8s linear infinite;
}

/* Dots Loading */
@keyframes psolDotsLoading {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

.psol-dots-loading span {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 2px;
    background-color: currentColor;
    border-radius: 50%;
    animation: psolDotsLoading 1.4s ease-in-out infinite both;
}

.psol-dots-loading span:nth-child(1) {
    animation-delay: -0.32s;
}

.psol-dots-loading span:nth-child(2) {
    animation-delay: -0.16s;
}

/* =====================================================
   POINTER/ARROW ANIMATIONS
   ===================================================== */

/* Pointer Bounce */
@keyframes psolPointerBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.psol-pointer-bounce {
    animation: psolPointerBounce 0.5s ease-in-out infinite;
}

/* =====================================================
   OVERLAY ANIMATIONS
   ===================================================== */

/* Overlay Fade */
@keyframes psolOverlayFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.psol-overlay-enter {
    animation: psolOverlayFade 0.3s ease-out forwards;
}

.psol-overlay-exit {
    animation: psolOverlayFade 0.2s ease-in reverse forwards;
}

/* =====================================================
   UTILITY CLASSES
   ===================================================== */

/* Disable animations for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .psol-wheel-spinning {
        animation: none !important;
    }
}

/* Animation delay utilities */
.psol-delay-100 { animation-delay: 0.1s; }
.psol-delay-200 { animation-delay: 0.2s; }
.psol-delay-300 { animation-delay: 0.3s; }
.psol-delay-400 { animation-delay: 0.4s; }
.psol-delay-500 { animation-delay: 0.5s; }

/* Animation duration utilities */
.psol-duration-fast { animation-duration: 0.2s; }
.psol-duration-normal { animation-duration: 0.3s; }
.psol-duration-slow { animation-duration: 0.5s; }