/* ═══════════════════════════════════════
   Palpitano - Custom Styles
   ═══════════════════════════════════════ */

/* Prevent FOUC with Alpine.js */
[x-cloak] {
    display: none !important;
}

/* Base resets */
html {
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    overscroll-behavior-y: contain;
    overflow-x: hidden;
}

/* Hide scrollbar for horizontal scroll areas */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* ═══════════ ANIMATIONS ═══════════ */

/* Live status pulse */
@keyframes livePulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.35;
        transform: scale(0.85);
    }
}
.animate-live-pulse {
    animation: livePulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Card entrance - fade in up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Shimmer loading effect */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}
.animate-shimmer {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.04) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2.5s ease-in-out infinite;
}

/* Timer countdown pulse when low */
@keyframes timerUrgent {
    0%, 100% { color: #ef4444; }
    50% { color: #fca5a5; }
}
.animate-timer-urgent {
    animation: timerUrgent 1s ease-in-out infinite;
}

/* ═══════════ TRANSITIONS ═══════════ */

/* Premium easing - expo out */
.ease-expo {
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Spring-like easing */
.ease-spring {
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ═══════════ CUSTOM SCROLLBAR (desktop) ═══════════ */

main::-webkit-scrollbar {
    width: 4px;
}
main::-webkit-scrollbar-track {
    background: transparent;
}
main::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
}
main::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ═══════════ INPUT STYLES ═══════════ */

input::placeholder {
    color: #4b5563;
}

input:focus {
    outline: none;
}

/* ═══════════ SAFE AREAS ═══════════ */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .safe-bottom {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ═══════════ DRAWER ═══════════ */

.drawer-enter {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer-leave {
    transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1);
}

/* Hamburger → X morph */
.hamburger-line {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.2s ease;
    transform-origin: center;
}

/* ═══════════ AUTH MODAL ═══════════ */

/* Lock body scroll when modal is open */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Auth input focus glow */
.auth-input:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Segmented control inner glow */
.segment-active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Spinner animation */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.animate-spin {
    animation: spin 0.7s linear infinite;
}

/* ═══════════ DEPOSIT MODAL ═══════════ */

/* Deposit input focus glow (emerald) */
.deposit-input:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Pulsing dot for "Aguardando pagamento" */
@keyframes depositPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.75); }
}
.animate-deposit-pulse {
    animation: depositPulse 1.5s ease-in-out infinite;
}

/* Success checkmark draw animation */
@keyframes checkScale {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes checkDraw {
    0% { stroke-dashoffset: 24; }
    100% { stroke-dashoffset: 0; }
}
.animate-check-scale {
    animation: checkScale 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.animate-check-draw {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: checkDraw 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

/* Success text fade in */
@keyframes successFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-success-fade {
    opacity: 0;
    animation: successFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}