/* =========================================================
   NIGHTANGELS - PORTE
========================================================= */

/* =========================================================
   PORTE VARIABLES
========================================================= */

body[data-universe="lilith"]{

    --accent-color:#b30000;

    --theme-bg:#050505;

    --theme-primary:#7a0000;

    --theme-primary-light:#ff3c3c;

    --theme-text:#ffffff;

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

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

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

/* =========================================================
   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:-6;
pointer-events:none;

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

@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);
    }
}

/* =========================================================
   BACKGROUND
========================================================= */

.background{

    will-change:transform;

    backface-visibility:hidden;

    position:fixed;
    inset:0;

    background:
    linear-gradient(
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.92)),
    url('/images/porte-enfers.png')
    center center / cover no-repeat;

    z-index:-5;

    filter:
    brightness(0.45)
    contrast(1.1)
    saturate(1.05);

    transform:scale(1.03);
}

/* =========================================================
   RED FOG
========================================================= */

.red-fog{

    position:fixed;
    inset:0;

    background:
    radial-gradient(
    circle at center,
    rgba(180,0,0,0.25),
    transparent 60%
    );

    animation:pulse 6s ease-in-out infinite;

    z-index:-4;
}

@keyframes pulse{

    0%{
        opacity:0.45;
    }

    50%{
        opacity:0.9;
    }

    100%{
        opacity:0.45;
    }
}

/* =========================================================
   AUDIO SEAL
========================================================= */

/* AUDIO SEAL */

.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(120,0,0,0.18),
    transparent);

    backdrop-filter:blur(8px);

    box-shadow:
    0 0 12px rgba(255,0,0,0.55),
    0 0 30px rgba(255,0,0,0.25);

    transition:0.4s ease;
}

.audio-seal:hover{

    transform:scale(1.08);
}

.audio-seal img{
    width:140%;
    height:140%;
    object-fit:cover;

    transform:scale(1.35);

    filter:
    drop-shadow(0 0 10px rgba(255,0,0,0.5));
}

.audio-seal{

    overflow:hidden;
}

.audio-seal.active{

    box-shadow:
    0 0 18px rgba(255,0,0,0.75),
    0 0 45px rgba(255,0,0,0.35);
}

@keyframes sigilRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

.seal-message{

    position:fixed;

    top:145px;
    left:95px;

    z-index:9999;

    padding:12px 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.28);

    border-radius:16px;

    color:#ddd;

    font-size:0.82rem;

    letter-spacing:1px;

    backdrop-filter:blur(8px);

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

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

    transition:opacity 1.2s ease;
}

.seal-message::before{

    content:'';

    position:absolute;

    left:-8px;
    top:22px;

    width:16px;
    height:16px;

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

    border-left:1px solid rgba(255,0,0,0.28);
    border-bottom:1px solid rgba(255,0,0,0.28);

    transform:rotate(45deg);
}

@keyframes messageAppear{

    from{
        opacity:0;
        transform:translateX(-15px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes messagePulse{

    0%{
        box-shadow:0 0 12px rgba(255,0,0,0.12);
    }

    50%{
        box-shadow:0 0 22px rgba(255,0,0,0.28);
    }

    100%{
        box-shadow:0 0 12px rgba(255,0,0,0.12);
    }
}

@media(max-width:1100px){

    .seal-message{

        top:190px;
        left:78px;

        font-size:0.72rem;

        padding:10px 14px;

        max-width:170px;
    }
}

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

.hero{

    position:relative;

    z-index:5;

    width:100%;

    min-height:100vh;

    display:flex;

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

    padding:
    170px
    20px
    60px;
}

/* =========================================================
   PORTAL CARD
========================================================= */

.portal-card{

    position:relative;
will-change:transform;
    overflow:hidden;

    width:100%;
    max-width:760px;

    border-radius:35px;

    background:
    linear-gradient(
    to bottom,
    rgba(35,0,0,0.58),
    rgba(0,0,0,0.92)
    );

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

    backdrop-filter:blur(16px);

    box-shadow:
    0 0 60px rgba(255,0,0,0.08),
    0 0 120px rgba(0,0,0,0.55);
}

.portal-card::after{

    content:'';

    position:absolute;

    top:0;
    bottom:0;

    left:50%;

    width:2px;

    transform:translateX(-50%);

    opacity:0.18;

    background:
    linear-gradient(
    to bottom,
    transparent,
    rgba(255,0,0,0.75),
    transparent
    );
}

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

.portal-image{

    position:relative;

    width:100%;
    height:280px;

    overflow:hidden;
}

.portal-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center top;

    filter:
    brightness(0.78)
    contrast(1.08)
    saturate(1.05);
}

.portal-image::after{

    content:'';

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,0.96),
    transparent 45%
    );
}

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

