/* Base & Typography */
    html {
        scroll-behavior: smooth;
    }

    body {
        overflow-x: hidden;
    }

    ::selection {
        background: #14b8a6;
        color: white;
    }

    /* Floating Card Animations */
    @keyframes float-1 {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-12px) rotate(0.5deg); }
    }

    @keyframes float-2 {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-16px) rotate(-0.5deg); }
    }

    @keyframes float-3 {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-10px) rotate(0.5deg); }
    }

    @keyframes float-4 {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-14px) rotate(-0.3deg); }
    }

    .floating-card {
        will-change: transform;
    }

    .card-1 { animation: float-1 5s ease-in-out infinite; }
    .card-2 { animation: float-2 6s ease-in-out infinite; }
    .card-3 { animation: float-3 5.5s ease-in-out infinite; }
    .card-4 { animation: float-4 4.5s ease-in-out infinite; }

    /* Scroll Reveal */
    .scroll-reveal {
        opacity: 1;
        transform: none;
        transition: opacity 0.7s ease, transform 0.7s ease;
    }

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

    /* Navbar scroll state */
    #navbar.scrolled {
        background: rgba(2, 6, 23, 0.92);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    /* Smooth anchor offset */
    section[id] {
        scroll-margin-top: 80px;
    }

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

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

    /* Image hover zoom */
    .group img {
        transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

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

    /* Custom scrollbar */
    ::-webkit-scrollbar {
        width: 8px;
    }
    ::-webkit-scrollbar-track {
        background: #0f172a;
    }
    ::-webkit-scrollbar-thumb {
        background: #14b8a6;
        border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #2dd4bf;
    }