/* styles.css */
/* Custom Tailwind enhancements + animations - NIGHT VIBE + HIGH CONTRAST */

@layer utilities {
    .hero {
        background-image: 
            linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.75)),
            url('https://source.unsplash.com/1920x1080/?sleep,bedroom');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }
    
    .cta-button {
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .product-card,
    .blog-card {
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* Fade-in on scroll */
    .fade-in-section {
        opacity: 0;
        transform: translateY(30px);
        transition: all 800ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .fade-in-section.visible {
        opacity: 1;
        transform: translateY(0);
    }
    
    /* Gentle headline breathing glow - stronger for night */
    @keyframes pulse-glow {
        0%, 100% { text-shadow: 0 0 20px rgb(20 184 166); }
        50% { text-shadow: 0 0 50px rgb(20 184 166); }
    }
    
    .hero h1 {
        animation: pulse-glow 6s ease-in-out infinite;
    }
    
    /* Star twinkling for canvas - brighter on dark background */
    @keyframes twinkle {
        0%, 100% { opacity: 0.4; }
        50% { opacity: 1; }
    }
}

/* Mobile menu smooth */
#mobile-menu {
    animation: slideDown 0.3s ease forwards;
}

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