/* ============================================================
   BITBI — Index Page Styles
   @layer pages — tilt-card, nav-link, animations, gallery
   Used by: index.html only
   ============================================================ */

@layer pages {

    /* --- Tilt Card --- */
    .tilt-card {
        transition: transform 0.45s var(--ease-smooth), box-shadow 0.45s var(--ease-default);
        will-change: transform;

        &:hover {
            transform: translateY(-6px) scale(1.01);
            box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 240, 255, 0.06);
        }
    }

    /* --- Nav Link Underline --- */
    .nav-link {
        position: relative;

        &::after {
            content: '';
            position: absolute;
            inset-block-end: -4px;
            inset-inline-start: 0;
            inline-size: 0;
            block-size: 2px;
            background: linear-gradient(90deg, var(--color-cyan), var(--color-gold));
            border-radius: 1px;
            transition: inline-size 0.35s var(--ease-smooth);
        }

        &:hover::after {
            inline-size: 100%;
        }
    }

    /* --- Animations --- */
    @keyframes pulseGlow {
        0%, 100% { box-shadow: 0 0 12px rgba(0, 240, 255, 0.25), 0 0 24px rgba(0, 240, 255, 0.08); }
        50% { box-shadow: 0 0 20px rgba(0, 240, 255, 0.45), 0 0 40px rgba(0, 240, 255, 0.15); }
    }

    @keyframes eqBar1 { 0%, 100% { height: 6px; } 50% { height: 24px; } }
    @keyframes eqBar2 { 0%, 100% { height: 12px; } 50% { height: 32px; } }
    @keyframes eqBar3 { 0%, 100% { height: 4px; } 50% { height: 18px; } }

    /* --- Utility Classes --- */
    .float-anim { animation: float 6s ease-in-out infinite; }
    .pulse-glow { animation: pulseGlow 3s ease-in-out infinite; }

    .eq-bar {
        width: 3px;
        border-radius: 2px;
        background: linear-gradient(180deg, var(--color-cyan), var(--color-gold));
    }

    /* Modal, mobile nav, filter-btn are defined in components.css */

    /* --- Gallery --- */
    .gallery-item {
        cursor: pointer;

        &:hover {
            .gallery-overlay { opacity: 1; }
            .gallery-inner { transform: scale(1.03); }
        }
    }

    .gallery-inner {
        transition: transform 0.5s var(--ease-smooth);
    }

    .gallery-overlay {
        opacity: 0;
        transition: opacity 0.4s var(--ease-default);
        background: linear-gradient(to top, rgba(10, 10, 10, 0.95) 0%, rgba(10, 10, 10, 0.4) 50%, transparent 100%);
    }

    /* --- Reduced Motion --- */
    @media (prefers-reduced-motion: reduce) {
        .tilt-card {
            transition: none;

            &:hover {
                transform: none;
                box-shadow: none;
            }
        }

        .float-anim,
        .pulse-glow {
            animation: none;
        }

        .gallery-inner {
            transition: none;
        }
    }
}