/* Hero — design node 464:84050 (1600 x 897).

   Every value below is lifted verbatim from Figma as `calc(N * var(--u))`,
   so at a 1600px viewport the build is 1:1 with the design. See --u in
   tokens.css for the scaling model.

   A caution when re-reading the design: get_metadata reports 180°-rotated
   nodes by their FAR corner. DONK comes back as x=952 y=787; its real box is
   left 149 / top -318. The get_design_context values are the trustworthy
   ones. */

.rdk-hero {
  position: sticky;
  top: 0;
  z-index: 0;
  /* A size container, so the wordmark inside the fixed-width stage can
     measure the WINDOW (100cqw) and line up with the nav — see below. */
  container-type: inline-size;
  height: 100svh;
  min-height: calc(560 * var(--u));
  overflow: clip;
  background: var(--rdk-green);

  /* How far the stage's top edge sits BELOW the viewport's own.

     The stage is bottom-pinned and sized in --u, i.e. off WIDTH, so a viewport
     taller than the design's 897u opens a gap above it — and everything
     anchored to the stage drifts down the screen with that gap. For most of
     the artwork that is the point (it is "more rope"). For DONK it is a bug:
     he hangs from above the frame, and the moment his top edge clears the
     viewport's he stops reading as hanging and starts reading as floating in
     mid-air, which is exactly what a tall narrow window produced.

     Subtracting this from his `top` anchors his BLEED to the viewport instead
     of to the stage, so the amount of him above the fold is the designed 318u
     at every window shape rather than only at 1600x897.

     `max(0px, ...)` matters: on a SHORT viewport the stage overflows upward
     and this would go negative, pushing him DOWN. Clamped, short windows are
     left exactly as they were. It also makes the `min-height` case safe —
     there 100svh is smaller still, so the clamp is already in force. */
  --donk-lift: max(0px, 100svh - 897 * var(--u));

  /* ...and then he grows a little into the room that opens up (client,
     2026-08-26). Pinning him to the top fixes the floating but leaves a tall
     window with a long empty band between his heads and the wordmark; a
     modest scale-up closes some of it without touching the wordmark, which
     stays locked to its design size.

     `--donk-scale` is written by js/hero.js, because the amount depends on a
     RATIO of two lengths (how far the window overshoots the design's 897u)
     and calc() cannot divide a length by a length. The two numbers it is
     derived from live here rather than in the JS, the same way the services
     icon table does — one place to retune. Defaulting to 1 means no-JS is
     exactly the un-grown layout, not a broken one. */
  --donk-grow: 0.15;       /* extra scale per 1x of excess window height */
  --donk-grow-max: 1.25;   /* ceiling, so a phone-shaped desktop window
                              cannot inflate him without limit */
  --donk-scale: 1;

  /* His top edge, pinned to the viewport — and the point everything below
     scales FROM. Both he and his shadow are sized off this so the two stay
     registered at any scale; see the note on the shadow. */
  --donk-anchor-y: calc(-318 * var(--u) - var(--donk-lift));
}

/* The designed 1600x897 canvas: fixed width, centred, pinned to the hero's
   BOTTOM edge.

   Fixed-and-centred is the whole trick, and it is what gives the wordmark the
   v1 behaviour the client asked for — locked to its design size, centred, so
   widening the window only reveals more green rather than stretching it.
   Every child inherits that for free by being positioned inside this box.

   Bottom-pinned so that on a viewport taller than 897u the extra space opens
   up ABOVE the artwork (more rope for DONK to hang from) instead of dropping
   the wordmark away from the fold. */
.rdk-hero__stage {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(1600 * var(--u));
  height: calc(897 * var(--u));
  margin-left: calc(-800 * var(--u));
}

/* ---------- floating flocked shapes ---------- */

