/* =========================================================
   ADI YOGPEETH — HERO
   File: assets/css/hero.css
   Version: 1.0
   ========================================================= */


/* =========================================================
   01. HERO ROOT
   ========================================================= */

.hero {
    position: relative;

    min-height: min(
        780px,
        calc(100vh - var(--header-main-height))
    );

    height: min(
        780px,
        calc(100vh - var(--header-main-height))
    );

    min-height: 680px;

    display: flex;
    align-items: stretch;

    overflow: hidden;

    background-color: var(--color-forest);

    color: var(--color-white);
}


/* =========================================================
   02. MEDIA
   ========================================================= */

.hero__media {
    position: absolute;
    inset: 0;

    overflow: hidden;

    background-color: var(--color-forest);
}


.hero__video,
.hero__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   03. VIDEO
   ========================================================= */

.hero__video {
    position: absolute;
    inset: 0;

    transform: scale(1.01);
}


/* =========================================================
   04. IMAGE SLIDES
   ========================================================= */

.hero__slides {
    position: absolute;
    inset: 0;
}


.hero__slide {
    position: absolute;
    inset: 0;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 900ms var(--ease-smooth),
        visibility 900ms var(--ease-smooth);
}


.hero__slide.is-active {
    opacity: 1;
    visibility: visible;
}


.hero__slide.is-active .hero__image {
    animation: hero-image-zoom 8s var(--ease-standard) both;
}


@keyframes hero-image-zoom {

    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.045);
    }
}


/* =========================================================
   05. OVERLAY
   ========================================================= */

.hero__overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(12, 35, 30, 0.82) 0%,
            rgba(12, 35, 30, 0.58) 40%,
            rgba(12, 35, 30, 0.20) 75%,
            rgba(12, 35, 30, 0.12) 100%
        ),
        linear-gradient(
            0deg,
            rgba(8, 25, 21, 0.58) 0%,
            transparent 55%
        );
}


/* =========================================================
   06. GRAIN
   ========================================================= */

.hero__grain {
    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    opacity: 0.035;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");

    mix-blend-mode: soft-light;
}


/* =========================================================
   07. HERO CONTAINER
   ========================================================= */

.hero__container {
    position: relative;

    z-index: 3;

    width: 100%;

    display: flex;
    flex-direction: column;

    justify-content: center;

    padding-top: 60px;
    padding-bottom: 80px;
}


/* =========================================================
   08. CONTENT
   ========================================================= */

.hero__content {
    max-width: 880px;

    padding-top: 30px;
}


/* =========================================================
   09. EYEBROW
   ========================================================= */

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;

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

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

    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);

    letter-spacing: var(--tracking-widest);
    line-height: 1.3;

    text-transform: uppercase;
}


.hero__eyebrow-line {
    display: inline-block;

    width: 38px;
    height: 1px;

    background-color: var(--color-gold-light);
}


/* =========================================================
   10. HERO TITLE
   ========================================================= */

.hero__title {
    max-width: 900px;

    margin: 0;

    color: var(--color-white);

    font-family: var(--font-display);
    font-size: clamp(
        4.5rem,
        7.5vw,
        7.8rem
    );

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

    line-height: 0.88;

    letter-spacing: -0.045em;

    text-wrap: balance;
}


.hero__title em {
    color: var(--color-gold-light);

    font-style: italic;
    font-weight: 400;
}


/* =========================================================
   11. DESCRIPTION
   ========================================================= */

.hero__description {
    max-width: 610px;

    margin-top: var(--space-7);

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

    font-family: var(--font-body);
    font-size: clamp(
        1rem,
        1.4vw,
        1.18rem
    );

    line-height: 1.65;
}


/* =========================================================
   12. ACTIONS
   ========================================================= */

.hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: var(--space-4);

    margin-top: var(--space-8);
}


/* =========================================================
   13. BOTTOM AREA
   ========================================================= */

.hero__bottom {
    position: absolute;

    right: 0;
    bottom: 32px;
    left: 0;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}


/* =========================================================
   14. SCROLL INDICATOR
   ========================================================= */

.hero__scroll {
    display: inline-flex;
    align-items: center;
    gap: 12px;

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

    font-size: 0.66rem;
    font-weight: var(--font-weight-semibold);

    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
}


.hero__scroll:hover {
    color: var(--color-white);
}


.hero__scroll-line {
    position: relative;

    display: block;

    width: 42px;
    height: 1px;

    overflow: hidden;

    background-color: rgba(255, 255, 255, 0.35);
}


.hero__scroll-line::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 18px;
    height: 1px;

    background-color: var(--color-gold-light);

    animation:
        hero-scroll-line 2s
        var(--ease-smooth)
        infinite;
}


