/* ---------------------------------------------------------------
   3.20.0: the marquee above the masthead (cydstumpel pattern).
   The block (matt-blocks/marquee-title) owns structure and the slide/clip
   motion on its view timeline --mb-marquee. This sheet owns everything
   Valencia: the sky band, the face and colour, and how the masthead
   reacts. Loaded only when the resolved template carries the block.
   Mockup: valencia-mockups/nav-marquee-masthead-hero.html
   --------------------------------------------------------------- */

/* position:sticky pins within its containing block; core wraps the part
   in a plain <div> exactly one marquee tall. Same fix as the masthead. */
div.wp-block-template-part:has(> .mb-marquee) { display: contents; }

/* The reveal footer sits at z-index 0, behind everything, so it can rise
   into view on scroll. The bar has no fill at rest, so the band paints a
   paper strip beneath itself as the bar's ground. The strip has to reach
   past the bar (64px) plus main's 24px top margin, so 120px leaves room
   for either to grow. Anything beyond main's top edge is hidden under
   main anyway (z-index 1, later in flow).

   The strip is the band's OWN box (padding, pulled back by an equal
   negative margin so the bar and main sit exactly where they did), not
   a box-shadow as in 3.20.0. iOS Safari showed a band of dark footer
   between the sky and the bar at the top of the page, closing as the bar
   scrolled up: the shadow was not painting under the bar there. The
   band has overflow: clip, and WebKit clipping an outset shadow with it
   is the likely reason; the padding route does not depend on any
   browser's shadow behaviour. The sky pseudo-elements stop 120px short
   so the gradient still ends at the band's visible foot. */
.valencia-marquee.mb-marquee {
  background: var(--wp--preset--color--base);   /* what the sky fades onto, and the strip */
  z-index: 1;
  padding-bottom: 120px;
  margin-bottom: -120px;
}

/* Sky and clouds, verbatim from pattern-sky-hero.css. Final stop is
   transparent SKY, not `transparent` (which greys the ramp). */
