/* ======================================================
   NIGHTANGELS ? CUPIDITE.CSS
   Univers : Cupidité / Mammon
====================================================== */

body[data-universe="cupidite"]{

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

    --accent-color:#d4a017;

    --header-border:
    rgba(212,160,23,0.18);

    /* ==================================================
       BACKGROUNDS
    ================================================== */

    --theme-bg:#050505;
    --theme-bg-secondary:#120d05;

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

    --theme-primary:#7a590f;
    --theme-primary-light:#d4a017;

    /* ==================================================
       GOLD
    ================================================== */

    --theme-gold:#d4a017;

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

    --theme-text:#f5efe3;

    --theme-text-secondary:#bda67d;

    --theme-title:#ffffff;

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

    --theme-border:
    rgba(212,160,23,0.14);

    --theme-glow:
    rgba(212,160,23,0.18);

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

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

    --hero-overlay-strong:
    rgba(5,3,0,0.92);

    --hero-image:
    url('/images/ange-crypto.webp');

}

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

.background{

    position:fixed;
    inset:0;

    background:
    linear-gradient(
    to bottom,
    rgba(0,0,0,0.4),
    rgba(0,0,0,0.9)),
    url('/images/ange-crypto.webp')
    center center / cover no-repeat;

    filter:
    blur(8px)
    brightness(0.2)
    saturate(1.15);

    transform:scale(1.08);

    z-index:-5;

    will-change:transform;

    contain:paint;
}

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

.overlay{

    position:fixed;
    inset:0;

    background:

    radial-gradient(circle at top,
    rgba(212,160,23,0.12),
    transparent 45%),

    radial-gradient(circle at bottom,
    rgba(212,160,23,0.08),
    transparent 50%),

    rgba(0,0,0,0.35);

    z-index:-4;
}

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

.particles{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:-3;
}

.particles span{

    position:absolute;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(212,160,23,1),
    rgba(212,160,23,0.25),
    transparent);

    filter:blur(1px);

    animation:particleRise linear infinite;
}

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

.hero{

    position:relative;

    z-index:10;

    width:100%;

    padding:
    140px
    40px
    60px;

    display:flex;

    flex-direction:column;

    align-items:center;
}

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

.main-card{

    position:relative;

    width:100%;

    max-width:1450px;

    min-height:760px;

    border-radius:35px;

    overflow:hidden;

    border:
    1px solid rgba(212,160,23,0.12);

    box-shadow:
    0 0 50px rgba(212,160,23,0.08),
    0 0 120px rgba(0,0,0,0.45);

    background:black;
}

.main-card img{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    filter:
    brightness(0.7)
    contrast(1.05);

    transform:scale(1.03);
}

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

.image-overlay{

    position:absolute;

    inset:0;

    z-index:1;

    background:

    linear-gradient(
    to right,
    rgba(0,0,0,0.78),
    rgba(0,0,0,0.28)),

    linear-gradient(
    to top,
    rgba(0,0,0,0.82),
    transparent 40%),

    radial-gradient(circle at center,
    rgba(212,160,23,0.08),
    transparent 60%);
}

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

.card-content{

    position:relative;

    z-index:5;

    max-width:760px;

    padding:90px 80px;
}

.album{

    text-transform:uppercase;

    letter-spacing:8px;

    font-size:0.8rem;

    color:#d4a017;

    margin-bottom:30px;
}

.main-card h1{

    font-size:clamp(3rem,6vw,6rem);

    line-height:0.95;

    letter-spacing:4px;

    margin-bottom:35px;

    text-transform:uppercase;

    color:#ffffff;
}

.main-card h1 span{

    color:#d4a017;
}

.separator{

    width:240px;
    height:2px;

    margin-bottom:40px;

    background:
    linear-gradient(
    to right,
    #d4a017,
    rgba(212,160,23,0.15),
    transparent);
}

