/* =====================================================
   SINGLE MY AESTHETIC — FINAL AURORA SYSTEM
   -----------------------------------------------------
   MEDIA       = CLEAN
   BIG COVER   = AURORA
   AUTHOR      = INSIDE COVER
   AUDIO       = AURORA PLAYER
   GRAIN       = SUBTLE
   POPUP/GRID  = UNTOUCHED
===================================================== */


/* =====================================================
   ROOT
===================================================== */

.plw-single-shell{

    --plw-aurora: rgb(120,120,120);

    --plw-single-radius:22px;
    --plw-single-gap:24px;

    width:100%;
    box-sizing:border-box;

    position:relative;
}


/* =====================================================
   MAIN INNER
===================================================== */

.plw-single-inner{

    width:100%;
    max-width:1480px;

    margin:0 auto;

    box-sizing:border-box;
}


/* =====================================================
   MEDIA + USER WRAP
===================================================== */

.plw-media-user-wrap{

    width:100%;
    box-sizing:border-box;
}


/* =====================================================
   BIG AURORA COVER
   ⭐ ONLY MAIN COVER GETS HEAVY AURORA
===================================================== */

.plw-single-shell .plw-single-cover{

    position:relative;

    width:100%;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(360px,.65fr);

    gap:var(--plw-single-gap);

    padding:18px;

    box-sizing:border-box;

    overflow:hidden;

    isolation:isolate;

    border-radius:var(--plw-single-radius);

    background:

        radial-gradient(
            ellipse 120% 100% at 15% 10%,
            color-mix(
                in srgb,
                var(--plw-aurora),
                white 5%
            ),
            transparent 65%
        ),

        radial-gradient(
            ellipse 110% 100% at 85% 90%,
            color-mix(
                in srgb,
                var(--plw-aurora),
                #120E11 25%
            ),
            transparent 68%
        ),

        color-mix(
            in srgb,
            var(--plw-aurora) 86%,
            rgba(255,255,255,.18)
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--plw-aurora),
            white 55%
        );

    box-shadow:
        0 24px 70px
        color-mix(
            in srgb,
            var(--plw-aurora),
            transparent 55%
        );
}


/* =====================================================
   COVER AURORA GLOW
===================================================== */

.plw-single-shell .plw-single-cover::before{

    content:"";

    position:absolute;

    inset:-25%;

    z-index:-1;

    pointer-events:none;

    background:

        radial-gradient(
            ellipse 70% 65% at 20% 20%,
            color-mix(
                in srgb,
                var(--plw-aurora),
                white 10%
            ),
            transparent 65%
        ),

        radial-gradient(
            ellipse 75% 70% at 80% 80%,
            color-mix(
                in srgb,
                var(--plw-aurora),
                #120E11 20%
            ),
            transparent 70%
        );

    filter:
        blur(55px)
        saturate(155%);

    opacity:.95;
}


/* =====================================================
   COVER GRAIN
===================================================== */

.plw-single-shell .plw-single-cover::after{

    content:"";

    position:absolute;

    inset:0;

    z-index:0;

    pointer-events:none;

    opacity:.10;

    background:

        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.035) 0,
            rgba(255,255,255,.035) 1px,
            transparent 2px
        ),

        repeating-linear-gradient(
            90deg,
            rgba(0,0,0,.025) 0,
            rgba(0,0,0,.025) 1px,
            transparent 2px
        );
}


/* =====================================================
   CONTENT ABOVE GRAIN
===================================================== */

.plw-single-shell .plw-single-cover > *{

    position:relative;

    z-index:2;
}


/* =====================================================
   MEDIA AREA
   ⭐ CLEAN
   ⭐ NO AURORA
   ⭐ NO CARD
===================================================== */

.plw-single-shell .plw-media-area{

    position:relative;

    width:100%;

    min-width:0;
    min-height:600px;

    display:flex;

    align-items:flex-start;
justify-content:flex-start;

    box-sizing:border-box;

    overflow:hidden;

    border-radius:var(--plw-single-radius);

    background:transparent;

    box-shadow:none;
}

/* =====================================================
   MEDIA CONTENT
===================================================== */

