/* =========================================================
   NIGHTANGELS.FR
   CORE STYLE - UNIVERS PRINCIPAL
========================================================= */

:root{

    /* =====================================================
       COLORS
    ===================================================== */

    --na-red:#c40000;
    --na-darkred:#5a0000;

    --na-black:#050505;

    --na-white:#f5f5f5;
    --na-grey:#b8b8b8;

    /* =====================================================
       PANELS
    ===================================================== */

    --na-panel:
    rgba(0,0,0,0.45);

    --na-panel-dark:
    rgba(0,0,0,0.72);

    /* =====================================================
       BORDERS
    ===================================================== */

    --na-border:
    1px solid rgba(255,255,255,0.08);

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

    /* =====================================================
       GLOW
    ===================================================== */

    --na-glow:
    0 0 20px rgba(255,0,0,0.12),
    0 0 40px rgba(255,0,0,0.05);

    --na-soft-glow:
    0 0 20px rgba(255,255,255,0.04);

    /* =====================================================
       OVERLAY
    ===================================================== */

    --na-overlay:
    radial-gradient(
    circle at center,
    rgba(120,0,0,0.05),
    rgba(0,0,0,0.94)
    );

    /* =====================================================
       RADIUS
    ===================================================== */

    --na-radius:25px;

    /* =====================================================
       TRANSITIONS
    ===================================================== */

    --na-transition:
    all 0.35s ease;
}

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

body[data-universe="nightangels"]{

    --accent-color:#b30000;

    --header-border:
    rgba(255,0,0,0.22);

    --theme-bg:#050505;

    --theme-primary:#7a0000;

    --theme-primary-light:#d10000;

    --theme-text:#f5f5f5;

    --theme-title:#ffffff;

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

--theme-glow:
rgba(180,0,0,0.18);
}

body{

    animation:introFade 2s ease;
}

@keyframes introFade{

    from{

        opacity:0;
        transform:scale(1.02);
    }

    to{

        opacity:1;
        transform:scale(1);
    }
}

#audioBtn{

    position:relative;

    z-index:99999;

    pointer-events:auto;
}

.na-overlay,
.particles{

    pointer-events:none;
}

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

.na-background{

    position:fixed;

    inset:0;

    z-index:1;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;
    will-change:transform;

transform:translateZ(0);

backface-visibility:hidden;
}

.background{

    background:
    linear-gradient(
    to right,
    rgba(255,255,255,0.02),
    rgba(0,0,0,0.76) 35%,
    rgba(0,0,0,0.84) 65%,
    rgba(25,0,0,0.12)
    ),
url('/images/banner-nightangels.webp')
    center center / cover no-repeat;
    will-change:transform;

transform:translateZ(0);

backface-visibility:hidden;
}

/* =========================================================
   OVERLAY
========================================================= */

.na-overlay{

    position:fixed;

    inset:0;

    z-index:2;

    background:var(--na-overlay);

    pointer-events:none;
}

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

