/**
 * Styles for the global site-behavior script (see js/site-behavior.js):
 * the fixed header's scroll shell states, the heading slide-up reveal,
 * the parallax image/background mechanism, and the magnetic-button hook.
 */

/*
 * Heading reveal: js/site-behavior.js wraps every h1/h2's words in
 * .cw-split__w (a fixed-height, overflow-hidden clip box) around an
 * inner <span> that starts translated fully below its own box and
 * animates to translateY(0) once the heading scrolls into view (the
 * .cw-in class, added by an IntersectionObserver). Each word's
 * transition-delay is staggered via the --cw-split-d custom property set
 * inline per word, so they cascade in left-to-right rather than moving
 * as one block.
 */
.cw-split .cw-split__w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: .08em;
    margin-bottom: -.08em;
}

.cw-split .cw-split__w > span {
    display: inline-block;
    transform: translateY( 110% );
    transition: transform 1s cubic-bezier( .16, 1, .3, 1 );
    transition-delay: var( --cw-split-d, 0s );
}

.cw-split.cw-in .cw-split__w > span {
    transform: none;
}

@media ( prefers-reduced-motion: reduce ) {
    .cw-split .cw-split__w > span {
        transform: none !important;
        transition: none !important;
    }
}

/*
 * css/bootstrap.min.css sets `:root{scroll-behavior:smooth}` (its own
 * reduced-motion-aware default). That fights the inertial scroll loop in
 * site-behavior.js: each of that loop's ~60/sec window.scrollTo() calls
 * would otherwise kick off a new native smooth-scroll animation toward a
 * target that's already moved again by the next frame, compounding into
 * exactly the jumpy/sluggish feel this is fixing. Scoped to the same
 * `hover:hover and pointer:fine` condition the JS uses to decide whether
 * the inertial loop runs at all, so touch/coarse-pointer devices keep
 * Bootstrap's native smooth-scroll for anchor-link jumps untouched.
 */
@media ( hover: hover ) and ( pointer: fine ) {
    html {
        scroll-behavior: auto !important;
    }
}

.main-header {
    /* NEW: FOUC fix. 'backwards' keeps it hidden during the 1s delay, then hands control back to your normal transitions once faded in. */
    animation: cwHeaderFOUC 0.5s ease 1s backwards;
    
    transition: transform .5s cubic-bezier( .16, 1, .3, 1 ), opacity .4s ease, color .4s;
}

/* FOUC animation keyframes */
@keyframes cwHeaderFOUC {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/*
 * Scrolled-down state: the header shrinks slightly and fades out rather
 * than sliding away, timed to match .cw-header-mini fading/scaling in
 * over the same duration (see below) — together they read as the header
 * morphing into the small favicon badge, and the reverse on scroll up.
 */
.main-header.cw-circle {
    opacity: 0;
    transform: scale( .92 );
    pointer-events: none;
}

/*
 * The frosted "solid" background lives on a ::before layer rather than on
 * .main-header itself: backdrop-filter on an element makes it the
 * containing block for its position:fixed descendants, which would trap
 * the fullscreen menu panel (fixed, rendered inside the header) inside the
 * header box once scrolled — the menu would only work at the top of the
 * page. The header's own z-index gives it a stacking context, so z-index
 * -1 keeps this layer behind the header content.
 */
.main-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba( 241, 241, 238, .85 );
    backdrop-filter: blur( 16px );
    -webkit-backdrop-filter: blur( 16px );
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease, background-color .4s;
}

.main-header.cw-solid::before {
    opacity: 1;
}

.main-header.cw-ondark {
    color: #fff;
}

.main-header.cw-ondark::before {
    background-color: rgba( 11, 31, 22, .8 );
}

/*
 * The favicon badge itself (markup in header.php): fixed, round, hidden
 * and shrunk down by default, faded/scaled in exactly when .main-header
 * carries .cw-circle (general sibling selector — it's the header's next
 * sibling in the DOM). Clicking it scrolls back to top (see
 * site-behavior.js), which naturally removes .cw-circle again as soon as
 * the resulting upward scroll is detected.
 */
.cw-header-mini {
    position: fixed;
    padding: 5px !important;
    top: 14px;
    left: 50%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: none;
    padding: 6px;
    box-sizing: border-box;
    box-shadow: 0 8px 26px rgba( 16, 21, 18, .2 );
    cursor: pointer;
    opacity: 0;
    transform: translateX( -50% ) scale( .4 );
    pointer-events: none;
    transition: opacity .4s ease, transform .5s cubic-bezier( .16, 1, .3, 1 );
    z-index: 999;
}

.main-header.cw-circle ~ .cw-header-mini {
    opacity: 1;
    transform: translateX( -50% ) scale( 1 );
    pointer-events: auto;
}

.cw-header-mini img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.cw-header-mini__fallback {
    font-weight: 800;
    font-size: 1.6rem;
    color: #101512;
}

/* Keep the badge below the WP admin toolbar too, matching .main-header's
   own admin-bar offset in style.css. */
body.admin-bar .cw-header-mini {
    top: 46px;
    padding: 5px;
}

@media screen and ( max-width: 782px ) {
    body.admin-bar .cw-header-mini {
        top: 60px;
    }
}

@media ( prefers-reduced-motion: reduce ) {
    .main-header.cw-circle {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .cw-header-mini {
        display: none;
    }
    
    .main-header {
        animation: none !important;
    }
}

/*
 * Parallax now applies automatically, site-wide, to every <img> and every
 * url()-based CSS background-image of a reasonable "photo" size — see
 * the IMAGE & BACKGROUND-IMAGE PARALLAX block in site-behavior.js for the
 * detection/exclusion rules (logos excluded, safety heuristics for
 * unclipped images). `data-parallax="0.12"` (the number is drift
 * strength) — or, wherever only a CSS class is available (e.g. a plain
 * Elementor Image widget's Advanced > CSS Classes field, no Pro
 * required), the plain class `cw-parallax` at the default strength — is
 * still there to force the *full* scale+drift treatment on a specific
 * element regardless of what the auto-detection would otherwise choose.
 * `overflow:hidden` here crops that full treatment's drift/scale so no
 * edge is ever revealed; it's redundant (but harmless) on elements that
 * already clip their own overflow.
 */
[data-parallax],
.cw-parallax {
    overflow: hidden;
}

[data-parallax] img,
[data-parallax] video,
.cw-parallax img,
.cw-parallax video {
    will-change: transform;
}

/* Magnetic pull hook — see [data-mag] handling in site-behavior.js */
[data-mag] {
    transition: transform .5s cubic-bezier( .16, 1, .3, 1 );
    will-change: transform;
}