/* Footer reveal — EXPERIMENT (2026-08-27), node 212:19952.

   The second attempt at the lentoagency-style reveal. The first one was
   reverted because the design did not work that way.

   The frame's 136u rounded bottom corners on the page ground were built and
   then dropped on sight (client, 2026-08-27) — see the note on `main` below.
   What replaces them is better: the About section's GROUND ramps from the
   page dark to the footer green as the wall scrolls, so the two slabs are the
   same colour by the time one lifts off the other and there is no join to
   shape at all.

   The whole thing is behind `body.rdk-reveal` plus two throwaway divs in
   `index.html`. Reverting is: drop the class, drop the two divs, drop this
   stylesheet's <link>, and put the two `js/footer.js` lines back. Nothing
   else in the project knows this file exists.

   HOW IT WORKS — pure CSS, no scrub, no JS:

     main    normal flow, opaque, z-index 1, clipped to its rounded bottom
     footer  pulled UP by --rdk-reveal with a negative margin, so it starts
             life hidden underneath main, and made `sticky; top: 0` so it
             pins there while main rides up over it
     spacer  --rdk-reveal tall, AFTER the footer, which is what gives sticky
             the room to shift the footer back down again

   Why the spacer is load-bearing: a sticky element may only be displaced
   within its containing block. The footer is body's last real child, so
   without something after it the maximum shift is 0 and `top: 0` does
   nothing at all. The spacer's height IS the pin's budget, which is why it
   and the negative margin are the same value.

   The arithmetic, with C = main's height, F = the footer's, V = the viewport
   (and F >= V guaranteed by the min-height below):

     footer occupies document [C - V, C - V + F], spacer [C - V + F, C + F]
     pinned at screen 0 while scrollY is in [C - V, C]   <- the reveal
     released after that, so the rest of the footer scrolls normally

   Measured at 1600x900: pinned at top 0 across scrollY 9287..10187, main's
   bottom edge riding 900 -> 0 over it, then released so that at maximum
   scroll the footer's bottom sits at exactly 900 and main's bottom edge at
   exactly -122 — the two meet with no gap and no overlap.

   Note the footer is 1022u and TALLER than a 900px window, which rules out
   the `position: fixed` footer these are usually built with: it would leave
   the "Let's get Redonk" heading permanently above the top of the screen.
   Sticky releases, so the rest of the footer is reachable by scrolling. */

body.rdk-reveal {
  /* How far the page lifts: main's bottom edge travels from the bottom of the
     screen to the top, uncovering the footer's first screenful. Everything
     below that screenful is ordinary scrolling afterwards. */
  --rdk-reveal: 100svh;

  /* NO FEATHER. The ground stays fully opaque right down to main's bottom
     edge (client, 2026-08-27: "I dont like the feather effect").

     What replaces it is the client's own proposal and it is a better answer:
     hold the CTA band's bubbles and text back until the lift has FINISHED, so
     the rising edge only ever sweeps flat green and there is nothing to cut.
     `js/footer.js` does it, on a ScrollTrigger at `.rdk-reveal-mark`.

     Worth being precise about what the edge may and may not cross, because it
     is not "any content":
       - the links row and the REDONK band ARE swept, and that is fine. They
         are hard-edged, so an invisible edge moving over them reads as a wipe.
       - the BUBBLES were the whole problem. Soft organic shapes with no edge
         of their own, in a field the same colour as the ground, so the cut
         read as damage rather than as a reveal.
     Reinstating the feather is two stops on the gradient below:
         var(--rdk-green) calc(100% - 300 * var(--u)),
         transparent 100%
     and it still works, because `main` opens no stacking context. */
}

/* Opaque and above the footer. The z-index is what decides which slab is on
   top, and 1-over-0 is the only pair available: the hero is already 0 and the
   sections 1, and there is no integer between them.

   NO CORNERS HERE ANY MORE (client, 2026-08-27). The frame's 136u bottom
   radius was built and rejected on sight: the page ground's 136u arc and the
   About card's own 96u arc are tangent — 136 - sqrt(136² - 96²) = 39.67
   against the card's 40u inset — so what is left between them is a thin dark
   crescent at each side that reads as a hook or a claw rather than as a
   rounded edge. The ground TRANSITION below replaces it and is a better
   answer: it removes the join instead of shaping it.

   To put them back it is these three lines and nothing else:
     overflow: clip;
     border-end-start-radius: calc(136 * var(--u));
     border-end-end-radius: calc(136 * var(--u));
   `overflow: clip` is required — a border-radius alone does not clip
   children, and both the About's ground and the sticky hero paint square
   corners into this box. It must be `clip` and not `hidden`, or main becomes
   a scroll container and the hero's sticky dies, exactly as base.css warns
   about the body. */