.plw-single-shell .plw-media-content{

    position:relative;

    z-index:1;

    width:100%;

    min-width:0;
    min-height:600px;

    display:flex;

    align-items:flex-start;
    justify-content:flex-start;

    box-sizing:border-box;
}


/* =====================================================
   IMAGE / GIF
===================================================== */

.plw-single-shell .plw-media-image{

    position:relative;

    z-index:1;

    display:block;

    width:auto;
    max-width:100%;

    height:auto;
    max-height:82vh;

    object-fit:contain;

    margin:0;

    border-radius:16px;

    box-shadow:
        0 10px 28px rgba(0,0,0,.14),
        inset 0 0 0 1px rgba(255,255,255,.18);
}


/* =====================================================
   VIDEO
===================================================== */

.plw-single-shell .plw-media-video{

    position:relative;

    z-index:1;

    display:block;

    width:auto;
    max-width:100%;

    height:auto;
    max-height:82vh;

    object-fit:contain;

    border-radius:16px;

    background:#000;

    box-shadow:
        0 10px 28px rgba(0,0,0,.18);
}


/* =====================================================
   VIDEO EMBED
===================================================== */

.plw-single-shell .plw-media-embed{

    position:relative;

    z-index:1;

    width:100%;

    aspect-ratio:16 / 9;

    overflow:hidden;

    border-radius:16px;

    background:#000;
}


.plw-single-shell .plw-media-embed iframe{

    width:100% !important;
    height:100% !important;

    display:block;

    border:0;
}


/* =====================================================
   AUDIO WRAP
===================================================== */

.plw-single-shell .plw-audio-wrap{

    position:relative;
    z-index:1;
    width:100%;

    min-height:0;

    display:flex;

    align-items:flex-start;
    justify-content:flex-start;

    overflow:visible;

    border-radius:16px;
    background:transparent;
}

/* =====================================================

AUDIO ALBUM HERO

===================================================== */

.plw-single-shell .plw-audio-album-hero{

width:100%;



max-width:none;

max-height:none;



height:auto;



object-fit:cover;



border-radius:16px;



box-shadow:none;

}


/* =====================================================
   AUDIO LOWER AURORA
===================================================== */

.plw-single-shell .plw-audio-wrap::after{

    content:"";

    position:absolute;

    inset:0;

    z-index:3;

    pointer-events:none;

    background:

        linear-gradient(
            to bottom,
            transparent 45%,
            color-mix(
                in srgb,
                var(--plw-aurora),
                transparent 82%
            )
        );
}


/* =====================================================
   AUTHOR SIDE
   ⭐ NO CARD
   ⭐ INSIDE BIG COVER
===================================================== */

.plw-single-shell .plw-author-box{

    position:relative;

    width:100%;

    min-width:0;
    min-height:600px;

    display:flex;

    flex-direction:column;

    padding:20px;

    box-sizing:border-box;

    background:transparent;

    border:0;

    border-radius:0;

    box-shadow:none;

    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}


/* =====================================================
   AUTHOR HEADER
===================================================== */

.plw-single-shell .av-author-head{

    display:flex;

    align-items:center;

    gap:12px;

    flex:0 0 auto;

    margin-bottom:20px;
}


/* =====================================================
   AVATAR
===================================================== */

.plw-single-shell .plw-author-avatar{

    flex:0 0 58px;

    width:58px;
    height:58px;

    display:block;

    object-fit:cover;

    border-radius:14px;

    border:
        2px solid
        color-mix(
            in srgb,
            var(--plw-aurora),
            white 60%
        );

    box-shadow:
        0 8px 22px
        color-mix(
            in srgb,
            var(--plw-aurora),
            transparent 60%
        );
}
/* =====================================================
   AUTHOR NAME
===================================================== */

.plw-single-shell .plw-author-name{

    font-size:15px;

    font-weight:600;

    line-height:1.3;

    color:
        color-mix(
            in srgb,
            var(--plw-aurora),
            #222 65%
        );
}


/* =====================================================
   AESTHETIC TEXT
===================================================== */

.plw-single-shell .plw-aesthetic-text{

    flex:0 0 auto;

    margin:0 0 18px;

    padding:16px;

    box-sizing:border-box;

    border-radius:16px;

    background:

        color-mix(
            in srgb,
            var(--plw-aurora) 12%,
            rgba(255,255,255,.45)
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--plw-aurora) 20%,
            rgba(255,255,255,.55)
        );

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

    color:#333;

    font-size:15px;

    line-height:1.65;
}


