/* ==========================================================================
   BANNER EDGE FADES AND ART DISSOLVE

   Two separate seams, both of which every NCG template had ending on a hard
   ruled line:

   1. THE EDGE VEIL — vertical. A hero ends where the page ground begins, and
      without help that boundary is a straight line across the viewport. One
      pseudo-element carries a veil at the top and bottom edge, painted in the
      neighbouring surface's OWN colour so the dissolve actually lands on it.
      min() caps keep the veil an edge on tall banners without swallowing
      short ones.

   2. THE ART DISSOLVE — horizontal. A split banner puts a copy panel beside
      an image, and the join between them is a hard vertical edge. A gradient
      carries the panel's colour across the seam so the art emerges from it.

   Ported from slat-theme, where both were written and proven, and generalised
   here so NCG, Auxentia and Auldmere get them too: slat-theme is a standalone
   parent, so nothing it holds reaches the other three. All nine NCG templates
   had banners and none had either treatment.

   --ncg-veil-top / --ncg-veil-bottom name the surface on each side. Both
   default to the page ground; a template whose neighbour is something else
   (a white filter bar, a tinted band) declares the override on its own banner.

   LAYER ORDER IS EXPLICIT AND IT MATTERS: banner art and tint at 1, the veil
   at 2, the copy at 3. Art lands at 3 under the blanket "> *" rule, which
   leaves a bright band down the copy column and a hard vertical edge where
   the image panel begins — so it is pulled back to 1 below.
   ========================================================================== */

:is(
    .ncg-split-header,
    .ncg-split-header-v2,
    .ncg-about-hero,
    .ncg-doc-hero,
    .ncg-libtax-hero,
    .ncg-profile-hero,
    .ncg-support-hero,
    .ncg-hero-banner,
    .ncg-veil
) {
    position: relative;
    isolation: isolate;
    --ncg-veil-top:    var(--ncg-color-bg-paper, #F9F8F4);
    --ncg-veil-bottom: var(--ncg-color-bg-paper, #F9F8F4);
    /* The banner's own ground. A brand that paints a different chrome sets
       --aux-chrome; everything else keeps NCG's pine. */
    --ncg-veil-chrome: var(--aux-chrome, var(--ncg-color-primary, #23312C));
}

/* Dark and High Contrast paint their own header bar, so the top veil has to
   dissolve into that bar rather than into the page ground behind it.
   .ncg-veil IS DELIBERATELY ABSENT HERE. These two rules assume the element is
   a hero sitting directly under the site header; .ncg-veil is the opt-in hook
   for a band anywhere in the page, whose neighbour is whatever section
   precedes it. Such a band declares both of its own edge colours, and having
   this override silently replace the top one -- at a higher specificity than
   the band's own class -- is the trap that would make it look wrong only in
   Dark and High Contrast. */
html[data-ncg-theme="dark"] :is(
    .ncg-split-header, .ncg-split-header-v2, .ncg-about-hero, .ncg-doc-hero,
    .ncg-libtax-hero, .ncg-profile-hero, .ncg-support-hero, .ncg-hero-banner
) { --ncg-veil-top: #16211B; }

html[data-ncg-theme="high-contrast"] :is(
    .ncg-split-header, .ncg-split-header-v2, .ncg-about-hero, .ncg-doc-hero,
    .ncg-libtax-hero, .ncg-profile-hero, .ncg-support-hero, .ncg-hero-banner
) { --ncg-veil-top: #000; }

:is(
    .ncg-split-header, .ncg-split-header-v2, .ncg-about-hero, .ncg-doc-hero,
    .ncg-libtax-hero, .ncg-profile-hero, .ncg-support-hero, .ncg-hero-banner, .ncg-veil
)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(to bottom, var(--ncg-veil-top),    transparent min(48px, 16%)),
        linear-gradient(to top,    var(--ncg-veil-bottom), transparent min(72px, 24%));
}

/* The copy rides above the veil. Real elements only: a pseudo-element inside
   :not() invalidates the whole selector list. */
:is(
    .ncg-split-header, .ncg-split-header-v2, .ncg-about-hero, .ncg-doc-hero,
    .ncg-libtax-hero, .ncg-profile-hero, .ncg-support-hero, .ncg-hero-banner, .ncg-veil
) > * { position: relative; z-index: 3; }

/* ...except the layers that are banner rather than copy. The art panel of a
   split banner and the tint over a full-bleed banner belong UNDER the veil,
   so the dissolve crosses the whole banner width. */
:is(.ncg-split-header, .ncg-split-header-v2, .ncg-hero-banner) > .ncg-header-image,
:is(.ncg-about-hero, .ncg-hero-banner) > .ncg-hero-overlay { z-index: 1; }

/* --- The art dissolve. The copy panel's colour is carried across the seam so
   the image emerges from it instead of butting against it. The first
   declaration is the fallback for engines without color-mix(). */
:is(.ncg-split-header, .ncg-split-header-v2, .ncg-hero-banner) > .ncg-header-image {
    position: relative;
}
:is(.ncg-split-header, .ncg-split-header-v2, .ncg-hero-banner) > .ncg-header-image::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
        #23312C 0%,
        rgba(35, 49, 44, 0.72) 24%,
        rgba(35, 49, 44, 0.25) 46%,
        transparent 64%);
    background: linear-gradient(90deg,
        var(--ncg-veil-chrome) 0%,
        color-mix(in srgb, var(--ncg-veil-chrome) 72%, transparent) 24%,
        color-mix(in srgb, var(--ncg-veil-chrome) 25%, transparent) 46%,
        transparent 64%);
}

/* Stacked: the art sits ABOVE the copy (column-reverse), so the veil rises
   from the bottom edge instead of sweeping in from the left. */
@media (max-width: 768px) {
    :is(.ncg-split-header, .ncg-split-header-v2, .ncg-hero-banner) > .ncg-header-image::before {
        background: linear-gradient(to top, #23312C 0%, rgba(35, 49, 44, 0) 45%);
        background: linear-gradient(to top, var(--ncg-veil-chrome) 0%, transparent 45%);
    }
}

/* A banner is decoration behind text. Someone who has asked for less motion
   is not asking for less contrast, so nothing here is animated — but a
   forced-colors user gets no decorative gradients at all, because they would
   be flattened to a system colour and could only reduce legibility. */
@media (forced-colors: active) {
    :is(
        .ncg-split-header, .ncg-split-header-v2, .ncg-about-hero, .ncg-doc-hero,
        .ncg-libtax-hero, .ncg-profile-hero, .ncg-support-hero, .ncg-hero-banner, .ncg-veil
    )::before,
    :is(.ncg-split-header, .ncg-split-header-v2, .ncg-hero-banner) > .ncg-header-image::before {
        display: none;
    }
}