/**
 * Homepage hero logo — one fixed wordmark that shrinks with scroll.
 *
 * Mirrors react-src AnimatedLogo geometry:
 *   - padding: (verticalMargin + menuHeight)vw  horizontalMargin vw  0
 *              = (site-header-pad-y + site-header-logo-h) at hero
 *     top padding shrinks to `site-header-pad-y` at progress=1 so the
 *     SVG top lines up with .site-header__logo on non-home pages.
 *   - horizontal: just --page-gutter on both sides. No burger reservation:
 *     the burger floats on top at the top-right corner (same as react-src).
 *   - height: lerped from hero-h (inner container / aspect) to
 *             --site-header-logo-h so parked size matches the static header.
 *
 * The logo lives INSIDE #swup-main (via site-page.php $is_hero) so it rides
 * the Swup curtain transform on navigation — #swup-main must NOT carry a
 * permanent `will-change: transform`, otherwise position:fixed descendants
 * become #swup-main-relative even at rest and the hero logo would scroll
 * with the page.
 */

/* Wordmark geometry — published at :root so .site-page--hero can reserve the
 * exact vertical space the fixed hero logo occupies (no guessed gap). */
:root {
    /* Aspect ratio from the SVG viewBox (563.64 / 75.202). */
    --home-logo-aspect: 7.495;
    /* Hero SVG height fills the inner container (viewport − 2 × gutter). */
    --home-logo-hero-h: calc(
        (100vw - 2 * var(--page-gutter))
        / var(--home-logo-aspect)
    );
}

/* Homepage: only the hero logo is shown; the static header logo is hidden
 * (the hero logo already shrinks down to the same final size). */
body.home .site-header__logo {
    visibility: hidden;
}

/* Defensive: home-logo is only rendered on front-page. */
body:not(.home) .home-logo {
    display: none;
}

/* ---- Mobile (<= 768px) ----
 * Mirror react-src: on mobile the home page renders the StaticLogo (the
 * small wordmark in the header), not the AnimatedLogo. We hide the hero
 * .home-logo and reveal the static .site-header__logo even on the home
 * page. The home-logo scroll progress JS keeps running but has no visible
 * effect since .home-logo is display:none. */
@media (max-width: 768px) {
    body.home .home-logo {
        display: none;
    }

    body.home .site-header__logo {
        visibility: visible;
    }
}

.home-logo {
    position: fixed;
    top: var(--site-nav-admin-bar, 0);
    left: 0;
    right: 0;
    box-sizing: border-box;
    /* padding-top lerps from (2·pad-y + logo-h) ≈ 6.18vw at hero down to pad-y
       at progress=1 (so the SVG top aligns with .site-header__logo on other
       pages).
       The 2·pad-y component comes from react-src stacking: AnimatedLogo is
       `position: absolute; top: auto` inside HeaderContainer, so its static-
       position resolves at HeaderContainer's CONTENT-box top — which inherits
       HeaderContainer's `padding-top: verticalMargin`. AnimatedLogo then adds
       its own `padding-top: verticalMargin + menuHeight`. Total accumulated
       offset of the SVG from the viewport top = 2 × verticalMargin + menuHeight.
       (Earlier we only accounted for one verticalMargin, putting the wordmark
       42px too high at 1920px.) */
    padding-top: calc(
        var(--site-header-pad-y)
        + (var(--site-header-pad-y) + var(--site-header-logo-h))
          * (1 - var(--home-logo-progress, 0))
    );
    padding-right: var(--page-gutter);
    padding-bottom: 0;
    padding-left: var(--page-gutter);
    color: #000;
    text-decoration: none;
    z-index: 50;
}

.home-logo svg {
    display: block;
    width: auto;
    max-width: 100%;
    color: inherit;
    height: calc(
        var(--home-logo-hero-h)
        + (var(--site-header-logo-h) - var(--home-logo-hero-h)) * var(--home-logo-progress, 0)
    );
}