/* =========================================================
   LIVRE DES RÉVÉLATIONS
   NIGHTANGELS.FR
========================================================= */

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

.background{

    position:fixed;
    inset:0;

    background:
    linear-gradient(
    rgba(0,0,0,0.82),
    rgba(0,0,0,0.97)),
    url('/images/banner-nightangels.png')
    center center / cover no-repeat;

    z-index:-5;

    filter:
    brightness(0.4)
    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.18),
    transparent 65%
    );

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

    z-index:-4;
}

@keyframes pulse{

    0%{ opacity:0.45; }

    50%{ opacity:0.9; }

    100%{ opacity:0.45; }
}

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

.hero{

    position:relative;

    z-index:5;

    width:100%;

    min-height:auto;

    display:flex;

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

    padding:
    100px
    20px
    20px;
}

/* =========================================================
   REVELATION CARD
========================================================= */

.revelation-card{

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

    background:
    linear-gradient(
    to bottom,
    rgba(10,0,0,0.55),
    rgba(0,0,0,0.95));

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

    position:relative;

    overflow:visible;

    border-radius:35px;

    z-index:5;
}

/* =========================================================
   LILITH GUARDIAN
========================================================= */

.lilith-guardian{

    position:relative;

    width:100%;

    background:#000;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:flex-end;
}

.lilith-guardian img{

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

    display:block;

    object-fit:contain;

    filter:
    drop-shadow(0 0 30px rgba(255,0,0,0.18));

    animation:lilithBreath 7s ease-in-out infinite;
}

