/* =========================================================
   SLV MODULARS
   HERO SLIDER
   ========================================================= */

.slv-hero {

    position: relative;

    width: 100%;

    height: 100vh;

    min-height: 680px;

    overflow: hidden;

    background: #111111;

    color: #ffffff;
}


/* =========================================================
   SLIDES
   ========================================================= */

.hero-slide {

    position: absolute;

    inset: 0;

    opacity: 0;

    visibility: hidden;

    z-index: 1;

    transition:
        opacity 1s ease,
        visibility 1s ease;
}


.hero-slide.active {

    opacity: 1;

    visibility: visible;

    z-index: 2;
}


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

.hero-bg {

    position: absolute;

    inset: 0;

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    transform: scale(1.10);

    transition:
        transform 7s cubic-bezier(.2,.6,.2,1);
}


.hero-slide.active .hero-bg {

    transform: scale(1);

}


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

.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(10,10,10,.88) 0%,
            rgba(10,10,10,.70) 30%,
            rgba(10,10,10,.38) 58%,
            rgba(10,10,10,.15) 100%
        );
}


/* bottom gradient */

.hero-overlay::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 35%;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.65),
            transparent
        );
}


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

.hero-content {

    position: absolute;

    z-index: 5;

    left: max(
        6vw,
        calc((100vw - 1380px) / 2)
    );

    top: 50%;

    transform:
        translateY(-42px);

    width: min(
        680px,
        55vw
    );

}


/* =========================================================
   EYEBROW
   ========================================================= */

.hero-eyebrow {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 23px;

    overflow: hidden;

    opacity: 0;

    transform:
        translateY(25px);
}


.hero-slide.active .hero-eyebrow {

    animation:
        heroReveal .8s .25s
        var(--ease)
        forwards;
}


.hero-line {

    width: 42px;

    height: 2px;

    background: #D71916;

    display: block;
}


.hero-eyebrow span:last-child {

    color: rgba(255,255,255,.72);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;
}


/* =========================================================
   HEADING
   ========================================================= */

.hero-content h1 {

    margin: 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(55px, 6.3vw, 92px);

    line-height: .98;

    font-weight: 700;

    letter-spacing: -4px;

    max-width: 700px;

    color: #ffffff;

}


.hero-content h1 span {

    display: block;

    color: #D71916;
}


/* =========================================================
   HEADING ANIMATION
   ========================================================= */

.hero-slide.active .hero-content h1 {

    animation:
        heroHeading 1s .35s
        var(--ease)
        both;
}


@keyframes heroHeading {

    from {

        opacity: 0;

        transform:
            translateY(55px);

        filter:
            blur(8px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

        filter:
            blur(0);

    }

}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.hero-content p {

    width: min(
        510px,
        100%
    );

    margin-top: 28px;

    color:
        rgba(255,255,255,.68);

    font-size: 15px;

    line-height: 1.8;

    opacity: 0;
}


.hero-slide.active .hero-content p {

    animation:
        heroReveal .8s .65s
        var(--ease)
        forwards;
}


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

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 35px;

    opacity: 0;

    transform:
        translateY(25px);
}


.hero-slide.active .hero-buttons {

    animation:
        heroReveal .8s .8s
        var(--ease)
        forwards;
}


.hero-btn {

    height: 54px;

    padding: 0 22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    transition:
        transform .35s var(--ease),
        background .35s ease,
        color .35s ease;
}


.hero-btn-primary {

    background: #D71916;

    color: #ffffff;
}


.hero-btn-primary:hover {

    transform:
        translateY(-4px);

    background: #ffffff;

    color: #111111;
}


.hero-btn-primary i {

    transition:
        transform .3s ease;
}


.hero-btn-primary:hover i {

    transform:
        translateX(5px);
}


.hero-btn-outline {

    border:
        1px solid
        rgba(255,255,255,.4);

    color: #ffffff;

    background:
        rgba(255,255,255,.03);

    backdrop-filter:
        blur(8px);
}


.hero-btn-outline:hover {

    background: #ffffff;

    color: #111111;

    border-color: #ffffff;

    transform:
        translateY(-4px);
}


/* =========================================================
   CATEGORY LABEL
   ========================================================= */

.hero-category {

    position: absolute;

    z-index: 6;

    right: 6vw;

    bottom: 120px;

    display: flex;

    align-items: center;

    gap: 14px;

    transform:
        rotate(-90deg)
        translateX(100%);

    transform-origin:
        right bottom;

    color:
        rgba(255,255,255,.65);

    font-size: 9px;

    letter-spacing: 3px;

}


.hero-category span {

    color: #D71916;

    font-size: 12px;

    font-weight: 700;
}


.hero-category div {

    width: 45px;

    height: 1px;

    background:
        rgba(255,255,255,.4);
}