/* No rotate/scale here: `image 76` carries a -scale-y-100 + rotate-180 pair
   in Figma, which composes to a plain horizontal mirror, and that is baked
   into the PNG instead. `transform` is left entirely to hero.js — a static
   percentage transform in the shorthand would break GSAP's x/y/rotation. */
.rdk-hero__shape {
  position: absolute;
  max-width: none;
  object-fit: cover;
  will-change: transform;
}

/* Mobile only — node 1:1814's second cube. */
.rdk-hero__shape--cube-2 {
  display: none;
}

.rdk-hero__shape--cube {
  left: calc(-136 * var(--u));
  top: calc(246 * var(--u));
  width: calc(405 * var(--u));
  height: calc(405 * var(--u));
  filter: blur(calc(4 * var(--u)));
}

.rdk-hero__shape--x {
  left: calc(1210 * var(--u));
  top: calc(253 * var(--u));
  width: calc(534 * var(--u));
  height: calc(534 * var(--u));
}

.rdk-hero__shape--torus {
  left: calc(767 * var(--u));
  top: calc(-122 * var(--u));
  width: calc(452 * var(--u));
  height: calc(452 * var(--u));
}

/* ---------- DONK ---------- */

/* Two nested elements on purpose, so two animations can own two different
   transforms without fighting:
     __donk-rig  -- hero.js owns `y`: the one-time rope descent.
     __donk      -- hero.js owns `rotation`/`x`: the pendulum swing + cursor.
   Collapsing these into one element makes the entrance tween and the
   per-frame ticker overwrite each other. */
.rdk-hero__donk-rig {
  position: absolute;
  /* Sized by LAYOUT, not by a transform. `transform` on this element belongs
     to hero.js's rope descent, and CSS's standalone `scale` is no refuge
     either — GSAP writes `scale: none` inline the moment it takes an
     element's transform over. Growing the box instead keeps the two entirely
     apart. It also means the scale-up happens from his TOP edge for free,
     since `top` is fixed and only the height grows downward.
     550.5 is his own centre line (149 + 803/2); subtracting half the scaled
     width holds that centre still, so he grows evenly rather than drifting
     right across the frame. */
  left: calc(550.5 * var(--u) - 401.5 * var(--u) * var(--donk-scale));
  top: var(--donk-anchor-y);
  width: calc(803 * var(--u) * var(--donk-scale));
  height: calc(1105 * var(--u) * var(--donk-scale));
  will-change: transform;
}

.rdk-hero__donk {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* He hangs by his feet from above, so the swing pivots at the top edge —
     that is where the rope would be tied. */
  transform-origin: 50% 0%;
  will-change: transform;
}

/* DONK's cast shadow. The exported SVG is larger than its Figma node box
   (the blur bleeds past the geometry): node is 789.865 x 1193.743 at
   left 92 / top -122, the file is 945.865 x 1349.74, so it sits 78u further
   out on every side — hence left 14 / top -200. Width AND height are set
   explicitly: an absolutely positioned <img> with `width: auto` falls back to
   its intrinsic size and ignores `right`/`bottom`. */
.rdk-hero__shadow {
  position: absolute;
  /* Rides with DONK and scales with him — see --donk-lift and --donk-scale.
     This is his cast shadow, so the two have to move AND grow as one or it
     detaches. Both are expressed from the same anchor (his top edge, his
     centre line) rather than from their own corners, which is what keeps them
     registered at every scale: -536.5 is 14 - 550.5, and +118 is
     -200 - (-318). At scale 1 these resolve to the original 14 / -200u. */
  left: calc(550.5 * var(--u) - 536.5 * var(--u) * var(--donk-scale));
  top: calc(var(--donk-anchor-y) + 118 * var(--u) * var(--donk-scale));
  width: calc(945.865 * var(--u) * var(--donk-scale));
  height: calc(1349.74 * var(--u) * var(--donk-scale));
  max-width: none;
  opacity: 0.2;
  mix-blend-mode: color-burn;
  pointer-events: none;
}

