/* GREED marionette, as it sits in this page.
 *
 * NOT dist/greed-marionette.css. That stylesheet dresses the standalone demo page and opens
 * with `body { background: #ffffff }`, which would white out the site. Only the banner rules
 * are wanted here, so they are restated rather than imported.
 *
 * THE SLOT GROWS DOWNWARD AND NEVER UPWARD.
 * #greed-slot is the original `.s1-img-hochul.inline-div-0.top` div, and it sits flush with the
 * top of #slide-1: measured, exactly zero pixels above it. #slide-1 is a fixed-height section
 * with `overflow: hidden`, so a canvas taller than the slot and anchored to the slot's bottom
 * put the lines above the section's top edge, where they were cut off within a few pixels of
 * the letters.
 *
 * So the slot takes the height it needs instead. The section had 167px of unused height and the
 * slot claims part of it in viewport units, which keeps it proportional on a short screen rather
 * than reclaiming room that is not there. The canvas then fills the slot exactly: the lines
 * start at the top of the section and are visible the whole way down to the letters.
 *
 * The canvas is still wider than the slot, because the word's size on screen is a share of the
 * canvas width. A wide frame with a small `wordWidth` puts the camera further back for the same
 * letter size, and that is what stops the outer letters splaying: filling a narrow frame pulls
 * the camera in and the perspective reads as distortion. Horizontal overflow costs nothing, the
 * section clips it and the word is centred.
 */
/* WHERE THE HEIGHT COMES FROM.
 *
 * .sw2-slide.s1 is `position: fixed; height: 100vh` with overflow hidden: a pinned panel the next
 * slide scrolls over. It cannot grow, and measured, its children already fill it exactly. The
 * only unused height inside it is the 140px of bottom padding under "and ask", which is empty.
 *
 * 100px of that is given to the marionette and 40px left as breathing room above the fold edge,
 * because that is the only room there is. Everything else in the panel is untouched.
 */
#slide-1 .s1-body-box.no-boarder:not(.narrow) { padding-bottom: 40px; }

/* The panel is the only thing that clips the canvas: measured, #slide-1 is the single ancestor
   with overflow hidden. Letting it show means the lines are not cut off by a box edge, and the
   canvas can be given height beyond the slot without losing anything.
   The panel is `position: fixed; inset: 0`, so overflow leaves the screen rather than pushing the
   page around; overflow-x is pinned on the page as well, so a wide canvas can never produce a
   horizontal scrollbar. */
#slide-1 { overflow: visible; }
html, body { overflow-x: hidden; }

#greed-slot {
  /* Replaces the 2.39 aspect the flat wordmark had, and this is the whole budget: the canvas is
     exactly this tall, so nothing hangs over the headline and nothing reaches above the section
     to be cut off. The floor is the original height, so the slot can only ever match or exceed
     what the flat image took, never shrink it. */
  height: clamp(167px, 36vh, 400px);
  aspect-ratio: auto;
}

/* WHAT SETS THE PERSPECTIVE, exactly.
 *
 * fit() puts the camera at visH * 1.866 and frames the word to `wordWidth` of the visible width.
 * Work the algebra through and the foreshortening comes out as
 *
 *     word width on screen / frame height on screen
 *
 * The frame's WIDTH cancels. A wide short frame is therefore the worst case, and it was what I
 * had: 1.16 against 0.57 in the reference render, which is why the outer letters bent. The same
 * shortness also pins the letters to the top, because fit() clamps how far they can hang to
 * `visH - letter height - PAD`, and there was nothing left to give.
 *
 * Two consequences, and they are the whole design of this block.
 *
 * The letters' top lands at exactly `lineAbove` of the frame's height, so where they hang is
 * arithmetic, not taste: 0.55 of 292px puts them 161px down, with that much line above them.
 *
 * And the bend is word size over frame height, so at a height the section can actually spare the
 * word cannot also be as big as the flat image was. 0.26 of this frame's width is a 220px word
 * against 292px of height: 0.75, between the reference render's 0.57 and the 1.16 that bent.
 * A bigger word at the same height bends more. There is no third option without a taller section.
 */
#greed-banner {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 360%;
  height: 100%;
  z-index: 2;
}

/* Transparent canvas, so it sits on the section's own background. */
#greed-banner canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;   /* vertical page scroll still works over the letters */
  cursor: default;
}
#greed-banner canvas.over { cursor: grab; }
#greed-banner canvas.pull { cursor: grabbing; }

/* Until the canvas exists the slot still shows the flat wordmark it always showed, so the
   section never renders with a hole in it while half a megabyte of bundle and model arrive.
   The class is added the moment a canvas appears. */
#greed-slot.is-live { background-image: none; }