/**
 * fp-hero: Nikama's front page hero (project block, not in the base theme).
 *
 * Two photos, one filling the top half and one the bottom half, with the
 * drawing logo (includes/nikama-logo) and the words Nikama / Design between
 * them. The animation order lives in the block attributes: the bottom photo
 * fades in and fires "bottom-image-done", the logo draws and fires
 * "hero-logo-drawn", then the two words fade in.
 *
 * Structure:
 *   .fp-hero.gb-container.alignfull.wrapper-alternate-color
 *     > figure > img.fp-hero-image.fp-hero-top-image
 *     + .hero-logo-container.gb-container (flex row)
 *         > h2.logo-animation-text + svg (shortcode [nikama_logo]) + h2.logo-animation-text
 *     + figure > img.fp-hero-image.fp-hero-bottom-image
 *
 * Height: the first screen minus the header (--header-height is set on <html>
 * by js/blocks/cover.js on every page).
 */

.fp-hero.gb-container {
    position: relative;
    overflow: clip;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: calc(100svh - var(--header-height, 98px));
    min-height: 560px;
}

.fp-hero > figure:has(> img.fp-hero-image) {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    margin: 0;
    z-index: 1;
}

.fp-hero > figure:has(> img.fp-hero-top-image) {
    top: 0;
}

.fp-hero > figure:has(> img.fp-hero-bottom-image) {
    bottom: 0;
}

.fp-hero img.fp-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fp-hero img.fp-hero-top-image {
    object-position: bottom center;
}

.fp-hero img.fp-hero-bottom-image {
    object-position: top center;
}

.fp-hero .hero-logo-container {
    position: relative;
    z-index: 3;
    height: 100%;
    flex-wrap: nowrap;
    column-gap: clamp(12px, 3vw, 48px);
}

.fp-hero .hero-logo-container h2 {
    margin: 0;
    font-size: clamp(1.6rem, 1rem + 2.4vw, 3.75rem);
    color: var(--heading-clr);
}

.fp-hero .hero-logo-container svg {
    max-height: 80%;
    max-width: 44%;
    width: auto;
}

@media only screen and (min-width: 990px) {
    .fp-hero .hero-logo-container h2 {
        margin-bottom: 80px;
    }
}

/* Under the merged header (front page tagged "transparent header", GP wraps
   the header and the hero in .header-wrap): the hero fills the whole screen
   and the logo row starts below the header box (its height plus the 30px
   margin the box has from 990px). */
.header-wrap .fp-hero.gb-container {
    height: 100svh;
}

.header-wrap .fp-hero .hero-logo-container {
    padding-top: var(--header-height, 98px);
    box-sizing: border-box;
}

@media only screen and (min-width: 990px) {
    .header-wrap .fp-hero .hero-logo-container {
        padding-top: calc(var(--header-height, 98px) + 30px);
    }
}