/* Curtain: main scrolls away and uncovers the sticky footer.
   Three properties, no JS. */
/* The curtain, corrected. Earlier attempts made body the flex parent and
   then .wp-site-blocks -- both wrong for the same reason: as a flex item
   the footer gets stretched or pinned, and with min-height:100vh it ends
   up taller than the space below main, so sticky holds it on screen from
   page load instead of revealing it.

   No flex anywhere. Normal document flow is what the effect needs: main
   is opaque and painted above (z-index 1), the footer sits after it in
   flow and sticks to the bottom at z-index 0. main then slides over it as
   the page scrolls. */
.wp-site-blocks > footer:has(.valencia-reveal-footer) {
  position: sticky;
  /* bottom:0 is correct, but it only behaves if the footer is SHORTER
     than the viewport. A sticky element taller than its scrollport has
     already satisfied bottom:0 at page load and pins immediately -- which
     is what made the footer visible before any scrolling.

     top:0 was tried instead and is worse: the footer then sticks to the
     TOP of the viewport and covers the masthead and hero on reload, since
     browsers restore scroll position. Verified visually.

     So: bottom:0, and the height below is capped under 100vh. */
  bottom: 0;
  z-index: 0;
  /* No transparent gap above the dark ground. The <footer> carries the
     root blockGap and .valencia-footer (core-footer.css) an xxl margin
     from the old hairline-on-paper footer; both are transparent, so at
     the end of the scroll they showed as a strip of page paper between
     main's last content and the dark box. The breathing room is the
     footer's own xxl top PADDING, inside the ground, so nothing tightens. */
  margin-top: 0;
}

.valencia-footer.valencia-reveal-footer {
  margin-top: 0;
}

/* The curtain's cover layer. Everything that must slide OVER the footer
   goes here -- not just main.

   The front page was broken because the sky hero is a SIBLING of main,
   not a child of it. main alone carried z-index:1, so the hero sat at
   z-index:auto and the sticky footer painted straight through it: the
   wordmark and link grid erupted across the middle of the sky band on
   page load. Any top-level block added above main needs the same
   treatment, which is why this is a list rather than a single rule. */
.valencia-content,
.wp-site-blocks > .valencia-notfound {
  position: relative;
  z-index: 1;
  /* REQUIRED — a transparent cover breaks the effect entirely. */
  background: var(--wp--preset--color--base);
}

/* The sky hero is gone as of 3.20.0 (matt-blocks/marquee-title replaces
   it); the .valencia-sky-hero entry above went with it. The marquee band
   above the masthead does not belong in this list and never will: it is
   position: sticky inside a display: contents part wrapper (see
   core-marquee.css), not a sibling of main in normal flow, so it cannot
   be covered the way the hero and the 404 band are. It carries its own
   z-index 1 and a paper box-shadow strip in core-marquee.css instead. */

/* The 404 band chooses its own colour in the editor (backgroundColor on
   the block, which prints has-background + a preset class). `background`
   above would overwrite that and the sidebar control would silently do
   nothing, so the band re-asserts whatever core painted. `revert` gives
   back the cascade's own value — the preset class — rather than pinning
   one colour here. Position and z-index still apply: without them the
   sticky footer paints through the band and buries the headline, the
   failure the sky hero's comment describes. */
.wp-site-blocks > .valencia-notfound {
  background: revert;
}

.valencia-content {
  flex: 1 0 auto;
}

/* Close the seam between the hero and main.

   Not a margin on main -- main's own margin-top already computes to 0.
   The 40px band of exposed footer came from MARGIN COLLAPSE: main has no
   top padding or border, so its first child's margin-top (the bio-intro
   pattern's 40px) escapes through main's top edge and pushes main's own
   border box down. The cover layer starts 40px lower than the hero ends,
   and the sticky footer shows through the slot.

   `display:flow-root` gives main a block formatting context, which stops
   a child margin from collapsing out. The 40px stays exactly where it was
   designed to be -- inside main, above the bio -- but it now belongs to
   main's painted box, so the ground is continuous from the hero down.
   Preferred over adding padding, which would change the spacing. */
.valencia-content {
  display: flow-root;
}

/* And the outer half of the same seam: WordPress's root blockGap puts
   25px (--wp--preset--spacing--md) of margin between top-level blocks,
   which is transparent and so let the footer through as a hairline band
   under the 404 band. Scoped to the notfound+main pairing so every other
   template keeps its normal block spacing. The sky-hero half of this
   selector is gone with the hero itself (3.20.0); main's own top spacing
   under the marquee/masthead pair is handled below instead, because that
   gap now needs to stay inside main's painted box rather than disappear. */
.wp-site-blocks > .valencia-notfound + .valencia-content {
  margin-top: 0;
}