.portal-content{

    padding:25px 30px;

    text-align:center;
}

.portal-subtitle{

    margin-bottom:25px;

    letter-spacing:6px;

    text-transform:uppercase;

    font-size:0.72rem;

    color:#ff5a5a;
}

.portal-title{

    margin-bottom:30px;

    font-family:'Cinzel',serif;

    font-size:clamp(2.8rem,8vw,5rem);

    line-height:0.85;

    text-transform:uppercase;
}

.portal-title span{

    color:#c40000;
}

.separator{

    width:220px;
    height:2px;

    margin:
    0 auto
    35px;

    background:
    linear-gradient(
    to right,
    transparent,
    #c40000,
    transparent
    );
}

.portal-text{

    max-width:600px;

    margin:
    0 auto
    38px;

    color:
    rgba(255,255,255,0.76);

    font-size:1rem;

    line-height:1.75;
}

.portal-text span{

    color:#c40000;

    font-family:'Cinzel',serif;

    letter-spacing:2px;
}

/* =========================================================
   FORM
========================================================= */

.portal-form{

    display:flex;

    flex-direction:column;

    gap:20px;
}

.input-box{

    width:100%;
    height:72px;

    outline:none;

    border-radius:18px;

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

    background:
    rgba(0,0,0,0.55);

    color:white;

    text-align:center;

    letter-spacing:4px;

    font-size:1rem;

    transition:0.4s ease;

    box-shadow:
    inset 0 0 12px rgba(255,0,0,0.04),
    0 0 12px rgba(255,0,0,0.04);
}

.input-box:focus{

    border-color:#ff3c3c;

    background:
    rgba(10,0,0,0.72);

    transform:scale(1.01);

    box-shadow:
    0 0 25px rgba(255,0,0,0.28),
    inset 0 0 18px rgba(255,0,0,0.12);
}

.input-box::placeholder{

    color:
    rgba(255,255,255,0.42);

    letter-spacing:4px;
}

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

.enter-btn{

    width:100%;
    height:74px;

    border:none;

    cursor:pointer;

    border-radius:20px;

    color:white;

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:0.9rem;

    background:
    linear-gradient(
    145deg,
    #6e0000,
    #250000
    );

    transition:0.45s ease;

    box-shadow:
    0 0 35px rgba(255,0,0,0.15);

    animation:
    portalPulse 4s ease-in-out infinite;
}

.enter-btn:hover{

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

    box-shadow:
    0 0 55px rgba(255,0,0,0.35);
}

.enter-btn:active{

    transform:scale(0.98);
}

@keyframes portalPulse{

    0%{
        box-shadow:0 0 25px rgba(255,0,0,0.15);
    }

    50%{
        box-shadow:0 0 45px rgba(255,0,0,0.35);
    }

    100%{
        box-shadow:0 0 25px rgba(255,0,0,0.15);
    }
}

/* =========================================================
   ERROR
========================================================= */

.error{

    margin-top:25px;

    color:#ff6464;

    font-size:0.9rem;

    letter-spacing:2px;

    text-shadow:
    0 0 12px rgba(255,0,0,0.45);

    animation:flicker 1s infinite;
}

@keyframes flicker{

    0%{
        opacity:1;
    }

    50%{
        opacity:0.45;
    }

    100%{
        opacity:1;
    }
}

/* =========================================================
   QUOTE
========================================================= */

.quote{

    margin-top:40px;

    color:
    rgba(255,255,255,0.42);

    font-style:italic;

    line-height:2;

    transition:opacity 0.8s ease;
}

.quote span{

    display:block;

    margin-top:15px;

    text-transform:uppercase;

    letter-spacing:3px;

    color:
    rgba(255,0,0,0.65);
}

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

@media(max-width:1100px){

    .seal-message{

        top:190px;
        left:78px;

        max-width:170px;

        padding:10px 14px;

        font-size:0.72rem;
    }

    .audio-seal{

        top:170px;
        left:8px;

        width:58px;
        height:58px;
    }

    .audio-seal img{

        width:38px;
    }

    .portal-image{

        height:200px;
    }

    .portal-content{

        padding:40px 22px;
    }

    .portal-text{

        max-width:500px;

        font-size:0.95rem;

        line-height:1.65;
    }
}
/* =========================================================
   MOBILE GPU OPTIMIZATION
========================================================= */

@media(max-width:900px){

    .seal-message{

        backdrop-filter:none;
    }

    .portal-card{

        backdrop-filter:blur(10px);
    }

    .light-bg{

        animation:
        haloPulse 10s ease-in-out infinite;
    }
}