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

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

html,
body{
    width:100%;
    height:100%;
}

body{

    background:

    radial-gradient(
        circle at center,
        #101010 0%,
        #050505 30%,
        #010101 65%,
        #000000 100%
    ),

    radial-gradient(
        circle at center,
        rgba(120,10,10,.06) 0%,
        transparent 65%
    ),

    #000;

color:#f2f2f2;

font-family:"Space Grotesk",sans-serif;

    overflow:hidden;

    position:relative;


}

/* ===========================
   LANDING
=========================== */

.landing{

    width:100%;
    min-height:100vh;

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

    position:relative;

    padding:0 20px;

}

/* ===========================
   SIGIL
=========================== */

.sigil-wrapper{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:
        transform .45s ease,
        filter .45s ease;

}

.sigil-wrapper:hover{

    transform:scale(1.025);

}

.sigil-wrapper:hover .sigil{

    animation:none;

    transform:
        translate(0,0)
        rotate(0deg)
        scale(1);

}

.sigil-glow{

    position:absolute;

    width:360px;
    height:360px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(150,15,15,.22) 0%,
        rgba(120,0,0,.10) 35%,
        rgba(120,0,0,0) 72%
    );

    filter:blur(48px);

    opacity:.42;

    animation:breathe 18s ease-in-out infinite;

    pointer-events:none;

    transition: opacity .6s ease, transform .6s ease, filter .6s ease;

}

.sigil{

    width:525px;
    max-width:82vw;

    opacity:0;

cursor:crosshair;

transition:
    opacity 1.8s ease,
    filter .4s ease,
    transform .4s ease;

    animation:
    sigilHorizontal 9.3s ease-in-out infinite alternate,
    sigilVertical 12.8s ease-in-out infinite alternate,
    sigilRock 10.7s ease-in-out infinite alternate,
    sigilBreath 18.6s ease-in-out infinite;

    animation-fill-mode:both;

    transform-origin:48% 43%;

    will-change:transform;

}

.sigil:hover{

    filter:
        brightness(1.08)
        drop-shadow(0 0 10px rgba(170,20,20,.45))
        drop-shadow(0 0 24px rgba(170,20,20,.25));

}

/* ===========================
   RITUAL
=========================== */

.ritual-text{

    margin-top:18px;
    margin-bottom:8px;

    font-size:14px;

    letter-spacing:7px;

    text-transform:uppercase;

    text-align:center;

    max-width:330px;

    margin-left:auto;
    margin-right:auto;

    line-height:1.45;

    min-height:42px;

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

    opacity:0;

    transition:opacity .8s ease;

}

/* ===========================
   ENTER
=========================== */

#enter{

    margin:0;

    font-family:"Cormorant Garamond",serif;

    font-size:58px;

    font-weight:300;

    text-transform:uppercase;

    line-height:1;

    cursor:pointer;

    opacity:0;

    transition:
        opacity .8s ease,
        color .4s ease,
        letter-spacing .4s ease;

}

#enter:hover{

    color:#dddddd;

    letter-spacing:6px;

}

/* ===========================
   SUBTITLE
=========================== */

.subtitle{

    margin-top:6px;

    font-size:12px;

    letter-spacing:3px;

    text-transform:none;

    opacity:0;

    transition:opacity .8s ease;

}

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

@keyframes sigilHorizontal{

    0%{
        transform:translateX(-6px);
    }

    18%{
        transform:translateX(-2px);
    }

    37%{
        transform:translateX(5px);
    }

    61%{
        transform:translateX(1px);
    }

    82%{
        transform:translateX(-4px);
    }

    100%{
        transform:translateX(6px);
    }

}

@keyframes sigilVertical{

    0%{
        translate:0 2px;
    }

    26%{
        translate:0 -5px;
    }

    48%{
        translate:0 1px;
    }

    73%{
        translate:0 -3px;
    }

    100%{
        translate:0 4px;
    }

}

@keyframes sigilRock{

    0%{
        rotate:-2.3deg;
    }

    17%{
        rotate:.8deg;
    }

    43%{
        rotate:-1.5deg;
    }

    68%{
        rotate:2.4deg;
    }

    100%{
        rotate:-.6deg;
    }

}

@keyframes sigilBreath{

    0%{
        scale:1;
    }

    22%{
        scale:1.004;
    }

    47%{
        scale:.998;
    }

    71%{
        scale:1.006;
    }

    100%{
        scale:1;
    }

}

