/* =========================================================
   LILITH UNIVERSE VARIABLES
========================================================= */

body[data-universe="lilith"]{

    --accent-color:#b30000;

    --gold:#b30000;
    --gold-light:#ffb3b3;

    --theme-bg:#050505;

    --theme-bg-secondary:#120000;

    --theme-primary:#7a0000;

    --theme-primary-light:#ff3c3c;

    --theme-text:#ffffff;

    --theme-text-secondary:
    rgba(255,255,255,0.72);

    --theme-title:#ffffff;

    --theme-border:
    rgba(255,0,0,0.14);

    --theme-glow:
    rgba(255,0,0,0.22);

    --hero-overlay:
    rgba(0,0,0,0.45);

    --hero-overlay-strong:
    rgba(0,0,0,0.82);

    --header-bg:
    linear-gradient(
    to bottom,
    rgba(15,0,0,0.92),
    rgba(10,0,0,0.58)
    );

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

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

body{

    background:var(--theme-bg);

    color:var(--theme-text);

    overflow-x:hidden;
}


/* =========================================
FILM GRAIN
========================================= */

body::after{

    content:'';

    position:fixed;

    inset:0;

    background-image:
    url('../images/grain.webp');

    opacity:0.03;

    pointer-events:none;

    z-index:9999;

    mix-blend-mode:soft-light;
}

/* =========================================
LILITH HALO
========================================= */

.light-bg{

    position:fixed;

    inset:0;

    z-index:-5;

    background:
    radial-gradient(
    circle at center,
    rgba(120,0,0,0.32),
    rgba(60,0,0,0.10),
    rgba(0,0,0,0.95)
    );

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

    transition:
    background 2.5s ease,
    opacity 2.5s ease;
    
    will-change:
transform,
opacity;

transform:
translateZ(0);

backface-visibility:hidden;
}

@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:#ff2a2a;

    opacity:0.75;

    animation:floatLight linear infinite;

    transition:
    background 2s ease;
    will-change:
transform,
opacity;

transform:
translateZ(0);
}

@keyframes floatLight{

    from{

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

        opacity:0;
    }

    20%{
        opacity:1;
    }

    to{

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

        opacity:0;
    }
}

/* =========================================
HERO
========================================= */

.hero{

    position:relative;

    width:100%;

    display:flex;

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

    padding:
    105px
    20px
    0px;

    z-index:5;
}

/* =========================================
CONTAINER
========================================= */

.warning-container{

    width:100%;

    max-width:1600px;

    text-align:center;

    position:relative;

    transform-style:preserve-3d;
}

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

.subtitle{

    font-size:0.8rem;

    letter-spacing:5px;

    text-transform:uppercase;

    color:#d95c5c;

    margin-bottom:14px;
}

