/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.hero {
    position: relative;
    isolation: isolate;

    display: grid;
    place-items: center;

    min-height: 100svh;

    padding:
        8rem
        clamp(1.25rem, 5vw, 5rem)
        5rem;

    overflow: hidden;
    background: #030303;
}

.hero__background {
    position: absolute;
    inset: 0;
    z-index: -5;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.4),
            rgba(0, 0, 0, 0.78)
        ),
        radial-gradient(
            ellipse at 50% 46%,
            rgba(255, 101, 0, 0.06),
            transparent 55%
        );
}

.hero__background::after {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.17;

    background-image:
        radial-gradient(
            rgba(255, 255, 255, 0.1) 0.6px,
            transparent 0.6px
        );

    background-size: 5px 5px;

    mix-blend-mode: soft-light;
}

.hero__glow {
    position: absolute;
    left: 50%;
    bottom: -32rem;
    z-index: -3;

    width: min(72rem, 110vw);
    height: 44rem;

    background:
        radial-gradient(
            ellipse,
            rgba(255, 83, 0, 0.28),
            rgba(255, 83, 0, 0.07) 38%,
            transparent 70%
        );

    transform: translateX(-50%);

    animation:
        hero-forge-breathe
        8s
        ease-in-out
        infinite;
}

.hero__embers {
    position: absolute;
    inset: 0;
    z-index: -1;

    overflow: hidden;
    pointer-events: none;
}

.hero__ember {
    position: absolute;
    bottom: -2rem;

    width: var(--ember-size);
    height: var(--ember-size);

    opacity: 0;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #fff0b0 0%,
            #ffb12e 28%,
            #ff5b00 65%,
            transparent 100%
        );

    box-shadow:
        0 0 0.85rem
        rgba(255, 89, 0, 0.78);

    animation:
        hero-ember-rise
        var(--ember-duration)
        linear
        var(--ember-delay)
        infinite;
}

.hero__content {
    width: min(64rem, 100%);

    text-align: center;
}

.hero__logo-stage {
    position: relative;

    display: grid;
    place-items: center;

    width: min(22rem, 62vw);

    margin:
        0
        auto
        2rem;
}

.hero__logo-halo {
    position: absolute;
    inset: 13%;

    opacity: 0;

    background:
        radial-gradient(
            circle,
            rgba(255, 94, 0, 0.35),
            rgba(255, 94, 0, 0.08) 48%,
            transparent 72%
        );

    filter: blur(1.4rem);

    animation:
        hero-halo-reveal
        4.2s
        ease-out
        0.4s
        forwards;
}

.hero__logo {
    position: relative;

    width: 100%;
    height: auto;

    opacity: 0;

    transform:
        translateY(1.5rem)
        scale(0.93);

    filter:
        brightness(0.45)
        drop-shadow(
            0 0 0
            rgba(255, 101, 0, 0)
        );

    animation:

        hero-logo-reveal 3.3s
        cubic-bezier(0.22,1,0.36,1)
        forwards,

        forgeBreath 14s
        ease-in-out
        4s
        infinite;
}

.hero__eyebrow {
    margin:
        0
        0
        1.5rem;

    color: var(--color-gold);

    font-size: clamp(0.68rem, 1.6vw, 0.82rem);
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;

    opacity: 0;

    animation:
        hero-content-reveal
        1.5s
        ease
        2.2s
        forwards;
}

.hero__title {
    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(2.8rem, 7.4vw, 7rem);
    font-weight: 500;
    line-height: 0.96;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.hero__title-line {
    display: block;

    opacity: 0;
    transform: translateY(1.5rem);

    animation:
        hero-content-reveal
        1.5s
        ease
        2.55s
        forwards;
}

.hero__title-line--accent {
    margin-top: 0.55em;

    color: var(--color-tempered-steel);
    font-size: 0.58em;
    line-height: 1.08;

    animation-delay: 2.9s;
}

.hero__introduction {
    width: min(45rem, 100%);

    margin:
        2rem
        auto
        0;

    color: var(--color-tempered-steel);
    font-size: clamp(1rem, 2vw, 1.25rem);

    opacity: 0;
    transform: translateY(1rem);

    animation:
        hero-content-reveal
        1.5s
        ease
        3.25s
        forwards;
}

.hero__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;

    margin-top: 2.5rem;
    margin-bottom: 5rem;

    opacity: 0;
    transform: translateY(1rem);

    animation:
        hero-content-reveal
        1.5s
        ease
        3.6s
        forwards;
}