.hero-category strong {

    font-weight: 600;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.hero-navigation {

    position: absolute;

    z-index: 10;

    left: max(
        6vw,
        calc((100vw - 1380px) / 2)
    );

    bottom: 55px;

    display: flex;

    align-items: center;

    gap: 20px;
}


/* arrows */

.hero-arrow {

    width: 48px;

    height: 48px;

    border:
        1px solid
        rgba(255,255,255,.28);

    background:
        rgba(0,0,0,.12);

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}


.hero-arrow:hover {

    background: #D71916;

    border-color: #D71916;

    transform:
        translateY(-3px);
}


.hero-arrow i {

    font-size: 11px;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.hero-progress {

    display: flex;

    align-items: center;

    gap: 15px;

    width: 250px;
}


.hero-progress-track {

    position: relative;

    width: 170px;

    height: 1px;

    background:
        rgba(255,255,255,.25);

    overflow: hidden;
}


.hero-progress-track span {

    display: block;

    width: 0;

    height: 100%;

    background: #D71916;
}


.hero-slide.active
~ .hero-navigation
.hero-progress-track span {

    animation:
        heroProgress 6s linear;
}


@keyframes heroProgress {

    from {
        width: 0;
    }

    to {
        width: 100%;
    }

}


.hero-counter {

    white-space: nowrap;

    font-size: 11px;

    letter-spacing: 1px;
}


.hero-counter strong {

    color: #ffffff;

    font-weight: 700;
}


.hero-counter span {

    color:
        rgba(255,255,255,.4);
}


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

.hero-scroll {

    position: absolute;

    z-index: 10;

    right: 6vw;

    bottom: 42px;

    display: flex;

    align-items: center;

    gap: 13px;

    color:
        rgba(255,255,255,.55);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2px;

    writing-mode:
        vertical-rl;

    transition:
        color .3s ease;
}


.hero-scroll:hover {

    color: #ffffff;
}


.hero-scroll i {

    color: #D71916;

    animation:
        scrollBounce 1.8s infinite;
}


@keyframes scrollBounce {

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

    50% {
        transform:
            translateY(7px);
    }

}


/* =========================================================
   CORNER DETAILS
   ========================================================= */

.hero-corner {

    position: absolute;

    z-index: 7;

    width: 65px;

    height: 65px;

    pointer-events: none;
}


.hero-corner-top {

    top: 110px;

    right: 45px;

    border-top:
        1px solid
        rgba(255,255,255,.22);

    border-right:
        1px solid
        rgba(255,255,255,.22);
}


.hero-corner-bottom {

    bottom: 45px;

    right: 45px;

    border-bottom:
        1px solid
        rgba(255,255,255,.15);

    border-right:
        1px solid
        rgba(255,255,255,.15);
}


/* =========================================================
   REVEAL
   ========================================================= */

@keyframes heroReveal {

    from {

        opacity: 0;

        transform:
            translateY(25px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .slv-hero {

        min-height: 650px;

    }


    .hero-content {

        left: 35px;

        width:
            calc(100% - 70px);

    }


    .hero-content h1 {

        font-size:
            clamp(48px, 8vw, 70px);

    }


    .hero-category {

        display: none;

    }


    .hero-scroll {

        display: none;

    }

}


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

@media (max-width: 600px) {

    .slv-hero {

        height: 100svh;

        min-height: 620px;

    }


    .hero-bg {

        background-position:
            center center;
    }


    .hero-overlay {

        background:
            linear-gradient(
                90deg,
                rgba(10,10,10,.88),
                rgba(10,10,10,.52)
            );
    }


    .hero-content {

        left: 22px;

        top: 52%;

        width:
            calc(100% - 44px);

    }


    .hero-eyebrow {

        margin-bottom: 17px;
    }


    .hero-eyebrow span:last-child {

        font-size: 8px;

        letter-spacing: 2px;
    }


    .hero-line {

        width: 28px;
    }


    .hero-content h1 {

        font-size:
            clamp(43px, 13vw, 62px);

        letter-spacing:
            -2.5px;
    }


    .hero-content p {

        margin-top: 20px;

        font-size: 13px;

        line-height: 1.7;

        max-width: 340px;
    }


    .hero-buttons {

        margin-top: 26px;

        flex-wrap: wrap;
    }


    .hero-btn {

        height: 48px;

        padding:
            0 15px;

        font-size: 8px;

    }


    .hero-navigation {

        left: 22px;

        bottom: 25px;

        gap: 9px;

    }


    .hero-arrow {

        width: 40px;

        height: 40px;

    }


    .hero-progress {

        width: 135px;

        gap: 8px;

    }


    .hero-progress-track {

        width: 82px;

    }


    .hero-corner {

        display: none;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero-bg {

        transform: none !important;

        transition: none !important;

    }

    .hero-slide.active .hero-bg {

        transform: none !important;

    }

    .hero-slide.active .hero-eyebrow,
    .hero-slide.active .hero-content h1,
    .hero-slide.active .hero-content p,
    .hero-slide.active .hero-buttons {

        animation: none !important;

        opacity: 1;

        transform: none;

        filter: none;

    }

    .hero-progress-track span {

        animation: none !important;

        width: 100%;

    }

}