/*
Original Griddle Blocks CSS
https://www.originalgriddle.com
Daniel Morrison Cook
Morrison Sites.
*/

/* og/hero */

.og-hero {
    position: relative;
    overflow: hidden;
    min-height: 92vh;
    background: var(--og-black);
    background: radial-gradient(120% 100% at 80% 0%, #1a1108 0%, var(--og-black) 60%);
}

.og-hero__media {
    position: absolute;
    inset: 0;
}

.og-hero__media-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45%;
    height: 55%;
    object-fit: contain;
    object-position: center;
    opacity: 0.85;
}

.og-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.85) 100%);
}

.og-hero__burger {
    position: absolute;
    top: 50%;
    right: 4%;
    width: min(55vw, 640px);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
}

.og-hero__burger-img {
    width: 100%;
    height: auto;
}

.og-hero__inner {
    position: relative;
    z-index: 1;
    
    padding-top: 8rem;
    padding-bottom: 4rem;
    animation: og-hero-rise 0.8s ease-out both;
}

.og-hero__heading {
    font-family: var(--og-font-display);
    font-size: clamp(2.75rem, 8vw, 6rem);
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--og-white);
    max-width: 16ch;
}

.og-hero__sub {
    font-family: var(--og-font-body);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: var(--og-muted);
    max-width: 36ch;
    margin: 1.25rem 0 2rem;
}

@keyframes og-hero-rise {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 991.98px) {
    .og-hero__media {
        display: none;
    }

    .og-hero__burger {
        position: relative;
        z-index: 1;
        top: auto;
        right: auto;
        transform: none;
        width: min(90vw, 480px);
        margin: 6rem auto 0;
    }

    .og-hero__inner {
        min-height: auto;
        padding-top: 6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .og-hero__inner {
        animation: none;
    }
}