/* ==========================================================================
   MANCHESTER DISTINCTIVES
   --------------------------------------------------------------------------
   A thin layer of Manchester-only devices over a block set shared with the
   originating build. The palette and the typefaces already diverge completely
   — warm stock and slate against navy on white, a reading serif against
   Helvetica — but the *structure* still read as the same site twice: the same
   hero anatomy, the same section head, the same card plate.

   Everything here is additive. Switch the layer off (NARPO_DISTINCTIVES in
   narpo-distinctives.php) and the site returns exactly to what it was.

   The devices are all print, and all sourced from the branch's own material:
     · the three bendlets of the city's arms, as a section rule
     · printer's trim marks at a card's corners
     · a broadsheet masthead rule running out of the hero's kicker
     · a standfirst on the opening band
     · the arms themselves, held as a watermark at heraldic strength
   ========================================================================== */

/* ==========================================================================
   1 · The bendlet rule
   --------------------------------------------------------------------------
   Every section head on the site closes with a 2.5rem x 2px brass rule. It is
   correct, and it is also what any careful build would land on — a short
   accent underline is the default gesture, and it is the gesture the other
   site makes too.

   Manchester's arms are "Gules, three bendlets enhanced Or": a red field with
   three gold diagonals for the Irwell, the Medlock and the Irk. The three
   bendlets already survive in the branch shield and in the 200 Club mark.
   Stepping the section rule into three strokes carries the same device into
   the typography, and reads as a decision rather than an underline.

   Drawn as three gradients on the existing pseudo-element, so no block's
   markup changes and no block's selector has to be fought.
   ========================================================================== */

:root {
    --mn-bendlet-1: 2.5rem;     /* the Irwell  */
    --mn-bendlet-2: 1.55rem;    /* the Medlock */
    --mn-bendlet-3: 0.85rem;    /* the Irk     */
    --mn-bendlet-gap: 5px;      /* stroke pitch: 2px rule + 3px of stock */
}

