/* ==========================================================
   PROJECT DAWN
   GLOBAL PANELS
========================================================== */

.global-panel{

    position:fixed;

    inset:0;

   pointer-events:auto;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    overflow:hidden;

    padding:

        10vh
        6vw;

    background:rgba(5,5,5,.82);

backdrop-filter:blur(22px);

-webkit-backdrop-filter:blur(22px);

    opacity:0;

    visibility:hidden;

    transition:

    opacity .9s ease,

    visibility .9s ease;

    z-index:9999;

}


.global-panel.visible{

    opacity:1;

    visibility:visible;

}

.global-panel:not(.visible){

    pointer-events:none;

}

.global-panel-inner{

    position:relative;

    width:min(920px,92vw);

   overflow-y:auto;

max-height:80vh;

   scrollbar-width: none;
    -ms-overflow-style: none;

    padding:

        20px
        0
        80px;

    background:none;

    border:none;

    border-radius:0;

    box-shadow:none;

    transform:

        translateY(40px);

    transition:

        transform .9s ease,

        opacity .9s ease;

}

.global-panel-inner::-webkit-scrollbar {

    display:none;

}


.global-panel.visible .global-panel-inner{

    transform:translateY(0);

}


.global-panel-content{

    color:var(--paper);

}


.global-panel-content h1{

    margin:

        0
        0
        40px;

    text-align:center;

    font-size:

        clamp(34px,5vw,54px);

    font-weight:300;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:var(--gold);

}


.global-panel-content p{

    margin:

        0
        0
        28px;

    font-size:18px;

    line-height:2;

    color:var(--paper);

    opacity:.92;

}


.global-panel-content img{

    display:block;

    width:100%;

    margin:

        50px
        auto;

    border-radius:10px;

}


.global-panel-close{

    position:fixed;

    top:34px;

    right:34px;

    z-index:10001;

    pointer-events:auto;

    width:42px;

    height:42px;

    padding:0;

    background:none;

    border:none;

    color:var(--paper);

    font-size:34px;

    font-weight:200;

    cursor:pointer;

    opacity:.65;

    transition:

        opacity .5s ease,

        color .5s ease,

        transform .5s ease;

}


.global-panel-close:hover{

    opacity:1;

    color:var(--gold);

    transform:rotate(90deg);

}


.global-panel::-webkit-scrollbar{

    width:8px;

}


.global-panel::-webkit-scrollbar-thumb{

    background:rgba(255,255,255,.12);

}


.global-panel::-webkit-scrollbar-thumb:hover{

    background:var(--gold);

}


@media (max-width:768px){

    .global-panel{

        padding:

            9vh
            26px
            50px;

    }


    .global-panel-inner{

        width:100%;

        padding-bottom:60px;

    }


    .global-panel-content h1{

        letter-spacing:.12em;

    }


    .global-panel-content p{

        font-size:17px;

        line-height:1.85;

    }


    .global-panel-close{

        top:12px;

        right:12px;

    }

}

.panel-text,
.lyrics-list {

    max-width:760px;
    margin:0 auto;

    font-size:18px;
    line-height:1.8;

    color:rgba(243,241,234,.82);

}


.panel-text p {

    margin-bottom:32px;

}


.lyrics-list h2 {

    margin-top:45px;

    color:#d9b46a;

    letter-spacing:.12em;

    font-size:20px;

}


.lyrics-list p {

    margin-bottom:30px;

}

.communication-form {

    max-width:620px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    gap:24px;

}


.communication-hint {

    text-align:center;

    opacity:.45;

    font-size:16px;

    margin-bottom:20px;

}


.communication-form input,
.communication-form textarea {


    width:100%;


    background:rgba(255,255,255,.03);


    border:none;

    border-bottom:1px solid rgba(255,255,255,.15);


    padding:18px 10px;


    color:var(--paper);


    font-size:18px;


    outline:none;


    transition:

        border-color .5s ease,

        background .5s ease;

}


.communication-form textarea {

    min-height:160px;

    resize:none;

}


.communication-form input:focus,
.communication-form textarea:focus {

    border-color:var(--gold);

    background:rgba(255,255,255,.06);

}


.communication-send {

    margin:30px auto 0;


    padding:

    14px 50px;


    background:none;


    border:1px solid var(--gold);


    color:var(--gold);


    font-size:16px;


    letter-spacing:.15em;


    cursor:pointer;


    transition:

    background .5s ease,

    color .5s ease;

    transition:
        opacity .5s ease,
        transform .5s ease;

}

.communication-send:disabled{

    opacity:.7;

    color:var(--paper);

    background:var(--gold);

    cursor:default;

}

.communication-send:hover {

    background:var(--gold);

    color:#111;

}


.communication-status{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:40px;

    font-size:22px;

    line-height:1.6;

    color:var(--paper);

    opacity:0;

    pointer-events:none;

    transition:
        opacity 1s ease;

}

.communication-send:disabled {

    background:transparent;

    color:var(--gold);

    border:1px solid var(--gold);

    opacity:1;

}

.communication-send:disabled {

    background:none !important;

    background-color:transparent !important;

    color:var(--gold) !important;

    border:1px solid var(--gold) !important;

    opacity:1 !important;

    -webkit-text-fill-color:var(--gold) !important;

}

/* ==========================================================
   CREATOR GALLERY
========================================================== */


.creator-gallery{

    width:100%;

    overflow:hidden;

}


.creator-track{

    display:flex;

    gap:30px;

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;

}


.creator-track::-webkit-scrollbar{

    display:none;

}


.creator-track img{

    flex:

        0 0 100%;

    width:100%;

    max-height:75vh;

    object-fit:contain;

    scroll-snap-align:center;

    border-radius:4px;

    user-select:none;

    -webkit-user-drag:none;

    transition:

        transform .8s ease,

        opacity .8s ease;

}


@media(max-width:768px){

    .creator-track{

        gap:20px;

    }


    .creator-track img{

        max-height:70vh;

    }

}