/* ---------- wordmark ---------- */

/* Sits IN FRONT of DONK in the design — it crops his dangling limbs.
   Bottom edge overhangs the stage by 1.59u, which is what makes the letters
   bleed off the fold. */
/* LINED UP WITH THE NAV (client, 2026-09-24, a trial: "REDONK in the hero
   should line up with the left and right edges of the nav"). The R starts
   where the nav's wordmark starts and the K ends where "Let's talk" ends.

   --nav-inset is the nav's own arithmetic restated — its `padding-inline`
   (nav-side 72) plus a capsule's padding (plate-pad 16), each with the floor
   css/nav.css gives it — so the two cannot drift while those numbers hold.
   The stage is 1600u wide and CENTRED in the hero, so its left edge sits
   (100cqw - 1600u) / 2 in from the window's; subtracting that turns a window
   inset into a stage one. The SVG's ink runs to its own edges (bbox = its
   viewBox), so the box edges are the letter edges.

   It is anchored by its BOTTOM (the design's 1.59u below the stage), so the
   height the aspect gives it grows upward and the baseline stays put.

   WHAT IT CHANGES: the wordmark was locked to the design's 1426.53u; tied to
   the nav it now tracks the WINDOW, so above 1600 it grows with it (1725 wide
   at 1920 where it was 1466). Reverting is putting these back:
     left: 94.5017u; top: 612u; width: 1426.53u; height: 286.588u. */
.rdk-hero__wordmark {
  --nav-inset: calc(max(45px, 72 * var(--u)) + max(10px, 16 * var(--u)));
  position: absolute;
  left: calc(var(--nav-inset) - (100cqw - 1600 * var(--u)) / 2);
  top: auto;
  bottom: calc(-1.588 * var(--u));
  width: calc(100cqw - 2 * var(--nav-inset));
  height: auto;
  aspect-ratio: 1426.53 / 286.588;
  max-width: none;
  will-change: transform;
}

/* ---------- mobile ----------
   The design has no mobile frame; this is invented, and deliberately
   conservative. The fixed 1600x897 stage is replaced by the full hero box so
   the artwork can re-anchor to the real top/bottom edges — a 897u stage at a
   375px viewport would otherwise be a 210px sliver stranded at the bottom of
   the screen. The wordmark needs no changes: at < 1600 the stage is already
   100vw wide and --u is 100vw/1600, so its designed 89%-of-frame width and
   5.9% left inset carry over exactly. */
/* ---------- mobile: node 1:1814, a 390 x 435 frame ----------

   Same architecture as the desktop stage, at the phone's own design size: a
   fixed-aspect canvas with every child placed at its raw Figma coordinate.
   `--mu` is the phone's design unit, 100vw / 390, so a number in the CSS is
   the number in the frame.

   The hero is CAPPED at the frame's own height rather than filling the screen
   (client, 2026-08-27). Left at 100svh with a bottom-pinned stage, a tall
   phone opens the same gap above the artwork that a tall desktop window does
   — and DONK, whose whole read is "hanging from above", ends up a long way
   down the screen. Capping it means his bleed, the shapes and the wordmark
   all sit exactly where the frame puts them at every phone size.

   `min()` and not a flat height: a short or landscape phone whose viewport is
   less than 435mu keeps 100svh and the stage overflows upward into the hero's
   `overflow: clip`, which is the same way the desktop handles a short window.

   NOTE this means the section below is partly in frame at rest on a tall
   phone, which the desktop deliberately avoids. That is the frame's own
   proportion — 435 in a 390-wide page — not an accident of the cap. */
