/*==================================================
GLOBULAR RECORDS
PAGE UPDATE
==================================================*/

.page-update{

    position:relative;

    width:min(1600px,92%);

    min-height:100vh;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:120px;

    padding:140px 0 90px;

    z-index:5;
	 

}


/*==================================
LEFT DISC
===================================*/

.update-disc{

    flex:0 0 520px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.update-disc .vinyl{

    width:420px;

    height:420px;

    animation:spinRecord 14s linear infinite;

}

.update-disc .vinyl:hover{

    animation-play-state:running;

}


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

.update-text{

    flex:1;

    max-width:700px;

    color:#fff;

}

.update-small{

    display:inline-block;

    margin-bottom:22px;

    font-family:'Oswald',sans-serif;

    font-size:16px;

    letter-spacing:8px;

    color:#A54CC4;

    text-transform:uppercase;

}

.update-text h1{

    margin:0;

    font-family:'Anton',sans-serif;

    font-size:clamp(70px,8vw,145px);

    font-weight:400;

    line-height:.9;

    text-transform:uppercase;

    color:#fff;

}

.update-text p{

    margin-top:45px;

    font-family:'Oswald',sans-serif;

    font-size:20px;

    font-weight:300;

    line-height:1.9;

    color:#d9d9d9;

    max-width:620px;

}


/*==================================
BUTTONS
===================================*/

.update-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:25px;

    margin-top:60px;

}

.update-buttons a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 42px;

    border:2px solid #A54CC4;

    border-radius:60px;

    color:#fff;

    font-family:'Oswald',sans-serif;

    font-size:15px;

    font-weight:500;

    letter-spacing:3px;

    text-transform:uppercase;

    transition:.35s ease;

}

.update-buttons a:first-child{

    background:#A54CC4;

}

.update-buttons a:last-child{

    background:transparent;

}

.update-buttons a:hover{

    transform:translateY(-5px);

    box-shadow:0 0 30px rgba(165,76,196,.35);

    background:#A54CC4;

}


/*==================================
FADE IN
===================================*/

.update-disc{

    animation:updateDisc 1.1s ease forwards;

}

.update-text{

    opacity:0;

    transform:translateX(80px);

    animation:updateText 1s ease .35s forwards;

}