body.rdk-reveal main {
  position: relative;
  /* NO z-index, and that is load-bearing. `z-index: auto` means main opens no
     stacking context, so the hero (z 0, inside), the sections (z 1, inside)
     and the footer (z 0, outside) are all compared in the ROOT stacking
     context. Equal z-indexes then fall back to document order, which puts the
     footer above the hero because it comes later — and THAT is what lets the
     About's ground fade to transparent and show the footer through it. Give
     main a z-index and it traps the hero above the footer instead: the hero is
     sticky, bottom-pinned and released to main's bottom edge during the
     reveal, so what bleeds through is DONK and the hero wordmark. Verified —
     hero bottom and main bottom are the same pixel at that moment. */
}

/* THE GROUND BECOMES THE FOOTER (client, 2026-08-27).

   The About section's ground goes from the page dark to the footer green, so
   by the time the wall has finished, the slab that lifts is already the same
   colour as the thing underneath it and there is no edge to draw. What the
   reader sees leave is the white card and the photos, not a boundary.

   It is a TIMED CROSS-FADE at one point in the scrub, not a scroll-linked
   gradient (client, 2026-08-27: "much faster... once the user gets to a
   certain point of the scroll thru the photos we just fade from one to the
   other"). The gradient tied the colour to scroll POSITION, which made it a
   slow wash the reader could scrub back and forth through, and every retiming
   of `--about-scroll` moved where it landed — its two stops had already been
   re-derived twice for exactly that reason. A class plus a transition is
   0.7s wherever it fires, and `js/footer.js` puts it at 35% of the wall's own
   scrub (`GREEN_AT`), which leaves the remaining 65% as headroom before the
   footer's lift needs the ground to already be green.

   sRGB interpolation is fine for this pair and `in oklab` is not needed: red
   is 0 at both ends and blue barely moves, so the whole path is a straight
   ramp up the green channel. The gradient used oklab out of caution about a
   muddy midpoint this particular pair does not have. */
body.rdk-reveal .rdk-about {
  background: var(--rdk-black-green);
  transition: background-color 0.7s ease;
}

body.rdk-reveal .rdk-about.is-ground-green {
  background: var(--rdk-green);
}

@media (prefers-reduced-motion: reduce) {
  body.rdk-reveal .rdk-about {
    transition: none;
  }
}

/* One solid green slab, revealed underneath. Its own 96u top corners are
   dropped on purpose — the page ground's 136u arc is what shapes the join
   now, and the design frame corroborates it: green runs right up to the
   underside of that arc rather than curving away from it. */
