/* ============================================================
   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), 0 0 40px rgba(255,170,0,0.03);
        }
    }

    /* --- Animations --- */
    @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; }

    .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%);
    }

    .gallery-empty-state {
        grid-column: 1 / -1;
        text-align: center;
        padding: var(--space-10) var(--space-4);
        font-family: var(--font-mono);
        font-size: 12px;
        color: rgba(255, 255, 255, 0.38);
    }

    /* --- Gallery Mode Toggle (Explore / Create) �� Premium neon-glass hero controls --- */
    .gallery-mode {
        display: flex;
        justify-content: center;
        gap: 2rem;
        margin-block-end: var(--space-8);
        padding-block: var(--space-4);
    }

    .gallery-mode__item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .gallery-mode__btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.9375rem 2.75rem;
        border-radius: var(--radius-full);
        font-family: var(--font-mono);
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.38);
        background: rgba(6, 10, 18, 0.88);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1.5px solid rgba(255, 255, 255, 0.08);
        cursor: pointer;
        transition: all 0.4s var(--ease-smooth);
        -webkit-tap-highlight-color: transparent;
    }

    .gallery-mode__icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        opacity: 0.7;
        transition: opacity 0.4s var(--ease-smooth);
    }

    .gallery-mode__btn.active .gallery-mode__icon {
        opacity: 1;
    }

    .gallery-mode__label {
        pointer-events: none;
    }

    .gallery-mode__lock {
        display: none;
        font-size: 0.7em;
        margin-inline-start: 0.125rem;
    }

    .gallery-mode__btn--locked .gallery-mode__lock {
        display: inline;
    }

    .gallery-mode__hint {
        display: block;
        text-align: center;
        font-family: var(--font-body);
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.3);
        margin-block-start: 0.625rem;
        letter-spacing: 0.02em;
        transition: color 0.4s var(--ease-smooth);
    }

    /* Explore variant (cyan) */
    .gallery-mode__btn--explore {
        border-color: rgba(0, 240, 255, 0.12);
    }

    .gallery-mode__btn--explore:hover {
        color: rgba(255, 255, 255, 0.75);
        border-color: rgba(0, 240, 255, 0.3);
        box-shadow:
            0 0 12px rgba(0, 240, 255, 0.06),
            0 0 30px rgba(0, 240, 255, 0.03);
    }

    .gallery-mode__btn--explore.active {
        color: #fff;
        border-color: rgba(0, 240, 255, 0.65);
        background:
            linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(6, 10, 18, 0.92) 60%),
            rgba(6, 10, 18, 0.88);
        box-shadow:
            0 0 6px rgba(0, 240, 255, 0.35),
            0 0 18px rgba(0, 240, 255, 0.18),
            0 0 45px rgba(0, 240, 255, 0.08),
            0 0 90px rgba(0, 240, 255, 0.04),
            inset 0 1px 1px rgba(0, 240, 255, 0.12),
            inset 0 0 24px rgba(0, 240, 255, 0.04);
    }

    .gallery-mode__btn--explore.active + .gallery-mode__hint {
        color: rgba(0, 240, 255, 0.45);
    }

    /* Create variant (magenta) */
    .gallery-mode__btn--create {
        border-color: rgba(192, 38, 211, 0.12);
    }

    .gallery-mode__btn--create:hover {
        color: rgba(255, 255, 255, 0.75);
        border-color: rgba(192, 38, 211, 0.3);
        box-shadow:
            0 0 12px rgba(192, 38, 211, 0.06),
            0 0 30px rgba(192, 38, 211, 0.03);
    }

    .gallery-mode__btn--create.active {
        color: #fff;
        border-color: rgba(192, 38, 211, 0.65);
        background:
            linear-gradient(135deg, rgba(192, 38, 211, 0.1) 0%, rgba(6, 10, 18, 0.92) 60%),
            rgba(6, 10, 18, 0.88);
        box-shadow:
            0 0 6px rgba(192, 38, 211, 0.35),
            0 0 18px rgba(192, 38, 211, 0.18),
            0 0 45px rgba(192, 38, 211, 0.08),
            0 0 90px rgba(192, 38, 211, 0.04),
            inset 0 1px 1px rgba(192, 38, 211, 0.12),
            inset 0 0 24px rgba(192, 38, 211, 0.04);
    }

    .gallery-mode__btn--create.active + .gallery-mode__hint {
        color: rgba(192, 38, 211, 0.5);
    }

    /* Locked state (dimmed) */
    .gallery-mode__btn--locked {
        color: rgba(255, 255, 255, 0.22);
        border-color: rgba(255, 255, 255, 0.06);
    }

    .gallery-mode__btn--locked:hover {
        color: rgba(255, 255, 255, 0.4);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: none;
    }

    .gallery-mode__btn--locked .gallery-mode__icon {
        opacity: 0.35;
    }

    /* --- Gallery Explore Chips — subordinate to mode toggle --- */
    #gallery .filter-bar {
        margin-block-end: var(--space-8);
    }

    #gallery .filter-btn {
        font-size: 0.6875rem;
        padding: 0.3125rem var(--space-4);
        color: rgba(255, 255, 255, 0.38);
        background: rgba(255, 255, 255, 0.02);
        border-color: rgba(255, 255, 255, 0.06);
    }

    #gallery .filter-btn.active {
        color: rgba(0, 240, 255, 0.8);
        background: rgba(0, 240, 255, 0.07);
        border-color: rgba(0, 240, 255, 0.25);
    }

    #gallery .filter-btn:hover:not(.active) {
        color: rgba(255, 255, 255, 0.55);
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.1);
    }

    #galleryStudio {
        animation: gal-studio-in 0.4s ease;
    }

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

    /* --- Experiment Deck --- */
    .exp-deck-dots { display: none; }

    /* --- Experiment Filter Bar --- */
    .exp-filter-bar {
        display: flex;
        justify-content: center;
        gap: 0.625rem;
        margin-block-end: var(--space-5);
    }

    .exp-filter-btn {
        padding: var(--space-2) var(--space-5);
        border-radius: var(--radius-full);
        font-size: 0.75rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.5);
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        transition: all 0.3s var(--ease-default);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .exp-filter-btn.active {
        background: rgba(0, 240, 255, 0.12);
        border-color: rgba(0, 240, 255, 0.4);
        color: var(--color-cyan);
    }

    .exp-filter-btn--auth {
        color: rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .exp-filter-btn--auth.unlocked {
        color: rgba(255, 255, 255, 0.5);
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .exp-filter-btn--auth.unlocked.active {
        background: rgba(0, 240, 255, 0.12);
        border-color: rgba(0, 240, 255, 0.4);
        color: var(--color-cyan);
    }

    /* Experiments: hide lock overlay (auth is gated via filter bar) */
    #experimentsGrid .locked-area__overlay {
        opacity: 0;
        pointer-events: none;
    }

    #experimentsGrid .locked-area__content {
        filter: none;
        pointer-events: auto;
        user-select: auto;
    }

    @media (max-width: 639px) {
        .exp-deck {
            touch-action: pan-y;
        }

        .exp-deck > * {
            grid-row: 1;
            grid-column: 1;
            transition: transform 0.45s var(--ease-smooth), opacity 0.45s var(--ease-smooth);
        }

        .exp-deck-dots {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-block-start: var(--space-4);
        }

        .exp-deck-dot {
            width: 8px;
            height: 8px;
            padding: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        .exp-deck-dot.active {
            background: rgba(0, 240, 255, 0.45);
            border-color: rgba(0, 240, 255, 0.25);
            transform: scale(1.3);
        }
    }

    /* --- Mobile Gallery Deck --- */
    .gal-deck-dots { display: none; }
    .gal-filter-bar { display: none; }
    .studio-deck-dots { display: none; }

    @media (max-width: 639px) {
        #gallery .filter-bar { display: none; }

        .gallery-mode {
            margin-block-end: var(--space-5);
            gap: 1.125rem;
            padding-block: var(--space-2);
        }

        .gallery-mode__btn {
            padding: 0.75rem 1.875rem;
            font-size: 0.8125rem;
            gap: 0.5rem;
        }

        .gallery-mode__icon {
            width: 16px;
            height: 16px;
        }

        .gallery-mode__hint {
            font-size: 0.6875rem;
            margin-block-start: 0.375rem;
        }

        .gallery-mode__btn--explore.active {
            box-shadow:
                0 0 5px rgba(0, 240, 255, 0.3),
                0 0 14px rgba(0, 240, 255, 0.14),
                0 0 35px rgba(0, 240, 255, 0.06),
                inset 0 1px 1px rgba(0, 240, 255, 0.1),
                inset 0 0 16px rgba(0, 240, 255, 0.03);
        }

        .gallery-mode__btn--create.active {
            box-shadow:
                0 0 5px rgba(192, 38, 211, 0.3),
                0 0 14px rgba(192, 38, 211, 0.14),
                0 0 35px rgba(192, 38, 211, 0.06),
                inset 0 1px 1px rgba(192, 38, 211, 0.1),
                inset 0 0 16px rgba(192, 38, 211, 0.03);
        }

        .gal-deck {
            touch-action: pan-y;
        }

        .gal-deck > * {
            grid-row: 1;
            grid-column: 1;
            transition: transform 0.45s var(--ease-smooth), opacity 0.45s var(--ease-smooth);
        }

        .gal-deck > button { display: none !important; }

        .gal-deck-dots {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-block-start: var(--space-4);
        }

        .gal-deck-dot {
            width: 8px;
            height: 8px;
            padding: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        .gal-deck-dot.active {
            background: rgba(0, 240, 255, 0.45);
            border-color: rgba(0, 240, 255, 0.25);
            transform: scale(1.3);
        }

        .gal-filter-bar {
            display: flex;
            justify-content: center;
            gap: 0.625rem;
            margin-block-end: var(--space-5);
            flex-wrap: wrap;
        }

        .gal-filter-btn {
            padding: 0.3125rem var(--space-4);
            border-radius: var(--radius-full);
            font-size: 0.6875rem;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.38);
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.06);
            transition: all 0.3s var(--ease-default);
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        .gal-filter-btn.active {
            background: rgba(0, 240, 255, 0.07);
            border-color: rgba(0, 240, 255, 0.25);
            color: rgba(0, 240, 255, 0.8);
        }

        .gal-filter-btn--auth {
            color: rgba(255, 255, 255, 0.25);
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.06);
        }

        .gal-filter-btn--auth.unlocked {
            color: rgba(255, 255, 255, 0.38);
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.06);
        }

        .gal-filter-btn--auth.unlocked.active {
            background: rgba(0, 240, 255, 0.07);
            border-color: rgba(0, 240, 255, 0.25);
            color: rgba(0, 240, 255, 0.8);
        }

        .gal-deck .locked-area__overlay {
            opacity: 0;
            pointer-events: none;
        }

        .gal-deck .locked-area__content {
            filter: none;
            pointer-events: auto;
            user-select: auto;
        }

        /* --- Inline Studio Saved-Images Deck (mirrors .gal-deck) --- */
        .studio-deck {
            grid-template-columns: 1fr;
            overflow: hidden;
            touch-action: pan-y;
        }

        .studio-deck > .studio__image-item {
            grid-row: 1;
            grid-column: 1;
            transition: transform 0.45s var(--ease-smooth), opacity 0.45s var(--ease-smooth);
        }

        .studio-deck-dots {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-block-start: var(--space-4);
        }

        .studio-deck-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.12);
            cursor: pointer;
            transition: all 0.3s var(--ease-default);
            padding: 0;
        }

        .studio-deck-dot.active {
            background: rgba(0, 240, 255, 0.45);
            border-color: rgba(0, 240, 255, 0.25);
            transform: scale(1.3);
        }
    }

    /* --- Audio Seek Bar Hit Targets ---
       Expand the clickable/touchable area to ~24px while keeping
       the visible track at its slim 3-4px height.
       Seek math uses only rect.left / rect.width — vertical
       padding does not affect the calculation. */
    .snd-bar,
    .excl-bar,
    #plBar {
        box-sizing: content-box !important;
        padding-block: 10px !important;
        margin-block: -10px !important;
        background-clip: content-box !important;
        overflow: visible !important;
    }

    .snd-prog,
    .excl-prog,
    #plProg {
        height: 3px !important;
        top: 10px !important;
    }

    /* --- Desktop Sound Lab Grid --- */
    @media (min-width: 640px) {
        #soundLabTracks {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: var(--space-4);
        }

        .snd-card {
            display: flex;
            flex-direction: column;
        }

        .snd-hero {
            position: relative;
            overflow: hidden;
            cursor: pointer;
            aspect-ratio: 16 / 9;
        }

        .snd-hero img {
            position: absolute;
            inset: 0;
        }

        .snd-card > .locked-area__content {
            display: flex;
            flex-direction: column;
        }

        #playlistPlayer {
            display: none !important;
        }
    }

    /* --- Mobile Sound Lab Cards --- */
    @media (max-width: 639px) {
        .snd-card {
            display: flex;
            flex-direction: column;
            height: 340px;
        }

        .snd-hero {
            display: block;
            flex: 1;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            min-height: 0;
            -webkit-tap-highlight-color: transparent;
        }

        .snd-hero img {
            position: absolute;
            inset: 0;
        }

        .snd-card > .locked-area__content {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
        }
    }

    /* --- Mobile Sound Lab Deck --- */
    .snd-deck-dots { display: none; }

    @media (max-width: 639px) {
        .snd-deck {
            display: grid;
            touch-action: pan-y;
        }

        .snd-deck > * {
            grid-row: 1;
            grid-column: 1;
            transition: transform 0.45s var(--ease-smooth), opacity 0.45s var(--ease-smooth);
        }

        .snd-deck-dots {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-block: var(--space-2);
        }

        .snd-deck-dot {
            width: 8px;
            height: 8px;
            padding: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        .snd-deck-dot.active {
            background: rgba(0, 240, 255, 0.45);
            border-color: rgba(0, 240, 255, 0.25);
            transform: scale(1.3);
        }
    }

    /* --- Sound Lab Filter Bar --- */
    .snd-filter-bar {
        display: flex;
        justify-content: center;
        gap: 0.625rem;
        margin-block-end: var(--space-5);
    }

    .snd-filter-btn {
        padding: var(--space-2) var(--space-5);
        border-radius: var(--radius-full);
        font-size: 0.75rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.5);
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
        transition: all 0.3s var(--ease-default);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .snd-filter-btn.active {
        background: rgba(0, 240, 255, 0.12);
        border-color: rgba(0, 240, 255, 0.4);
        color: var(--color-cyan);
    }

    .snd-filter-btn--auth {
        color: rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.06);
    }

    .snd-filter-btn--auth.unlocked {
        color: rgba(255, 255, 255, 0.5);
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .snd-filter-btn--auth.unlocked.active {
        background: rgba(0, 240, 255, 0.12);
        border-color: rgba(0, 240, 255, 0.4);
        color: var(--color-cyan);
    }

    /* Sound Lab: hide lock overlay (auth is gated via filter bar) */
    #soundLabTracks .locked-area__overlay {
        opacity: 0;
        pointer-events: none;
    }

    #soundLabTracks .locked-area__content {
        filter: none;
        pointer-events: auto;
        user-select: auto;
    }

    /* --- Mobile: push scroll hint below the CTA buttons --- */
    @media (max-width: 639px) {
        .hero__scroll-hint {
            inset-block-end: var(--space-2);
        }
    }

    /* --- Mobile: hide the "Play All" playlist player --- */
    @media (max-width: 639px) {
        #playlistPlayer {
            display: none !important;
        }
    }

    /* --- Mobile Hero Stable Height --- */
    @media (max-width: 639px) {
        .hero:not(.hero--compact) {
            block-size: 100svh;
            min-block-size: 0;
        }
    }

    @media (max-width: 639px) and (orientation: landscape) {
        .hero:not(.hero--compact) {
            block-size: auto;
            min-block-size: 100svh;
        }
    }

    /* --- Desktop Section Spacing (≈60% reduction) --- */
    @media (min-width: 640px) {
        .section { padding-block: var(--space-10); }
    }

    @media (min-width: 1024px) {
        .section { padding-block: var(--space-14); }
    }

    /* --- Mobile Section Spacing (≈50% reduction) --- */
    @media (max-width: 639px) {
        .section { padding-block: var(--space-12); }
        .site-footer { padding-block: var(--space-6); }
    }

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

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

        .float-anim {
            animation: none;
        }

        .gallery-inner {
            transition: none;
        }

        .exp-deck > * {
            transition: none;
        }

        .gal-deck > * {
            transition: none;
        }

        .studio-deck > * {
            transition: none;
        }

        .snd-deck > * {
            transition: none;
        }

    }
}