/* ==========================================================================
   HOMEPAGE INTRO PREVIEWS (Deann 10/7) — ?hero=window | title | gimbal
   template-parts/modules/hero.php + js/hero-intro.js. One of Jeremy's tours
   stands in until his hero video arrives (poster first, muted loop fades in).
   ========================================================================== */

/* ---------- Shared: the placeholder tour ---------- */
.hx-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #0f172a;
    container-type: size;
}
.hx-media__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}
.hx-media__player {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.9s ease;
}
.hx-playing .hx-media__player {
    opacity: 1;
}
.hx-media__player iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100cqw, 177.78cqh);
    height: max(100cqh, 56.25cqw);
    border: 0;
    /* covers the box and pushes YouTube's own chrome out of view */
    transform: translate(-50%, -50%) scale(1.18);
    pointer-events: none;
}

.hx-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Hidden until js/hero-intro.js plays the intro (shown anyway after 4s if it never runs) */
.hx-pre [data-hx-title] .hx-w,
.hx-pre .hx-ch,
.hx-pre .hx-knock__small,
.hx-pre [data-hx-fade] {
    opacity: 0;
    animation: hx-failsafe 0.6s ease 4s forwards;
}
@keyframes hx-failsafe {
    to { opacity: 1; }
}
.hx [data-hx-title] .hx-w,
.hx .hx-ch,
.hx .hx-knock__small,
.hx .hx-float {
    display: inline-block;
}
.hx.hx-in [data-hx-fade] {
    animation: hx-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s backwards;
}
@keyframes hx-fade-up {
    from { opacity: 0; translate: 0 18px; }
    to { opacity: 1; translate: 0 0; }
}

/* Tighter copy + cue so the card can be bigger */
.hx .hx-sub {
    margin-top: 28px;
}
.hx .hx-cue {
    margin-top: 20px;
}

/* ---------- Pinned modes (window, title): the hero holds while you scroll ---------- */
#hero.hx--window,
#hero.hx--title {
    height: calc(100vh + 220vh);
    height: calc(100svh + 220vh);
    padding: 0 !important;
}
.hx-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 104px 0 22px;
}
.hx-meta--stage {
    position: absolute;
    left: 28px;
    bottom: 28px;
    z-index: 6;
    opacity: 0;
    translate: 0 14px;
    pointer-events: none;
    transition: opacity 0.5s ease, translate 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hx-arrived .hx-meta--stage {
    opacity: 1;
    translate: 0 0;
    pointer-events: auto;
}

/* ---------- Window: fly through the card ---------- */
.hx-window {
    position: absolute;
    inset: 0;
    clip-path: inset(50% 50% 50% 50%);
}
.hx--window .hx-media {
    will-change: transform;
}
.hx-window::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 18, 39, 0.6), rgba(0, 18, 39, 0) 32%);
    opacity: 0;
    transition: opacity 0.5s ease;
}
.hx-arrived .hx-window::after {
    opacity: 1;
}
.hx-frame {
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 51px rgba(196, 154, 78, 0.28), 0 30px 60px -24px rgba(2, 34, 90, 0.4);
    pointer-events: none;
    opacity: 0;
}
.hx--window .hx-card {
    width: min(100%, 820px, calc((100svh - 420px) * 1.6));
    aspect-ratio: 16 / 10;
    margin-inline: auto;
    visibility: hidden;
}
/* Headline above the card: navy, with the first word in deep gold (gold-on-white
   alone is too faint to read) */