/* =====================================================
   WORDPRESS CONTENT
===================================================== */

.plw-single-shell .plw-wp-content{

    flex:1 1 auto;

    min-height:0;

    max-height:360px;

    overflow-y:auto;
    overflow-x:hidden;

    padding:16px 18px;

    box-sizing:border-box;

    border-radius:16px;

    background:
        color-mix(
            in srgb,
            var(--plw-aurora) 8%,
            rgba(255,255,255,.28)
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--plw-aurora) 16%,
            rgba(255,255,255,.45)
        );

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

    color:#333;

    font-size:15px;

    line-height:1.7;
}

/* =====================================================
   COMMENT BOX
===================================================== */

.plw-single-shell .plw-comment-box{

    width:100%;

    margin-top:auto;

    padding:10px;

    box-sizing:border-box;

    border-radius:16px;

    background:

        color-mix(
            in srgb,
            var(--plw-aurora) 15%,
            rgba(255,255,255,.42)
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--plw-aurora) 24%,
            rgba(255,255,255,.55)
        );

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}


.plw-single-shell .plw-comment-box input{

    width:100%;

    padding:12px 14px;

    box-sizing:border-box;

    border-radius:12px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--plw-aurora) 22%,
            rgba(0,0,0,.12)
        );

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

    color:#222;

    outline:none;

    font-size:14px;
}


.plw-single-shell .plw-comment-box input:focus{

    border-color:var(--plw-aurora);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--plw-aurora),
            transparent 75%
        );
}


.plw-single-shell .plw-comment-box input::placeholder{

    color:rgba(0,0,0,.42);
}


/* =====================================================
   AUDIO PLAYER
===================================================== */

.plw-single-shell .player{

    position:absolute;

    left:50%;
    bottom:24px;

    transform:translateX(-50%);

    z-index:10;

    width:calc(100% - 32px);

    max-width:380px;

    margin:0;

    font-family:"Fira Sans",sans-serif;
}


/* =====================================================
   PLAYER INFO
===================================================== */

.plw-single-shell .player .info{

    position:absolute;

    top:0;

    left:10px;
    right:10px;

    height:60px;

    opacity:0;

    padding:6px 14px 6px 78px;

    box-sizing:border-box;

    border-radius:14px;

    background:
        color-mix(
            in srgb,
            var(--plw-aurora),
            transparent 65%
        );

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

    transition:
        top .4s ease,
        opacity .4s ease;
}


.plw-single-shell .player .info.active{

    top:-60px;

    opacity:1;
}


/* =====================================================
   PLAYER TEXT
===================================================== */

.plw-single-shell .player .artist{

    color:
        color-mix(
            in srgb,
            var(--plw-aurora),
            white 65%
        );

    font-size:15px;
}


.plw-single-shell .player .name{

    color:
        color-mix(
            in srgb,
            var(--plw-aurora),
            white 40%
        );

    font-size:12px;
}


/* =====================================================
   PROGRESS
===================================================== */

.plw-single-shell .player .progress-bar{

    height:2px;

    margin-top:6px;

    border-radius:2px;

    overflow:hidden;

    background:
        color-mix(
            in srgb,
            var(--plw-aurora),
            transparent 80%
        );
}


.plw-single-shell .player .progress-bar .bar{

    width:0%;
    height:100%;

    background:var(--plw-aurora);

    transition:width .2s linear;
}


/* =====================================================
   CONTROL PANEL
===================================================== */

.plw-single-shell .player .control-panel{

    position:relative;

    height:60px;

    border-radius:12px;

    background:
        color-mix(
            in srgb,
            var(--plw-aurora),
            transparent 70%
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--plw-aurora),
            transparent 75%
        );

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}


/* =====================================================
   ALBUM DISC
===================================================== */

.plw-single-shell .player .album-art{

    position:absolute;

    left:10px;
    top:50%;

    width:52px;
    height:52px;

    border-radius:50%;

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

    z-index:20;

    transform:translateY(-50%);
}


/* =====================================================
   DISC SPIN
===================================================== */

