/**
 * Homepage v2 — next-day scroll-scrub section.
 *
 * Loaded only on page-home-v2.php, after main-v2.css. Namespaced ah-nds so
 * nothing collides with the original .ah-nextday rules still in main-v2.css.
 *
 * Default (no JS / reduced motion): static state A over the poster frame.
 * .ah-nds--live   set by nextday-scrub-v2.js once the scrub initializes.
 * .ah-nds--drawn  set after the first canvas draw; swaps poster → canvas.
 */

/* Browser scroll anchoring fights ScrollTrigger's pin revert/measure cycle
   and can corrupt trigger positions; v2 pins, so disable it page-wide. */
body {
    overflow-anchor: none;
}

/* White ground, matching the frames' own background exactly.
   The section is tall (viewport + scrub distance) and the stage is a sticky
   100svh child — the browser keeps it glued natively. No ScrollTrigger pin,
   no pin-spacer, no fixed-position handoff, so the un-stick at the bottom is
   flush by construction. */
.ah-nds {
    position: relative;
    background: var(--surface);
    height: calc(100vh + 320vh);
    height: calc(100svh + 320vh);
}

.ah-nds__pin {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}

/* Static fallback: no scrub distance, no forced viewport height. */
.ah-nds:not(.ah-nds--live) { height: auto; }

.ah-nds:not(.ah-nds--live) .ah-nds__pin {
    position: relative;
    height: auto;
    min-height: 82vh;
}

.ah-nds__chrome {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(14px, 2.4vh, 26px);
    padding-top: clamp(84px, 11vh, 128px);
    text-align: center;
}

.ah-nds__title { margin: 0; }

.ah-nds__stage {
    position: relative;
    flex: 1;
    min-height: 0;
}

.ah-nds:not(.ah-nds--live) .ah-nds__stage { min-height: 58vh; }

/* Soft white fade over the frame's top and side edges, melting the image
   into the page ground. Below the overlays, above the canvas. */