.narpo-text-media__heading::after,
.narpo-news-cards__heading::after,
.narpo-news-cards__featured-heading::after,
.narpo-meet-team__heading::after,
.narpo-obituary-list__intro-heading::after,
.narpo-newsletter-list__heading::after,
.narpo-link-directory__heading::after,
.narpo-branch-directory__heading::after,
.narpo-holiday-list__heading::after,
.narpo-contact-form__heading::after,
.narpo-info-card__heading::after,
.narpo-gallery__heading::after {
    width: var(--mn-bendlet-1);
    height: calc(var(--mn-bendlet-gap) * 2 + 2px);
    background-color: transparent;
    background-image:
        linear-gradient(var(--mn-brass, #d99e3f) 0 0),
        linear-gradient(var(--mn-brass, #d99e3f) 0 0),
        linear-gradient(var(--mn-brass, #d99e3f) 0 0);
    background-size:
        var(--mn-bendlet-1) 2px,
        var(--mn-bendlet-2) 2px,
        var(--mn-bendlet-3) 2px;
    background-position:
        0 0,
        0 var(--mn-bendlet-gap),
        0 calc(var(--mn-bendlet-gap) * 2);
    background-repeat: no-repeat;
}

/* --- The rule draws itself, one stroke at a time -------------------------
   Three strokes arriving together is a graphic appearing; three arriving in
   sequence is a rule being ruled. The whole thing takes 0.72s and is over
   before the eye has finished the heading above it.

   Animated on `background-size` rather than on three elements, so the markup
   stays one pseudo-element: each stroke's width is held at 0 until its turn.
   `.is-inview` is set once by narpo-distinctives.js when the band arrives; if
   the script never runs, the rule is simply already drawn. */
@media (prefers-reduced-motion: no-preference) {
    .narpo-anim [data-narpo-inview]::after {
        background-size:
            0 2px,
            0 2px,
            0 2px;
    }

    .narpo-anim [data-narpo-inview].is-inview::after {
        animation: narpoBendletDraw 0.72s var(--narpo-ease, cubic-bezier(0.16, 1, 0.3, 1)) both;
    }

    @keyframes narpoBendletDraw {
        0% {
            background-size: 0 2px, 0 2px, 0 2px;
        }
        42% {
            background-size: var(--mn-bendlet-1) 2px, 0 2px, 0 2px;
        }
        72% {
            background-size: var(--mn-bendlet-1) 2px, var(--mn-bendlet-2) 2px, 0 2px;
        }
        100% {
            background-size:
                var(--mn-bendlet-1) 2px,
                var(--mn-bendlet-2) 2px,
                var(--mn-bendlet-3) 2px;
        }
    }
}

/* On slate the rule is the only warm thing in the band, so it holds a touch
   more weight — the middle stroke brightens rather than all three. */
.narpo-info-card__heading::after {
    background-image:
        linear-gradient(var(--mn-brass, #d99e3f) 0 0),
        linear-gradient(var(--mn-brass-bright, #e9bd68) 0 0),
        linear-gradient(var(--mn-brass, #d99e3f) 0 0);
}

/* ==========================================================================
   2 · The masthead rule
   --------------------------------------------------------------------------
   The hero opens with a 3.25rem brass kicker above the headline. On a
   broadsheet that mark would not stop dead — the rule runs out of it and
   across the measure, which is what tells you the page has a masthead rather
   than a heading. A hairline in slate-line does that here: it reads as ruled
   stock behind the kicker, never as a second accent.
   ========================================================================== */

.narpo-hero-cover__heading {
    position: relative;
}

.narpo-hero-cover__heading::before {
    position: relative;
    z-index: 1;
}

.narpo-hero-cover__content {
    position: relative;
}

.narpo-hero-cover__content::before {
    content: "";
    position: absolute;
    left: 0;
    /* 1px, aligned to the middle of the 2px kicker. */
    top: 1px;
    width: 100vw;
    max-width: none;
    height: 1px;
    background: linear-gradient(
        to right,
        var(--mn-slate-line, #374353) 0,
        var(--mn-slate-line, #374353) 62%,
        transparent 100%
    );
    opacity: 0.85;
    pointer-events: none;
    z-index: 0;
}

/* A hero carrying a photograph has enough going on; the rule is for the plain
   slate heroes, where it is doing the work the photograph would otherwise do. */
.narpo-hero-cover:has(.wp-block-cover__image-background) .narpo-hero-cover__content::before {
    display: none;
}

/* --- The masthead draws itself -------------------------------------------
   The hero's two rules are the first marks on the page, so they are the first
   thing that moves: the kicker draws from the left, and the hairline runs out
   of it a beat later. The headline's own fade-up (GSAP, 0.55s) lands between
   them, which is what makes the three read as one gesture rather than three.

   Pure CSS on pseudo-elements, because GSAP cannot address a ::before — and
   because a hero is always above the fold, so there is nothing to scroll-trigger.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .narpo-hero-cover__heading::before {
        transform-origin: left center;
        animation: narpoRuleDraw 0.62s var(--narpo-ease, cubic-bezier(0.16, 1, 0.3, 1)) both;
    }

    .narpo-hero-cover__content::before {
        transform-origin: left center;
        animation: narpoRuleDraw 0.9s var(--narpo-ease, cubic-bezier(0.16, 1, 0.3, 1)) 0.28s both;
    }

    @keyframes narpoRuleDraw {
        from { transform: scaleX(0); }
        to   { transform: scaleX(1); }
    }
}

/* ==========================================================================
   3 · The plate rule
   --------------------------------------------------------------------------
   A card plate turning its hairline brass is the right state change, and it is
   also the state change the other site makes. The section head already draws a
   brass rule to open a band; a card drawing the same rule across its own top
   edge, as the pointer arrives, ties the two scales of the page together and
   gives the plate a gesture rather than a colour.

   It wipes from the left, over the same duration as a content move rather than
   a state swap, so it reads as a rule being drawn — which is the point — and
   it sits on the plate's edge, never over the photograph.

   (An earlier pass put printer's trim marks at the plate's corners. They were
   a better idea on paper: at 7px of brass hairline they landed on top of the
   portrait rather than beside it, and said the same thing the border was
   already saying.)
   ========================================================================== */

.narpo-news-cards__cell,
.narpo-meet-team__card,
.narpo-link-directory__item {
    position: relative;
}

.narpo-news-cards__cell::before,
.narpo-meet-team__card::before,
.narpo-link-directory__item::before {
    content: "";
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--mn-brass, #d99e3f);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
    transition: transform var(--narpo-dur-long, 0.42s) var(--narpo-ease, ease);
}

.narpo-news-cards__cell:hover::before,
.narpo-news-cards__cell:focus-within::before,
.narpo-meet-team__card:hover::before,
.narpo-meet-team__card:focus-within::before,
.narpo-meet-team__card.is-open::before,
.narpo-link-directory__item:hover::before,
.narpo-link-directory__item:focus-within::before {
    transform: scaleX(1);
}

/* ==========================================================================
   4 · The standfirst
   --------------------------------------------------------------------------
   The opening band of a page carries the piece's first paragraph. In a
   newspaper that paragraph is set a size up and a shade darker — the
   standfirst — and the eye uses it to find the start of the article. Every
   band on both sites otherwise sets every paragraph identically, which is
   what makes a long page read as undifferentiated blocks of prose.

   Scoped to the first Split Studio band on a page only. A second one would
   stop being a standfirst and start being a font size.
   ========================================================================== */

.narpo-text-media:first-of-type .narpo-text-media__body > p:first-child {
    font-size: calc(var(--narpo-fs-body, 1.0625rem) * 1.08);
    line-height: 1.55;
    color: var(--mn-ink, #19222f);
}

/* ==========================================================================
   5 · Inline links
   --------------------------------------------------------------------------
   A prose link that changes colour on hover is the default gesture. A printed
   one is marked by its rule: the underline sits clear of the descenders and
   thickens under the cursor, and the colour barely moves.
   ========================================================================== */

:where(.entry-content, .wp-block-post-content) :where(p, li, dd) > a:not([class]) {
    text-decoration-line: underline;
    text-decoration-color: var(--mn-brass, #d99e3f);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition:
        text-decoration-thickness var(--narpo-dur-state, 0.16s) var(--narpo-ease-state, ease),
        text-decoration-color var(--narpo-dur-state, 0.16s) var(--narpo-ease-state, ease),
        color var(--narpo-dur-state, 0.16s) var(--narpo-ease-state, ease);
}

:where(.entry-content, .wp-block-post-content) :where(p, li, dd) > a:not([class]):hover,
:where(.entry-content, .wp-block-post-content) :where(p, li, dd) > a:not([class]):focus-visible {
    text-decoration-thickness: 2px;
    text-decoration-color: var(--mn-brass, #d99e3f);
    color: var(--mn-brass-ink, #8e4900);
}

/* ==========================================================================
   6 · The arms
   --------------------------------------------------------------------------
   The official achievement: a chequy border on the shield, an azure field
   bearing a pelican in her piety in gold, a griffin crest wearing the Sillitoe
   chequer as its mantling. Two things follow from actually looking at it.

   First, the chequer is not a liberty this build took — it is on the arms
   twice, on the shield's border and in the crest's mantling. The site's
   heaviest piece of furniture is quoting the branch's own heraldry.

   Second, the pelican in her piety — the bird wounding her own breast to feed
   her young — is the classical emblem of self-sacrifice, and the branch motto
   is "To serve those who themselves served". That is why the one placement at
   full strength is the seal closing the register of the branch's dead.

   The artwork is full colour on a white ground, so every watermark placement is
   on paper stock and uses `multiply`: the white ground multiplies away to
   nothing and the artwork prints as ink. It is never placed on slate, where a
   white ground would show as a lit box. The seal is the only placement at full
   strength, and it is small.

   --mn-arms is published by narpo-distinctives.php from a Site Settings image,
   and the same file adds `.narpo-has-arms` to the body only when that image
   exists. Everything below is scoped to that class, so with no artwork set the
   placements cost the layout nothing — not even the empty box a bare
   `var(--mn-arms, none)` would still reserve.
   ========================================================================== */

/* --- The register seal ---------------------------------------------------
   The obituaries page is the branch's record of its own, and a seal at the
   foot of a document is the one place heraldry belongs at full strength. It is
   small, centred, and the only full-colour heraldry on the site. */
.narpo-has-arms .narpo-obituary-list__inner::after {
    content: "";
    display: block;
    width: 100%;
    /* The seal plus the rule that closes the register above it, drawn as two
       background layers on one element. `::before` cannot do the rule — it
       inserts at the *start* of the register, which is where it went the first
       time: a brass mark stranded above 1,873 entries. */
    height: 168px;
    margin-top: clamp(2.75rem, 5vw, 4rem);
    background-image:
        linear-gradient(var(--mn-brass, #d99e3f) 0 0),
        var(--mn-arms);
    background-size:
        2.5rem 2px,
        96px auto;
    background-position:
        center top,
        center bottom;
    background-repeat: no-repeat, no-repeat;
    mix-blend-mode: multiply;
    opacity: 0.92;
}

/* --- The info card watermark ---------------------------------------------
   The band above the footer already carries the bee as a printed ghost at its
   left. The arms take the opposite edge, larger and bleeding off it, so the
   two never read as a pair of badges. */
.narpo-has-arms .narpo-info-card {
    position: relative;
    isolation: isolate;
}

.narpo-has-arms .narpo-info-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: clamp(-8rem, -6vw, -3rem);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(240px, 24vw, 400px);
    aspect-ratio: 1060 / 1400;
    background: var(--mn-arms) center / contain no-repeat;
    /* Grey first, then multiply: at full colour a royal blue and gold
       achievement fights the brass accent even at 6%. */
    filter: grayscale(1) brightness(1.18) contrast(0.9);
    mix-blend-mode: multiply;
    opacity: 0.075;
    pointer-events: none;
}

/* --- The letterhead ------------------------------------------------------
   Contact is the page a member writes to the branch from, and arms at the head
   of a letter is what arms are for. Held quietly behind the form's own measure. */
.narpo-has-arms .narpo-contact-form {
    position: relative;
    isolation: isolate;
}

.narpo-has-arms .narpo-contact-form::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: clamp(-7rem, -5vw, -2rem);
    top: clamp(-3rem, -3vw, -1rem);
    width: clamp(200px, 20vw, 320px);
    aspect-ratio: 1060 / 1400;
    background: var(--mn-arms) center / contain no-repeat;
    /* Brightened before it is greyed: the chequy border is half solid black,
       and at watermark strength it was the only part of the achievement you
       could read. Lifting the blacks lets the pelican carry it instead. */
    filter: grayscale(1) brightness(1.18) contrast(0.9);
    mix-blend-mode: multiply;
    opacity: 0.07;
    pointer-events: none;
}

/* The watermarks are decoration on a light ground and nothing else; where a
   browser cannot blend, the white ground would show as a pale block, so they
   are withdrawn rather than risked. */
@supports not (mix-blend-mode: multiply) {
    .narpo-has-arms .narpo-info-card::after,
    .narpo-has-arms .narpo-contact-form::before,
    .narpo-has-arms .narpo-obituary-list__inner::after {
        display: none;
    }
}

/* ==========================================================================
   7 · Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .narpo-news-cards__cell::before,
    .narpo-meet-team__card::before,
    .narpo-link-directory__item::before {
        transition-duration: 0.01ms;
    }
}

/* ==========================================================================
   8 · The masthead
   --------------------------------------------------------------------------
   The other build's menu is a centred row where each item grows its own
   underline on hover. That is the default gesture, and doing it in brass
   instead of blue does not make it a different menu.

   Here one mark travels. It sits under whichever item the pointer or the
   keyboard is on and slides between them, settling back on the current page
   when you leave — so the menu reads as a single ruled row with a position in
   it, rather than seven independent switches. It is the bendlet at nav scale:
   a 2px stroke with a shorter one under it.

   narpo-distinctives.js measures and moves it. With no script the mark never
   appears and the per-item underline below takes over unchanged.
   ========================================================================== */

.narpo-header__menu {
    position: relative;
}

.narpo-nav-indicator {
    position: absolute;
    left: 0;
    bottom: 0.05rem;
    z-index: 1;
    width: 0;
    height: 2px;
    background: var(--mn-brass, #d99e3f);
    opacity: 0;
    pointer-events: none;
    transform: translateX(0);
    transition:
        transform 0.34s var(--narpo-ease, cubic-bezier(0.16, 1, 0.3, 1)),
        width 0.34s var(--narpo-ease, cubic-bezier(0.16, 1, 0.3, 1)),
        opacity var(--narpo-dur-state, 0.16s) var(--narpo-ease-state, ease);
}

/* The second, shorter stroke — the bendlet, at the scale of a menu. */
.narpo-nav-indicator::after {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 42%;
    height: 2px;
    background: inherit;
    opacity: 0.55;
}

/* With the travelling mark in play, the per-item underline would draw the same
   line twice. It stays in the stylesheet as the no-script fallback and is
   simply suppressed once the mark exists. */
.narpo-header__menu:has(.narpo-nav-indicator) > li > a::after {
    display: none;
}

@media (max-width: 768px) {
    /* A stacked drawer has nothing for a mark to travel along. */
    .narpo-nav-indicator {
        display: none;
    }
}

/* --- The masthead settles on scroll --------------------------------------
   A broadsheet masthead is deep at the top of the page and a running head
   after it. The row tightens by a few pixels and the rule beneath it takes on
   weight — enough to feel, not enough to notice as a change of layout. */

.narpo-header {
    transition:
        padding-block var(--narpo-dur-long, 0.42s) var(--narpo-ease-state, ease),
        box-shadow var(--narpo-dur-long, 0.42s) var(--narpo-ease-state, ease),
        background-color var(--narpo-dur-long, 0.42s) var(--narpo-ease-state, ease);
}

.narpo-header.is-scrolled {
    box-shadow: 0 1px 0 0 var(--mn-rule, #d4cec5);
}

.narpo-header.is-scrolled .narpo-header__logo img {
    transform: scale(0.93);
}

.narpo-header__logo img {
    transform-origin: left center;
    transition: transform var(--narpo-dur-long, 0.42s) var(--narpo-ease-state, ease);
}

/* ==========================================================================
   9 · Band images arrive under a wipe
   --------------------------------------------------------------------------
   The band images fade and rise with everything else, which is the same
   entrance the text gets. A photograph mounted on a page is uncovered, not
   faded in: the plate wipes up from its own bottom edge while the picture
   inside settles the last per cent of a scale. The two together read as a
   print being laid down.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .narpo-anim .narpo-text-media__media[data-narpo-inview],
    .narpo-anim .narpo-member-cta__media[data-narpo-inview] {
        clip-path: inset(0 0 100% 0);
    }

    .narpo-anim .narpo-text-media__media[data-narpo-inview].is-inview,
    .narpo-anim .narpo-member-cta__media[data-narpo-inview].is-inview {
        animation: narpoPlateWipe 0.86s var(--narpo-ease, cubic-bezier(0.16, 1, 0.3, 1)) both;
    }

    .narpo-anim .narpo-text-media__media[data-narpo-inview] img,
    .narpo-anim .narpo-member-cta__media[data-narpo-inview] img {
        transform: scale(1.045);
    }

    .narpo-anim .narpo-text-media__media[data-narpo-inview].is-inview img,
    .narpo-anim .narpo-member-cta__media[data-narpo-inview].is-inview img {
        transform: scale(1);
        transition: transform 1.15s var(--narpo-ease, cubic-bezier(0.16, 1, 0.3, 1));
    }

    @keyframes narpoPlateWipe {
        from { clip-path: inset(0 0 100% 0); }
        to   { clip-path: inset(0 0 0 0); }
    }
}

/* A capped mark is artwork on a mount, not a photograph — it does not get
   uncovered and it does not scale. */
.narpo-text-media__media--capped[data-narpo-inview],
.narpo-text-media__media--capped[data-narpo-inview] img {
    clip-path: none;
    animation: none;
    transform: none;
}

/* ==========================================================================
   10 · The button fills
   --------------------------------------------------------------------------
   Every button on the site swaps its background colour on hover. The brass
   arriving as a fill that wipes across from the left says the same thing with
   a gesture, and it is the same gesture as the section rule and the card
   plate — which is what makes a set of animations read as one hand.

   The fill is a pseudo-element under the label, so the text colour can still
   cross-fade on its own timing. `isolation` keeps it off anything the button
   happens to sit on.
   ========================================================================== */

.narpo-btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.narpo-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--mn-brass, #d99e3f);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--narpo-dur-long, 0.42s) var(--narpo-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.narpo-btn:hover::before,
.narpo-btn:focus-visible::before {
    transform: scaleX(1);
}

/* The accent button is already brass, so its fill is the bright. */
.narpo-btn--light-blue::before,
.narpo-btn--accent::before {
    background: var(--mn-brass-bright, #e9bd68);
}

/* The ghost button has no plate to fill — it keeps its border swap. */
.narpo-btn--white::before,
.narpo-btn--ghost::before {
    display: none;
}

/* With the fill doing the work, the colour swap underneath it must not also
   animate, or the label changes before the plate reaches it. */
.narpo-btn {
    transition:
        color var(--narpo-dur-state, 0.16s) var(--narpo-ease-state, ease) 0.08s,
        border-color var(--narpo-dur-long, 0.42s) var(--narpo-ease, cubic-bezier(0.16, 1, 0.3, 1)),
        transform var(--narpo-dur-fast, 0.12s) var(--narpo-ease-state, ease);
}

.narpo-btn--dark-blue:hover,
.narpo-btn--primary:hover,
.narpo-btn--secondary:hover,
.narpo-btn--dark-blue:focus-visible,
.narpo-btn--primary:focus-visible,
.narpo-btn--secondary:focus-visible {
    background-color: var(--mn-slate-deep, #0a1423);
}

/* ==========================================================================
   11 · Reading progress
   --------------------------------------------------------------------------
   A hairline of brass across the top of the window, on the long registers and
   the legal pages only. On a three-band page a progress bar is decoration; on
   a register of 1,873 entries it is the only thing telling you how much of it
   there is.
   ========================================================================== */

.narpo-progress {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    height: 2px;
    pointer-events: none;
}

.narpo-progress__bar {
    display: block;
    height: 100%;
    background: var(--mn-brass, #d99e3f);
    transform: scaleX(0);
    transform-origin: left center;
}

/* ==========================================================================
   12 · Reduced motion
   --------------------------------------------------------------------------
   Everything above lands in its finished state and nothing travels.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .narpo-nav-indicator,
    .narpo-header,
    .narpo-header__logo img,
    .narpo-btn,
    .narpo-btn::before {
        transition-duration: 0.01ms;
    }

    .narpo-text-media__media[data-narpo-inview],
    .narpo-member-cta__media[data-narpo-inview] {
        clip-path: none;
        animation: none;
    }

    .narpo-text-media__media[data-narpo-inview] img,
    .narpo-member-cta__media[data-narpo-inview] img {
        transform: none;
    }

    .narpo-progress {
        display: none;
    }
}


/* --- Belt and braces on the plate wipe -----------------------------------
   The class above means nothing is hidden unless the script is running, and
   the script reveals anything still waiting after two seconds. This is the
   third guard: a pure-CSS animation that uncovers the plate at 2.4s no matter
   what, so a photograph cannot stay hidden even if the script is running but
   its observer never fires. */
@media (prefers-reduced-motion: no-preference) {
    .narpo-anim .narpo-text-media__media[data-narpo-inview]:not(.is-inview),
    .narpo-anim .narpo-member-cta__media[data-narpo-inview]:not(.is-inview) {
        animation: narpoPlateFailsafe 0.6s 2.4s both;
    }

    @keyframes narpoPlateFailsafe {
        to { clip-path: inset(0 0 0 0); }
    }
}


/* ==========================================================================
   13 · The bee arrives
   --------------------------------------------------------------------------
   The hero's watermark was simply there on the first frame, at full strength,
   which is the one thing a watermark should not be — it is the ghost behind
   the page, and a ghost that is present before the page is just a background
   image.

   It comes up after the headline has landed: 1.4s, from nothing, drifting a
   few pixels in and easing off its rotation. Slow enough that you notice it
   has appeared rather than watching it appear.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .narpo-anim .narpo-hero-cover__inner::after {
        animation: narpoBeeArrive 1.4s var(--narpo-ease, cubic-bezier(0.16, 1, 0.3, 1)) 0.55s both;
    }

    @keyframes narpoBeeArrive {
        from {
            opacity: 0;
            transform: translateY(-50%) translateX(2.5rem) rotate(-14deg) scale(1.04);
        }
        to {
            opacity: 0.055;
            transform: translateY(-50%) translateX(0) rotate(-8deg) scale(1);
        }
    }

    /* The news panel's crest and the card placeholders' bees follow the same
       rule — they are the same motif doing the same job. */
    .narpo-anim .narpo-news-cards--crest-panel .narpo-news-cards__crest {
        animation: narpoCrestArrive 1.2s var(--narpo-ease, cubic-bezier(0.16, 1, 0.3, 1)) 0.4s both;
    }

    @keyframes narpoCrestArrive {
        from { opacity: 0; }
        to   { opacity: 0.05; }
    }
}