/* Mobile menu — design node 249:32853 (a 390 x 844 frame).

   Full-screen Redonk green holding five links and a white "Let's talk" pill,
   with the wordmark top-left and a lime close disc top-right.

   TWO OF THOSE FOUR THINGS ARE NOT IN THIS FILE, and that is the point. The
   frame's wordmark sits at 16 / 20 and is 122 wide; the nav's own is at
   16 / 20.02 and is 121.6 wide — the same component in the same place. And
   the close disc sits exactly where the Menu pill already is. So this overlay
   is layered UNDER the nav (z-index 90 against its 100) and lets both show
   through: nothing is duplicated, nothing has to be kept in step, and the
   pill morphs into the disc in place rather than being covered by a second
   button drawn on top of it. Those two states live in css/nav.css.

   Straight px throughout, like every other mobile block here — `--u` is
   100vw/1600, so a 60u headline would be 14px on a phone. */

.rdk-menu {
  /* Distance from the disc's origin to the farthest corner of the window.
     js/menu.js measures it; the fallback covers a 1600 x 1200 window so the
     no-JS / pre-measure state is never a disc smaller than the screen. */
  --disc-r: 2000px;
  --disc-x: 100vw;
  --disc-y: 0px;
  /* The expansion, 0 -> 1. Everything the discs do is derived from it, so a
     resize mid-tween stays correct — the same reason the case studies tween
     `--open` rather than resolved pixel values. The resting state is 0, so a
     no-JS phone that somehow reaches this element sees nothing rather than a
     green sheet over the page. */
  --p: 0;
  /* How far the lime leads the green, as a share of the radius. js/menu.js
     rewrites it from the measured radius so the rim is a constant ~22px
     whatever the window. */
  --rim: 0.025;
  position: fixed;
  z-index: 90;
  inset: 0;
  /* Not `display: none` — the disc has to be able to animate. The element is
     inert until js/menu.js drops [hidden]; see the attribute rule below. */
  overflow: clip;
}

.rdk-menu[hidden] {
  display: none;
}

/* ---------- the discs ----------
   A circle centred on the Menu button, scaled 0 -> 1. Deliberately a
   transform rather than an animated `clip-path` or a growing width/height:
   only a transform is handed to the compositor, and this is a full-screen
   repaint on a phone if it is not.

   Sized in JS rather than as a fixed multiple of the viewport because the
   origin is off-centre — the button is in the top-right corner, so the far
   corner is nearly a full diagonal away and any guess is either short (an arc
   of page left showing in the opposite corner) or wastefully large.

   THERE ARE TWO OF THEM, and the second one is what makes the effect legible.
   The hero is the same `--rdk-green` as the menu, so a green disc expanding
   over it shows nothing whatsoever — and the top of the page is exactly where
   someone is most likely to open the menu. The lime disc runs slightly ahead
   of the green one and the uncovered sliver of it IS the expanding edge. A
   ring would have meant animating a border width or a gradient stop, i.e. a
   full-screen repaint every frame; two solid fills stay on the compositor.

   THE LIME LEADS BY A DISTANCE, NOT BY A DELAY, and that distinction is the
   whole rim. Starting it a few frames early looks equivalent and is not:
   `power3.out` spends most of its travel in the first moments, so 75ms of
   head start opened a gap of 0.29 of the radius — a quarter of the screen in
   flat lime, which reads as a colour change rather than an edge. Adding a
   fixed amount to its SCALE instead holds the rim at `--rim x radius` pixels
   for the whole sweep, and the `min()` closes it to nothing at the end so the
   lime is fully covered when the menu settles.

   Both are driven by ONE custom property, tweened on the parent — the same
   arrangement as the case studies' `--open`. GSAP never touches either
   element's transform, so the standalone `scale` property is free to carry
   this, and the two discs cannot drift apart. */
.rdk-menu__disc,
.rdk-menu__wave {
  position: absolute;
  left: var(--disc-x);
  top: var(--disc-y);
  width: calc(var(--disc-r) * 2);
  height: calc(var(--disc-r) * 2);
  margin: calc(var(--disc-r) * -1) 0 0 calc(var(--disc-r) * -1);
  border-radius: 50%;
  will-change: transform;
}

.rdk-menu__disc {
  background: var(--rdk-green);
  scale: var(--p);
}

/* Painted first, so the green covers all but its leading edge. */
.rdk-menu__wave {
  background: var(--rdk-lime);
  scale: min(1, calc(var(--p) + var(--rim)));
}