.ah-nds__stage::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    /* Wide, eased fades on both sides so the frame's off-white ground and its
       edges never show against the section; top fade unchanged. */
    background:
        linear-gradient(to bottom, #FFFFFF 0%, rgba(255, 255, 255, 0) 18%),
        linear-gradient(to right, #FFFFFF 0%, #FFFFFF 6%, rgba(255, 255, 255, .92) 12%, rgba(255, 255, 255, .55) 22%, rgba(255, 255, 255, .18) 31%, rgba(255, 255, 255, 0) 38%),
        linear-gradient(to left, #FFFFFF 0%, #FFFFFF 6%, rgba(255, 255, 255, .92) 12%, rgba(255, 255, 255, .55) 22%, rgba(255, 255, 255, .18) 31%, rgba(255, 255, 255, 0) 38%);
}

.ah-nds__poster,
.ah-nds__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ah-nds__poster {
    object-fit: contain;
    object-position: center bottom;
}

.ah-nds__canvas { opacity: 0; }
.ah-nds--drawn .ah-nds__canvas { opacity: 1; }
.ah-nds--drawn .ah-nds__poster { opacity: 0; }

/* Two overlay coordinate systems. __space is JS-sized to the drawn frame
   rect — markers inside it stay glued to the head at any crop (it can
   overflow the stage). __float spans the visible stage — pills and callouts
   inside it never leave the viewport. */
.ah-nds__space {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.ah-nds__float {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.ah-nds__state { position: absolute; inset: 0; }
.ah-nds__state--b2 { pointer-events: none; }

/* ----------------------------------------------------------- state A pills */
.ah-nds-pill {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: var(--r-pill);
    background: var(--guarantee-tint);
    color: var(--ink);
    font-size: var(--t-18);
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(80, 76, 68, .08);
}

.ah-nds-pill__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--guarantee);
    flex: none;
}

.ah-nds-pill__dot--blue { background: var(--accent); }
.ah-nds-pill__dot--lime { background: var(--guarantee); }

/* The drawn icons carry their own coloured disc, so they take the dot's slot
   at the size the comp draws it - noticeably bigger than the 14px bullet they
   replace, which is why the pill's left padding tightens to keep it from
   floating in the middle of its own gutter. */
.ah-nds-pill:has(.ah-nds-pill__icon) { padding-left: 10px; }
.ah-nds-pill__icon {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex: none;
}

.ah-nds-pill--tl { left: 12%;  top: 26%; }
.ah-nds-pill--tr { right: 7%;  top: 32%; }
.ah-nds-pill--bl { left: 10%;  top: 52%; }
.ah-nds-pill--br { right: 9%;  top: 56%; }

/* --------------------------------------------------------- state B markers */
/* Two rings, and no more: the marker element itself is an invisible box and
   both circles are pseudo-elements. The ring tied to the card currently being
   described lights up; the ones already covered fade back.
   Keeping the state on the pseudo-elements also keeps it clear of the inline
   transform the scrub timeline writes onto the marker itself — a CSS rule on
   .ah-nds__marker { transform } would simply lose to that inline style. */
.ah-nds__marker {
    position: absolute;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px; /* center on the % anchor */
    border-radius: 50%;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .25));
    opacity: 0; /* timeline */
}
.ah-nds__marker::before,
.ah-nds__marker::after {
    content: '';
    position: absolute;
    border: 2px solid rgba(255, 255, 255, .95);
    border-radius: 50%;
    pointer-events: none;
    transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.ah-nds__marker::before { inset: 0; }   /* outer */
.ah-nds__marker::after  { inset: 6px; } /* inner */

/* The point the open card is talking about. */
.ah-nds__marker.is-active::before,
.ah-nds__marker.is-active::after { border-color: #7FD0F0; }
.ah-nds__marker.is-active::before { transform: scale(1.16); }

/* Already covered: still marked on the head, but quieter. */
.ah-nds__marker.is-past::before,
.ah-nds__marker.is-past::after { border-color: rgba(255, 255, 255, .55); }

/* Inner ring: the reference markers are concentric double rings. */
.ah-nds__marker::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 2px solid rgba(255, 255, 255, .95);
    border-radius: 50%;
}

/* Anchors mapped from the reference frame onto the 1920x1104 sequence. */
.ah-nds__marker--1 { left: 39%;   top: 44%; }
.ah-nds__marker--2 { left: 56%;   top: 38%; }
.ah-nds__marker--3 { left: 53.5%; top: 62%; }

/* -------------------------------------------------------- state B callouts */
/* The callout is now only a positioning anchor. The visible thing is the
   pill (the button inside it); the detail copy lives in a tooltip that opens
   on hover or focus of the pill, or of the ring marker it is joined to. */
/* The callout is a positioning anchor holding a pill and its body. The scrub
   gives it one of three states, and CSS animates between them — driving the
   blur off a class rather than scrubbing filter() through GSAP keeps it cheap.
   The filter also makes each callout its own stacking context, so the body
   cannot escape it; the callout's own z-index handles who sits on top. */
.ah-nds-callout {
    position: absolute;
    z-index: 1;
    opacity: 0;
    transform: translateY(14px);
    filter: blur(0);
    transition: opacity .5s var(--ease), transform .5s var(--ease),
                filter .5s var(--ease);
}
/* the card being described */
.ah-nds-callout.is-active {
    z-index: 5;
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}
/* already covered: collapsed back to its pill, pushed behind, out of focus */
.ah-nds-callout.is-past {
    z-index: 1;
    opacity: .5;
    transform: translateY(0);
    filter: blur(3px);
}
.ah-nds-callout__pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 26px 10px 10px;
    border-radius: var(--r-pill);
    background: var(--surface);
    box-shadow: 0 14px 34px rgba(80, 76, 68, .14);
    font-family: var(--font-head);
    font-size: var(--t-22);
    font-weight: 600;
    line-height: 1.15;
    color: var(--ink);
    white-space: nowrap;
}

/* Reference layout: chip on its own row, title and body stacked beneath. */
.ah-nds-callout--fue { left: 2.5%; top: 44%; }

/* The detail copy. Anchored under the pill and aligned to whichever side the
   pill is anchored from, so it can never run off the edge of the stage. */