@media (max-width: 767px) {
  .rdk-hero {
    --mu: calc(100vw / 390);
    height: min(100svh, calc(435 * var(--mu)));
    min-height: 0;
  }

  .rdk-hero__stage {
    left: 0;
    width: 100vw;
    height: calc(435 * var(--mu));
    margin-left: 0;
  }

  /* Raw frame coordinates. He bleeds 83.85 above the stage's top edge, which
     is also the viewport's top here, so no `--donk-lift` is needed — the cap
     is what keeps the two the same edge. `--donk-scale` is written by
     js/hero.js and deliberately unused at this width. */
  .rdk-hero__donk-rig {
    left: calc(38.53 * var(--mu));
    top: calc(-83.85 * var(--mu));
    width: calc(318.474 * var(--mu));
    height: calc(438.7 * var(--mu));
    margin-left: 0;
  }

  /* The frame has no cast shadow. */
  .rdk-hero__shadow {
    display: none;
  }

  .rdk-hero__shape--torus {
    left: calc(-63 * var(--mu));
    top: calc(53 * var(--mu));
    width: calc(165 * var(--mu));
    height: calc(165 * var(--mu));
  }

  .rdk-hero__shape--cube {
    left: calc(-7 * var(--mu));
    top: calc(232 * var(--mu));
    width: calc(130 * var(--mu));
    height: calc(130 * var(--mu));
  }

  .rdk-hero__shape--cube-2 {
    display: block;
    left: calc(253 * var(--mu));
    top: calc(37 * var(--mu));
    width: calc(130 * var(--mu));
    height: calc(130 * var(--mu));
  }

  .rdk-hero__shape--x {
    left: calc(315 * var(--mu));
    top: calc(200 * var(--mu));
    width: calc(143 * var(--mu));
    height: calc(143 * var(--mu));
  }

  /* Node 1:5180 — the wordmark's own box is 349.75 x 70 sitting 0.31 below
     the stage's bottom edge. Our asset is 1426.53 x 286.588, an aspect of
     4.978 against the frame's 4.996, so it is the same cut and width alone
     places it. */
  .rdk-hero__wordmark {
    left: calc(20.13 * var(--mu));
    top: auto;
    bottom: calc(-0.31 * var(--mu));
    width: calc(349.75 * var(--mu));
    height: calc(70.26 * var(--mu));
  }
}

@media (prefers-reduced-motion: reduce) {
  .rdk-hero__shape,
  .rdk-hero__donk-rig,
  .rdk-hero__donk,
  .rdk-hero__wordmark {
    will-change: auto;
  }
}


/* ============================================================
   PORTRAIT TABLETS ONLY — nothing above this line changes
   ============================================================
   Client, 2026-09-16, QA on a portrait iPad: the hero is too tall and
   "REDONK should go almost all the way up to touch Donk's ears".

   The stage is 897u and `--u` follows WIDTH, so a portrait viewport shrinks
   the artwork while `100svh` stretches the box: measured at 820 x 1180 the
   stage was 460 in an 1180 hero, and because DONK is pinned to the
   VIEWPORT'S top while the wordmark rides the STAGE'S bottom, all 720px of
   that excess opened up BETWEEN them.

   So the hero is simply the composition's own height here. At 897u the stage
   fills the hero exactly, which reproduces the design's internal geometry at
   a smaller scale — DONK keeps his designed 318u bleed above the top edge,
   the wordmark sits on the bottom edge overlapping his lower body, and the
   section below starts immediately after it instead of a screen later.

   `--donk-lift` must be zeroed with it: it is `100svh - 897u`, which assumes
   the hero IS the viewport, and here it is not — left alone it would push
   him 720px down. `sizeDonk()` in js/hero.js is gated on the same query for
   the same reason, since it grows him into room this hero does not have.

   SCOPED TO PORTRAIT rather than to a width, because the fault is the
   viewport being tall for its width — a landscape tablet at 1366 x 1024 was
   already fine at 25% empty. Desktop never matches this query. */
@media (min-width: 768px) and (orientation: portrait) {
  .rdk-hero {
    height: calc(897 * var(--u));
    min-height: 0;
    --donk-lift: 0px;
  }
}