.hero__scroll {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;

    display: grid;
    justify-items: center;
    gap: 0.5rem;

    color: var(--color-muted);

    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;

    opacity: 0;

    transform: translateX(-50%);

    animation:
        hero-content-reveal
        1.5s
        ease
        4.2s
        forwards;
}

.hero__scroll-line {
    display: block;

    width: 1px;
    height: 1.75rem;

    background:
        linear-gradient(
            to bottom,
            var(--color-molten),
            transparent
        );

    animation:
        hero-scroll-pulse
        2.2s
        ease-in-out
        infinite;
}

/*
|--------------------------------------------------------------------------
| Hero replay
|--------------------------------------------------------------------------
*/

.hero.is-replaying .hero__logo,
.hero.is-replaying .hero__logo-halo,
.hero.is-replaying .hero__eyebrow,
.hero.is-replaying .hero__title-line,
.hero.is-replaying .hero__introduction,
.hero.is-replaying .hero__actions,
.hero.is-replaying .hero__scroll {
    animation: none;
}

.hero.is-replaying .hero__logo,
.hero.is-replaying .hero__logo-halo,
.hero.is-replaying .hero__eyebrow,
.hero.is-replaying .hero__title-line,
.hero.is-replaying .hero__introduction,
.hero.is-replaying .hero__actions,
.hero.is-replaying .hero__scroll {
    opacity: 0;
}

/*
|--------------------------------------------------------------------------
| Animations
|--------------------------------------------------------------------------
*/

@keyframes hero-logo-reveal {
    0% {
        opacity: 0;

        transform:
            translateY(1.5rem)
            scale(0.93);

        filter:
            brightness(0.45)
            drop-shadow(
                0 0 0
                rgba(255, 101, 0, 0)
            );
    }

    62% {
        opacity: 1;

        filter:
            brightness(1.08)
            drop-shadow(
                0 0 3rem
                rgba(255, 101, 0, 0.72)
            );
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter:
            brightness(1)
            drop-shadow(
                0 0 1.25rem
                rgba(255, 101, 0, 0.35)
            );
    }
}

@keyframes hero-halo-reveal {
    0% {
        opacity: 0;
        transform: scale(0.72);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.42;
        transform: scale(1.15);
    }
}

@keyframes hero-content-reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hero-forge-breathe {
    0%,
    100% {
        opacity: 0.58;
        transform:
            translateX(-50%)
            scale(0.94);
    }

    50% {
        opacity: 0.9;
        transform:
            translateX(-50%)
            scale(1.04);
    }
}

@keyframes forgeBreath {

    0%,
    100% {

        filter:
            brightness(1)
            drop-shadow(
                0 0 1rem
                rgba(255,101,0,.30)
            );

        transform:
            scale(1);
    }

    45% {

        filter:
            brightness(1)
            drop-shadow(
                0 0 1rem
                rgba(255,101,0,.30)
            );

        transform:
            scale(1);
    }

    60% {

        filter:
            brightness(1.08)
            drop-shadow(
                0 0 2.2rem
                rgba(255,125,20,.70)
            );

        transform:
            scale(1.012);
    }

    80% {

        filter:
            brightness(1.02)
            drop-shadow(
                0 0 1.5rem
                rgba(255,101,0,.45)
            );

        transform:
            scale(1.005);
    }
}

@keyframes hero-ember-rise {
    0% {
        opacity: 0;

        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(0.45);
    }

    10% {
        opacity: var(--ember-opacity);
    }

    72% {
        opacity:
            calc(
                var(--ember-opacity)
                * 0.5
            );
    }

    100% {
        opacity: 0;

        transform:
            translate3d(
                var(--ember-drift),
                -112vh,
                0
            )
            scale(0.12);
    }
}

@keyframes hero-scroll-pulse {
    0%,
    100% {
        opacity: 0.28;
        transform: scaleY(0.8);
        transform-origin: top;
    }

    50% {
        opacity: 1;
        transform: scaleY(1);
    }
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-height: 760px) {
    .hero__scroll {
        display: none;
    }

    .hero__actions {
        margin-bottom: 1rem;
    }
}

@media (max-width: 46rem) {
    .hero {
        padding-top: 7rem;
    }

    .hero__logo-stage {
        width: min(17rem, 68vw);
    }

    .hero__title {
        font-size: clamp(
            2.6rem,
            12vw,
            4.4rem
        );
    }

    .hero__actions {
        display: grid;
    }

    .hero__actions .button {
        width: 100%;
    }

    .hero__scroll {
        display: none;
    }
}