:root{

    --accent-color:#d7aa72;

    --gold:#d7aa72;
    --gold-light:#fff0d6;

    --celeste-bg:#050505;

    --header-bg:
    linear-gradient(
    to bottom,
    rgba(20,15,10,0.88),
    rgba(20,15,10,0.55)
    );

    --header-border:
    rgba(255,230,190,0.14);
}

/* =========================================
GLOBAL
========================================= */

body{

    background:var(--celeste-bg);

    color:white;

    overflow-x:hidden;
}

/* =========================================
LIGHT HALO
========================================= */

.light-bg{

    position:fixed;

    inset:0;

    z-index:-5;

    background:
    radial-gradient(
    circle at center,
    rgba(255,255,255,0.32),
    rgba(255,220,180,0.08),
    rgba(0,0,0,0.92)
    );

    animation:
    haloPulse 8s ease-in-out infinite,
    haloMove 18s ease-in-out infinite;

    transition:
    background 2.5s ease,
    opacity 2.5s ease;
}

@keyframes haloPulse{

    0%{
        opacity:0.72;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:0.72;
    }
}

@keyframes haloMove{

    0%{

        transform:
        scale(1)
        translateY(0px);
    }

    50%{

        transform:
        scale(1.04)
        translateY(-10px);
    }

    100%{

        transform:
        scale(1)
        translateY(0px);
    }
}

/* =========================================
PARTICLES
========================================= */

.particles{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:-4;
}

.particles span{

    position:absolute;

    width:3px;
    height:3px;

    border-radius:50%;

    background:white;

    opacity:0.75;

    animation:floatLight linear infinite;

    transition:
    background 2s ease;
}

@keyframes floatLight{

    from{

        transform:
        translateY(110vh)
        translateX(0px);

        opacity:0;
    }

    20%{
        opacity:1;
    }

    to{

        transform:
        translateY(-20vh)
        translateX(60px);

        opacity:0;
    }
}

/* =========================================
TITLE STYLE
========================================= */

.subtitle{

    font-size:0.8rem;

    letter-spacing:5px;

    text-transform:uppercase;

    color:#c9a97b;
}

.title{

    font-family:'Cinzel',serif;

    font-size:clamp(2.4rem,7vw,5rem);

    color:white;

    text-shadow:
    0 0 18px rgba(255,255,255,0.28);
}

.title span{

    color:var(--gold);
}

.separator{

    background:
    linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.9),
    transparent
    );
}

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

.story-btn{

    position:relative;

    overflow:hidden;

    border:none;

    transition:
    transform 0.4s ease,
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

.story-btn::before{

    content:'';

    position:absolute;

    top:0;
    left:-120%;

    width:70%;
    height:100%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.22),
    transparent
    );

    transform:skewX(-25deg);

    transition:0.8s ease;
}

.story-btn:hover::before{

    left:140%;
}

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

.choice-btn{

    background:
    linear-gradient(
    145deg,
    #fff0d6 0%,
    #d7aa72 45%,
    #7a5630 100%
    );

    border:
    1px solid rgba(255,240,210,0.22);

    color:white;

    box-shadow:
    0 0 25px rgba(255,220,180,0.24),
    inset 0 0 12px rgba(255,255,255,0.12);
}

.choice-btn:hover{

    transform:
    translateY(-4px)
    scale(1.02);

    box-shadow:
    0 0 45px rgba(255,220,180,0.42),
    0 0 80px rgba(255,240,210,0.12);
}

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

.lilith-btn{

    background:
    linear-gradient(
    145deg,
    #b30000,
    #2a0000
    );

    box-shadow:
    0 0 18px rgba(255,0,0,0.20),
    0 0 35px rgba(255,0,0,0.12);
}

.lilith-btn:hover{

    transform:
    translateY(-4px)
    scale(1.02);

    box-shadow:
    0 0 30px rgba(255,0,0,0.30),
    0 0 50px rgba(255,0,0,0.16);
}

/* =========================================
AUDIO RUNE
========================================= */

.audio-seal{

    position:fixed;

    top:118px;
    left:8px;

    width:72px;
    height:72px;

    z-index:9999;

    cursor:pointer;

    display:flex;

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

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(255,230,180,0.16),
    transparent
    );

    backdrop-filter:blur(8px);

    box-shadow:
    0 0 12px rgba(255,220,180,0.45),
    0 0 30px rgba(255,220,180,0.18);

    transition:0.4s ease;
}

.audio-seal:hover{

    transform:scale(1.08);
}

.audio-seal img{

    width:92%;
    height:92%;

    object-fit:cover;

    transform:scale(1.35);

    border-radius:50%;
}

/* =========================================
MESSAGE
========================================= */

.seal-message{

    isolation:isolate;

    position:fixed;

    top:132px;
    left:92px;

    z-index:9999;

    padding:12px 18px;

    border-radius:18px;

    background:
    linear-gradient(
    145deg,
    rgba(30,20,10,0.92),
    rgba(0,0,0,0.95)
    );

    border:
    1px solid rgba(255,230,180,0.18);

    color:#f3dfc2;

    font-size:0.8rem;

    letter-spacing:1px;

    backdrop-filter:blur(8px);
}

.seal-message::before{

    content:'';

    position:absolute;

    left:-8px;
    top:22px;

    width:18px;
    height:18px;

    background:
    linear-gradient(
    145deg,
    rgba(30,20,10,0.92),
    rgba(0,0,0,0.95)
    );

    border-left:
    1px solid rgba(255,230,180,0.18);

    border-bottom:
    1px solid rgba(255,230,180,0.18);

    transform:
    rotate(45deg);

    z-index:1;
}

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

@media(max-width:1100px){

    .audio-seal{

        top:168px;

        left:8px;

        width:58px;
        height:58px;
    }

    .seal-message{

        top:178px;
        left:74px;

        font-size:0.72rem;

        padding:10px 14px;

        max-width:170px;
    }
}