.plw-single-shell .player .album-art.spin{

    animation:
        plw-single-album-spin
        3.5s linear infinite;
}


@keyframes plw-single-album-spin{

    from{
        transform:translateY(-50%) rotate(0deg);
    }

    to{
        transform:translateY(-50%) rotate(360deg);
    }
}


/* =====================================================
   PLAYER CONTROLS
===================================================== */

.plw-single-shell .player .controls{

    display:flex;

    justify-content:flex-end;
    align-items:center;

    height:60px;

    padding-right:12px;

    gap:10px;
}


.plw-single-shell .player .controls div{

    width:34px;
    height:34px;

    border-radius:10px;

    background:
        color-mix(
            in srgb,
            var(--plw-aurora),
            transparent 70%
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--plw-aurora),
            transparent 75%
        );

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

    background-position:center;
    background-repeat:no-repeat;
    background-size:18px;

    cursor:pointer;

    color:var(--plw-aurora);

    transition:transform .2s ease;
}


.plw-single-shell .player .controls div:hover{

    transform:scale(1.05);
}

/* =====================================================
   PLAY ICON
===================================================== */

.plw-single-shell .player .controls .play{

    background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'>\
<polygon points='6,4 20,12 6,20'/>\
</svg>");

}


.plw-single-shell .player .controls .play.is-playing{

    background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'>\
<rect x='5' y='4' width='5' height='16'/>\
<rect x='14' y='4' width='5' height='16'/>\
</svg>");

}


/* =====================================================
   NEXT
===================================================== */

.plw-single-shell .player .controls .next{

    background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'>\
<polygon points='6,4 16,12 6,20'/>\
<rect x='17' y='4' width='3' height='16'/>\
</svg>");

}


/* =====================================================
   PREVIOUS
===================================================== */

.plw-single-shell .player .controls .prev{

    background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'>\
<polygon points='18,4 8,12 18,20'/>\
<rect x='5' y='4' width='3' height='16'/>\
</svg>");

}


/* =====================================================
   AUDIO TIME
   CLEAN — NO GLASS OVERLAY
===================================================== */

.plw-single-shell .audio-status{

    position:absolute;

    left:50%;
    bottom:4px;

    transform:translateX(-50%);

    z-index:25;

    pointer-events:none;
}


.plw-single-shell .plw-audio-time{

    display:block;

    color:
        color-mix(
            in srgb,
            var(--plw-aurora),
            white 30%
        );

    font-size:12px;

    line-height:1;

    white-space:nowrap;

    text-align:center;
}

/* =====================================================
   GLOBAL SINGLE PAGE GRAIN
===================================================== */

.plw-single-shell::after{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-1;

    opacity:.08;

    background:

        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.04) 0,
            rgba(255,255,255,.04) 1px,
            transparent 2px
        ),

        repeating-linear-gradient(
            90deg,
            rgba(0,0,0,.025) 0,
            rgba(0,0,0,.025) 1px,
            transparent 2px
        );
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width:768px){

    .plw-single-shell .plw-single-cover{

        display:flex;

        flex-direction:column;

        gap:18px;

        padding:12px;

        border-radius:18px;
    }


    .plw-single-shell .plw-media-area{

        min-height:auto;

        border-radius:14px;
    }


    .plw-single-shell .plw-media-content{

        min-height:auto;
    }


    .plw-single-shell .plw-media-image,
    .plw-single-shell .plw-media-video{

        width:100%;

        max-width:100%;

        max-height:none;

        border-radius:12px;
    }


    .plw-single-shell .plw-audio-wrap{

        min-height:360px;

        border-radius:12px;
    }


    .plw-single-shell .plw-author-box{

        width:100%;

        min-height:0;

        padding:12px;

        text-align:center;
    }


    .plw-single-shell .av-author-head{

        justify-content:center;

        flex-direction:column;

        gap:8px;
    }


   .plw-single-shell .plw-author-avatar{

    flex:0 0 48px;

    width:48px !important;
    height:48px !important;

    min-width:48px;
    min-height:48px;

    max-width:48px;
    max-height:48px;

    aspect-ratio:1 / 1;

    display:block;

    object-fit:cover;

    border-radius:14px;

    box-sizing:border-box;
}


    .plw-single-shell .plw-author-name{

        text-align:center;
    }


    .plw-single-shell .plw-aesthetic-text{

        text-align:left;

        font-size:14px;
    }


    .plw-single-shell .player{

        width:calc(100% - 24px);

        bottom:14px;
    }



}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width:420px){

    .plw-single-shell .plw-single-cover{

        padding:8px;

        border-radius:14px;
    }


    .plw-single-shell .plw-media-area{

        border-radius:10px;
    }


    .plw-single-shell .plw-audio-wrap{

        min-height:300px;
    }


    .plw-single-shell .player{

        width:calc(100% - 16px);

        bottom:10px;
    }


    .plw-single-shell .player .album-art{

        width:46px;
        height:46px;
    }


    .plw-single-shell .player .controls{

        gap:6px;

        padding-right:8px;
    }


    .plw-single-shell .player .controls div{

        width:32px;
        height:32px;
    }
}




