/* ==========================================================
   MSNR_Create / Music
========================================================== */

.music-page {
    --music-cyan: #4ddcfb;
    --music-blue: #4f8cff;
    --music-purple: #9b5cff;
    --music-pink: #db62ff;

    min-height: 100vh;
}


/* ==========================================================
   Hero
========================================================== */

.music-hero {
    position: relative;

    min-height: 245px;

    overflow: hidden;

    border-bottom:
        1px solid
        rgba(82, 108, 140, .18);

    background:

        linear-gradient(
            90deg,
            rgba(4, 11, 21, .99) 0%,
            rgba(4, 11, 21, .92) 31%,
            rgba(4, 11, 21, .43) 58%,
            rgba(4, 11, 21, .18) 100%
        ),

        url("/assets/music/music-hero.webp");

    background-size: cover;
    background-position: center right;
}


.music-hero::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 70% 48%,
            rgba(121, 80, 255, .14),
            transparent 24rem
        );
}


.music-hero__inner {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    min-height: 245px;
}


.music-hero__copy {
    max-width: 560px;
}


.music-kicker {
    color: var(--music-cyan);

    font-size: 10px;

    letter-spacing: .18em;

    text-transform: uppercase;
}


.music-hero h1 {
    margin:
        7px 0 0;

    font-size:
        clamp(56px, 7vw, 104px);

    font-weight: 700;

    line-height: .95;

    letter-spacing: -.05em;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #d4d9ff 48%,
            #8acfff 72%,
            #ba81ff 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.music-hero__ja {
    margin:
        14px 0 0;

    color: #edf2fa;

    font-size: 18px;
}


.music-hero__description {
    margin:
        10px 0 0;

    color: #91a2b7;

    font-size: 12px;

    line-height: 1.8;
}


/* ==========================================================
   Sticky Player
========================================================== */

.music-player-shell {
    position: sticky;

    top: 68px;

    z-index: 40;

    padding:
        10px 0;

    background:
        rgba(4, 11, 21, .93);

    border-bottom:
        1px solid
        rgba(82, 108, 140, .18);

    backdrop-filter:
        blur(18px);
}


.music-player {
    display: grid;

    grid-template-columns:
        minmax(230px, 1.1fr)
        auto
        minmax(260px, 1.3fr)
        minmax(150px, .55fr)
        auto;

    align-items: center;

    gap: 18px;

    min-height: 88px;

    padding:
        12px 18px;

    border:
        1px solid #253a56;

    border-radius:
        12px;

    background:
        linear-gradient(
            180deg,
            rgba(10, 22, 39, .98),
            rgba(7, 17, 30, .98)
        );

    box-shadow:
        0 16px 38px
        rgba(0, 0, 0, .24);
}


.music-player__track {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 13px;
}


.music-player__cover {
    width: 64px;
    height: 64px;

    flex: 0 0 auto;

    object-fit: cover;

    border-radius: 7px;

    background: #0b1727;

    border:
        1px solid
        #2a405e;
}


.music-player__meta {
    min-width: 0;
}


.music-player__meta strong {
    display: block;

    overflow: hidden;

    color: #eef3fa;

    font-size: 15px;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.music-player__meta small {
    display: block;

    margin-top: 3px;

    color: #788ba2;

    font-size: 10px;
}


.music-player__transport {
    display: flex;

    align-items: center;

    gap: 9px;
}


.player-icon-button,
.player-main-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: 0;

    color: #d6e0ea;

    cursor: pointer;
}


.player-icon-button {
    width: 36px;
    height: 36px;

    border-radius: 50%;

    background: transparent;
}


.player-main-button {
    width: 50px;
    height: 50px;

    border-radius: 50%;

    color: #07111f;

    font-size: 18px;

    background:
        linear-gradient(
            135deg,
            var(--music-cyan),
            #5182ff 52%,
            var(--music-purple)
        );

    box-shadow:
        0 0 24px
        rgba(83, 126, 255, .28);
}