.hx-headline {
    margin: 0 0 22px;
    font-size: clamp(2.25rem, min(6.2vw, 9vh), 5rem);
    letter-spacing: -0.02em;
    color: #02225a;
    white-space: nowrap;
    will-change: transform, opacity;
}
.hx-w--accent {
    background: linear-gradient(135deg, #e2c36d 0%, #be9141 45%, #8c6a21 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-right: 0.04em;
}
.hx.hx-in [data-hx-title] .hx-w {
    animation: hx-word 1s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--hx-i, 0) * 0.09s) backwards;
}
@keyframes hx-word {
    from { opacity: 0; translate: 0 0.45em; scale: 0.72; filter: blur(8px); }
    to { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
}
/* Project chip + "Watch the Video" sit in the window's bottom-left corner (js positions them) */
.hx--window .hx-meta--stage {
    left: 0;
    top: 0;
    right: auto;
    bottom: auto;
    flex-wrap: nowrap;
    translate: none;
    transition: opacity 0.5s ease 0.15s;
}
.hx--window.hx-open .hx-meta--stage {
    opacity: 1;
    pointer-events: auto;
}
.hx--window .hx-meta--stage .mx-hv__chip {
    min-width: 0;
    flex-shrink: 1;
}
.hx-meta .mx-hv__sound {
    flex: none;
    white-space: nowrap;
}
/* The same button lives in the card, so not twice */
.hx--window .hx-sub > button,
.hx--gimbal .hx-sub > button {
    display: none;
}
.hx-media__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.9s ease;
}
.hx-playing .hx-media__video {
    opacity: 1;
}
.hx-intro {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.hx-intro__line {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}
.hx-intro__drone {
    filter: drop-shadow(0 4px 6px rgba(2, 34, 90, 0.35));
}
.hx-intro .mx-rotor {
    transform-box: fill-box;
    transform-origin: center;
    animation: mx-rotor 0.18s linear infinite;
}

/* ---------- Title: the tour plays inside the headline ---------- */
.hx-titlefx {
    position: absolute;
    inset: 0;
    isolation: isolate;
}
.hx--title .hx-media {
    will-change: transform;
}
.hx-knock,
.hx-outline {
    position: absolute;
    inset: 0;
    will-change: transform;
}
.hx-knock {
    background: #ffffff;
    color: #000000;
    mix-blend-mode: screen; /* white hides the tour, black letters show it */
}
.hx-outline {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(212, 175, 55, 0.95);
}
.hx-knock__inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 100px;
    bottom: 236px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
    font-weight: 800;
    line-height: 0.84;
    text-align: center;
    white-space: nowrap;
}
.hx-knock__big {
    font-size: min(27vw, 44vh);
    letter-spacing: -0.045em;
}
.hx-knock__small {
    margin-top: 0.14em;
    font-size: min(8.4vw, 12vh);
    letter-spacing: 0.01em;
    text-transform: uppercase;
}
#hero.hx--title .hx-decor {
    z-index: 0; /* glow + air currents over the white, not under it */
}
.hx--title .hx-stage {
    justify-content: flex-end;
}
.hx--title .hx-stage > .container {
    position: relative;
}
.hx.hx-in .hx-ch {
    animation: hx-rise 1.05s cubic-bezier(0.16, 1, 0.3, 1) calc(0.1s + var(--hx-i, 0) * 0.08s) backwards;
}
.hx.hx-in .hx-knock__small {
    animation: hx-rise 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.45s backwards;
}
.hx.hx-in .hx-outline {
    animation: hx-fade 1.4s ease 0.9s backwards;
}
@keyframes hx-rise {
    from { opacity: 0; translate: 0 0.4em; }
    to { opacity: 1; translate: 0 0; }
}
@keyframes hx-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---------- Gimbal: the card hovers like a stabilized drone camera ---------- */
.hx--gimbal [data-mx="hero-card"] {
    animation: hx-land 1.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    will-change: transform, scale, translate;
}
@keyframes hx-land {
    0% { opacity: 0; translate: 0 -110px; scale: 0.86; }
    55% { opacity: 1; translate: 0 10px; scale: 1; }
    78% { translate: 0 -4px; }
    100% { translate: 0 0; scale: 1; }
}
.hx-media--card {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 10;
}
.hx--gimbal [data-hx-card]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(0, 18, 39, 0.4), transparent 24%),
        linear-gradient(to top, rgba(0, 18, 39, 0.55), transparent 30%);
}
/* lens glare that follows the tilt */
.hx--gimbal [data-hx-card]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: radial-gradient(circle at var(--hx-gx, 50%) var(--hx-gy, 40%), rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 46%);
    mix-blend-mode: soft-light;
}
.hx-shadow {
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: -34px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(2, 34, 90, 0.3), rgba(2, 34, 90, 0));
    pointer-events: none;
}
.hx-hud {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    color: #ffffff;
    font: 600 11px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    letter-spacing: 0.12em;
}
.hx-hud__c {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 0 solid rgba(255, 255, 255, 0.85);
}
.hx-hud__c--tl { top: 16px; left: 16px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 6px; }
.hx-hud__c--tr { top: 16px; right: 16px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 6px; }
.hx-hud__c--bl { bottom: 16px; left: 16px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 6px; }
.hx-hud__c--br { bottom: 16px; right: 16px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 6px; }
.hx-hud__rec {
    position: absolute;
    top: 23px;
    left: 48px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.hx-hud__rec i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff4d4d;
    box-shadow: 0 0 8px rgba(255, 77, 77, 0.8);
}
.hx-playing .hx-hud__rec i {
    animation: mx-rec 1.2s steps(1, end) infinite;
}
.hx-hud__tc {
    position: absolute;
    top: 23px;
    right: 48px;
    font-variant-numeric: tabular-nums;
    opacity: 0.9;
}
/* gimbal level marks: stay level while the card rolls */
.hx-hud__level {
    position: absolute;
    left: 18px;
    right: 18px;
    top: 50%;
    height: 0;
}
.hx-hud__level i {
    position: absolute;
    top: -1px;
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.75);
}
.hx-hud__level i:first-child { left: 0; }
.hx-hud__level i:last-child { right: 0; }
.hx-meta--card {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    z-index: 6;
    justify-content: space-between;
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
    #hero.hx--title {
        height: calc(100vh + 140vh);
        height: calc(100svh + 140vh);
    }
    /* DeAnn 10/22: on phones the video stays in its card - no pinned scroll, no grow, no
       "Scroll to fly in" cue; the page scrolls straight on to the next section. */
    #hero.hx--window {
        height: auto;
    }
    .hx--window .hx-stage {
        position: relative;
        height: auto;
        padding-bottom: 40px;
    }
    .hx--window .hx-cue {
        display: none !important;
    }
    .hx-stage {
        padding-top: 88px;
    }
    .hx--window .hx-card {
        width: 100%;
    }
    .hx-headline {
        margin-bottom: 16px;
        font-size: 11vw;
        line-height: 1.02;
        white-space: normal;
    }
    .hx .hx-headline .hx-w--accent {
        display: block; /* "360°" on its own line */
    }
    .hx-meta--stage {
        left: 16px;
        right: 16px;
        bottom: 18px;
        flex-wrap: wrap;
    }
    .hx-knock__inner {
        top: 84px;
        bottom: 236px;
    }
    .hx-knock__big {
        font-size: 35vw;
    }
    .hx-knock__small {
        font-size: 9.8vw;
    }
    .hx-hud__rec,
    .hx-hud__tc,
    .hx-hud__level {
        display: none;
    }
    .hx-meta--card {
        justify-content: flex-end;
        left: 12px;
        right: 12px;
        bottom: 12px;
    }
    .hx-meta--card .mx-hv__chip,
    .hx--window:not(.hx-arrived) .hx-meta--stage .mx-hv__chip {
        display: none;
    }
}

