/* ======================================================
   NIGHTANGELS - HERO.CSS

   ARCHITECTURE DES VARIABLES

   1. VARIABLES DE THÈME (body[data-universe])
      --theme-*
      --accent-color

      Définissent l'univers complet.

   2. VARIABLES DU COMPOSANT HERO
      --hero-*
      --btn-*

      Le Hero ne modifie jamais les variables du thème.
      Il copie simplement les valeurs dont il a besoin.

   3. VARIABLES DES VARIANTES
      .hero--nightangels
      .hero--oracle
      .hero--lilith
      .hero--lucifer
      ...

      Chaque variante surcharge uniquement
      les variables du Hero.

   Cette architecture permet d'afficher
   plusieurs Hero de différents univers
   sur une même page sans conflit.

============================================ */
/* ============================================
   HERO
============================================ */
.hero{
    --hero-color:var(--accent-color);
    --hero-glow:color-mix(
        in srgb,
        var(--hero-color) 35%,
        transparent
    );

    /* =========================================
       Variables des boutons
    ========================================== */

    --btn-bg:var(--hero-color);

    --btn-border:var(--hero-color);

    --btn-glow:var(--hero-glow);

    /* =========================================
       Variables du Hero
    ========================================== */

    --hero-background:var(--theme-bg);

    --hero-panel:
    linear-gradient(
        90deg,
        rgba(8,8,8,.90) 0%,
        rgba(8,8,8,.82) 70%,
        rgba(8,8,8,.18) 95%,
        transparent 100%
    );

    position:relative;

    width:100%;

    aspect-ratio:21/9;

    min-height:auto;

    max-height:none;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:var(--hero-background);

    padding:0;


}

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

.hero--secondary{

    margin-top:20px;

    aspect-ratio:21/9;

    height:auto;

    min-height:0;
}

.hero--secondary .hero__title{

    margin-bottom:45px;

    color:var(--hero-color);

    font-size:2rem;

    font-weight:900;

    line-height:1;

    text-transform:uppercase;

    text-shadow:
        0 0 8px var(--hero-glow),
        0 0 18px var(--hero-glow),
        0 0 40px rgba(0,0,0,.9);
}

.hero--secondary .hero__buttons{

    margin-top:45px;
}

.hero--secondary .hero__content{

    position:relative;

    z-index:2;

    max-width:640px;

    padding:10px;

    background:var(--hero-panel);
}

.hero--secondary .hero__inner{

    padding:20px 60px;
}

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

.hero__image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:contain;

    object-position:center;

    background:var(--hero-background);

    z-index:0;
}

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

.hero__inner{

    position:relative;

    z-index:2;

    width:100%;

    margin:0 auto;

    padding:60px;
}

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

.hero__content{

    position:relative;

    z-index:2;

    max-width:520px;

    padding:30px 25px;

    background:var(--hero-panel);
}

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

.hero__eyebrow{

    margin-bottom:6px;

    color:var(--theme-text);

    text-transform:uppercase;

    letter-spacing:6px;

    font-size:1.3rem;

    font-weight:700;
}

.hero__title{

    margin-bottom:6px;

    color:var(--hero-color);

    font-size:2rem;

    line-height:1;

    text-transform:uppercase;

    text-shadow:
        0 0 20px rgba(0,0,0,.55),
        0 0 50px rgba(0,0,0,.45);
}

.hero__subtitle{

    margin:0 0 6px;

    color:var(--theme-text);

    font-size:1.4rem;

    font-weight:400;

    line-height:1;
}

.hero__description{

    margin-bottom:6px;

    max-width:520px;

    color:var(--theme-text);

    font-size:1.2rem;

    line-height:1.4;

    text-shadow:
        0 0 18px rgba(0,0,0,.55);
}