.description{

    font-size:1.05rem;

    line-height:2.2;

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

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

.quote{

    margin-top:40px;

    text-align:center;

    font-style:italic;

    font-size:1.2rem;

    line-height:2;

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

    min-height:70px;

    transition:1s ease;
}

.quote span{

    display:block;

    margin-top:15px;

    font-size:0.85rem;

    letter-spacing:3px;

    text-transform:uppercase;

    color:rgba(212,160,23,0.78);
}

/* ======================================================
   IMMERSION BLOCK
====================================================== */

.immersion-block{

    position:relative;

    width:100%;

    max-width:1450px;

    margin-top:25px;

    display:grid;

    grid-template-columns:1.05fr 1fr;

    align-items:center;

    overflow:hidden;

    border-radius:35px;

    background:
    linear-gradient(
    145deg,
    rgba(15,15,15,0.92),
    rgba(25,15,0,0.75));

    border:
    1px solid rgba(212,160,23,0.08);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);
}

.immersion-image{

    position:relative;

    min-height:650px;

    overflow:hidden;
}

.immersion-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;

    transform:scale(1.04);

    transition:8s ease;
}

.immersion-block:hover .immersion-image img{

    transform:scale(1.08);
}

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

.immersion-content{

    position:relative;

    padding:90px 80px;

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.immersion-subtitle{

    letter-spacing:6px;

    text-transform:uppercase;

    font-size:0.75rem;

    color:#d4a017;

    margin-bottom:30px;
}

.immersion-content h2{

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

    line-height:1;

    margin-bottom:35px;

    text-transform:uppercase;

    color:#ffffff;
}

.immersion-content h2 span{

    color:#d4a017;
}

.immersion-separator{

    width:220px;
    height:2px;

    margin-bottom:40px;

    background:
    linear-gradient(
    to right,
    #d4a017,
    rgba(212,160,23,0.15),
    transparent);
}

/* ======================================================
   CRYPTO TABLE
====================================================== */

.crypto-table{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-top:15px;
}

.crypto-row{

    display:grid;

    grid-template-columns:180px 1fr;

    gap:25px;

    align-items:flex-start;

    padding:22px 24px;

    border-radius:18px;

    background:
    linear-gradient(
    145deg,
    rgba(212,160,23,0.04),
    rgba(0,0,0,0.35));

    border:
    1px solid rgba(212,160,23,0.08);

    transition:0.4s ease;
}

.crypto-row:hover{

    transform:translateY(-3px);

    border-color:
    rgba(212,160,23,0.2);

    box-shadow:
    0 0 25px rgba(212,160,23,0.08);
}

.crypto-value{

    font-size:1.3rem;

    color:#d4a017;

    letter-spacing:2px;
}

.crypto-desc{

    line-height:1.9;

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

.crypto-desc span{

    color:rgba(212,160,23,0.78);

    font-style:italic;

    text-shadow:
    0 0 12px rgba(212,160,23,0.12);
}

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

.market-btn{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    width:100%;

    padding:28px 30px;

    margin-top:25px;

    border-radius:24px;

    overflow:hidden;

    text-decoration:none;

    background:
    linear-gradient(
    145deg,
    rgba(212,160,23,0.08),
    rgba(20,15,0,0.88));

    border:
    1px solid rgba(212,160,23,0.12);

    transition:0.45s ease;

    box-shadow:
    0 0 30px rgba(212,160,23,0.05);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);
}

.market-btn:hover{

    transform:
    translateY(-5px)
    scale(1.015);

    box-shadow:
    0 0 45px rgba(212,160,23,0.18),
    0 0 90px rgba(212,160,23,0.08);
}

.market-icon{

    display:flex;

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

    min-width:72px;
    height:72px;

    border-radius:20px;

    font-size:2rem;

    color:#d4a017;

    background:
    radial-gradient(
    circle,
    rgba(212,160,23,0.22),
    rgba(80,50,0,0.25));

    box-shadow:
    inset 0 0 15px rgba(255,255,255,0.05),
    0 0 40px rgba(212,160,23,0.22);

    position:relative;

    z-index:2;

    flex-shrink:0;

    transition:0.4s ease;
}

.market-content{

    flex:1;
}

.market-title{

    font-size:1.5rem;

    letter-spacing:2px;

    color:#ffffff;

    margin-bottom:8px;

    text-transform:uppercase;
}

.market-subtitle{

    color:#d4a017;

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:0.78rem;
}

.market-arrow{

    font-size:2rem;

    color:#ffffff;

    transition:0.35s ease;
}

/* ======================================================
   STATS
====================================================== */

.stats-wrapper{

    width:100%;

    max-width:1450px;

    margin-top:25px;

    padding:40px;

    border-radius:30px;

    background:
    linear-gradient(
    145deg,
    rgba(15,15,15,0.9),
    rgba(25,15,0,0.75));

    border:
    1px solid rgba(212,160,23,0.08);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);
}

