/* SaveOmi - Custom High-Tech Styling & Micro-Animations */

@layer utilities {
    /* Glassmorphism surfaces */
    .glass-card {
        background: rgba(15, 23, 42, 0.75);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }
    
    .glass-input {
        background: rgba(15, 23, 42, 0.9);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* Ambient glow gradients */
    .glow-gradient-primary {
        background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.22) 0%, rgba(168, 85, 247, 0.12) 35%, transparent 70%);
    }

    .glow-card-shadow {
        box-shadow: 0 0 40px -10px rgba(99, 102, 241, 0.25);
    }

    .glow-success-shadow {
        box-shadow: 0 0 30px -5px rgba(16, 185, 129, 0.45);
    }
}

/* Keyframe for 2-step Monetization State 2 pulse */
@keyframes state2Pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7), 0 0 20px 2px rgba(16, 185, 129, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0), 0 0 30px 6px rgba(16, 185, 129, 0.6);
        transform: scale(1.02);
    }
}

.btn-state2-pulse {
    animation: state2Pulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #34d399 !important;
}

/* Spinner rotation */
@keyframes spinFast {
    to { transform: rotate(360deg); }
}

.spin-loader {
    animation: spinFast 0.75s linear infinite;
}

/* Toast entrance and exit animations */
@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.toast-animate-in {
    animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Accordion smooth transition */
details summary::-webkit-details-marker {
    display: none;
}

details[open] summary svg.faq-chevron {
    transform: rotate(180deg);
}

/* Custom scrollbar for media cards */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #090d16;
}

::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #334155;
}