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

.hero{

    position:relative;

    display:flex;

    align-items:center;

    min-height:var(--hero-min-height);

    padding-top:var(--navbar-height);

    overflow:hidden;

    background:var(--gradient-hero);

}

.hero{

    --hero-img:url("../images/hero/hero-1.jpg");

}

.hero--v2{ --hero-img:url("../images/hero/hero-2.jpg"); }

.hero--v3{ --hero-img:url("../images/hero/hero-3.jpg"); }

.hero--v4{ --hero-img:url("../images/hero/hero-4.jpg"); }

.hero__glow{

    top:-160px;

    right:-120px;

}

/* ==========================================================
   BATTLEFIELD BACKDROP
   ========================================================== */

.hero__battlefield{

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            #090909 6%,
            rgba(9,9,9,.82) 34%,
            rgba(9,9,9,.28) 62%,
            rgba(9,9,9,.55) 100%
        ),
        linear-gradient(
            180deg,
            rgba(9,9,9,.88) 0%,
            rgba(9,9,9,.25) 34%,
            rgba(9,9,9,.25) 62%,
            #090909 100%
        ),
        var(--hero-img) right 32% / cover no-repeat;

}

.hero__content{

    position:relative;

    z-index:2;

    max-width:var(--hero-content-width);

}

.hero__title{

    margin-bottom:var(--space-lg);

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

    letter-spacing:.22em;

    font-weight:var(--fw-medium);

    white-space:nowrap;

}

.hero__subtitle{

    margin-bottom:var(--space-lg);

    font-family:var(--font-heading);

    font-size:clamp(1.3rem,2.2vw,1.75rem);

    font-weight:var(--fw-medium);

    letter-spacing:.08em;

    line-height:1.4;

    text-transform:uppercase;

    color:var(--color-text);

}

.hero__description{

    margin-bottom:var(--space-2xl);

    max-width:46ch;

    font-size:1.05rem;

    color:var(--color-text-secondary);

}

.hero__actions{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

/* ==========================================================
   SCROLL INDICATOR
   ========================================================== */

.hero__scroll{

    position:absolute;

    bottom:32px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

    border-radius:50%;

    border:1px solid var(--color-border-light);

    color:var(--color-gold);

    animation:scroll-bounce 2.4s ease-in-out infinite;

}

.hero__scroll:hover{

    border-color:var(--color-gold);

}