@media (hover:hover) and (pointer:fine) {

    .player-icon-button:hover {
        background:
            rgba(255,255,255,.05);
    }

    .player-main-button:hover {
        filter: brightness(1.08);
    }

}


.music-player__timeline {
    min-width: 0;
}


.music-player__time-row {
    display: flex;

    gap: 5px;

    margin-bottom: 7px;

    color: #a7b5c6;

    font-size: 10px;
}


.player-range {
    width: 100%;

    height: 5px;

    appearance: none;

    border-radius: 999px;

    background: #25344b;

    outline: none;

    cursor: pointer;
}


.player-range::-webkit-slider-thumb {
    width: 13px;
    height: 13px;

    appearance: none;

    border: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--music-cyan),
            var(--music-purple)
        );

    box-shadow:
        0 0 10px
        rgba(92, 165, 255, .48);
}


.player-range::-moz-range-thumb {
    width: 13px;
    height: 13px;

    border: 0;

    border-radius: 50%;

    background: var(--music-cyan);
}


.music-player__volume {
    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: 9px;

    align-items: center;

    color: #9cafc3;
}


.music-player__download {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 1px;

    min-width: 64px;

    color: #9aacbf;

    font-size: 17px;
}


.music-player__download span {
    font-size: 8px;
}


.music-player__download[aria-disabled="true"] {
    opacity: .3;

    pointer-events: none;
}


/* ==========================================================
   Filters
========================================================== */

.music-tools {
    padding:
        16px 0
        10px;
}


.music-filter-form {
    display: grid;

    grid-template-columns:
        minmax(230px, 1.4fr)
        repeat(3, minmax(140px, .75fr))
        minmax(100px, .48fr)
        auto;

    gap: 10px;

    align-items: end;
}


.music-filter-form label {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.music-filter-form label > span {
    color: #6f839b;

    font-size: 9px;
}


.music-filter-form input,
.music-filter-form select,
.music-filter-form button {
    width: 100%;

    height: 42px;

    border:
        1px solid
        #273b56;

    border-radius:
        9px;

    background:
        #071321;

    color:
        #d9e3ed;

    padding:
        0 12px;

    outline: none;
}


.music-filter-form input:focus,
.music-filter-form select:focus {
    border-color:
        rgba(77, 220, 251, .62);

    box-shadow:
        0 0 0 2px
        rgba(77, 220, 251, .07);
}


.music-filter-form button {
    width: auto;

    min-width: 96px;

    color: #a9e9f7;

    cursor: pointer;

    border-color:
        rgba(77, 220, 251, .45);

    background:
        rgba(77, 220, 251, .05);
}


.music-filter-form button:hover {
    background:
        rgba(77, 220, 251, .10);
}


.music-result-meta {
    display: flex;

    justify-content: space-between;

    gap: 12px;

    margin-top: 9px;

    color: #647990;

    font-size: 10px;
}


.music-result-meta a {
    color: #87cde0;
}


/* ==========================================================
   Grid
========================================================== */

.music-list {
    padding:
        6px 0
        62px;
}


.music-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}


.music-card {
    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        #22364e;

    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            #0b1829,
            #071320
        );

    transition:
        transform .18s,
        border-color .18s,
        box-shadow .18s;
}


.music-card.is-playing {
    border-color:
        rgba(77, 220, 251, .70);

    box-shadow:
        0 0 0 1px
        rgba(155, 92, 255, .16),
        0 14px 38px
        rgba(0, 0, 0, .26);
}


@media (hover:hover) and (pointer:fine) {

    .music-card:hover {
        transform: translateY(-3px);

        border-color:
            #3b5576;

        box-shadow:
            0 18px 38px
            rgba(0, 0, 0, .25);
    }

}


.music-card__visual {
    position: relative;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #08131f;
}


.music-card__cover {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.music-card__visual::after {
    content: "";

    position: absolute;

    inset: 45% 0 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(4, 10, 18, .72)
        );
}


