/* ===========================
   Rainbow Art — Custom Styles
   =========================== */

/* Smooth scroll for the whole page */
html {
    scroll-behavior: smooth;
}

/* Material Icons default settings */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Glass header blur */
.glass-header {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Editorial grid utility */
.editorial-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

/* Hide scrollbar for testimonials carousel */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Mobile menu overlay */
.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu.is-open {
    transform: translateX(0);
}

/* Mobile menu backdrop */
.mobile-menu-backdrop {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-menu-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

/* Header scroll state */
.header-scrolled {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Form success message */
.form-success {
    animation: fadeInUp 0.5s ease-out;
}

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

/* Selection styling */
::selection {
    background-color: #fd6856;
    color: #690001;
}

/* Ensure images don't exceed containers */
img {
    max-width: 100%;
    height: auto;
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid #ae3024;
    outline-offset: 2px;
}

/* Active Desktop Nav Link scrollspy */
.desktop-nav-link.active {
    color: #b91c1c !important; /* Tailwind text-red-700 */
    border-bottom-color: #b91c1c !important; /* Tailwind border-red-700 */
}

/* Scroll Reveal Animations */
.reveal-element {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-element.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

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