/* ===== CUSTOM STYLES FOR VIKING LOUNGE ===== */

    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }

    /* Selection color */
    ::selection {
        background-color: #1B5E20;
        color: #FDFBF7;
    }

    /* ===== SCROLL REVEAL ANIMATIONS ===== */
    /* Default state: visible (no JS = fully readable) */
    .scroll-reveal {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    /* Only apply hidden state when JS is active (via .js-loaded class) */
    .js-loaded .scroll-reveal {
        opacity: 0;
        transform: translateY(24px);
    }

    /* Respect reduced motion preference */
    @media (prefers-reduced-motion: no-preference) {
        .js-loaded .scroll-reveal.revealed {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* For users who prefer reduced motion, keep them visible */
    @media (prefers-reduced-motion: reduce) {
        .js-loaded .scroll-reveal {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ===== NAVBAR SCROLL STATE ===== */
    #navbar.scrolled {
        background-color: rgba(253, 251, 247, 0.97);
        backdrop-filter: blur(12px);
        box-shadow: 0 1px 20px rgba(13, 59, 16, 0.08);
    }

    /* ===== HERO ANIMATIONS ===== */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #hero > .relative.z-10 > .max-w-2xl > * {
        animation: fadeInUp 0.8s ease forwards;
        opacity: 0;
    }

    #hero > .relative.z-10 > .max-w-2xl > *:nth-child(1) { animation-delay: 0.1s; }
    #hero > .relative.z-10 > .max-w-2xl > *:nth-child(2) { animation-delay: 0.25s; }
    #hero > .relative.z-10 > .max-w-2xl > *:nth-child(3) { animation-delay: 0.4s; }
    #hero > .relative.z-10 > .max-w-2xl > *:nth-child(4) { animation-delay: 0.55s; }

    /* ===== BUTTON HOVER EFFECTS ===== */
    a, button {
        -webkit-tap-highlight-color: transparent;
    }

    /* ===== CARD SHINE EFFECT ===== */
    .group::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
        background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%);
    }

    .group:hover::after {
        opacity: 1;
    }

    /* ===== FOCUS STYLES ===== */
    :focus-visible {
        outline: 2px solid #1B5E20;
        outline-offset: 2px;
    }

    /* ===== MOBILE MENU TRANSITION ===== */
    #mobile-menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease, padding 0.35s ease;
    }

    #mobile-menu.open {
        max-height: 320px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* ===== SUBTLE BACKGROUND PATTERN ===== */
    body {
        background-image: radial-gradient(circle at 1px 1px, rgba(27, 94, 32, 0.03) 1px, transparent 0);
        background-size: 32px 32px;
    }