/* main's blockGap margin-top used to sit safely above the sticky footer's
   box (3.19: bar at 64-88px, gap on top of that). With the marquee band
   sitting above the bar, the same 25px gap now lands INSIDE the footer's
   sticky box, so the footer becomes the hit target in that strip. Turning
   the margin into padding keeps the 25px of visual space but moves it
   inside main's own border box (position: relative, z-index: 1, opaque
   background above), which paints over the footer instead of exposing it.

   On the front page pattern-bio-intro.css cancels this padding back to 0
   on purpose (the bio intro supplies its own lead-in), same as it already
   cancelled core-post-list.css's padding there. main ends up flush under
   the bar, matching the pre-3.20.0 sky hero, which also sat flush. */
.valencia-content {
  margin-top: 0;
  padding-top: var(--wp--preset--spacing--md);
  /* Room between the last block and the dark footer. This used to be the
     footer's transparent xxl top margin; that read as a strip of page
     paper between main and the dark ground at the end of the scroll and
     was zeroed (3.20.1). Padding on main is opaque paper, part of the
     curtain, so the footer still meets it flush and the reveal is
     unchanged. */
  padding-bottom: var(--wp--preset--spacing--xxl);
}

/* A full-bleed band closing the page meets the footer directly: no paper
   tail under the front page's press ribbon. Any alignfull last child,
   not only .has-background -- the ribbon paints its colour from
   pattern-ribbon.css, so it never carries core's marker class (which is
   why core-footer.css's has-background version never matched it). */
.valencia-content:has(> .alignfull:last-child) {
  padding-bottom: 0;
}

/* The hero's own background is a gradient that fades to transparent at
   its foot (core-masthead.css) -- decorative, and deliberately so. That
   fade is exactly where the footer showed through even once the hero was
   raised to z-index:1, because a z-index does not make a transparent box
   opaque. The opaque paper ground above sits UNDER that gradient, so the
   sky still ramps out softly while the layer as a whole stays solid. */

.valencia-reveal-footer {
  /* Sticky lives on the <footer> ELEMENT (see below), not here -- a
     sticky element only sticks within its own parent's box, so pinning
     the inner group confined the effect to the footer's own height.
     Height is the whole trick, and it cuts both ways. Too short (590px
     against an 797px viewport) and sticky has nothing to hold, so the
     footer just scrolls past and no reveal reads. Exactly 100vh and it is
     as tall as the viewport, so `bottom:0` pins it from page load and it
     is visible before any scrolling -- which is what broke the home page.

     The cap must stay UNDER 100vh or sticky bottom:0 pins the footer from
     page load. 78vh is tall enough to dominate the screen once uncovered
     while leaving room for main to slide over it. */
  min-height: 78vh;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  /* Content sits at the bottom of the tall footer, so what the curtain
     uncovers first is the wordmark rather than a band of empty ground. */
  justify-content: flex-end;
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  /* Before the wordmark reveal fires, each character sits translated
     105% below its line (see .valencia-footer-char). A transformed box
     still counts toward the page's scrollable overflow, so those eight
     hidden glyphs poked 80-160px past the footer's bottom edge and the
     document was that much taller than the footer: a scroll to the end
     ran into a strip of bare paper under the dark ground, and when the
     reveal then landed, the page shrank and the scroll position jumped.
     Clipping the block axis here throws away that overflow. Only the
     block axis, so the CSS guard's horizontal-overflow check still sees
     a wordmark that outgrows the viewport. Not on the sticky <footer>
     itself: overflow on a sticky element is harmless, but keeping the
     clip on the inner group keeps the sticky box untouched. */
  overflow-y: clip;
}

/* Footer links: muted at rest, accent on hover -- the pattern from
   valencia-mockups/front-page-hero-noise.html. That mockup's footer sits on
   white, so its literal values do not transfer: `muted` grey is only 3.39:1
   on this dark ground and the global `link` purple is 3.94:1, both short of
   WCAG AA's 4.5:1. Paper at 72% gives a muted rest state that still clears
   AA, and the coral accent measures 6.26:1 here.

   This beats theme.json's global elements.link colour because core emits
   that as `:root :where(a:where(:not(.wp-element-button)))` -- :where()
   contributes no specificity, so core's rule scores (0,1,0) from :root
   alone, and a plain class+element selector (0,1,1) outranks it. */
.valencia-reveal-footer a {
  color: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
  text-decoration: none;
}

.valencia-reveal-footer a:hover,
.valencia-reveal-footer a:focus-visible {
  color: var(--wp--preset--color--accent);
}

/* -----------------------------------------------
   Footer content — link grid, wordmark, bottom bar
   Structure from valencia-mockups/front-page-palettes.html (.reveal-footer)
   ----------------------------------------------- */

.valencia-footer-inner {
  width: 100%;
  max-width: var(--wp--custom--shell);
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--md);
}

/* Four columns come from the Grid block's columnCount attribute in
   parts/footer.html (editable in the sidebar). Only the mobile collapse
   lives here: core emits the column rule as .wp-container-* in the
   global-styles inline style, after this sheet (style.css note 1), so
   the doubled class out-specifies it instead of !important. */
.valencia-footer-links {
  margin-bottom: var(--wp--preset--spacing--xxl);
}