@keyframes lilithBreath{

    0%{

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

    50%{

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

    100%{

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

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

.content{

    padding:60px 40px 70px;
}

/* =========================================================
   TITLES
========================================================= */

.subtitle{

    letter-spacing:6px;

    text-transform:uppercase;

    font-size:0.72rem;

    color:#ff5a5a;

    margin-bottom:25px;

    text-align:center;
}

.title{

    font-family:'Cinzel',serif;

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

    line-height:1;

    margin-bottom:25px;

    text-transform:uppercase;

    text-align:center;
}

.title span{

    color:#c40000;
}

.separator{

    width:240px;
    height:2px;

    margin:0 auto 40px;

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

/* =========================================================
   LORE
========================================================= */

.lore{

    max-width:760px;

    margin:0 auto 50px;

    text-align:center;

    font-size:1.05rem;

    line-height:2.1;

    color:rgba(255,255,255,0.78);
}

.lore p{

    margin-bottom:28px;
}

.lore span{

    color:#c40000;

    font-family:'Cinzel',serif;

    letter-spacing:2px;
}

/* =========================================================
   BOOK
========================================================= */

.book-container{

    display:flex;

    justify-content:center;

    margin-bottom:35px;
}

.book{

    position:relative;

    width:240px;

    transition:0.5s ease;

    animation:bookFloat 6s ease-in-out infinite;
}

.book img{

    width:100%;

    filter:
    drop-shadow(0 0 18px rgba(255,0,0,0.35))
    drop-shadow(0 0 45px rgba(255,0,0,0.12));
}

.book::before{

    content:'';

    position:absolute;

    inset:-18px;

    border-radius:25px;

    background:
    radial-gradient(
    ellipse at center,
    rgba(180,0,0,0.25),
    rgba(120,0,0,0.08),
    transparent 72%);

    filter:blur(18px);

    z-index:-1;
}

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

.seal{

    width:280px;
    height:280px;

    margin:0 auto 35px;

    border-radius:50%;

    cursor:pointer;

    display:flex;

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

    background:none;

    border:none;

    transition:0.4s ease;

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

.seal:hover{

    transform:scale(1.05);
}

.seal-text{

    text-align:center;

    margin-bottom:5px;

    font-family:'Cinzel',serif;

    font-size:0.90rem;

    letter-spacing:3px;

    color:#d8b07a;

    text-transform:uppercase;

    text-shadow:
    0 0 12px rgba(255,180,120,0.25);
}

.seal img{

    width:112%;
    height:112%;

    object-fit:contain;

    opacity:0.98;

    filter:
    drop-shadow(0 0 18px rgba(255,0,0,0.55))
    drop-shadow(0 0 40px rgba(255,0,0,0.25));
}

@keyframes pulseSeal{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.03);
    }

    100%{
        transform:scale(1);
    }
}

/* =========================================================
   REVELATION
========================================================= */

.revelation{

    opacity:0;

    max-height:0;

    overflow:hidden;

    transition:1s ease;

    text-align:center;
}

.revelation.show{

    opacity:1;

    max-height:900px;
}

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

.revelation-title{

    font-family:'Cinzel',serif;

    font-size:1rem;

    letter-spacing:5px;

    color:#ff5a5a;

    margin-bottom:20px;

    text-transform:uppercase;
}

/* =========================================================
   SECRET KEY
========================================================= */

.key{

    font-family:'Cinzel',serif;

    font-size:clamp(2.2rem,7vw,4rem);

    color:#c40000;

    letter-spacing:10px;

    margin-bottom:25px;

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

/* =========================================================
   WARNING TEXT
========================================================= */

.warning{

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

    line-height:2;

    margin-bottom:40px;

    font-size:1rem;
}

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

.enter-btn{

    display:inline-flex;

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

    padding:18px 55px;

    border-radius:60px;

    text-decoration:none;

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

.enter-btn:hover{

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

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

/* =========================================================
   ABIGAIL
========================================================= */

.abigail-warning{

    position:fixed;

    right:-120px;
    bottom:-120px;

    width:520px;

    z-index:50;

    pointer-events:auto;

    text-decoration:none;

    opacity:0;

    transition:
    opacity 1.5s ease,
    transform 1.5s ease;

    transform:
    translateY(40px);
}

.abigail-warning.show{

    opacity:1;

    transform:translateY(0px);
}

.abigail-warning:hover{

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

.abigail-warning img{

    width:100%;

    height:auto;

    object-fit:contain;

    mix-blend-mode:screen;

    opacity:0.96;

    animation:
    abigailFloat 7s ease-in-out infinite;
}

@keyframes abigailFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }
}

/* =========================================================
   ABIGAIL BUBBLE
========================================================= */

.abigail-bubble{

    position:absolute;

    left:-185px;
    top:55px;

    width:185px;

    padding:18px 18px;

    background:
    linear-gradient(
    145deg,
    rgba(255,245,220,0.96),
    rgba(255,230,185,0.92),
    rgba(215,170,120,0.88));

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

    border-radius:28px;

    color:#3d220d;

    font-size:0.78rem;

    line-height:1.75;

    letter-spacing:1px;

    box-shadow:
    0 0 22px rgba(255,220,160,0.28),
    0 0 55px rgba(255,210,140,0.16);

    backdrop-filter:blur(12px);

    opacity:0;

    transform:translateY(10px);

    transition:
    opacity 1s ease,
    transform 1s ease;

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

.abigail-bubble{

    z-index:51;
}

.abigail-bubble.show{

    opacity:1;

    transform:translateY(0px);
}

.abigail-bubble::after{

    content:'';

    position:absolute;

    right:-8px;
    top:58%;

    width:18px;
    height:18px;

    background:
    linear-gradient(
    145deg,
    rgba(255,245,220,0.96),
    rgba(255,230,185,0.92),
    rgba(215,170,120,0.88));

    transform:rotate(45deg);

    border-radius:2px;
}

@keyframes bubbleFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-6px);
    }

    100%{
        transform:translateY(0px);
    }
}

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

@media(max-width:1100px){

.hero{

    padding:
    145px
    12px
    0px;
}

    .content{

        padding:0px 18px 35px;
    }

    .subtitle{

        margin-bottom:12px;
    }

    .title{

        margin-bottom:12px;

        line-height:1.1;
    }

    .separator{

        margin:0 auto 18px;
    }

    .lore{

        margin:0 auto 22px;

        font-size:0.90rem;

        line-height:1.7;
    }

    .lore p{

        margin-bottom:16px;
    }

    .book{

        width:170px;
    }

    .seal-text{

        margin-bottom:-8px;

        font-size:0.72rem;

        line-height:1.6;

        padding:0 10px;
    }

    .seal{

        width:190px;
        height:190px;
    }

    .revelation-title{

        margin-bottom:10px;

        font-size:0.8rem;
    }

    .key{

        margin-bottom:12px;

        letter-spacing:5px;
    }

    .warning{

        line-height:1.7;

        margin-bottom:22px;

        font-size:0.88rem;
    }

    .enter-btn{

        padding:14px 30px;

        font-size:0.72rem;

        letter-spacing:2px;
    }

    .abigail-warning{

        width:235px;

        right:-70px;
        bottom:-20px;
    }

    .abigail-bubble{

        width:150px;

        left:-100px;

        top:40px;

        padding:12px 14px;

        font-size:0.60rem;

        line-height:1.45;
    }
    
    .footer{

    margin-top:0;
}
}