/* =============================================================================
   Wünderosity — Homepage tree scroll-reveal ("scrubbed" tree)
   Loaded ONLY on the homepage. Scope everything under .tree-scroll so the
   default (non-hero, pure-CSS tree) homepage is completely unaffected.
   ============================================================================= */

/* --- Scroll runway: provides scroll length so the tree can be pinned while
       we scrub from the canopy (top) down to the roots (bottom). --- */
.tree-scroll {
    position: relative;
    height: calc(100vh + 80vh);   /* extra 80vh of scroll to scrub through */
}

/* The hero becomes the pinned "viewport window" during the scrub. It is
   given an opaque paper backdrop so the full-page fixed .wc-bg behind it is
   masked here — only the scrubbed hero tree image shows (no double image). */
.tree-scroll > .tree-hero {
    position: sticky;
    top: 0;
    min-height: 100vh;
    height: 100vh;
    background: var(--paper, #FDFBF7);
}

/* The base .tree-stage is capped at min(1000px, 100%). Inside the scrub
   runway we want the tree to fill the full viewport width, so widen it. */
.tree-scroll .tree-stage {
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    max-height: none;
    height: 100%;
}

/* --- The tall transparent-background watercolor tree PNG ---
   The source is a centred tree on a light wash canvas. By default the image
   renders at 100% width (no zoom) so it never overflows the viewport. A mild
   centre zoom (--tree-zoom, e.g. 1.05) closes any side gaps without over-
   cropping; the overflow:hidden hero clips the pale edges.
   Horizontal centring uses margins (not the transform) so the JS can keep
   the transform free for the vertical scrub. --- */
.tree-scroll .tree-hero-custom.tree-scrub-img {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: calc(var(--tree-zoom, 1) / 2 * -100%);
    width: calc(var(--tree-zoom, 1) * 100%);
    height: auto;
    max-width: none;
    object-fit: fill;
    will-change: transform;
    z-index: 1;
}

/* Keep the interactive hotspots + brand title above the tree image. */
.tree-scroll .hotspot,
.tree-scroll .tree-door {
    z-index: 6;
}

/* ---------------------------------------------------------------------------
   Mobile: gentler scrub adapted to the continuing-branch layout. Shorter
   runway and a less-tall image so the roots arrive as the branch nav begins.
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .tree-scroll {
        height: calc(100vh + 50vh);
    }
    .tree-scroll > .tree-hero {
        min-height: 100vh;
        height: 100vh;
        padding-top: 0;
    }
    .tree-scroll .tree-hero-custom.tree-scrub-img {
        --tree-zoom: 1;
        width: calc(var(--tree-zoom, 1) * 100%);
        margin-left: calc(var(--tree-zoom, 1) / 2 * -100%);
    }
}

/* ---------------------------------------------------------------------------
   Fixed mini-tree "header"
   After the user scrolls past the hero scrub, a small version of the tree
   shrinks into the top of the viewport and stays fixed, like a header bar.
   Hidden by default (.hidden); tree-scroll.js toggles .in-view once scrolled.
   --------------------------------------------------------------------------- */
.tree-mini {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
    background: rgba(253, 250, 242, 0.85);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 14px rgba(27, 31, 56, 0.12);
    transform: translateY(-100%);
    transition: transform 0.45s var(--ease-ink, ease);
}
.tree-mini.hidden { transform: translateY(-100%); }
.tree-mini.in-view { transform: translateY(0); }
.tree-mini-inner {
    display: inline-flex;
    align-items: center;
    height: 56px;
    text-decoration: none;
}
.tree-mini-img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

/* ---------------------------------------------------------------------------
   Reduced motion / no-JS fallback: disable the scrub. When reduced motion is
   preferred we reveal the whole tree statically (roots visible) via a fixed
   downward translation. When JS simply never runs, the image rests at
   translateY(0) showing the canopy — a graceful, un-animated default.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .tree-scroll {
        height: 100vh !important;
    }
    .tree-scroll > .tree-hero {
        position: relative !important;
        top: auto !important;
    }
    .tree-scroll .tree-hero-custom.tree-scrub-img {
        transform: translate3d(0, -220vh, 0) !important;
        transition: none !important;
    }
    .tree-mini { display: none !important; }
}

/* ---------------------------------------------------------------------------
   3-PART BACKGROUND MODE
   tree_mode=parts: the tree is split across the page instead of one tall
   scrubbed hero. Canopy fills the hero, trunk tiles the body, roots anchor
   the footer. Opaque paper backgrounds keep the layers from bleeding over
   each other.
   --------------------------------------------------------------------------- */
.tree-hero-canopy {
    overflow: hidden;
}
.tree-hero-canopy .tree-canopy-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    z-index: 1;
}
.tree-hero-canopy .tree-door,
.tree-hero-canopy .hotspot {
    z-index: 6;
}

/* Trunk: fixed, vertically-tiling layer behind the body content. The trunk
   image is repeated along the Y axis so it reads as a continuous trunk the
   whole way down the page. */
.tree-parts-trunk {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -2;
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: top center;
    pointer-events: none;
}

/* Footer roots: the bottom third of the tree sits in the footer. An opaque
   paper block above it masks the tiled trunk so the roots read as their own
   stage. */
.site-footer-parts {
    position: relative;
    overflow: hidden;
    background: var(--paper, #FDFBF7);
}
.footer-roots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    z-index: 0;
    pointer-events: none;
}
.site-footer-parts .container {
    position: relative;
    z-index: 1;
}