.masthead {
    @apply relative mx-auto h-auto bg-black overflow-hidden;
}


.page-template-template-dark-yellow .masthead .masthead--title.logo-mark:has(> span) > span::after,
.page-template-template-dark-yellow .masthead .masthead--title.logo-mark:not(:has(> span))::after {
    background-image: url(../../../src/images/logo-mark-black.svg);
}

.single.single-post .masthead.is-normal-height .masthead--container {
    @media (width >= 64rem) {
        padding-top: 150px !important;
    }
}

.masthead .masthead--inner {
    @apply relative h-full;
}

.masthead .masthead--video {
    /* Keep in layout on all breakpoints (hidden breaks Vimeo autoplay on mobile). */
    @apply block opacity-0 overflow-hidden pointer-events-none w-full absolute left-0 top-0 transition-opacity duration-1750;
    will-change: opacity;
    background:url(../../../src/images/video-background.jpg) center center / cover no-repeat transparent;
    aspect-ratio: 16/9;
    z-index: -1;
}

/* Hide homepage banner only during the intro, not after it ends. */
.home:not(.is-animation-video-ended):not(.is-completed) .banner,
.home.is-animation-video-playing .banner {
    @apply opacity-0 -translate-y-[200px];
}

.home.is-animation-video-playing {
    .masthead--video,
    .masthead--vimeo-video {
        @apply opacity-0;
    }
    #masthead--animation {
        @apply opacity-100;
    }
}

.home.is-animation-video-ended,
.home.is-completed {
    .banner {
        /* Opacity + slower translate-in; leave final transform free for .is-scrolled */
        @apply opacity-100 delay-0 duration-[1100ms];
    }
}

.home.is-animation-video-ended {
    #masthead--animation {
        @apply opacity-0;
    }
    .masthead--inner {
        @apply opacity-100 duration-[0ms] delay-[0ms];
    }

    .masthead--video,
    .masthead--vimeo-video {
        @apply opacity-100 transition-all duration-[1750ms] delay-[0ms];
    }

    .masthead--container {
        @apply opacity-100 duration-[1250ms] translate-y-0 delay-[1250ms] transition-all;
    }

    /* Full-height: panel fades in; text fades in down (simultaneous) */
    .masthead.is-full-height .masthead--container {
        @apply opacity-100 translate-y-0 duration-0 delay-[1250ms];
    }

    .masthead.is-full-height .masthead--content {
        opacity: 1;
    }

    .masthead.is-full-height .masthead--content-inner {
        opacity: 1;
        transform: translateY(0);
    }
}

.masthead--inner {
    @apply opacity-0;
}

#masthead--animation {

    @apply z-[40] overflow-hidden pointer-events-none w-full h-full absolute left-0 top-0 opacity-0 transition-opacity duration-1750;
    will-change: opacity;


    .masthead--animation-video,
    .masthead--animation-vimeo {
        @apply box-border h-[56.25vw] left-1/2 min-h-full min-w-full -translate-x-1/2 -translate-y-1/2 absolute top-1/2 w-[177.77777778vh] max-w-none z-10;
    }

    .masthead--animation-vimeo iframe {
        @apply box-border !h-full !left-1/2 !min-h-full !min-w-full !-translate-x-1/2 !-translate-y-1/2 absolute !top-1/2 !w-full !max-w-none z-10;
    }
}

.masthead .masthead--video video {
    @apply box-border h-[56.25vw] left-1/2 min-h-full min-w-full -translate-x-1/2 -translate-y-1/2 absolute top-1/2 w-[177.77777778vh] max-w-none z-10;
}

.masthead .masthead--vimeo-video {
    @apply overflow-hidden pointer-events-none w-full h-full xl:h-auto absolute left-0 top-0 z-40 xl:aspect-[16/9];
    will-change: opacity;
}

.masthead .masthead--vimeo-video iframe {
    @apply box-border !h-full xl:!h-[56.25vw] !left-1/2 !min-h-full !min-w-full !-translate-x-1/2 !-translate-y-1/2 absolute !top-1/2 !w-auto xl:!w-[177.77777778vh] !max-w-none z-10 origin-center scale-[3] xl:scale-100;
}

.masthead .masthead--image {
    @apply bg-no-repeat absolute top-0 left-0 right-0 bottom-0 z-30 bg-cover bg-center;
}

.masthead .masthead--overlay {
    @apply absolute top-0 left-0 right-0 bottom-0 z-40;
}

.masthead .masthead--container {
    @apply relative h-full flex opacity-0 -translate-y-[60px] flex-row flex-nowrap z-48 container mx-auto px-4 md:px-8 lg:px-12 xl:px-16;
    will-change: transform, opacity;
}