body.rdk-reveal .rdk-footer {
  position: sticky;
  top: 0;
  z-index: 0;
  /* Replaces the 144u of page ground the in-flow footer sits below. There is
     no ground between them any more — main's rounded edge IS the boundary. */
  margin-top: calc(-1 * var(--rdk-reveal));
  background: var(--rdk-green);

  /* AT LEAST a screenful, and the CTA band takes up the slack.

     This is not decoration, it is what makes the pin correct at every window
     shape. `top: 0` parks the footer's TOP at the top of the screen, so the
     page can only be lifted clear of it if the footer is at least as tall as
     the window. The footer is 1022u — 597 (CTA) + 102 (links) + 323 (REDONK)
     — and --u is capped at 1px, so it can never exceed 1022px and is SHORTER
     than the window on any ordinary tall laptop. Left alone, the last
     (100svh - 1022u) pixels of the page then show empty ground below the
     REDONK wordmark, because the footer has run out before the screen has:
     measured at 1280x1200, a 383px dead band at maximum scroll.

     Growing the footer to fill the window removes the case entirely, with no
     measured constants and nothing to keep in step with the copy — which the
     alternative (computing the pin from a declared 1022u) would have needed
     on mobile, where the footer is auto-height and 678px at 375 wide. At
     1600x900 this changes nothing at all, since 1022 > 900 already. */
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

/* The slack goes here, so the REDONK band stays flush to the bottom edge.
   The content block inside is absolutely centred, so it simply re-centres in
   the taller band. */
body.rdk-reveal .rdk-footer__cta {
  flex: 1 0 auto;
  border-radius: 0;

  /* No top-edge mask. One was built to soften the straight line where this
     band's `overflow: clip` cut `bubble--top`, back when clear space above the
     footer exposed that cut. With the clear band gone the band's top edge IS
     the footer's top edge again, exactly as the design has it, and main's
     rising edge only reaches it at the very last instant of the lift. */
}

body.rdk-reveal .rdk-footer__utility,
body.rdk-reveal .rdk-footer__mark,
body.rdk-reveal .rdk-footer__coda {
  flex: 0 0 auto;
}

/* The pin's budget. Zero-height unless the experiment is on. */
body.rdk-reveal .rdk-reveal-spacer {
  height: var(--rdk-reveal);
}

/* A zero-height mark at main's bottom edge, i.e. at the document position the
   reveal COMPLETES at. js/footer.js watches this instead of the footer so the
   bubbles still rise as the green comes into view: the footer itself is now
   dragged a full viewport up the document and enters the viewport long before
   anyone can see it, so observing it would play the entrance behind main and
   leave nothing to arrive. */
.rdk-reveal-mark {
  height: 0;
}

@media (prefers-reduced-motion: reduce) {
  /* Nothing here moves of its own accord — the lift is the page scrolling —
     so there is nothing to suppress. Kept as a marker so the next person does
     not go looking for the branch that should be here. */
}

/* The bubbles are NOT repositioned here any more. They were, while the lift
   travelled over a clear band and had to keep out of it; node 212:19006 sets
   their positions and `css/footer.css` follows it exactly. The feather is what
   protects them now. */

/* ---------- the lift is DESKTOP ONLY ----------
   Client, 2026-08-27: "ignore the complicated footer stuff on mobile and just
   scroll into the footer normally."

   Everything the experiment adds is undone here rather than conditionalised
   above, so the phone gets the plain in-flow footer the design frame shows —
   `58:11819` has the CTA band's 32 top corners, which only make sense when
   there is page ground behind them to reveal.

   `js/footer.js` matches this width and skips both `bindFloats` (the parked
   bubbles and their scroll-cued rise) and `bindGround` (the dark-to-green
   fade), falling back to the come-into-view entrance. The two files have to
   agree about 767. */
/* ---------- AND TABLET PORTRAIT JOINS IT (client, 2026-09-16: the footer
   "looks horrible on tablet portrait, its way too tall. Can we treat it
   similar to the 'We're serious...' section in terms of height?") ----------

   It is the About wall's fault exactly: a VIEWPORT height wrapped around a
   composition sized in `--u`. The three bands come to 553 at 820 wide and
   `min-height: 100svh` is 1180, so `flex: 1 0 auto` poured **627px of empty
   green** into the CTA band — measured at 917 for a heading and a button.

   **THE LIFT IS WHAT REQUIRES THAT HEIGHT, SO THE LIFT IS WHAT GOES.** The
   two cannot both be had: `top: 0` can only be lifted clear of by a footer
   at least as tall as the window, so the minimum is not decoration — drop it
   and keep the pin and the page ends on a dead band of exactly the slack
   just removed, which is the 383px bug this file already records. Capping
   the CTA band instead only moves the slack somewhere worse. So this takes
   the answer the phone was already given: out of the pin, into ordinary
   flow, natural height. 553 in a 1180 window reads as a footer rather than a
   screen of green, and the reveal survives everywhere it looked right.

   That is a real trade and it is the client's to revisit: a portrait tablet
   no longer gets the reveal at all. The alternative is the tall band.

   Note the second clause catches a TALL, NARROW DESKTOP WINDOW too (say
   900 x 1400), which is the same exposure the hero's and the About wall's
   portrait fixes already carry — and the same answer: at that shape it is
   the treatment that reads correctly anyway. */
@media (max-width: 767px),
       (min-width: 768px) and (orientation: portrait) {
  body.rdk-reveal .rdk-footer {
    /* Out of the pin and back into flow: no sticky, no pull-up, no minimum
       height, and transparent again so the CTA band's corners reveal the
       page ground the way they do without the experiment. */
    position: static;
    margin-top: 0;
    min-height: 0;
    display: block;
    background: none;
  }

  body.rdk-reveal .rdk-footer__cta {
    flex: none;
    border-radius: 32px 32px 0 0;
  }

  /* The pin's displacement budget, which there is no longer a pin to spend. */
  body.rdk-reveal .rdk-reveal-spacer {
    height: 0;
  }

  /* The ground stays dark. It only went green to match the footer across the
     lift's join, and there is no join now — the corners above want dark
     behind them. */
  body.rdk-reveal .rdk-about,
  body.rdk-reveal .rdk-about.is-ground-green {
    background: var(--rdk-black-green);
    transition: none;
  }
}

/* ---------- the gap above the footer on tablet portrait (2026-09-16) -------
   Client: "needs to be a gap between the footer and section above. Match the
   padding to the left and right of the white section."

   css/footer.css carries the same rule and the same value — that one is what
   a world without this experiment gets — but this file is linked AFTER it and
   the opt-out above is `body.rdk-reveal .rdk-footer` at the identical
   specificity, so at equal weight source order decides and footer.css's copy
   loses. Overriding where the zero is set is the only place that works
   without inventing specificity.

   The value is `.rdk-about`'s own side padding, so the gap and the white
   card's inset stay in step at every width rather than being two numbers to
   keep matched. Measured 20.5px at 820, against a card inset of 20.5. */
@media (min-width: 768px) and (orientation: portrait) {
  body.rdk-reveal .rdk-footer {
    margin-top: calc(40 * var(--u));
  }
}