.na-container{

    position:relative;

    z-index:10;

    width:100%;

    min-height:calc(100vh - 140px);

    display:flex;

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

    flex-direction:column;

    text-align:center;

    padding:
    180px
    20px
    20px;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

.na-title{

    font-family:'Cinzel',serif;

    text-transform:uppercase;

    letter-spacing:4px;

    color:#ffffff;

    text-shadow:
    0 0 12px rgba(255,0,0,0.18),
    0 0 28px rgba(255,0,0,0.05);
}

.na-lore{

    font-family:'Cinzel',serif;

    line-height:1.9;

    letter-spacing:2px;

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

    text-shadow:
    0 0 10px rgba(255,0,0,0.08);
}

.na-red{

    color:var(--na-red);
}

/* =========================================================
   PANELS
========================================================= */

.na-panel{

    background:var(--na-panel);

    border:var(--na-border);

    border-radius:var(--na-radius);

    box-shadow:
    var(--na-glow),
    inset 0 0 25px rgba(255,255,255,0.02);
}

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

.na-btn{

    display:inline-flex;

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

    padding:18px 55px;

    border-radius:60px;

    background:
    linear-gradient(
    to bottom,
    rgba(20,20,20,0.55),
    rgba(0,0,0,0.78)
    );

    border:
    1px solid rgba(255,255,255,0.10);

    color:#ffffff;

    text-transform:uppercase;

    letter-spacing:4px;

    font-weight:600;

    font-size:1rem;

    transition:var(--na-transition);

    box-shadow:
    0 0 20px rgba(255,255,255,0.03),
    inset 0 0 18px rgba(255,255,255,0.02);

    cursor:pointer;

    text-decoration:none;
}

.na-btn:hover{

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

    border-color:
    rgba(255,0,0,0.20);

    box-shadow:
    0 0 25px rgba(255,0,0,0.12),
    0 0 35px rgba(255,255,255,0.04);

    background:
    linear-gradient(
    to bottom,
    rgba(30,0,0,0.38),
    rgba(0,0,0,0.84)
    );
}

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

.intro-lore{

    max-width:760px;

    margin:0 auto 45px;

    text-align:center;

    font-size:clamp(1.1rem,2vw,1.8rem);

    animation:loreFade 2s ease;
}

/* =========================================================
   CURSOR
========================================================= */

.cursor{

    display:inline-block;

    color:var(--na-red);

    animation:blink 1.4s infinite;

    font-weight:bold;
}

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

.enter-btn{

    margin-bottom:35px;
}

/* =========================================================
   AUDIO SECTION
========================================================= */

.audio-section{

    width:100%;

    max-width:700px;

    margin-bottom:0;

    padding:25px 30px;
}

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

.audio-seal{

    position:absolute;

    top:100px;
    left:18px;

    width:95px;

    z-index:20;

    cursor:pointer;

    display:flex;

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

    transition:0.4s ease;

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

.audio-seal::after{

    content:'';

    position:absolute;

    inset:-10px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(255,0,0,0.22),
    transparent 72%
    );

    filter:blur(14px);

    animation:
    bookGlow 4s ease-in-out infinite;

    z-index:-1;
}

.audio-seal img{

    width:100%;

    height:auto;

    object-fit:contain;

    filter:
    drop-shadow(0 0 10px rgba(255,0,0,0.28))
    drop-shadow(0 0 24px rgba(255,0,0,0.12));
}

.audio-seal:hover{

    transform:
    scale(1.03)
    translateY(-2px);
}

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

.seal-message{

    position:absolute;

    top:150px;
    left:125px;

    z-index:20;

    max-width:250px;

    padding:12px 16px;

    border-radius:16px;

    color:#dddddd;

    font-size:0.78rem;

    line-height:1.6;

    letter-spacing:1px;

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

    border:
    1px solid rgba(255,255,255,0.06);

    box-shadow:
    0 0 20px rgba(0,0,0,0.30);

    animation:
    messageAppear 1s ease;

    transition:
    opacity 1.2s ease,
    transform 0.4s ease,
    box-shadow 0.4s ease;

    overflow:visible;

    backdrop-filter:blur(4px);
}

.seal-message:hover{

    transform:translateY(-2px);

    box-shadow:
    0 0 20px rgba(120,0,0,0.18);
}

.seal-message::before{

    content:'';

    position:absolute;

    left:-7px;
    top:21px;

    width:14px;
    height:14px;

    background:inherit;

    transform:rotate(45deg);

    border-left:
    1px solid rgba(255,255,255,0.06);

    border-bottom:
    1px solid rgba(255,255,255,0.06);
}

/* =========================================================
   CITATION
========================================================= */

.citation{

    font-size:1.15rem;

    line-height:1.8;

    margin-bottom:18px;
}

.citation span{

    display:block;

    margin-top:12px;

    color:var(--na-red);

    letter-spacing:3px;

    font-size:0.85rem;

    text-transform:uppercase;
}

/* =========================================================
   AUDIO LABEL
========================================================= */

.audio-label{

    margin-bottom:20px;

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

    letter-spacing:2px;

    font-size:0.85rem;

    text-transform:uppercase;
}

/* =========================================================
   SMALL AUDIO BUTTON
========================================================= */

.btn-audio-small{

    padding:14px 35px;

    border-radius:50px;

    cursor:pointer;

    font-size:0.9rem;

    letter-spacing:2px;

    text-transform:uppercase;
}

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

.na-card{

    background:
    linear-gradient(
    145deg,
    rgba(10,0,0,0.82),
    rgba(0,0,0,0.94)
    );

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

    border-radius:28px;

    box-shadow:
    0 0 25px rgba(255,0,0,0.08),
    inset 0 0 30px rgba(255,255,255,0.02);
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes bookGlow{

    0%{

        opacity:0.4;
        transform:scale(1);
    }

    50%{

        opacity:1;
        transform:scale(1.12);
    }

    100%{

        opacity:0.4;
        transform:scale(1);
    }
}

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

@media(max-width:1100px){

    .na-container{

        min-height:auto;

        padding:
        220px
        20px
        0;
    }

    .background{

        background-position:center top;
    }

    .na-btn{

        width:100%;

        max-width:500px;

        padding:18px 20px;

        font-size:0.9rem;

        letter-spacing:2px;
    }

    .audio-section{

        padding:22px 18px;

        margin-bottom:0;
    }

    .citation{

        font-size:0.95rem;
    }

    .audio-seal{

        top:120px;
        left:12px;

        width:78px;
    }

    .seal-message{

        top:140px;
        left:100px;

        max-width:190px;

        font-size:0.7rem;

        padding:10px 14px;
    }
}

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

@media(max-width:900px){

    .background{

        background:
        linear-gradient(
        to bottom,
        rgba(0,0,0,0.14),
        rgba(0,0,0,0.46) 35%,
        rgba(0,0,0,0.80) 70%,
        rgba(0,0,0,0.96)
        ),
url('/images/banner-nightangels-mobile.webp')
        center top / cover no-repeat;
    }

    .na-background{

        position:fixed;

        background-size:cover;

        background-position:center top;
    }
}

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

.enter-btn{

    position:relative;

    overflow:hidden;

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

.enter-btn::after{

    content:'';

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    background:
    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.10),
    transparent
    );

    transform:
    translateX(-140%);

    animation:
    enterShine 6s linear infinite;
}

@keyframes enterPulse{

    0%{

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

    50%{

        box-shadow:
        0 0 28px rgba(255,0,0,0.14);
    }

    100%{

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

@keyframes enterShine{

    100%{

        transform:
        translateX(160%);
    }
}

/* =========================================================
   MOBILE GPU OPTIMIZATION
========================================================= */

@media(max-width:900px){

    .na-overlay{

        backdrop-filter:none;
    }

    .na-panel{

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

    .audio-seal::after{

        filter:blur(8px);
    }

    .na-btn:hover{

        transform:none;
    }
}

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

.particles{

    position:fixed;

    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:3;
}

.particles span{

    position:absolute;

    bottom:-10vh;

    width:2px;
    height:2px;

    border-radius:50%;

    background:
    rgba(255,255,255,0.7);

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

    animation:
    particleFloat linear infinite;
}

/* =========================================================
   TYPEWRITER LINES
========================================================= */

.type-line{

    opacity:1;

    animation:
    fadeLine 0.8s ease;
}

@keyframes fadeLine{

    from{

        transform:
        translateY(10px);

        opacity:0.4;
    }

    to{

        transform:
        translateY(0px);

        opacity:1;
    }
}

/* =========================================================
   CURSOR
========================================================= */

.cursor{

    color:var(--accent-color);

    animation:blink 0.8s infinite;

    font-weight:bold;
}

@keyframes blink{

    0%,100%{
        opacity:1;
    }

    50%{
        opacity:0;
    }
}

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

@keyframes particleFloat{

    0%{

        transform:
        translateY(0)
        translateX(0);

        opacity:0;
    }

    10%{

        opacity:1;
    }

    100%{

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

        opacity:0;
    }
}

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

@keyframes bookFloat{

    0%{

        transform:
        translateY(0px);
    }

    50%{

        transform:
        translateY(-8px);
    }

    100%{

        transform:
        translateY(0px);
    }
}

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

@keyframes messageAppear{

    from{

        opacity:0;

        transform:
        translateY(10px);
    }

    to{

        opacity:1;

        transform:
        translateY(0);
    }
}

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

@keyframes loreFade{

    from{

        opacity:0;

        transform:
        translateY(25px);
    }

    to{

        opacity:1;

        transform:
        translateY(0);
    }
}
/* ======================================================
   FADE SCALE
====================================================== */

.fade-scale{

    opacity:0;

    transform:
    scale(0.94);

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

.fade-scale.visible{

    opacity:1;

    transform:
    scale(1);
}
/* ======================================================
   GLOW APPEAR
====================================================== */

.glow-appear{

    opacity:0;

    transform:
    translateY(25px);

    transition:
    opacity 1.5s ease,
    transform 1.5s ease,
    box-shadow 1.5s ease;
}

.glow-appear.visible{

    opacity:1;

    transform:
    translateY(0);

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