/* ============================================
   Custom Styles for MundoPorra
   Centralized location for all custom styles
   ============================================ */

/* ============================================
   1. Input Styling
   ============================================ */

/* Hide number input spinners */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ============================================
   2. Custom Animations
   ============================================ */

/* Fade In Animation */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
}

/* Fade In Up Animation */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.5s ease-out forwards;
}

/* Fade In Down Animation */
@keyframes fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-down {
    animation: fade-in-down 0.5s ease-out forwards;
}

/* Pulse Once Animation */
@keyframes pulse-once {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.animate-pulse-once {
    animation: pulse-once 0.5s ease-in-out;
}

/* ============================================
   3. Animation Delay Utilities
   ============================================ */

.animation-delay-0 {
    animation-delay: 0s;
}

.animation-delay-200 {
    animation-delay: 0.2s;
}

.animation-delay-400 {
    animation-delay: 0.4s;
}

/* ============================================
   4. Alpine.js Helpers
   ============================================ */

/* x-cloak helper - hides elements until Alpine.js initializes */
[x-cloak] {
    display: none !important;
}