@keyframes updateDisc{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes updateText{

    from{

        opacity:0;

        transform:translateX(80px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


/*==================================
1600
===================================*/

@media(max-width:1600px){

.update-disc{

flex-basis:460px;

}

.update-disc .vinyl{

width:380px;

height:380px;

}

}


/*==================================
1400
===================================*/

@media(max-width:1400px){

.page-update{

gap:90px;

}

.update-disc{

flex-basis:400px;

}

.update-disc .vinyl{

width:340px;

height:340px;

}

.update-text h1{

font-size:110px;

}

}


/*==================================
1200
===================================*/

@media(max-width:1200px){

.page-update{

gap:60px;

}

.update-disc{

flex-basis:340px;

}

.update-disc .vinyl{

width:300px;

height:300px;

}

.update-text h1{

font-size:90px;

}

.update-text p{

font-size:20px;

}

}


/*==================================
992
===================================*/

@media(max-width:992px){

.page-update{

flex-direction:column;

text-align:center;

padding:150px 20px 80px;

gap:60px;

}

.update-disc{

flex-basis:auto;

}

.update-text{

max-width:700px;

}

.update-text p{

margin-left:auto;

margin-right:auto;

}

.update-buttons{

justify-content:center;

}

}


/*==================================
768
===================================*/

@media(max-width:768px){

.update-disc .vinyl{

width:260px;

height:260px;

}

.update-small{

letter-spacing:5px;

font-size:14px;

}

.update-text h1{

font-size:70px;

}

.update-text p{

font-size:18px;

line-height:1.8;

}

}


/*==================================
600
===================================*/

@media(max-width:600px){

.update-disc .vinyl{

width:220px;

height:220px;

}

.update-text h1{

font-size:54px;

}

.update-text p{

font-size:16px;

}

.update-buttons{

flex-direction:column;

}

.update-buttons a{

width:100%;

}

}


/*==================================
430
===================================*/

@media(max-width:430px){

.page-update{

padding:120px 18px 60px;

}

.update-disc .vinyl{

width:180px;

height:180px;

}

.update-small{

font-size:12px;

letter-spacing:3px;

}

.update-text h1{

font-size:42px;

}

.update-text p{

font-size:15px;

line-height:1.7;

}

}

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

.update-icon{

    flex:0 0 650px;

    display:flex;

    justify-content:center;

    align-items:center;

}


.update-icon i{

    font-size:clamp(260px,28vw,480px);

    color:#A54CC4;

    opacity:.95;

    text-shadow:
        0 0 30px rgba(165,76,196,.45),
        0 0 80px rgba(165,76,196,.25);

    animation:

        studioFloat 4s ease-in-out infinite,

        studioPulse 3s ease-in-out infinite;

}


/*==================================
FLOAT
==================================*/

@keyframes studioFloat{

    0%{

        transform:
            translateY(0)
            rotate(-4deg);

    }

    50%{

        transform:
            translateY(-18px)
            rotate(4deg);

    }

    100%{

        transform:
            translateY(0)
            rotate(-4deg);

    }

}


/*==================================
GLOW
==================================*/

@keyframes studioPulse{

    0%{

        filter:drop-shadow(0 0 25px rgba(165,76,196,.25));

    }

    50%{

        filter:drop-shadow(0 0 60px rgba(165,76,196,.65));

    }

    100%{

        filter:drop-shadow(0 0 25px rgba(165,76,196,.25));

    }

}

@media(max-width:992px){

.update-icon{

flex-basis:auto;

margin-bottom:30px;

}

}

@media(max-width:768px){

.update-icon i{

font-size:220px;

}

}

@media(max-width:600px){

.update-icon i{

font-size:170px;

}

}

@media(max-width:430px){

.update-icon i{

font-size:130px;

}

}

/*=========================================
CSS EQUALIZER
=========================================*/

.equalizer{

    flex:0 0 60px;

    height:420px;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap:22px;

}

/* bars */

.equalizer span{

    width:36px;

    border-radius:40px;

    background:linear-gradient(

        to top,

        #4d006d,

        #A54CC4,

        #ffffff

    );

    box-shadow:

        0 0 25px rgba(165,76,196,.35),

        0 0 60px rgba(165,76,196,.25);

    animation:equalizer 1.4s ease-in-out infinite;

}

/* different delays */

.equalizer span:nth-child(1){

height:120px;

animation-delay:.1s;

}

.equalizer span:nth-child(2){

height:260px;

animation-delay:.4s;

}

.equalizer span:nth-child(3){

height:170px;

animation-delay:.2s;

}

.equalizer span:nth-child(4){

height:360px;

animation-delay:.6s;

}

.equalizer span:nth-child(5){

height:210px;

animation-delay:.3s;

}

.equalizer span:nth-child(6){

height:310px;

animation-delay:.5s;

}

.equalizer span:nth-child(7){

height:150px;

animation-delay:.15s;

}

/* animation */

@keyframes equalizer{

    0%,100%{

        transform:scaleY(.45);

    }

    25%{

        transform:scaleY(1);

    }

    50%{

        transform:scaleY(.65);

    }

    75%{

        transform:scaleY(.9);

    }

}

@media(max-width:992px){

.equalizer{

height:320px;

gap:16px;

}

.equalizer span{

width:26px;

}

}

@media(max-width:768px){

.equalizer{

height:260px;

}

.equalizer span{

width:20px;

}

}

@media(max-width:430px){

.equalizer{
	 

height:190px;

gap:1px;

}

.equalizer span{

width:14px;

}

}