/*
 * Header: transparent at rest, pill on scroll, hide-on-down / reveal-on-up.
 *
 * Behaviour ported from electres.com, whose header does four things:
 *   1. sits fixed and fully transparent over the hero;
 *   2. past ~30px the inner container contracts into a rounded translucent
 *      "pill" that floats inside the viewport rather than spanning it;
 *   3. scrolling down past ~60px slides the whole header off the top on a
 *      fast leave curve;
 *   4. scrolling up brings it back on a slower spring curve.
 *
 * The asymmetric easing is the part that makes it feel considered: leaving is
 * cubic-bezier(0.55, 0, 1, 0.45) at 0.28s — quick and out of the way — while
 * returning is cubic-bezier(0.22, 1, 0.36, 1) at 0.5s, which overshoots
 * slightly and settles. Swapping them makes it feel sluggish going and abrupt
 * coming back.
 *
 * State classes are applied by stickyHeader() in assets/js/main.js.
 */

/*
 * Fixed at all times, not absolute.
 *
 * The theme had .header--transparent as position:absolute and swapped to fixed
 * only once .sticky was added. A header that animates off-screen and back has
 * to be fixed the whole time, or the transform would scroll away with the
 * document. Both are out of flow, so nothing below moves.
 */
.header-one.header--transparent,
.tmp-header-area-start.header--sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    padding: 0;
    background: transparent;
    /* Spring return. The fast leave curve is on .is-hidden below. */
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* Slide off the top when scrolling down — snappy. */
.tmp-header-area-start.is-hidden {
    transform: translateY(-100%);
    transition: transform 0.28s cubic-bezier(0.55, 0, 1, 0.45);
}

/*
 * The pill.
 *
 * The header stays transparent; it is the inner .container that gains the
 * background. That way the pill has margins on both sides and reads as
 * floating over the page rather than as a bar clamped to the top.
 */
.tmp-header-area-start > .container {
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    transition:
        background 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        padding 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        max-width 0.65s cubic-bezier(0.25, 1, 0.5, 1),
        width 0.65s cubic-bezier(0.25, 1, 0.5, 1),
        margin-top 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.tmp-header-area-start.is-scrolled > .container {
    width: 98%;
    max-width: 1600px;
    margin-top: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
    /* Tuned for the dark theme: opaque enough to carry white nav text over
       any hero, translucent enough that the blur is visible doing work. */
    border-radius: 14px;
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(20, 20, 20, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.75);
    animation: pillAppear 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* backdrop-filter is what sells the pill; without it the translucent
   background just looks washed out. Fall back to near-opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tmp-header-area-start.is-scrolled > .container {
        background: rgba(20, 20, 20, 0.94);
    }
}

@keyframes pillAppear {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
        box-shadow: none;
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/*
 * Mobile: collapse rather than hide.
 *
 * Sliding the header away on a phone means the menu button is gone whenever
 * the reader is moving down the page, which is exactly when they are most
 * likely to want it. So below lg the header stays put and the pill tightens
 * instead — same visual language, no loss of access.
 */
@media (max-width: 991.98px) {
    .tmp-header-area-start.is-collapsed > .container {
        width: 94%;
        margin-top: 8px;
        padding-top: 4px;
        padding-bottom: 4px;
        border-radius: 12px;
        border-color: rgba(255, 255, 255, 0.1);
        background: rgba(20, 20, 20, 0.85);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* Never translate the header off-screen on touch. */
    .tmp-header-area-start.is-hidden {
        transform: none;
    }
}

/*
 * The theme's own sticky treatment — a full-width solid bar centred with
 * transform: translateX(-50%) — is superseded. Its transform in particular
 * would fight the translateY the hide animation needs, since the two live on
 * the same property.
 */
.header--sticky.sticky {
    position: fixed !important;
    left: 0;
    transform: none;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/*
 * Reduced motion: keep the state changes, drop the movement. Someone who has
 * asked for less motion still benefits from the header getting out of the way
 * — it just should not slide or spring to do it.
 */
@media (prefers-reduced-motion: reduce) {

    .header-one.header--transparent,
    .tmp-header-area-start.header--sticky,
    .tmp-header-area-start.is-hidden,
    .tmp-header-area-start > .container {
        transition-duration: 0.001ms;
    }

    .tmp-header-area-start.is-scrolled > .container {
        animation: none;
    }
}

/*
 * Announcement bar.
 *
 * Rendered as the first child of the fixed header (partials/header.php), not
 * as a strip above it. The header is position:fixed and overlays the hero, so
 * a bar in normal flow would scroll underneath it; nesting it means it
 * inherits the hide-on-scroll-down and reveal-on-scroll-up transforms for
 * free.
 *
 * It collapses to zero height the moment the header contracts into its
 * scrolled pill. The pill is a compact floating element and a full-bleed strip
 * welded to it reads as a layout bug, so the bar earns its space only while
 * the reader is still at the top of the page.
 */
.announcement-bar {
    overflow: hidden;
    max-height: 44px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(20, 20, 20, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 1;
    transition:
        max-height 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.announcement-bar-text {
    margin: 0;
    padding: 11px 0;
    color: var(--color-gray);
    font-family: var(--font-secondary);
    font-size: 13px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
}

.announcement-bar-text span {
    margin: 0 8px;
    color: var(--color-primary);
}

.tmp-header-area-start.is-scrolled .announcement-bar,
.tmp-header-area-start.is-collapsed .announcement-bar {
    max-height: 0;
    opacity: 0;
    border-bottom-color: transparent;
}

/* Two lines fit on a phone, so the collapsed height has to allow for it or
   the second line is clipped before the bar animates away. */
@media only screen and (max-width: 767px) {
    .announcement-bar {
        max-height: 64px;
    }

    .announcement-bar-text {
        padding: 8px 0;
        font-size: 11px;
        line-height: 18px;
        letter-spacing: 0.04em;
    }

    .announcement-bar-text span {
        margin: 0 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .announcement-bar {
        transition-duration: 0.001ms;
    }
}