.masthead .masthead--content {
    @apply relative flex;
}

.masthead .masthead--content-inner {
    @apply max-w-[100%] md:max-w-[75%] lg:max-w-none;
}

.masthead.is-short-height .masthead--container {
    @apply py-0;
}

.masthead.is-short-height .masthead--content {
    @apply py-[90px] lg:pt-[180px] lg:pb-[120px];
}

.masthead.is-normal-height .masthead--container {
    @apply pt-[180px] pb-[30px] lg:pt-[200px] lg:pb-[30px];
}

.masthead.is-full-height {
    @apply w-full md:max-h-[56.25vw] md:h-screen;
}

.masthead.is-full-height .masthead--inner {
    @apply md:absolute top-0 left-0 w-full h-full;
}

/* Figma Group 33 — bottom-left translucent content panel */
.masthead.is-full-height .masthead--container {
    @apply w-full max-w-none mx-0 px-0 translate-y-0;
    align-items: flex-end !important;
    align-content: flex-end !important;
    justify-content: flex-start !important;
}

.masthead.is-full-height .masthead--content {
    @apply relative flex flex-col justify-center w-full md:w-[81%] max-w-[1166px] opacity-0;
    background-color: rgba(10, 23, 49, 0.7);
    padding: 2.5rem 1.5rem 2.75rem;
    transition: opacity 1.25s ease-out 1.25s;
    will-change: opacity;

    @media (width >= 48rem) {
        padding: 3.25rem 4rem 3.5rem;
    }

    @media (width >= 64rem) {
        padding: 3.25rem 6rem 3.9375rem;
    }
}

.masthead.is-full-height .masthead--content-inner {
    @apply p-0 w-full max-w-none opacity-0;
    transform: translateY(-40px);
    transition: opacity 1.25s ease-out 1.25s, transform 1.25s ease-out 1.25s;
    will-change: transform, opacity;
}

.masthead.is-full-height .masthead--title {
    @apply m-0 mb-0 text-[2.5rem] sm:text-[3.5rem] lg:text-[80px] font-light tracking-[-0.01em] leading-none;
}

.masthead.is-full-height .masthead--copy {
    @apply mt-[1.125rem] sm:mt-[1.375rem] text-[1rem] sm:text-[1.25rem] leading-[1.45] font-light;
}

.masthead.is-full-height .masthead--copy p {
    @apply mb-0;
}

.masthead.is-full-height .masthead--content-inner .masthead--progress {
    @apply w-[1px] absolute top-full bg-blue-200 left-0 h-0 hidden;
}

.masthead.is-full-height + .wp-block-group {
    @apply z-10 relative;
}

.masthead.is-full-height + .wp-block-group + .wp-block-group {
    @apply relative z-30;
}

    .masthead .masthead--content-inner {
        width: 100% !important;
    }

.masthead .masthead--title {
    @apply m-0 mb-4 relative z-20 block flex text-4xl sm:text-5xl lg:text-[60px] flex-col flex-wrap w-full;

    &.logo-mark {
        @apply inline-block w-auto text-pretty;

        span {
            @apply inline text-pretty;
        }

        &:has(> span) > span::after,
        &:not(:has(> span))::after,
        .logo-mark--keep::after {
            @apply h-[14px] w-[14px] mt-[8px];

            @media (width < 48rem) {
                height: 12px;
                width: 12px;
                margin-top: 5px;
                margin-left: 12px;
            }
        }
    }

}

.masthead--content-inner {
    transition: all 0.4s ease-in-out;
    will-change: opacity;
    opacity: 1;
}
body.is-completed {
    .masthead .masthead--video,
    .masthead .masthead--vimeo-video {
        z-index: 40;
        opacity: 1;
    }
}

