@keyframes grain{
0%{
transform:translate(0, 0)}
to{
transform:translate(-10%, -10%)}
}
:root{
--noise:url("https://ik.imagekit.io/ggcm4pyrd/images/noise.webp?updatedAt=1753533413286")}
body{
color: var(--l);
background-image: repeating-linear-gradient(to bottom,rgba(255, 255, 255, 0.03),rgba(255, 255, 255, 0.03) 1px,transparent 2px,transparent 4px)}
.hero{
color:var(--g);
text-align:center;
position:relative;
height:60vh;
background:radial-gradient(#0f0f0f, #000);
border-bottom:4px dashed var(--g);
overflow:hidden;
display:flex;
flex-direction:column;
align-content:center;
justify-content:center}
.hero h1{
font-size:var(--s-4);
animation:pulse 3s infinite;
position:relative;
z-index:1;
line-height:1.1;
margin-bottom:var(--s-md)}
.hero h2{
font-size:var(--s-2);
margin:0 auto;
max-width:1000px;
position:relative;
z-index:1;
line-height:1.4;
opacity:0.9}
.noise-bg{
position:absolute;
top:0;
left:0;
width:110%;
height:110%;
background-image:var(--noise);
opacity:0.2;
animation:grain 1s steps(10)infinite;
pointer-events:none;
z-index:0}
.social,
.description{
padding:var(--s-md)var(--s-sm);
color:#f0f0f0;
text-align:center;
margin-left:auto;
margin-right:auto;
margin-top:var(--s-md);
max-width:1000px}
.description{
margin-top:var(--s-xl);
border-bottom:2px dashed #555}
.social h2,
.description h1,
.description h2{
font-size:var(--s-3);
margin-bottom:var(--s-lg);
color:var(--g)}
.description h1,
.description h2{
text-align:left}
.social-text,
.description-text{
margin-bottom:var(--s-md);
font-size:var(--s-1);
margin-left:auto;
margin-right:auto}
.description-text{
text-align:left}
.description a,
.release a{
color:var(--g);
text-decoration: none}
.social-container{
display:grid;
grid-template-columns:repeat(2, auto);
justify-content:center;
gap:var(--s-lg);
flex-wrap:wrap;
padding:0 var(--s-xl)}
.social-icon{
display:flex;
flex-direction:column;
align-items:center;
text-decoration:none;
color:var(--l);
transition:transform 0.3s ease,filter 0.3s ease;
width:auto;
margin:var(--s-sm);
margin-bottom:var(--s-lg)}
.social-icon img{
width:var(--s-4);
height:auto;
margin-bottom:var(--s-sm);
filter:grayscale(100%)brightness(0.8);
transition:filter 0.3s ease}
.social-icon span{
font-size:var(--s-0);
opacity:0.7;
transition:opacity 0.3s;
text-align:center}
.social-icon:hover{
transform:scale(1.08)}
.social-icon:hover img{
filter:grayscale(0%)brightness(1)}
.social-icon:hover span{
opacity:1}
@media(max-width:700px){
.hero{
height:40vh}
.hero h1{
font-size:var(--s-3)}
.hero h2{
font-size:var(--s-1)}
.social-icon{
margin:var(--s-xs)}
}
@media(max-width:400px){
.social-icon img{
width:var(--s-3)}
}
@media(min-width: 800px){
.social-container{
grid-template-columns:repeat(4, auto)}
}
.release{
padding:var(--s-md) var(--s-sm)}
.release p{
text-align:left;
line-height:1.7}
.release-box{
position:relative;
width:100%;
max-width:1000px;
margin:var(--s-lg) auto 0;
background-color:rgba(0, 0, 0, 0.3);
padding:var(--s-lg);
border-radius:var(--s-sm);
overflow:hidden;
box-shadow:0 0 15px rgba(0, 0, 0, 0.2);
display:grid;
grid-template-columns:auto 1fr;
gap:var(--s-md);
align-items:center;
text-align:left}
.release-cover{
width:calc(var(--s-4) * 2.5);
border-radius:var(--s-sm)}
.release-title{
font-family:'Russo One', sans-serif;
font-size:var(--s-2);
color:var(--g)}
@media(max-width: 700px){
.release-box{
grid-template-columns: 1fr;
text-align:center}
.release-cover{
margin:0 auto}
}