/* =====================================================
   VOLUME CONTROL
   🔊 ICON + SLIDER
   -----------------------------------------------------
   IMPORTANT:
   - Does NOT affect .info timeline
   - Does NOT affect audio time
   - Does NOT change existing buttons
===================================================== */

.plw-single-shell .player .controls .volume-control{

    display:flex;

    align-items:center;

    flex:0 0 auto;

    gap:7px;

    width:auto;
    height:34px;

    margin-left:2px;
}

/* =====================================================
   VOLUME ICON
===================================================== */

.plw-single-shell .player .controls .volume-control .volume{

    flex:0 0 30px;

    width:30px;
    height:30px;

    margin:0;

    padding:0;

    border-radius:8px;

    background:
        color-mix(
            in srgb,
            var(--plw-aurora),
            transparent 70%
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--plw-aurora),
            transparent 75%
        );

    background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'>\
<path d='M4 9v6h4l5 4V5L8 9H4z'/>\
<path d='M16 8.5a5 5 0 0 1 0 7' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'/>\
</svg>");

    background-position:center;
    background-repeat:no-repeat;
    background-size:16px;

    cursor:pointer;

    transition:
        transform .2s ease,
        background-color .2s ease;
}


/* =====================================================
   VOLUME ICON HOVER
===================================================== */

.plw-single-shell .player .controls .volume-control .volume:hover{

    transform:scale(1.05);
}


/* =====================================================
   VOLUME SLIDER
   ───────────────●
===================================================== */

.plw-single-shell .player .controls .volume-slider{

    appearance:none;
    -webkit-appearance:none;

    width:82px;
    height:3px;

    margin:0;
    padding:0;

    border:0;

    border-radius:3px;

    outline:none;

    cursor:pointer;

    background:
        color-mix(
            in srgb,
            var(--plw-aurora),
            transparent 70%
        );
}


/* =====================================================
   SLIDER TRACK — CHROME / EDGE / SAFARI
===================================================== */

.plw-single-shell .player .controls .volume-slider::-webkit-slider-runnable-track{

    height:3px;

    border-radius:3px;

    background:
        color-mix(
            in srgb,
            var(--plw-aurora),
            transparent 70%
        );
}


/* =====================================================
   SLIDER THUMB — CHROME / EDGE / SAFARI
===================================================== */

.plw-single-shell .player .controls .volume-slider::-webkit-slider-thumb{

    appearance:none;
    -webkit-appearance:none;

    width:8px;
    height:8px;

    margin-top:-2.5px;

    border:0;

    border-radius:50%;

    background:var(--plw-aurora);

    cursor:pointer;

    box-shadow:none;
}


/* =====================================================
   SLIDER TRACK — FIREFOX
===================================================== */

.plw-single-shell .player .controls .volume-slider::-moz-range-track{

    height:3px;

    border-radius:3px;

    background:
        color-mix(
            in srgb,
            var(--plw-aurora),
            transparent 70%
        );
}


/* =====================================================
   SLIDER THUMB — FIREFOX
===================================================== */

