/* Custom styles for Laredo Motel */

    html {
        scroll-behavior: smooth;
    }

    body {
        overflow-x: hidden;
    }

    /* Scroll reveal base - always visible, JS adds animation */
    .scroll-reveal {
        opacity: 1;
        transform: none;
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    @media (prefers-reduced-motion: no-preference) {
        .scroll-reveal.animated {
            opacity: 0;
            transform: translateY(30px);
        }

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

    /* Gold metallic gradient for buttons and accents */
    .gold-gradient {
        background: linear-gradient(135deg, #d4a017 0%, #f5d060 40%, #d4a017 60%, #b8860b 100%);
    }

    /* Custom scrollbar */
    ::-webkit-scrollbar {
        width: 8px;
    }

    ::-webkit-scrollbar-track {
        background: #1a0a24;
    }

    ::-webkit-scrollbar-thumb {
        background: #3f1a58;
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #522470;
    }

    /* Selection color */
    ::selection {
        background: rgba(212, 160, 23, 0.3);
        color: #f0e4fa;
    }

    /* Mobile menu transitions */
    #mobileMenu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, padding 0.4s ease;
    }

    #mobileMenu.open {
        max-height: 400px;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Navbar glass effect */
    #navbar {
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    /* Smooth focus styles */
    a:focus-visible,
    button:focus-visible {
        outline: 2px solid #e8b828;
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* Image aspect ratios */
    .room-card img {
        aspect-ratio: 500 / 350;
    }

    /* Subtle shimmer on gold elements */
    @keyframes shimmer {
        0% { background-position: -200% center; }
        100% { background-position: 200% center; }
    }

    /* Pulse animation for the status dot */
    @keyframes pulse-glow {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }

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