/* Landing page styles — hero scene + trust strip.
 * Part of the landing bundle; see landing-base.css for load order and rules.
 */

/* -------------------------------------------------------------------- hero */

.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(30rem, 78vh, 46rem);
    padding-block: var(--g-space-2xl);
    background: var(--g-navy-950);
    color: var(--g-ink-inverse);
    overflow: hidden;
}

.hero-stage {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* Text-side scrim. The swoosh layers are lively enough to compete with the
 * headline; this weights the copy side darker so type always wins. ::before
 * (not ::after) so it paints beneath .hero-content. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        95deg,
        rgba(0, 11, 38, 0.95) 0%,
        rgba(0, 11, 38, 0.88) 34%,
        rgba(0, 11, 38, 0.52) 62%,
        rgba(0, 11, 38, 0.34) 100%
    );
}

.hero-layer {
    position: absolute;
    /* Layers are oversized so parallax travel never exposes an edge. */
    inset: -15% 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    will-change: transform;
}

.hero-layer--photo {
    background-image: url("../img/hero.jpg");
    /* The supplied photo is a placeholder whose van lettering does not survive
     * close inspection. Blur keeps it reading as a scene rather than as text,
     * and the scrim above never falls below 0.34 so it stays that way. */
    filter: blur(2px) saturate(0.95) brightness(1.08);
    transform: scale(1.08);
}

.hero-layer--scrim {
    background-image: linear-gradient(
        155deg,
        rgba(0, 11, 38, 0.95) 0%,
        rgba(0, 16, 64, 0.80) 45%,
        rgba(1, 29, 94, 0.58) 100%
    );
}

/* Held well below text contrast -- these read as depth, not as content. */
.hero-layer--back {
    background-image: url("../img/brand/swoosh-back.svg");
    opacity: 0.55;
}

.hero-layer--mid {
    background-image: url("../img/brand/swoosh-mid.svg");
    opacity: 0.5;
}

.hero-layer--fore {
    background-image: url("../img/brand/swoosh-fore.svg");
    opacity: 0.8;
}

.hero-content {
    position: relative;
    width: 100%;
    max-width: var(--g-container);
}

.hero-title {
    margin-bottom: var(--g-space-s);
    line-height: 0.92;
}

.hero-title__mark,
.hero-title__sub {
    display: block;
    font-family: var(--g-font-display);
    font-style: italic;
    font-weight: var(--g-weight-heavy);
    text-transform: uppercase;
}

.hero-title__mark {
    font-size: var(--g-step-6);
    letter-spacing: var(--g-tracking-tight);
}

.hero-title__sub {
    font-size: var(--g-step-4);
    letter-spacing: 0.01em;
}

.hero-tagline {
    font-size: var(--g-step-2);
    color: var(--g-ink-inverse);
    /* Wide enough to keep the tagline off a two-word orphan line on desktop. */
    max-width: 42rem;
    margin-bottom: var(--g-space-l);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-space-s);
    margin-bottom: var(--g-space-l);
}

.hero-strapline {
    font-family: var(--g-font-display);
    font-weight: var(--g-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--g-tracking-wide);
    color: var(--g-gold);
    font-size: var(--g-step-0);
}

.hero-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: var(--g-space-s);
    translate: -50% 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-scroll-cue__chevron {
    width: 14px;
    height: 14px;
    border-right: 2px solid var(--g-chrome-500);
    border-bottom: 2px solid var(--g-chrome-500);
    rotate: 45deg;
}

.hero-scroll-cue:hover .hero-scroll-cue__chevron {
    border-color: var(--g-gold);
}

/* ------------------------------------------------------------- trust strip */

.trust {
    background: var(--g-navy-700);
    color: var(--g-ink-inverse);
    border-block: 1px solid var(--g-line-inverse);
    padding-block: var(--g-space-s);
}

.trust-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--g-space-s) var(--g-space-m);
    text-align: center;
}

.trust-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--g-space-s) var(--g-space-m);
    list-style: none;
}

.trust-list__item {
    font-family: var(--g-font-display);
    font-weight: var(--g-weight-heavy);
    font-size: var(--g-step-1);
    text-transform: uppercase;
    letter-spacing: var(--g-tracking-wide);
    position: relative;
}

/* Gold dot separators, as on the wrap. */
.trust-list__item + .trust-list__item::before {
    content: "";
    position: absolute;
    left: calc(var(--g-space-m) / -2);
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--g-gold);
    translate: -50% -50%;
}

.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--g-space-3xs);
    color: var(--g-gold);
    font-family: var(--g-font-display);
    font-weight: var(--g-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--g-tracking-wide);
}

.trust-badge__icon {
    width: 1.2em;
    height: 1.2em;
}

/* ------------------------------------------------------------- breakpoints */

@media (min-width: 1024px) {
    /* Reserve the right of the hero for the photograph -- but cap it.
     *
     * A percentage padding resolves against the containing block's width, which
     * here is .hero (full viewport), not the 1140px container. Uncapped, it grew
     * with the viewport while the container did not: at 3200px CSS width the
     * padding reached 960px and left 148px of a 1140px container for text,
     * clipping the headline. Zooming out widens the CSS viewport, so this showed
     * up as the hero "compacting to the left".
     *
     * min() keeps the proportional behaviour at normal widths and stops it from
     * ever eating the copy column. */
    .hero-content {
        padding-right: min(30%, 22rem);
    }
}