/* ---------- Phones: headline + sub-text paint with the page (427771) ----------
   Hidden until the intro reached them, the sub-text became the mobile LCP at 12.9 s.
   They now sit in their final place from the first paint, so the box never moves or
   changes size after it is painted (427771 S3: the rise-and-scale version of this fade
   moved the text into place, which counted as a layout shift on phones - CLS 0.048 to
   0.181 - and pushed the LCP timestamp out to whenever the growing text reached full
   size, 3.5 s to 4.0 s). Only opacity and blur change now, so the final rect is there
   from frame one. The same animation in hx-pre and hx-in, so it does not restart when
   js/hero-intro.js swaps the classes. */
@media (max-width: 767px) {
    .hx.hx-pre [data-hx-title] .hx-w,
    .hx.hx-in [data-hx-title] .hx-w,
    .hx.hx-pre [data-hx-fade],
    .hx.hx-in [data-hx-fade] {
        opacity: 1;
        animation: none;
    }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    .hx.hx-pre [data-hx-title] .hx-w,
    .hx.hx-in [data-hx-title] .hx-w {
        animation: hx-word-fade-in 1s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--hx-i, 0) * 0.09s) backwards;
    }
    /* 10/22: no fade on the sentence under the card - it is the phone LCP element, and the fade
       waited on the main thread (3.6 s render delay in PageSpeed). */
}
@keyframes hx-word-fade-in {
    from { opacity: 0; filter: blur(8px); }
    to { opacity: 1; filter: blur(0); }
}
@keyframes hx-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---------- Reduced motion: no pinning, no intro ---------- */
@media (prefers-reduced-motion: reduce) {
    #hero.hx--window,
    #hero.hx--title {
        height: auto;
    }
    .hx-stage {
        position: relative;
    }
    .hx--gimbal [data-mx="hero-card"] {
        animation: none;
    }
}

/* ---------- Quote button beside "Watch the Video" (Jeremy 10/21: visible on the first screen) ---------- */
.mx-hv__quote {
    display: inline-flex;
    flex: none;
    align-items: center;
    padding: 9px 16px;
    border-radius: 999px;
    background: #ffffff;
    color: #02225a;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(2, 34, 90, 0.18);
    transition: background 0.3s ease, translate 0.3s ease;
}
.mx-hv__quote:hover,
.mx-hv__quote:focus-visible {
    background: #f3efe3;
    translate: 0 -1px;
}
/* With three items the small first-screen window has no room for the project chip (it shrank to one
   letter), so the chip waits until the window fills the screen, as it already does on phones. */
.hx--window:not(.hx-arrived) .hx-meta--stage .mx-hv__chip {
    display: none;
}

/* Jeremy 10/22: the one-line headline is wider than the 820px card box on most screens, and a
   centred line that overflows spills to the right only, so it sat off-centre. As a flex row it
   overflows equally on both sides; the gap stands in for the spaces between the word spans. */
@media (min-width: 768px) {
    .hx--window .hx-headline {
        display: flex;
        justify-content: center;
        column-gap: 0.18em;
    }
}

/* 10/22: on phones the card stays small, so "Watch the Video" + "Get a Custom Quote" were 16px
   wider than it and ran off its right edge. Slightly tighter buttons fit inside. */
@media (max-width: 767px) {
    .hx--window .hx-meta--stage {
        gap: 8px;
    }
    .hx--window .hx-meta--stage .mx-hv__sound,
    .hx--window .hx-meta--stage .mx-hv__quote {
        padding-left: 11px;
        padding-right: 11px;
    }
}