.title{

    font-family:'Cinzel',serif;

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

    color:white;

    margin-bottom:6px;

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

.title span{

    color:#c40000;
}

.separator{

    width:240px;
    height:2px;

    margin:0 auto 18px;

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

/* =========================================
SLIDER
========================================= */

.slider{

    position:relative;

    width:100%;
    
    overflow:visible;
}

/* =========================================
SLIDES
========================================= */

.slide{

    position:absolute;

    inset:0;

    opacity:0;

    transform:
    scale(1.02);

    filter:
    blur(6px);

    transition:
    opacity 1.4s ease,
    transform 1.4s ease,
    filter 1.4s ease;

    pointer-events:none;
    
}

.slide.active{

    position:relative;

    opacity:1;

    transform:
    scale(1);

    filter:
    blur(0px);

    pointer-events:auto;
    
    overflow:visible;
}

/* =========================================
IMAGE
========================================= */

.slide img{

    width:100%;

    display:block;

    max-height:72vh;

    object-fit:cover;

    border-radius:18px;

    box-shadow:
    0 0 50px rgba(255,0,0,0.08);

    animation:
    floatImage 8s ease-in-out infinite;

    transition:
    transform 2s ease,
    filter 2s ease;
    will-change:
transform,
filter;

transform:
translateZ(0);

backface-visibility:hidden;
}

.slide.active img{

    transform:
    translateZ(0)
    scale(1.01);

    filter:
    brightness(1.03)
    drop-shadow(0 0 25px rgba(255,0,0,0.18));

    position:relative;

    z-index:2;

    will-change:
    transform,
    filter;

    backface-visibility:hidden;
}

.slide.active::after{

    content:'';

    position:absolute;

    left:50%;
    top:50%;

    width:65%;
    height:65%;

    transform:
    translate(-50%,-50%);
will-change:
transform,
opacity;

transform:
translateZ(0);

    background:
    radial-gradient(
    circle,
    rgba(180,0,0,0.20),
    rgba(120,0,0,0.08),
    transparent 72%
    );

    filter:blur(40px);

    z-index:1;

    pointer-events:none;

    animation:
    imageHalo 5s ease-in-out infinite;
}

@keyframes imageHalo{

    0%{

        opacity:0.55;

        transform:
        translate(-50%,-50%)
        scale(1);
    }

    50%{

        opacity:1;

        transform:
        translate(-50%,-50%)
        scale(1.08);
    }

    100%{

        opacity:0.55;

        transform:
        translate(-50%,-50%)
        scale(1);
    }
}

@keyframes floatImage{

    0%{

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

    25%{

        transform:
        translateY(-4px)
        scale(1.008)
        rotate(-0.15deg);
    }

    50%{

        transform:
        translateY(-10px)
        scale(1.01)
        rotate(0deg);
    }

    75%{

        transform:
        translateY(-4px)
        scale(1.008)
        rotate(0.15deg);
    }

    100%{

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

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

.slide-buttons{

    margin-top:14px;

    display:flex;

    flex-direction:column;

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

    gap:10px;

    opacity:0;

    transform:
    translateY(20px);

    transition:
    opacity 1.2s ease,
    transform 1.2s ease;
    
    overflow:visible;
}

.slide.active .slide-buttons{

    opacity:1;

    transform:
    translateY(0);
}

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

.story-btn{

    width:100%;

    max-width:680px;

    box-sizing:border-box;

    padding:
    16px
    34px;

    border:none;

    border-radius:60px;

    cursor:pointer;

    text-decoration:none;

    font-size:0.78rem;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:0.4s ease;

    color:white;

    font-weight:600;

    position:relative;

    overflow:hidden;
}

.story-btn::before{

    content:'';

    position:absolute;

    top:0;
    left:-120%;

    width:70%;
    height:100%;

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

    transform:skewX(-25deg);

    transition:0.8s ease;
}

.story-btn:hover::before{

    left:140%;
}

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

.lilith-btn{

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

    border-radius:60px;

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

    overflow:hidden;
}

.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;

    right:22px;
    bottom:18px;

    width:95px;
    height:95px;

    z-index:9999;

    cursor:pointer;

    display:flex;

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

    transition:0.4s ease;

    background:none;

    border:none;

    box-shadow:none;

    overflow:visible;
}

.audio-seal:hover{

    transform:scale(1.08);
}

.audio-seal img{

    width:100%;
    height:100%;

    object-fit:contain;

    filter:
    drop-shadow(0 0 12px rgba(255,0,0,0.45))
    drop-shadow(0 0 30px rgba(255,0,0,0.22));

    animation:
    floatLilith 5s ease-in-out infinite;
}

@keyframes floatLilith{

    0%{

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

    50%{

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

    100%{

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

.audio-seal.active{

    box-shadow:none;
}

.audio-seal.active img{

    filter:
    drop-shadow(0 0 14px rgba(255,0,0,0.75))
    drop-shadow(0 0 35px rgba(255,0,0,0.45))
    drop-shadow(0 0 60px rgba(255,0,0,0.22));
}

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

.seal-message{

    position:fixed;

    right:120px;
    bottom:42px;

    z-index:9999;

    padding:12px 18px;

    border-radius:18px;

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

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

    color:#ffd4d4;

    font-size:0.8rem;

    letter-spacing:1px;

    backdrop-filter:blur(8px);

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

    animation:
    messageAppear 1s ease,
    messagePulse 3s ease-in-out infinite;

    transition:opacity 1.2s ease;
}

.seal-message::before{

    content:'';

    position:absolute;

    right:-8px;
    top:22px;

    width:16px;
    height:16px;

    background:rgba(15,0,0,0.95);

    border-right:
    1px solid rgba(255,0,0,0.18);

    border-top:
    1px solid rgba(255,0,0,0.18);

    transform:rotate(45deg);
}

/* =========================================
PORTAL TRANSITION
========================================= */

.portal-transition{

    position:fixed;

    inset:0;

    background:
    radial-gradient(
    circle at center,
    rgba(255,0,0,0),
    rgba(120,0,0,0),
    rgba(0,0,0,0)
    );

    opacity:0;

    pointer-events:none;

    z-index:999999;

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

.portal-transition.active{

    opacity:1;

    background:
    radial-gradient(
    circle at center,
    rgba(120,0,0,1),
    rgba(60,0,0,0.95),
    rgba(0,0,0,1)
    );
}

/* =========================================
PORTAL OPENING
========================================= */

.portal-transition.lilith-transition.active{

    background:
    radial-gradient(
    circle at center,
    rgba(120,0,0,1),
    rgba(50,0,0,0.95),
    rgba(0,0,0,1)
    );
}

body.portal-opening .warning-container{

    animation:
    portalZoom 1.8s ease forwards;
}

@keyframes portalZoom{

    0%{

        transform:
        scale(1);

        opacity:1;

        filter:
        blur(0px);
    }

    100%{

        transform:
        scale(1.08);

        opacity:0;

        filter:
        blur(10px);
    }
}

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

@media(max-width:1100px){

    body{

        overflow-x:hidden;
    }

    .hero{

        padding:
        130px
        12px
        10px;
    }

    .subtitle{

        margin-bottom:10px;

        font-size:0.72rem;

        letter-spacing:4px;
    }

    .title{

        margin-bottom:2px;
    }

    .separator{

        margin:0 auto 12px;
    }

    .slide img{

        max-height:none;

        border-radius:14px;
    }

    .slide-buttons{

        margin-top:14px;

        gap:14px;

        min-height:auto;
    }

    .story-btn{

        max-width:none;

        font-size:0.68rem;

        padding:
        15px
        18px;

        letter-spacing:1px;
    }

.audio-seal{

    right:12px;
    bottom:12px;

    width:72px;
    height:72px;
}

    .audio-seal img{

        width:92%;
        height:92%;
    }

.seal-message{

    right:82px;
    bottom:18px;

    font-size:0.72rem;

    padding:10px 14px;

    max-width:170px;
}

    .slide.active::after{

        width:95%;

        height:55%;

        filter:blur(30px);
    }
}
/* =========================================================
   MOBILE GPU OPTIMIZATION
========================================================= */

@media(max-width:900px){

    .seal-message{

        backdrop-filter:none;
    }

    .slide.active::after{

        filter:blur(18px);
    }
}