.ah-nds-callout__body {
    position: absolute;
    top: calc(100% + 10px);
    z-index: 2;
    width: max-content;
    max-width: 320px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid rgba(127, 208, 240, .75);
    box-shadow: 0 18px 40px rgba(80, 76, 68, .18);
    font-family: var(--font-body);
    font-size: var(--t-14);
    font-weight: 400;
    line-height: 1.55;
    color: var(--slate);
    white-space: normal;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.ah-nds-callout--fue .ah-nds-callout__body { left: 0; }
.ah-nds-callout--recovery .ah-nds-callout__body,
.ah-nds-callout--donor .ah-nds-callout__body { right: 0; }

/* Each tooltip borrows the hue of its own icon disc, sampled from the chip
   PNGs (#7DDAFC / #B7FE02 / #F79BF7). The lime especially had to be taken
   down in lightness before a hairline of it was visible on a white card —
   these are the same hues, darkened only until they actually read. */
.ah-nds-callout--fue .ah-nds-callout__body      { border-color: #4CC8F6; }
.ah-nds-callout--recovery .ah-nds-callout__body { border-color: #95CB0B; }
.ah-nds-callout--donor .ah-nds-callout__body    { border-color: #F797F7; }
/* Only the card currently being described is open. */
.ah-nds-callout.is-active .ah-nds-callout__body {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* The whole overlay is presentational: the sequence is driven by scroll
   position alone, so nothing here takes pointer or keyboard input. */
.ah-nds__state--b2 { pointer-events: none; }

/* The right-hand stack. Only one card is open at a time — the earlier ones
   collapse back to their pill — so Donor only has to clear Recovery's PILL,
   which is what leaves room to lift the whole column and give the last card
   the same breathing space at the bottom as the other two. */
.ah-nds-callout--recovery { right: 9%; top: 27%; }
.ah-nds-callout--donor    { right: 3%; top: 47%; }

.ah-nds-callout__chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

/* Chips are the uploaded design PNGs (Button1-3.png), circle included. */
.ah-nds-callout__chip img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
}

.ah-nds-callout__chip--fue { width: 54px; height: 54px; }

/* The body panels are a fixed pixel height (text) while the stage shrinks
   with the window, so on laptop-height screens the last card would reach the
   bottom edge and be clipped by the pin's overflow. Lift the column further
   there. */
@media (min-width: 861px) and (max-height: 820px) {
    .ah-nds-callout--recovery { top: 20%; }
    .ah-nds-callout--donor    { top: 42%; }
}

/* Dashed leaders from the markers to their pills; path geometry is computed
   in JS from live element positions, so they stay attached at any size. */
.ah-nds__lines {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.ah-nds__lines path {
    fill: none;
    /* pale blue so the leaders read over the white ground as well as the hair */
    stroke: rgba(112, 196, 238, .95);
    stroke-width: 1.75;
    stroke-dasharray: 5 5;
    opacity: 0;
    transition: opacity .45s var(--ease);
}
/* Each leader follows the state of the card it points at. */
.ah-nds__lines path.is-active { opacity: 1; }
.ah-nds__lines path.is-past   { opacity: .25; }/* Static fallback shows state A only. */
.ah-nds:not(.ah-nds--live) .ah-nds__space,
.ah-nds:not(.ah-nds--live) .ah-nds__state--b2{ display: none; }

/* ------------------------------------------------- seam to the community */
/* Belt and braces against the white sliver at the un-pin handoff: the
   community section overlaps the seam by a few px (imperceptible under its
   full-bleed image) and carries a dark ground, so neither pin-position
   rounding nor the desktop image drift can ever expose white between the
   dimmed scene and the photograph. */
.ah-nds + .ah-community {
    margin-top: -4px;
    background: var(--navy);
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 860px) {
    .ah-nds {
        height: calc(100vh + 260vh);
        height: calc(100svh + 260vh);
    }

    .ah-nds:not(.ah-nds--live) { height: auto; }

    .ah-nds__chrome { padding-top: clamp(76px, 10vh, 100px); }

    .ah-nds-pill {
        max-width: 46%;
        padding: 9px 14px;
        font-size: var(--t-14);
        white-space: normal;
    }

    .ah-nds-pill__icon { width: 24px; height: 24px; }
    .ah-nds-pill:has(.ah-nds-pill__icon) { padding-left: 7px; }

    .ah-nds-pill--tl { left: 3%;  top: 16%; }
    .ah-nds-pill--tr { right: 3%; top: 24%; }
    .ah-nds-pill--bl { left: 3%;  top: 46%; }
    .ah-nds-pill--br { right: 3%; top: 56%; }

    .ah-nds__marker { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
    .ah-nds__marker::after { inset: 4px; }

    .ah-nds__lines { display: none; }

    .ah-nds-callout__pill { font-size: var(--t-16); padding: 8px 16px 8px 8px; }
    .ah-nds-callout__chip { width: 36px; height: 36px; }
    .ah-nds-callout__chip--fue { width: 40px; height: 40px; }

    /* There is no room to stack three pills AND an open panel on a phone, so
       the three share one slot and cross-fade through it: the open card is the
       only one on screen, and the ring on the head carries the "which point is
       this" job that the blurred pills do on desktop. */
    .ah-nds-callout--fue,
    .ah-nds-callout--recovery,
    .ah-nds-callout--donor { left: 4%; right: 4%; top: 8%; }

    .ah-nds-callout.is-past { opacity: 0; filter: blur(0); }

    .ah-nds-callout__body,
    .ah-nds-callout--fue .ah-nds-callout__body,
    .ah-nds-callout--recovery .ah-nds-callout__body,
    .ah-nds-callout--donor .ah-nds-callout__body {
        left: 0;
        right: 0;
        max-width: none;
        width: auto;
    }
}

/* -------------------------------------------------- no-JS / reduced motion */
/* The scrub never runs for these visitors, so the overlay above is never
   revealed. The three cards are rendered again as a plain stack under the
   stage, and that is what they see instead. */
.ah-nds__static { display: none; }

.ah-nds:not(.ah-nds--live) .ah-nds__static {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
    width: 100%;
    max-width: var(--container);
    margin: var(--block-gap) auto 0;
    padding-inline: var(--gutter);
}
.ah-nds-static {
    padding: 24px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    background: var(--surface);
}
.ah-nds-static__chip { display: inline-flex; width: 54px; height: 54px; margin-bottom: 14px; }
.ah-nds-static__chip img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.ah-nds-static__title {
    margin: 0 0 8px;
    font-family: var(--font-head);
    font-size: var(--t-22);
    color: var(--ink);
}
.ah-nds-static__body { margin: 0; font-size: var(--t-14); line-height: 1.6; color: var(--slate); }

@media (max-width: 860px) {
    .ah-nds:not(.ah-nds--live) .ah-nds__static { grid-template-columns: 1fr; }
}

/* --- Leaders and rings take their card's colour (2026-09-07) --------------
   Renz: the dashed line and the circles should sit in the same colour family
   as the icon behind each label. Every leader and ring used to be the same
   pale blue regardless of which card it belonged to.

   The hue rides on a custom property set once per key on both the marker and
   its path; custom properties inherit, so the marker's pseudo-elements pick it
   up for free and the three state rules below stay generic.

   These are the darkened hues already proven on the card borders, not the raw
   chip colours: the chips are far too light to read on the white ground (the
   raw lime is 1.22:1 against white, effectively invisible as a hairline). */
.ah-nds__marker[data-nd-marker="fue"],
.ah-nds__lines path[data-nd-line="fue"]      { --nd-hue: 76, 200, 246; }
.ah-nds__marker[data-nd-marker="recovery"],
.ah-nds__lines path[data-nd-line="recovery"] { --nd-hue: 149, 203, 11; }
.ah-nds__marker[data-nd-marker="donor"],
.ah-nds__lines path[data-nd-line="donor"]    { --nd-hue: 247, 151, 247; }

.ah-nds__lines path { stroke: rgb(var(--nd-hue)); }

/* Not yet reached, currently being described, already covered. Same hue
   throughout so a ring is never the wrong colour; only the weight changes. */
.ah-nds__marker::before,
.ah-nds__marker::after           { border-color: rgba(var(--nd-hue), .55); }
.ah-nds__marker.is-active::before,
.ah-nds__marker.is-active::after { border-color: rgb(var(--nd-hue)); }
.ah-nds__marker.is-past::before,
.ah-nds__marker.is-past::after   { border-color: rgba(var(--nd-hue), .45); }