@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: #020617; /* slate-950 */
}

.theme-color {
    color: #deff25;
}

.theme-bg {
    background-color: #deff25;
}

.theme-border {
    border-color: #deff25;
}

.glow-overlay {
    background: radial-gradient(circle at center, #deff25, transparent);
}

.selection-style::selection {
    background-color: rgba(222, 255, 37, 0.3);
    color: white;
}

/* Smooth fade for the background image loading */
#hero-bg-image {
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

    #hero-bg-image.loaded {
        opacity: 0.5;
    }

#hero-subtext {
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    opacity: 0;
    transform: translateY(10px);
}

    #hero-subtext.loaded {
        opacity: 1;
        transform: translateY(0);
    }

@keyframes fastDrop {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-drop {
    animation: fastDrop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.partner-logo {
    transition: all 0.3s ease;
    filter: grayscale(100%) brightness(200%);
    opacity: 0.6;
}

    .partner-logo:hover {
        filter: grayscale(0%) brightness(100%);
        opacity: 1;
    }

/* Gallery Before/After Styles */
.gallery-item .after-image {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.gallery-item:hover .after-image {
    opacity: 1;
}

/* UI Components for Visualiser */
.spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
    margin-right: 0.5rem;
    vertical-align: text-bottom;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.status-message {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.status-success {
    color: #deff25;
}

.status-error {
    color: #f87171;
}