/**
 * Styling for the animated hero block.
 */

.animated-hero {
    position: relative;
    height: 150vh;
    max-width: min(100%, 3840px);
    margin-bottom: calc(var(--spacing-12) * -1);
    padding: 0;
    display: flex;
    flex-flow: column nowrap;
}

.animated-hero .scroll-region {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.animated-hero .media {
    position: sticky;
    top: var(--top-height);
    height: calc(100vh - var(--top-height));
}

.animated-hero .media canvas {
    position: absolute;
}

.animated-hero .media video {
    position: absolute;
    height: 100%;
    width: 100%;
    /* object-fit is supported by all latest browser versions (Dec. 2022...)
     * if not supported, video won't line up with image - probably not too much of an issue 👀 */
    object-fit: cover;
    opacity: 0;
}

.animated-hero .media.show-video canvas {
    opacity: 0;
}
.animated-hero .media.show-video video {
    opacity: unset;
}

.animated-hero .text-pane {
    width: 100%;
    max-width: 1320px;
    /* Centre the text-pane to the middle of the visible portion of the animated-hero. */
    transform: translateY(-50%);
    margin: calc((100vh - var(--top-height)) / 2) auto 0;
    padding: 0 var(--default-padding);
    box-sizing: border-box;
    font: var(--font-copy-lg);
    color: var(--color-copy-primary);
}

.animated-hero .heading {
    grid-column: 2 / -2;
    margin-bottom: var(--spacing-7);
    text-align: center;
}

.animated-hero .blurb {
    grid-column: 3 / -3;
    text-align: center;
}

.animated-hero .buttons {
    display: flex;
    margin-top: var(--spacing-10);
    justify-content: center;
    gap: var(--spacing-5);
}

/* Breakpoint M */
@media screen and (min-width: 768px) and (max-width: 1080px) {
    .animated-hero .heading {
        grid-column: 3 / -3;
    }
}

/* Breakpoint S */
@media screen and (min-width: 0px) and (max-width: 768px) {
    .animated-hero .heading {
        grid-column: 1 / -1;
    }

    .animated-hero .blurb {
        grid-column: 1 / -1;
    }

    .animated-hero .buttons {
        width: 250px;
        margin-left: auto;
        margin-right: auto;
        flex-direction: column;
        align-items: center;
    }
}