.atmosphere{

    position:fixed;

    inset:-30%;

    pointer-events:none;

    z-index:-1;

    background:
        radial-gradient(
            circle,
            rgba(140,18,18,.14) 0%,
            rgba(140,18,18,.07) 30%,
            rgba(140,18,18,0) 72%
        );

    filter:blur(140px);

    opacity:.7;

    animation:atmospherePulse 22s ease-in-out infinite;

}

.noise{

    position:fixed;

    inset:-100px;

    pointer-events:none;

    opacity:.18;

    z-index:9999;

    background-repeat:repeat;

    filter:contrast(180%) brightness(100%);

    mix-blend-mode:soft-light;

    background-image:none;

    animation:noiseDrift 70s linear infinite;

}

@keyframes breathe{

    0%,100%{

        opacity:.35;
        transform:scale(1);

    }

    30%{

        opacity:.48;
        transform:scale(1.04);

    }

    55%{

        opacity:.58;
        transform:scale(1.08);

    }

    75%{

        opacity:.46;
        transform:scale(1.03);

    }

}

@keyframes noiseDrift{

    0%{
        transform:translate(0,0);
    }

    25%{
        transform:translate(-20px,-10px);
    }

    50%{
        transform:translate(-35px,15px);
    }

    75%{
        transform:translate(15px,25px);
    }

    100%{
        transform:translate(0,0);
    }

}

@keyframes atmospherePulse{

    0%,100%{

        opacity:.55;

        transform:
            scale(1);

    }

    50%{

        opacity:.9;

        transform:
            scale(1.15);

    }

}

body.fade-out{

    opacity:0;

    transition:
        opacity .8s ease;

}

body.fade-out .sigil{

    transform:
        translate(0,0)
        rotate(0deg)
        scale(1.18);

    filter:
        brightness(1.25)
        drop-shadow(0 0 20px rgba(170,20,20,.55))
        drop-shadow(0 0 40px rgba(170,20,20,.25));

}

body.fade-out .sigil-glow{

    opacity:.75;

    transform:scale(1.35);

    filter:blur(28px);

}

.archive-label,
h1,
.cover-art,
.hero-description{

    transition:
        opacity .9s ease,
        transform .9s ease;

}

/* ===========================
   LISTEN
=========================== */

.listen-section{

    width:min(700px,90vw);

    margin:80px auto;

}

.listen-divider{

    height:1px;

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

    margin:30px 0;

}

.listen-label{

    text-align:center;

    letter-spacing:10px;

    font-size:12px;

    opacity:.45;

    margin-bottom:30px;

}

.listen-links{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.listen-item{

    display:flex;

    align-items:center;

    gap:20px;

    padding:22px 0;

    text-decoration:none;

    color:white;

    border-bottom:1px solid rgba(255,255,255,.06);

    transition:
        transform .35s ease,
        opacity .35s ease,
        border-color .35s ease,
        padding-left .35s ease;

}

.listen-item img{

    width:22px;

    height:22px;

    filter:brightness(0) invert(1);

    opacity:.8;

}

.listen-item span{

    font-size:17px;

    letter-spacing:0px;

    transition:
        letter-spacing .35s ease,
        opacity .35s ease;

}

.listen-item .arrow{

    margin-left:auto;

    opacity:.35;

    transition:.35s ease;

}

.listen-item:hover{

    padding-left:14px;

    border-color:rgba(170,20,20,.28);

    transform:translateX(2px);

}

.listen-item:hover span{

    letter-spacing:2px;

}

.listen-item:hover .arrow{

    transform:translateX(8px);

    opacity:1;


}

/* ===========================
   SOCIALS
=========================== */

.social-section{

    width:min(700px,90vw);

    margin:70px auto 0;

}

.social-links{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:30px;

}

.social-links a{

    color:white;

    text-decoration:none;

    opacity:.55;

    transition:.3s;

}

.social-links a:hover{

    opacity:1;

}

/* ===========================
   MANIFESTO
=========================== */

.manifesto{

    min-height:100vh;

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

    padding:120px 30px;

    text-align:center;

}

.manifesto-label{

    font-size:12px;

    letter-spacing:10px;

    text-transform:uppercase;

    opacity:.45;

    margin-bottom:50px;

}

.manifesto-text{

    max-width:700px;

}

.manifesto-text p{

    font-size:19px;

    line-height:2;

    margin-bottom:45px;

    opacity:.82;

}