.stats{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;
}

.stat-box{

    padding:25px;

    border-radius:22px;

    background:
    linear-gradient(
    145deg,
    rgba(212,160,23,0.05),
    rgba(0,0,0,0.35));

    border:
    1px solid rgba(212,160,23,0.08);

    text-align:center;
}

.stat-value{

    font-size:2rem;

    color:#d4a017;
}

.stat-label{

    font-size:0.78rem;

    letter-spacing:2px;

    text-transform:uppercase;

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

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

.enter-btn{

    display:flex;

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

    width:100%;

    max-width:380px;

    height:74px;

    margin:35px auto 0;

    border-radius:20px;

    background:
    linear-gradient(
    145deg,
    #d4a017,
    #7a590f
    );

    color:#ffffff;

    font-size:1rem;

    letter-spacing:3px;

    text-transform:uppercase;

    cursor:pointer;

    transition:0.4s ease;

    box-shadow:
    0 0 35px rgba(212,160,23,0.25);
}

.enter-btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 0 60px rgba(212,160,23,0.45);
}

/* ======================================================
   COIN PLAYER
====================================================== */

.coin-player{

    position:fixed;

    bottom:25px;
    right:20px;

    width:95px;
    height:95px;

    z-index:999;

    cursor:pointer;

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

    transition:0.45s ease;
}

.coin-player img{

    width:100%;
    height:100%;

    object-fit:contain;

    filter:
    drop-shadow(0 0 25px rgba(212,160,23,0.45))
    brightness(1.05);

    transition:0.4s ease;
}

.coin-player:hover{

    transform:
    scale(1.08)
    rotate(8deg);
}

.coin-player:hover img{

    filter:
    drop-shadow(0 0 45px rgba(212,160,23,0.9))
    brightness(1.15);
}

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

@media(max-width:1100px){

    .hero{

        padding:
        150px
        20px
        40px;
    }

    .background{

        filter:
        blur(4px)
        brightness(0.25)
        saturate(1.05);
    }

    .particles{

        opacity:0.45;
    }

    .particles span:nth-child(n+18){

        display:none;
    }

    .immersion-block{

        grid-template-columns:1fr;

        backdrop-filter:blur(4px);

        -webkit-backdrop-filter:blur(4px);
    }

    .immersion-content{

        padding:45px 22px;
    }

    .card-content{

        padding:50px 30px;
    }

    .stats{

        grid-template-columns:1fr;
    }

    .crypto-row{

        grid-template-columns:1fr;

        padding:18px;
    }

    .market-btn{

        display:grid;

        grid-template-columns:
        60px
        1fr
        30px;

        align-items:center;

        gap:18px;

        padding:22px 20px;

        overflow:hidden;

        backdrop-filter:blur(4px);

        -webkit-backdrop-filter:blur(4px);

        box-shadow:
        0 0 20px rgba(212,160,23,0.08);
    }

    .stats-wrapper{

        backdrop-filter:blur(4px);

        -webkit-backdrop-filter:blur(4px);

        box-shadow:
        0 0 20px rgba(212,160,23,0.08);
    }

    .market-icon{

        min-width:60px;
        width:60px;

        height:60px;

        font-size:1.5rem;
    }

    .market-arrow{

        position:relative;

        right:auto;
        bottom:auto;

        justify-self:end;

        font-size:1.5rem;
    }

    .main-card h1{

        font-size:clamp(2.45rem,8vw,4rem);

        line-height:0.92;

        letter-spacing:1px;
    }

    .album{

        font-size:0.72rem;

        letter-spacing:5px;

        white-space:nowrap;
    }

    .coin-player{

        width:82px;
        height:82px;

        bottom:18px;
        right:14px;
    }

}

/* ======================================================
   FALLBACK BLUR
====================================================== */

@supports not (
    (backdrop-filter:blur(1px)) or
    (-webkit-backdrop-filter:blur(1px))
){

    .immersion-block,
    .market-btn,
    .stats-wrapper{

        background:
        rgba(10,10,10,0.96);
    }
}