@media (max-width: 768px) {
  .valencia-footer-links.valencia-footer-links {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
  }
}

.valencia-footer-heading {
  font-size: var(--wp--preset--font-size--tiny);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 var(--wp--preset--spacing--sm);
  color: color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent);
}

.valencia-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: var(--wp--preset--font-size--small);
}

/* The giant wordmark. 18.8vw, not BigFace's 27.6vw: that number is tuned
   for 7 characters of condensed grotesk, and "DeSiena." is 8 glyphs in a
   wider face. Capped so it stops growing on very large screens. */
/* Paper, not the inherited ink. The footer ground is `contrast`, so the
   default heading colour renders the wordmark invisible against it. Also
   set as a block attribute in parts/footer.html; this is the fallback for
   when a Site Editor save drops that attribute. */
.valencia-footer-wordmark {
  color: var(--wp--preset--color--base);
  font-size: clamp(1px, 18.8vw, 330px);
  line-height: .82;
  letter-spacing: -.03em;
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
  /* NOT overflow:hidden. line-height:.82 makes the glyph box taller than
     the line box (218px type in a 179px line), so clipping here shears
     the cap heights off flat. Each character masks itself instead --
     see .valencia-footer-char below. */
}

.valencia-footer-char {
  display: inline-block;
}

.valencia-footer-dot {
  color: var(--wp--preset--color--accent);
}

.valencia-footer-bar {
  padding-top: var(--wp--preset--spacing--md);
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 18%, transparent);
  margin-top: var(--wp--preset--spacing--md);
}

.valencia-footer-credit {
  font-size: var(--wp--preset--font-size--caption);
  margin: 0;
  color: color-mix(in srgb, var(--wp--preset--color--base) 58%, transparent);
}

/* Per-character stagger, driven by scroll progress (assets/js/footer-reveal.js).

   Three approaches were tried before this one, and all three fail for the
   SAME underlying reason: the footer is sticky, so it is inside the
   viewport from page load and merely COVERED by main. Nothing that
   measures geometry can tell that apart from being visible.

   1. animation-timeline:view() on the characters -- the ViewTimeline
      reports "finished" at first paint.
   2. A named view-timeline on .valencia-content -- view-timeline-name only
      reaches DESCENDANTS, and main is the footer's sibling, so it resolves
      to undefined.
   3. GreenShift's aoslight.js IntersectionObserver -- measured and
      confirmed: at scrollY 0 the wordmark is geometrically in the viewport
      (top 515 of a 797px window) but visually occluded by the bio copy,
      and .aos-animate was ALREADY applied with all eight characters at
      opacity 1. The stagger played out behind the page content and was
      over before the reader ever reached the bottom.

   An IntersectionObserver cannot see occlusion, so the trigger has to be
   scroll PROGRESS: fire when main's bottom edge has risen to the bottom of
   the viewport, i.e. when the curtain has actually uncovered the footer.
   Playback stays time-based -- adding .is-revealed starts a transition, so
   the letters always complete their rise however fast the page is
   scrolled, which a scroll-position timeline cannot guarantee.

   No-JS safety net: the resting state is VISIBLE. The hidden start state
   applies only while [data-reveal] is present, and that attribute is set
   BY the script -- so without JS the wordmark renders plainly rather than
   stuck at opacity 0. */
/* The mask lives on each character, sized to the glyph rather than the
   line box, so a letter is hidden while translated down without its
   ascenders being clipped once it arrives. */
.valencia-footer-char {
  display: inline-block;
  clip-path: inset(-25% -5% 0 -5%);
}

@media (prefers-reduced-motion: no-preference) {
  .valencia-footer-wordmark[data-reveal]:not(.is-revealed) .valencia-footer-char {
    transform: translateY(105%);
    opacity: 0;
    filter: blur(6px);
  }

  .valencia-footer-wordmark[data-reveal] .valencia-footer-char {
    transition:
      transform .9s cubic-bezier(.16, 1, .3, 1),
      opacity .9s cubic-bezier(.16, 1, .3, 1),
      filter .9s cubic-bezier(.16, 1, .3, 1);
  }

  /* 60ms apart, the mockup's cadence. */
  .valencia-footer-wordmark .valencia-footer-char:nth-child(1) { transition-delay: 0ms; }
  .valencia-footer-wordmark .valencia-footer-char:nth-child(2) { transition-delay: 60ms; }
  .valencia-footer-wordmark .valencia-footer-char:nth-child(3) { transition-delay: 120ms; }
  .valencia-footer-wordmark .valencia-footer-char:nth-child(4) { transition-delay: 180ms; }
  .valencia-footer-wordmark .valencia-footer-char:nth-child(5) { transition-delay: 240ms; }
  .valencia-footer-wordmark .valencia-footer-char:nth-child(6) { transition-delay: 300ms; }
  .valencia-footer-wordmark .valencia-footer-char:nth-child(7) { transition-delay: 360ms; }
  .valencia-footer-wordmark .valencia-footer-char:nth-child(8) { transition-delay: 420ms; }
}