/* No intro layer: show Vimeo/mp4 background immediately (otherwise opacity stays 0). */
.masthead:not(:has(#masthead--animation)) .masthead--video,
.masthead:not(:has(#masthead--animation)) .masthead--vimeo-video {
    z-index: 40;
    opacity: 1;
}

/* No front-page intro layer: show masthead title/content (archive templates, inner pages). */
.masthead:not(:has(#masthead--animation)) .masthead--inner {
    @apply opacity-100;
}

.masthead:not(:has(#masthead--animation)) .masthead--container {
    @apply opacity-100 translate-y-0;
}

.masthead:not(:has(#masthead--animation)).is-full-height .masthead--content,
.masthead:not(:has(#masthead--animation)).is-full-height .masthead--content-inner {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}

.masthead .masthead--title .is-secondary-before .masthead--secondary-title {
    @apply mb-[15px];
}

.masthead .masthead--title .is-secondary-after span {
    @apply order-1;
}

.masthead .masthead--title .is-secondary-after .masthead--secondary-title {
    @apply mt-[15px] mb-0 order-2;
}

.masthead .masthead--title span {
    @apply block w-full;
}

.masthead .masthead--title.logo-mark > span {
    @apply inline w-auto;
}

.masthead .masthead--title .logo-mark--keep {
    @apply inline whitespace-nowrap;
}

.masthead .masthead--secondary-title {
    @apply block not-italic text-2xl tracking-normal;
}

/* .masthead .masthead--copy {
    @apply mt-[10px] leading-[1.4] font-heading text-white;
} */

.masthead .masthead--copy p {
    @apply m-0 mb-5 text-pretty;
}

.masthead .masthead--copy > *:last-child {
    @apply mb-0;
}

.masthead .masthead--buttons {
    @apply flex w-full mt-[30px];
}

.masthead .masthead--button {
}

.masthead .masthead--advance-arrow {
    @apply absolute right-12 bottom-12 z-[50] flex items-center justify-center cursor-pointer;
    border-radius: 50%;
    border: 2px solid var(--blue-400);
    height:47px;
    width:47px;
}

.masthead .masthead--advance-arrow svg {
    @apply w-3 h-auto block fill-white;
}

/* Md and down: put content below the video instead of overlaying it */
@media (max-width: 1023px) {
    .masthead:has(.masthead--video, .masthead--vimeo-video) {
        height: auto;
        max-height: none;

        .masthead--inner {
            display: flex;
            flex-direction: column;
            position: relative;
            height: auto;
        }

        .masthead--video,
        .masthead--vimeo-video {
            position: relative;
            inset: auto;
            top: auto;
            left: auto;
            right: auto;
            bottom: auto;
            width: 100%;
            height: auto;
            min-height: 400px;
            aspect-ratio: 16 / 9;
            z-index: 1;
            pointer-events: none;
        }

        .masthead--vimeo-video iframe {
            width: 100% !important;
            height: 100% !important;
            min-width: 100% !important;
            min-height: 100% !important;
            left: 50% !important;
            top: 50% !important;
            transform: translate(-50%, -50%) scale(1) !important;
        }

        /* Logo intro: same 16:9 slot as the reel; keep base cover-crop centering on media. */
        #masthead--animation {
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: auto;
            min-height: 400px;
            aspect-ratio: 16 / 9;
            z-index: 40;
        }

        #masthead--animation .masthead--animation-vimeo iframe {
            width: 100% !important;
            height: 100% !important;
            min-width: 100% !important;
            min-height: 100% !important;
            left: 50% !important;
            top: 50% !important;
            transform: translate(-50%, -50%) scale(1) !important;
        }

        .masthead--image,
        .masthead--overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: auto;
            width: 100%;
            height: auto;
            min-height: 400px;
            aspect-ratio: 16 / 9;
            z-index: 2;
        }

        .masthead--container {
            position: relative;
            z-index: 3;
            height: auto;
            width: 100%;
            max-width: none;
        }

        &.is-short-height .masthead--content,
        &.is-normal-height .masthead--container {
            padding-top: 2rem;
            padding-bottom: 2rem;
        }

        &.is-full-height {
            height: auto;
            max-height: none;
        }

        &.is-full-height .masthead--inner {
            position: relative;
            height: auto;
        }

        &.is-full-height .masthead--container {
            align-items: stretch !important;
            align-content: stretch !important;
            justify-content: flex-start !important;
        }

        &.is-full-height .masthead--content {
            width: 100%;
            max-width: none;
        }

        .masthead--advance-arrow {
            bottom: auto;
            top: calc(max(400px, 56.25vw) - 3.75rem);
        }
    }
}

/* Mobile: animate masthead content in immediately while the logo intro plays */
@media (max-width: 1023px) {
    .home.is-animation-video-playing .masthead,
    .home.is-animation-video-ended .masthead,
    .home.is-completed .masthead {
        .masthead--inner {
            opacity: 1;
            transition: none;
        }

        .masthead--container {
            opacity: 1;
            transform: translateY(0);
            transition: opacity 1.25s ease-out 0s, transform 1.25s ease-out 0s;
        }

        &.is-full-height .masthead--container {
            opacity: 1;
            transform: translateY(0);
            transition: none;
        }

        &.is-full-height .masthead--content {
            opacity: 1;
            transition: opacity 1.25s ease-out 0s;
        }

        &.is-full-height .masthead--content-inner {
            opacity: 1;
            transform: translateY(0);
            transition: opacity 1.25s ease-out 0s, transform 1.25s ease-out 0s;
        }
    }
}