@charset "utf-8";
/* CSS Document */

@charset "utf-8";

/*==================================================
GLOBULAR RECORDS
ARTIST SHOWCASE
artist-showcase.css
==================================================*/


/*==============================
SECTION
==============================*/

@font-face{
    font-family:"League Gothic";
    src:url("fonts/league-gothic.regular.ttf") format("truetype");
}

.artist-showcase-section{

position:relative;

width:100%;

background:#050505;

padding:140px 0;

overflow:hidden;

}


/* subtle texture */

.artist-showcase-section::before{

content:"";

position:absolute;

inset:0;

background:
radial-gradient(circle at center,
rgba(255,255,255,.02),
transparent 70%);

pointer-events:none;

}



/*==============================
LAYOUT
==============================*/

.artist-showcase-wrapper{

width:min(1700px,92%);

margin:auto;

display:grid;

grid-template-columns:150px 1fr;

column-gap:90px;

align-items:start;

}


/*==============================
LEFT TITLE
==============================*/

/*==================================================
LEFT STICKY TITLE
==================================================*/

/*=========================================
LEFT STICKY TITLE
=========================================*/

.artist-side-title{

    position:sticky;
    top:0;

    width:195px;
    height:100vh;

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

    overflow:visible;

}

.artist-side-title h2{

    margin:0;

    position:absolute;

    left:-20%;
    top:0%;

    transform:
        translate(-50%,-50%)
        rotate(-90deg);

    transform-origin:center center;

    font-family:
        Impact,
        Haettenschweiler,
        "Arial Narrow Bold",
        sans-serif;

    font-size:6rem;

    font-weight:900;

    line-height:.98;

    letter-spacing:3px;

    color:#fff;

    text-transform:uppercase;

    white-space:nowrap;

}


.artist-side-title h2{

    margin:0;

    font-family:
        Impact,
        Haettenschweiler,
        "Arial Narrow Bold",
        sans-serif;

    font-size:9.9rem;
    font-weight:900;

    color:#fff;

    line-height:.84;
    letter-spacing:2px;

    text-transform:uppercase;

    writing-mode:vertical-rl;

    transform:none;

    white-space:nowrap;

}



/*==============================
ARTIST LIST
==============================*/

.artist-list{

display:flex;

flex-direction:column;

gap:170px;

}



/*==============================
ROW
==============================*/

.artist-row{

display:grid;

grid-template-columns:520px 1fr;

align-items:center;

column-gap:110px;

min-height:500px;

}


/* reverse */

.artist-row.image-right{

grid-template-columns:1fr 520px;

}


.artist-row.image-right .artist-content{

order:1;

}

.artist-row.image-right .artist-media{

order:2;

}



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

.artist-media{

/*display:flex;*/

justify-content:center;

align-items:center;

position:relative;

}



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

.album-wrapper{

position:relative;

width:420px;

height:420px;

}


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

.album-cover{
margin-top: -13px;
position:absolute;

left:0;

top:0;

width:100%;

height:100%;

object-fit:cover;

border-radius:18px;

z-index:5;

box-shadow:

0 30px 90px rgba(0,0,0,.55);

}


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

.album-disc{
	margin-top: -13px;

position:absolute;

right:0;

top:50%;

width:360px;

height:360px;

transform:
translate(0,-50%);

z-index:2;

pointer-events:none;

filter:

drop-shadow(0 25px 45px rgba(0,0,0,.55));

transition:

transform 1s cubic-bezier(.19,1,.22,1);

}


/* hidden inside cover */

.album-wrapper .album-disc{

transform:

translate(-110px,-50%);

}



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

.artist-content{

color:#fff;
 
max-width:650px;
text-align:center;
}

/*--*/
.artist-content h3{

margin:0;


    font-family:

  
        "League Gothic", "League Gothic",

       League Gothic;

font-size:11rem;

line-height:.9;

letter-spacing:8px;

/*font-weight:900;*/

text-transform:uppercase;
white-space:nowrap;      /* keeps each line together */
text-align:center;
}

.artist-content h33{

margin:0;

top:10px;
    font-family:

  
        "League Gothic", "League Gothic",

       League Gothic;

font-size:14rem;

line-height:.4;

letter-spacing:4px;

/*font-weight:900;*/

text-transform:uppercase;
white-space:nowrap;      /* keeps each line together */
text-align:center;
}
.artist-content h4{

    margin:2px 0 10px;

    font-size:1.35rem;

    font-weight:700;

    letter-spacing:5px;

    text-transform:uppercase;

    color:#fff;

    position:relative;

    display:inline-block;

}
/*
.artist-content h4::after{

    content:"";

    display:block;

    width:284px;           

    height:2px;

    background:#777;      

    margin:12px auto 0;   

    border-radius:2px;

}*/

.artist-content .heading-line{

    margin:2px 0 10px;

    font-size:1.35rem;

    font-weight:700;

    letter-spacing:5px;

    text-transform:uppercase;

    color:#fff;

    position:relative;

    display:inline-block;
}

.artist-content .heading-line::after{

    content:"";

    display:block;

      width:284px;  

    height:2px;

    background:#777;

    margin:12px auto 0;

}

.pp{

font-size:18rem;

 /*white-space:nowrap;*/

}


.artist-content p{

font-size:.9rem;

line-height:2;

letter-spacing:3.5px;

color:#d5d5d5;

max-width:650px; text-align:center;

}




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

