@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --primary-color: #00b9cf;
}

/* Custom animations */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes popIn {
    0% { opacity: 0; transform: scale(0.9) translateY(10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-slide-up { animation: slideUp 0.4s ease forwards; }
.animate-slide-in { animation: slideIn 0.3s ease forwards; }
.animate-pop-in { animation: popIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-float { animation: float 6s ease-in-out infinite; }

.animate-fade-in-up {
    animation: fadeInUp 0.4s ease forwards;
    opacity: 0; /* Start hidden */
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }

/* Scanner Feedback */
.scan-success {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 20px var(--primary-color);
}

/* Range Slider Customization */
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: transparent;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: #333;
    border-radius: 4px;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: #333;
    border-radius: 4px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    margin-top: -6px; 
    transition: transform 0.1s;
}

input[type=range]::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border: none;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    transition: transform 0.1s;
}

input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
input[type=range]:focus { outline: none; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #121212; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }

/* Custom SVG Logo Mask */
.logo-custom {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor; /* Inherits text color */
    -webkit-mask-image: url('../img/logo.svg');
    mask-image: url('../img/logo.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}