.music-card__play {
    position: absolute;

    z-index: 3;

    left: 13px;
    bottom: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;
    height: 38px;

    border:
        1px solid
        rgba(77, 220, 251, .85);

    border-radius: 50%;

    color: var(--music-cyan);

    cursor: pointer;

    background:
        rgba(5, 17, 30, .78);

    backdrop-filter:
        blur(8px);
}


.music-card.is-playing
.music-card__play {
    color: #06111f;

    background:
        var(--music-cyan);
}


.music-card__duration {
    position: absolute;

    z-index: 3;

    right: 10px;
    bottom: 10px;

    padding:
        3px 6px;

    border-radius: 5px;

    color: #eef5fb;

    font-size: 9px;

    background:
        rgba(3, 9, 17, .76);
}


.music-card__body {
    padding: 12px;
}


.music-card h2 {
    margin: 0;

    overflow: hidden;

    color: #edf3fa;

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.music-card__artist {
    margin:
        2px 0 0;

    color: #70839a;

    font-size: 9px;
}


.music-card__description {
    min-height: 54px;

    margin:
        8px 0 10px;

    color: #8da0b6;

    font-size: 10px;

    line-height: 1.65;
}


/* ==========================================================
   Tags
========================================================== */

.music-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 5px;
}


.music-tags a {
    padding:
        3px 7px;

    border:
        1px solid
        #273a53;

    border-radius:
        999px;

    color:
        #8fa3ba;

    font-size: 8px;

    background:
        #0b1727;
}


.music-tags a:hover {
    border-color:
        rgba(77, 220, 251, .52);

    color:
        #b9eff8;
}


/* ==========================================================
   Stats
========================================================== */

.music-card__stats {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 12px;

    padding-top: 9px;

    border-top:
        1px solid
        #1c2d42;

    color: #73879e;

    font-size: 9px;
}


.music-card__stats a {
    margin-left: auto;

    color: #92a9c1;

    font-size: 15px;
}


/* ==========================================================
   Empty / Pagination
========================================================== */

.music-empty {
    padding:
        72px 20px;

    border:
        1px dashed
        #2d415d;

    border-radius: 12px;

    color: #7388a1;

    text-align: center;

    background: #071320;
}


.music-pagination {
    display: flex;

    justify-content: center;

    gap: 6px;

    margin-top: 28px;
}


.music-pagination a {
    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 36px;
    height: 36px;

    padding: 0 10px;

    border:
        1px solid
        #253a55;

    border-radius: 8px;

    color: #8da0b8;

    background: #071321;
}


.music-pagination a.is-current {
    border-color: transparent;

    color: #07111f;

    background:
        linear-gradient(
            135deg,
            var(--music-cyan),
            var(--music-purple)
        );
}


.music-pagination a.is-disabled {
    opacity: .3;

    pointer-events: none;
}


/* ==========================================================
   Responsive
========================================================== */

@media (max-width: 1180px) {

    .music-player {
        grid-template-columns:
            minmax(220px, 1fr)
            auto
            minmax(240px, 1.2fr);

    }


    .music-player__volume,
    .music-player__download {
        display: none;
    }


    .music-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .music-filter-form {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .music-search {
        grid-column:
            span 2;
    }

}


@media (max-width: 860px) {

    .music-player-shell {
        position: relative;

        top: auto;
    }


    .music-player {
        grid-template-columns:
            1fr auto;
    }


    .music-player__timeline {
        grid-column:
            1 / -1;
    }


    .music-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 620px) {

    .music-hero {
        min-height: 220px;
    }


    .music-hero__inner {
        min-height: 220px;
    }


    .music-filter-form {
        grid-template-columns:
            1fr;
    }


    .music-search {
        grid-column: auto;
    }


    .music-filter-form input,
    .music-filter-form select,
    .music-filter-form button {
        min-height: 44px;

        font-size: 16px;
    }


    .music-grid {
        grid-template-columns:
            1fr;
    }


    .music-player {
        grid-template-columns:
            1fr;
    }


    .music-player__track {
        justify-content: center;
    }


    .music-player__transport {
        justify-content: center;
    }


    .music-player__timeline {
        grid-column: auto;
    }

}