.plw-single-shell .player .controls .volume-slider::-moz-range-thumb{

    width:8px;
    height:8px;

    border:0;

    border-radius:50%;

    background:var(--plw-aurora);

    cursor:pointer;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width:420px){

    .plw-single-shell .player .controls .volume-control{

        gap:5px;

    }

    .plw-single-shell .player .controls .volume-control .volume{

        flex-basis:27px;

        width:27px;
        height:27px;

        background-size:15px;

    }

    .plw-single-shell .player .controls .volume-slider{

        width:62px;

    }

}

























/* =====================================================
   AESTHETIC VIBES — WELCOME POPUP
   Aurora follows current Single Post
===================================================== */

.plw-single-shell .av-welcome-overlay{

    position:fixed;

    inset:0;

    z-index:99999;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:20px;

    box-sizing:border-box;

    background:
        rgba(10,8,10,.32);

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

    opacity:0;
    visibility:hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}


.plw-single-shell .av-welcome-overlay.is-visible{

    opacity:1;
    visibility:visible;
}


/* =====================================================
   POPUP
===================================================== */

.plw-single-shell .av-welcome-popup{

    position:relative;

    width:100%;
    max-width:430px;

    padding:34px 30px;

    box-sizing:border-box;

    text-align:center;

    border-radius:24px;

    background:

        radial-gradient(
            circle at 20% 10%,
            color-mix(
                in srgb,
                var(--plw-aurora),
                white 15%
            ),
            transparent 65%
        ),

        color-mix(
            in srgb,
            var(--plw-aurora) 78%,
            rgba(255,255,255,.22)
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--plw-aurora),
            white 58%
        );

    box-shadow:

        0 28px 90px
        color-mix(
            in srgb,
            var(--plw-aurora),
            transparent 42%
        );

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

    transform:
        translateY(16px)
        scale(.97);

    transition:
        transform .4s ease;
}


.plw-single-shell
.av-welcome-overlay.is-visible
.av-welcome-popup{

    transform:
        translateY(0)
        scale(1);
}


/* =====================================================
   CLOSE
===================================================== */

.plw-single-shell .av-welcome-close{

    position:absolute;

    top:12px;
    right:14px;

    width:30px;
    height:30px;

    padding:0;

    border:0;
    border-radius:50%;

    background:
        color-mix(
            in srgb,
            var(--plw-aurora),
            transparent 55%
        );

    color:
        color-mix(
            in srgb,
            var(--plw-aurora),
            white 70%
        );

    font-size:20px;
    line-height:30px;

    cursor:pointer;

    transition:
        transform .2s ease,
        background .2s ease;
}


.plw-single-shell .av-welcome-close:hover{

    transform:scale(1.08);
}


/* =====================================================
   TEXT
===================================================== */

.plw-single-shell .av-welcome-kicker{

    margin-bottom:8px;

    color:
        color-mix(
            in srgb,
            var(--plw-aurora),
            white 70%
        );

    font-size:11px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;
}


.plw-single-shell .av-welcome-title{

    margin:0 0 12px;

    color:
        color-mix(
            in srgb,
            var(--plw-aurora),
            white 82%
        );

    font-size:25px;

    line-height:1.25;

    font-weight:600;
}


.plw-single-shell .av-welcome-text{

    margin:0 auto 24px;

    max-width:330px;

    color:
        color-mix(
            in srgb,
            var(--plw-aurora),
            white 55%
        );

    font-size:14px;

    line-height:1.65;
}


/* =====================================================
   BUTTON
===================================================== */

.plw-single-shell .av-welcome-button{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:42px;

    padding:0 22px;

    border-radius:12px;

    text-decoration:none;

    background:
        color-mix(
            in srgb,
            var(--plw-aurora),
            white 12%
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--plw-aurora),
            white 45%
        );

    color:#fff;

    font-size:13px;
    font-weight:600;

    box-shadow:
        0 8px 25px
        color-mix(
            in srgb,
            var(--plw-aurora),
            transparent 55%
        );

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.plw-single-shell .av-welcome-button:hover{

    transform:translateY(-2px);

    box-shadow:
        0 12px 32px
        color-mix(
            in srgb,
            var(--plw-aurora),
            transparent 45%
        );
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width:420px){

    .plw-single-shell .av-welcome-popup{

        max-width:calc(100% - 10px);

        padding:30px 22px;

        border-radius:20px;
    }

    .plw-single-shell .av-welcome-title{

        font-size:22px;
    }

}