/* ---------- contents ----------
   A flex column so the links keep the frame's 122 top while the button holds
   the bottom, instead of both being pinned to a 844-tall frame's absolute
   coordinates. On the design phone that reproduces 249:32853 exactly; on a
   shorter one the two simply come closer together rather than the button
   falling off the screen. */
.rdk-menu__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* 56 clears the nav bar (top 12 + a 40.55 pill = 52.55), 16 at the sides,
     24 under the button. The bottom is `max()`ed against the home-indicator
     inset: 24 is what the frame says and what every device without an inset
     gets, and the button is only lifted where a real inset exists and would
     otherwise sit under it. */
  padding: 56px 16px max(24px, env(safe-area-inset-bottom, 0px));
}

/* CENTRED between the logo and the button, not pinned to the frame's 122
   (client, 2026-08-27). The frame is 844 tall with no browser chrome; a real
   phone hands a fixed overlay ~90-180px less than that, and a block measured
   down from a fixed top then runs into the button. Taking the free space
   instead means the gap above and below the links is equal at every height a
   phone can actually give us, which is what the frame's proportion was for.

   `min-height: 0` so the block may shrink rather than push the button off a
   very short window, and the button loses its `margin-top: auto` — the links
   absorb the free space now, so it had nothing left to do. */
.rdk-menu__links {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
  /* Figma's 48 between CAP boxes, brought down with the type (client,
     2026-08-27). The line-height below is what makes each link's box the cap
     box, so this really is cap-to-cap. */
  gap: 32px;
}

/* Redonk Avant Garde Bold, cap-trimmed by Figma (`text-box-trim: trim-both`),
   so the line box is the cap height and not `normal` leading. Measured off the
   face itself: cap is 0.711em — the same treatment every other trimmed run in
   this project gets, and it is what makes the gap above mean cap-to-cap.

   56, and the tracking is DELIBERATELY LOOSER than the design's (client,
   2026-08-27, over two passes: 60 -> 48 -> 56, each step 4). The frame sets
   -1.2 at 60, i.e. -0.02em; this is -0.01em, half of it. The line-height is
   0.711 x 56 and stays derived, so the 32 gap above is still cap-to-cap.

   THE MASK IS GONE (client, 2026-08-28). It used to be `overflow: hidden`
   plus a padding/margin pair, because the words rose vertically out of their
   own cap box. They now fly in from the SIDE, so there is nothing to mask
   with — `.rdk-menu`'s own `overflow: clip` is what hides them off-screen,
   and the padding/margin pair netted to zero in layout anyway, so dropping
   both leaves the 32 gap exactly where it was. */
.rdk-menu__link {
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: 56px;
  line-height: 39.82px;
  letter-spacing: -0.56px;
  color: var(--rdk-white);
  text-decoration: none;
  /* Each word is a block so the mask has something to slide. */
  align-self: flex-start;
}

.rdk-menu__link > span {
  display: block;
  /* The words pivot at their LEFT edge, which is where they line up — a
     centred origin would swing the start of each line in and out as it
     rotates and the left margin would look ragged mid-flight. */
  transform-origin: 0% 50%;
  will-change: transform;
}

/* No hover on a phone, so the feedback is on the press. */
.rdk-menu__link:active > span {
  opacity: 0.6;
}

/* Node 249:33113: 358 x 80 (i.e. the full measure), radius 74.286, label
   Redonk Avant Garde Bold 24 in Redonk green. Figma draws the fill as white
   at `mix-blend-mode: overlay` over the green ground, which for a pure-white
   blend layer resolves to pure white — so a solid fill is exact, not an
   approximation. */
.rdk-menu__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  flex: 0 0 auto;
  border-radius: 74.286px;
  background: var(--rdk-white);
  font-family: var(--rdk-font-brand);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: var(--rdk-green);
  text-decoration: none;
}

.rdk-menu__cta:active {
  background: var(--rdk-lime);
}

/* The overlay is phone-only. Above 767 the nav shows its own links and the
   Menu button is `display: none`, so there is nothing to open it with — but
   a window resized across the breakpoint while it is open would otherwise
   leave a green sheet over the desktop layout. js/menu.js closes it on the
   same 767, and this is the belt to that braces. */
@media (min-width: 768px) {
  .rdk-menu {
    display: none;
  }
}

/* No expansion, no stagger — the panel is simply there. js/menu.js reads the
   same query and skips its timeline, so the two cannot disagree. */
@media (prefers-reduced-motion: reduce) {
  .rdk-menu__disc,
  .rdk-menu__wave {
    transition: none;
  }
}