@keyframes hero-scroll-line {

    0% {
        transform: translateX(-20px);
    }

    50% {
        transform: translateX(25px);
    }

    100% {
        transform: translateX(50px);
    }
}


/* =========================================================
   15. SLIDER CONTROLS
   ========================================================= */

.hero__controls {
    display: flex;
    align-items: center;
    gap: 16px;
}


.hero__control {
    display: inline-flex;

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

    width: 42px;
    height: 42px;

    border: 1px solid rgba(255, 255, 255, 0.40);
    border-radius: var(--radius-full);

    color: var(--color-white);

    background-color: rgba(0, 0, 0, 0.10);

    backdrop-filter: blur(5px);

    transition:
        background-color var(--duration-normal) var(--ease-standard),
        border-color var(--duration-normal) var(--ease-standard),
        transform var(--duration-normal) var(--ease-smooth);
}


.hero__control:hover {
    background-color: rgba(255, 255, 255, 0.14);

    border-color: rgba(255, 255, 255, 0.75);

    transform: translateY(-2px);
}


.hero__control span {
    font-size: 1rem;
}


.hero__counter {
    display: flex;
    align-items: center;
    gap: 6px;

    min-width: 58px;

    justify-content: center;

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

    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);

    letter-spacing: 0.08em;
}


.hero__counter-current {
    color: var(--color-white);
}


.hero__counter-divider {
    opacity: 0.4;
}


/* =========================================================
   16. VIDEO CONTROL
   ========================================================= */

.hero__video-toggle {
    position: absolute;

    right: 32px;
    bottom: 32px;

    z-index: 4;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    min-height: 36px;

    padding: 7px 12px;

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

    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: var(--radius-full);

    background-color: rgba(0, 0, 0, 0.12);

    backdrop-filter: blur(5px);

    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: var(--font-weight-semibold);

    letter-spacing: 0.04em;
    text-transform: uppercase;
}


.hero__video-toggle:hover {
    color: var(--color-white);

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

    background-color: rgba(0, 0, 0, 0.24);
}


.hero__video-toggle-icon {
    font-size: 0.62rem;
    letter-spacing: -0.04em;
}


/* =========================================================
   17. TABLET
   ========================================================= */

@media (max-width: 1199px) {

    .hero {
        min-height: 680px;
        height: min(740px, calc(100vh - 90px));
    }

    .hero__title {
        font-size: clamp(
            4rem,
            7.5vw,
            6.2rem
        );
    }

}


/* =========================================================
   18. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .hero {

        min-height: 680px;

        height: min(
            760px,
            calc(100svh - var(--header-mobile-height))
        );

    }


    .hero__overlay {

        background:
            linear-gradient(
                180deg,
                rgba(10, 31, 27, 0.34) 0%,
                rgba(10, 31, 27, 0.70) 65%,
                rgba(10, 31, 27, 0.90) 100%
            );

    }


    .hero__container {

        padding-top: 60px;
        padding-bottom: 110px;

        justify-content: center;

    }


    .hero__content {

        max-width: 100%;

        padding-top: 30px;

    }


    .hero__eyebrow {

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

        font-size: 0.64rem;

        letter-spacing: 0.13em;

    }


    .hero__eyebrow-line {

        width: 25px;

    }


    .hero__title {

        max-width: 600px;

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

        line-height: 0.92;

        letter-spacing: -0.035em;

    }


    .hero__description {

        margin-top: var(--space-6);

        font-size: 0.96rem;

        line-height: 1.6;

    }


    .hero__actions {

        width: 100%;

        margin-top: var(--space-7);

        flex-direction: column;

        align-items: stretch;

    }


    .hero__actions .btn {

        width: 100%;

    }


    .hero__bottom {

        bottom: 24px;

    }


    .hero__scroll {

        display: none;

    }


    .hero__controls {

        margin-left: auto;

    }


    .hero__video-toggle {

        right: var(--container-padding);

        bottom: 24px;

    }

}


/* =========================================================
   19. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .hero {

        min-height: 650px;

    }


    .hero__title {

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

    }


    .hero__description {

        font-size: 0.9rem;

    }


    .hero__control {

        width: 38px;
        height: 38px;

    }

}


/* =========================================================
   20. REDUCED MOTION
   ========================================================= */

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

    .hero__slide,
    .hero__image,
    .hero__control,
    .hero__scroll-line::after {

        animation: none;

        transition: none;

    }


    .hero__scroll-line::after {

        display: none;

    }

}


/* =========================================================
   END OF HERO CSS
   ========================================================= */