.material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.light {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.mockup-scroll::-webkit-scrollbar {
    width: 6px;
}

.mockup-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.mockup-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin-slow {
    animation: spin-slow 3s linear infinite;
}

.macbook-base {
    background: #0d1117;
    border-radius: 18px 18px 0 0;
    border: 1px solid #30363d;
    box-shadow: 0 0 0 2px #545a63 inset;
}

.macbook-notch {
    background: #0d1117;
    width: 140px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index: 50;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 10px 40px -10px rgba(19, 91, 236, 0.3), 0 4px 12px -2px rgba(19, 91, 236, 0.2);
    }
    50% {
        box-shadow: 0 15px 50px -10px rgba(19, 91, 236, 0.5), 0 6px 20px -2px rgba(19, 91, 236, 0.3);
    }
}

.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes scale-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

.animate-scale-pulse {
    animation: scale-pulse 2s ease-in-out infinite;
}

@keyframes shine {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

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

@keyframes bounce-in {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-bounce-in {
    animation: bounce-in 0.8s ease-out;
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.rotate-12 {
    transform: rotate(12deg);
}

.scale-105 {
    transform: scale(1.05);
}

.scale-110 {
    transform: scale(1.1);
}

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.3);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.3);
    }
    70% {
        transform: scale(1);
    }
}

.animate-heartbeat {
    animation: heartbeat 2s ease-in-out infinite;
}