.valencia-marquee.mb-marquee::before,
.valencia-marquee.mb-marquee::after {
  content: "";
  position: absolute;
  inset: 0 0 120px; /* the band proper, not the paper strip below it */
  z-index: 0;
  pointer-events: none;
}
.valencia-marquee.mb-marquee::before {
  background: linear-gradient(
    var(--wp--preset--color--sky) 0%,
    var(--wp--preset--color--sky) 42%,
    color-mix(in srgb, var(--wp--preset--color--sky) 60%, transparent) 68%,
    color-mix(in srgb, var(--wp--preset--color--sky) 22%, transparent) 86%,
    color-mix(in srgb, var(--wp--preset--color--sky) 0%, transparent) 100%);
}
.valencia-marquee.mb-marquee::after {
  opacity: .55;
  filter: blur(14px);
  mix-blend-mode: overlay;
  background:
    radial-gradient(70px 26px at 16% 28%, #fff 0%, rgba(255,255,255,.7) 55%, transparent 75%),
    radial-gradient(110px 34px at 40% 20%, #fff 0%, rgba(255,255,255,.7) 55%, transparent 75%),
    radial-gradient(80px 28px at 70% 33%, #fff 0%, rgba(255,255,255,.7) 55%, transparent 75%),
    radial-gradient(130px 40px at 89% 18%, #fff 0%, rgba(255,255,255,.7) 55%, transparent 75%);
}
.valencia-marquee .mb-marquee__inner { position: relative; z-index: 1; }

/* The hero's type, one line, off the viewport: mark face, headline colour. */
.valencia-marquee .mb-marquee__title {
  font-family: var(--wp--preset--font-family--mark);
  font-weight: 700;
  font-size: max(5rem, 13.9583vw);
  text-transform: uppercase;
  color: var(--wp--preset--color--headline);
}

/* The bar over a marquee: no fill at rest, paper arrives as the sky leaves.
   Fallback (no scroll timelines, reduced motion) is core-masthead.css's
   translucent paper, untouched. Hide-on-scroll is not enqueued when the
   marquee is present (functions.php), so the bar stays put. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view(y)) {
    .valencia-marquee.mb-marquee::before,
    .valencia-marquee.mb-marquee::after {
      animation-name: valencia-sky-fade;
      animation-timeline: --mb-marquee;
      animation-range: entry 100lvh entry 135lvh;
      animation-fill-mode: both;
      animation-timing-function: cubic-bezier(.25, 1, .5, 1);
    }
    body:has(.mb-marquee) .valencia-masthead {
      background: transparent;
      border-bottom-color: transparent;
      transition: none;
      animation-name: valencia-bar-paper;
      animation-timeline: --mb-marquee;
      animation-range: entry 100lvh entry 135lvh;
      animation-fill-mode: both;
      animation-timing-function: cubic-bezier(.25, 1, .5, 1);
    }
    /* The blur layer (core-masthead.css puts backdrop-filter on ::after
       so the bar never becomes a containing block) arrives on the same
       timeline as the paper. */
    body:has(.mb-marquee) .valencia-masthead::after {
      backdrop-filter: none;
      animation-name: valencia-bar-blur;
      animation-timeline: --mb-marquee;
      animation-range: entry 100lvh entry 135lvh;
      animation-fill-mode: both;
      animation-timing-function: cubic-bezier(.25, 1, .5, 1);
    }
    body:has(.mb-marquee) .valencia-masthead::before {
      content: "";
      position: absolute;
      /* -1px, not 0: the bar keeps its 1px bottom border (transparent
         here, so the height matches the non-marquee bar) and the 92%
         paper background paints through that row, which showed as a
         hairline of paper under the rule. The rule now covers it. */
      left: 0; bottom: -1px;
      width: 100%; height: 2px;
      background: var(--wp--preset--color--accent-strong);
      clip-path: inset(0 100% 0 0);
      animation-name: valencia-bar-rule;
      animation-timeline: --mb-marquee;
      animation-range: entry 100lvh entry 110lvh;
      animation-fill-mode: both;
    }
  }
}

/* Retire the band once main has covered it. The band is sticky at the
   top of .wp-site-blocks, so it stays pinned for the WHOLE page: after
   main slides away at the end, the band (181px at 1000px wide) and its
   120px paper strip are what is left painting over the reveal footer's
   top -- at z-index 1 against the footer's 0. That is the "footer starts
   with its links jammed against the paper" report: the footer's xxl top
   padding and its 78vh of dark ground were there, hidden under paper.

   The trigger is main, not scroll distance: main hoists a view timeline
   (timeline-scope on .wp-site-blocks, the same trick the block uses on
   html so a sibling can read it), and exit-crossing 0% is the instant
   main's top edge crosses the viewport's top edge -- the band is fully
   under main from then on, whatever the viewport height. A short page
   whose main never reaches the top keeps the band, same as before.
   visibility, not opacity: it takes the box-shadow strip with it, and it
   is not motion, so no reduced-motion gate. Both fill so it comes back
   on the way up. */
@supports (animation-timeline: view(y)) {
  .wp-site-blocks { timeline-scope: --valencia-main; }
  .valencia-content { view-timeline-name: --valencia-main; }
  .valencia-marquee.mb-marquee {
    animation-name: valencia-marquee-retire;
    animation-timeline: --valencia-main;
    animation-range: exit-crossing 0% exit-crossing 1%;
    animation-fill-mode: both;
    animation-timing-function: linear;
  }
}

@keyframes valencia-marquee-retire { from { visibility: visible; } to { visibility: hidden; } }
@keyframes valencia-sky-fade { to { opacity: 0; } }
@keyframes valencia-bar-paper {
  from { background: transparent; }
  to   { background: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent); }
}
@keyframes valencia-bar-blur {
  from { backdrop-filter: none; }
  to   { backdrop-filter: saturate(160%) blur(12px); }
}
@keyframes valencia-bar-rule { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }