/* =====================================================
   MARGO STORY
   MUSIC PAGE
===================================================== */


/* =====================================================
   RESET
===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Poppins",sans-serif;

    color:#4d4032;

    overflow-x:hidden;

    min-height:100vh;

    position:relative;

    background:

    radial-gradient(
        circle at 18% 12%,
        rgba(255,232,184,.95),
        rgba(255,232,184,.40) 20%,
        transparent 45%
    ),

    radial-gradient(
        circle at 86% 16%,
        rgba(255,244,220,.35),
        transparent 34%
    ),

    linear-gradient(
        180deg,
        #f8f2e8 0%,
        #f2e8d9 45%,
        #ede1cf 100%
    );

}



/* =====================================================
   SUN LIGHT
===================================================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background:

    linear-gradient(

        120deg,

        rgba(255,255,255,.35),

        rgba(255,248,224,.15) 18%,

        transparent 32%

    );

}



/* =====================================================
   SOFT VIGNETTE
===================================================== */

body::after{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background:

    radial-gradient(

        circle,

        transparent 60%,

        rgba(70,55,35,.05) 100%

    );

}



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

.page-header{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:14px 0 4px;

}



/* =====================================================
   LOGO
===================================================== */

.logo img{

    width:160px;

    height:160px;

    border-radius:50%;

    border:4px solid #d5b377;

    box-shadow:

        0 14px 36px rgba(0,0,0,.14),

        0 0 34px rgba(230,200,145,.28);

}



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

.music-page{

    width:min(1180px,92%);

    margin:10px auto;

}



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

.music-card{

    display:flex;

    justify-content:center;

    align-items:center;

    gap: 30px;

}
/* =====================================================
   VINYL
===================================================== */

.vinyl{

    position:relative;

    width:360px;
    height:360px;

    flex-shrink:0;

    border-radius:50%;

    overflow:hidden;

    background:

    radial-gradient(
        circle,
        #e4c89a 0 24px,
        #2b2b2b 24px 42px,
        transparent 43px
    ),

    repeating-radial-gradient(
        circle,
        #151515 0 2px,
        #262626 2px 4px
    );

    animation:spin 18s linear infinite;

    box-shadow:

        0 35px 55px rgba(35,20,8,.28),

        0 10px 20px rgba(0,0,0,.16),

        inset 0 0 14px rgba(255,255,255,.05);

}


/* ----------------------------------
   Gloss
----------------------------------- */

.vinyl::before{

    content:"";

    position:absolute;

    inset:-12%;

    border-radius:50%;

    background:

    linear-gradient(

        130deg,

        rgba(255,255,255,.40) 0%,

        rgba(255,255,255,.10) 18%,

        transparent 34%

    );

}


/* ----------------------------------
   Contact shadow
----------------------------------- */

.vinyl::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-28px;

    transform:translateX(-50%);

    width:220px;

    height:42px;

    border-radius:50%;

    background:

        rgba(45,32,20,.18);

    filter:blur(16px);

    z-index:-1;

}



/* =====================================================
   CENTER
===================================================== */

.vinyl-center{

    width:58px;

    height:58px;

    margin:auto;

    margin-top:151px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-family:"Cormorant Garamond",serif;

    font-size:21px;

    font-weight:700;

    letter-spacing:1px;

    color:#6d4d30;

    background:

    radial-gradient(

        circle,

        #fffaf0,

        #e8d4b4

    );

    box-shadow:

        inset 0 3px 8px rgba(255,255,255,.8),

        0 4px 12px rgba(0,0,0,.18);

}
/* =====================================================
   PLAYER CARD
===================================================== */

.player-card{

    position:relative;

    width:680px;

    padding:26px;

    border-radius:30px;

    background:

    linear-gradient(
        180deg,
        rgba(248,243,235,.96) 0%,
        rgba(239,230,216,.95) 100%
    );

    border:1px solid rgba(214,187,142,.45);

    overflow:hidden;

    box-shadow:

        0 40px 80px rgba(70,48,22,.18),

        0 14px 28px rgba(0,0,0,.08),

        inset 0 1px 0 rgba(255,255,255,.75);

}


/* ----------------------------------
   soft warm light
----------------------------------- */

.player-card::before{

    content:"";

    position:absolute;

    top:-120px;

    left:-80px;

    width:340px;

    height:220px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(255,250,228,.75),

        transparent 72%

    );

}


/* ----------------------------------
   contact shadow
----------------------------------- */

.player-card::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-30px;

    transform:translateX(-50%);

    width:340px;

    height:46px;

    border-radius:50%;

    background:

        rgba(55,38,18,.18);

    filter:blur(18px);

    z-index:-1;

}
/* =====================================================
   TITLE
===================================================== */

.player-card h2{

    margin:0 0 26px;

    text-align:center;

    font-family:"Cormorant Garamond",serif;

    font-size:48px;

    color:#68492d;

    letter-spacing:.4px;

}

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

.player-card iframe{

    width:100%;

    height:320px;

    border:none;

    border-radius:18px;

    overflow: hidden;

    box-shadow:

        0 8px 18px rgba(0,0,0,.10);

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

.playlist-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    margin-top:24px;

    padding:14px 32px;

    border-radius:40px;

    color:#fff;

    background:

    linear-gradient(
        135deg,
        #d7b076,
        #bf9257
    );

    transition:.25s;

    box-shadow:

        0 10px 24px rgba(188,143,76,.30);

}


.playlist-btn:hover{

    transform:translateY(-3px);

    box-shadow:

        0 18px 34px rgba(188,143,76,.35);

}
/* =====================================================
   ATMOSPHERE
===================================================== */

/* теплый солнечный свет */

.music-page{

    position:relative;

}

.music-page::before{

    content:"";

    position:absolute;

    top:-180px;

    left:-240px;

    width:900px;

    height:700px;

    pointer-events:none;

    background:

    radial-gradient(

        circle,

        rgba(255,239,195,.55),

        rgba(255,239,195,.20) 40%,

        transparent 72%

    );

    filter:blur(45px);

    z-index:-2;

}



/* деревянная поверхность */

.music-card{

    position:relative;

    padding:70px 60px 110px;

}

.music-card::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:180px;

    border-radius:32px;

    background:

    linear-gradient(

        180deg,

        #ead8bb,

        #d8c09b

    );

    box-shadow:

        inset 0 2px 0 rgba(255,255,255,.35),

        inset 0 -18px 30px rgba(155,118,70,.10);

    z-index:-1;

}



/* мягкая тень всей композиции */

.music-card::before{

    content:"";

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    width:720px;

    height:70px;

    border-radius:50%;

    background:

        rgba(45,30,15,.14);

    filter:blur(28px);

    z-index:-2;

}



/* =====================================================
   ANIMATION
===================================================== */

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}



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

@media (max-width:900px){

    .music-card{

        flex-direction:column;

        gap:20px;

        padding:40px 25px 90px;

    }

    .music-card::after{

        height:140px;

    }

    .player-card{

        width:100%;

    }

    .vinyl{

        width:240px;

        height:240px;

    }

    .vinyl-center{

        margin-top:92px;

    }

}
/* =====================================================
   BACK BUTTON
===================================================== */

.back-btn{

    position:fixed;

    top:24px;

    left:24px;

    display:flex;

    align-items:center;

    gap:8px;

    padding:12px 22px;

    border-radius:999px;

    background:rgba(255,250,242,.88);

    backdrop-filter:blur(12px);

    color:#6b4a2d;

    font-family:"Poppins",sans-serif;

    font-size:18px;

    font-weight:600;

    text-decoration:none;

    box-shadow:
        0 10px 25px rgba(0,0,0,.12);

    transition:.25s;

    z-index:9999;

}

.back-btn:hover{

    transform:translateY(-2px);

    background:#fffdf9;

    box-shadow:
        0 16px 30px rgba(0,0,0,.15);

}