.artist-button{
	grid-column:1 / -1;
    justify-self:center;

display:inline-flex;

align-items:center;

justify-content:center;

margin-top:5px;

padding:

10px 52px;

border:1px solid rgba(255,255,255,.55);

border-radius:60px;

text-decoration:none;

font-size:.8rem;

font-weight:700;

letter-spacing:4px;

text-transform:uppercase;

color:#fff;

transition:.45s;

overflow:hidden;

position:relative;

}


.artist-button:hover{

background:#A54CC4;

border-color:#A54CC4;

box-shadow:

0 0 35px rgba(165,76,196,.45);

transform:translateY(-3px);

}



/*==============================
PREMIUM HOVER
==============================*/

.album-cover{

transition:

transform .7s ease,

box-shadow .7s ease;

}


.artist-row:hover .album-cover{

transform:scale(1.02);

box-shadow:

0 35px 90px rgba(0,0,0,.7);

}



/*==============================
SCROLL REVEAL
==============================*/

.artist-row{

opacity:0;

transform:translateY(120px);

transition:

1.1s cubic-bezier(.22,1,.36,1);

}


.artist-row.visible{

opacity:1;

transform:none;

}



/*==================================================
DESKTOP RESPONSIVE (993px+)
Keeps the design identical while shrinking smoothly
==================================================*/

@media (max-width:1600px){

    .artist-showcase-wrapper{

        width:min(96%,1700px);

    }

    .artist-row{

        grid-template-columns:minmax(380px,520px) 1fr;

        column-gap:clamp(50px,6vw,110px);

    }

    .artist-row.image-right{

        grid-template-columns:1fr minmax(380px,520px);

    }

    .album-wrapper{

        width:clamp(320px,26vw,420px);

        height:clamp(320px,26vw,420px);

    }

    .album-disc{

        width:clamp(260px,22vw,360px);

        height:clamp(260px,22vw,360px);

    }

    .artist-content h3{

        font-size:clamp(5.5rem,8vw,10rem);

        letter-spacing:clamp(3px,.5vw,8px);

    }

    .artist-content h33{

        font-size:clamp(12rem,14vw,18rem);


    }

    .artist-content h4{

        font-size:clamp(1rem,1.3vw,1.35rem);

        letter-spacing:clamp(2px,.3vw,5px);

    }

    .artist-content p{

        font-size:clamp(.85rem,.9vw,1rem);

        line-height:1.8;

       /* letter-spacing:clamp(2px,.2vw,3.5px);*/

    }

}

/*==================================================
TABLETS
==================================================*/

@media (max-width:992px){

.artist-showcase-wrapper{

display:block;

width:92%;

}

.artist-side-title{

display:none;

}

.artist-list{

gap:90px;

}

.artist-row,

.artist-row.image-right{

display:flex;

flex-direction:column;

gap:50px;

opacity:1;

transform:none;

min-height:auto;

}

.artist-content{

max-width:700px;

margin:auto;

text-align:center;

}

.artist-content h3{

font-size:clamp(4rem,11vw,7rem);

letter-spacing:3px;

}

.artist-content h33{

font-size:clamp(5rem,14vw,9rem);

}

.artist-content h4{

font-size:1rem;

}

.artist-content p{

font-size:1rem;

line-height:1.8;

}

.album-wrapper{

width:320px;

height:320px;

}

.album-disc{

width:260px;

height:260px;

}

.artist-button{

padding:13px 30px;

}

}

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

@media (max-width:600px){

.artist-showcase-section{

padding:80px 0;

}

.artist-list{

gap:80px;

}

.album-wrapper{

width:260px;

height:260px;

}

.album-disc{

width:205px;

height:205px;

}

.artist-content h3{

font-size:3.2rem;

letter-spacing:2px;

}

.artist-content h33{

font-size:4.5rem;

}

.artist-content h4{

font-size:.9rem;

letter-spacing:2px;

}

.artist-content p{

font-size:.9rem;

line-height:1.8;

letter-spacing:1px;

}

.artist-button{

 padding:13px 30px;

}

 
.artist-content p{
    font-size:.4rem;
     
}
}
/*==================================================
LARGE TABLETS / SMALL LAPTOPS
==================================================*/

@media (max-width:1200px){

.artist-showcase-wrapper{

    display:block;

    width:94%;

}

.artist-side-title{

    display:none;

}

.artist-list{

    gap:110px;

}

.artist-row,
.artist-row.image-right{

    display:flex;

    flex-direction:column;

    gap:60px;

    min-height:auto;

    opacity:1;

    transform:none;

}

.artist-content{

    max-width:820px;

    margin:auto;

    text-align:center;

}

.artist-content h3{

    font-size:clamp(7rem,10vw,85rem);
	

    letter-spacing:2px;

}

.artist-content h33{

    font-size:clamp(11rem,15vw,14rem);

}

.artist-content h4{

    font-size:1.15rem;

    letter-spacing:4px;

}

.artist-content p{

    max-width:760px;

    margin:auto;

    font-size:1rem;

    line-height:1.9;

    letter-spacing:2px;
	

}

.album-wrapper{

    width:380px;

    height:380px;

}

.album-disc{

    width:310px;

    height:310px;

}

.artist-button{

    padding:13px 30px;

    font-size:.6rem;

}

}
/*ADD FOLANO IMAGE ABOVE*/
@media (max-width:1200px){

    .artist-row.image-right .artist-media{
        order:1 !important;
    }

    .artist-row.image-right .artist-content{
        order:2 !important;
    }


}