/* ============================================================
   HERO

   The greeting, envelope and scroll-hint are exact vector exports
   from the Figma file (see assets/hero-*.svg) — not CSS/font
   approximations. .hero__composition reproduces their exact relative
   position and size from the Figma artboard (a 1440px-wide frame):
   every left/top/width/height % below is (figma-coordinate - origin)
   / (shared bounding box size), and the composition's own width is a
   percentage of the mat with no upper cap, so the two scale together
   at every viewport width rather than drifting apart — on a wide
   monitor, and on a phone, where the mat is drawn wider than the
   window on purpose. Do not add gaps or hand-tune
   these numbers — if the source art changes, re-export from Figma
   and recompute the percentages from the new coordinates.
   ============================================================ */

/* Full-bleed: no section padding, the mat runs edge to edge at any
   viewport width. The real reason it wasn't: the base `section` rule
   (base.css) gives every section max-width:1280px + margin:0 auto —
   .hero was only ever resetting its OWN padding, never that max-width/
   margin, so it sat centered with bare page margin on either side
   the whole time (worse the wider the window). Reset here too, and no
   max-width cap on the mat/composition below either, per Clara: the
   whole thing scales up together instead of capping out. */
.hero {
  padding: 0;
  max-width: none;
  margin: 0;
  /* Below the design width the mat is drawn WIDER than the window (see
     --mat-width) and hangs off both sides. That overhang would count
     toward the page's own width and put a horizontal scrollbar on a
     page that looks perfectly fine — the same trap the footer's
     scallop hit. `clip`, not `hidden`, so this never becomes a scroll
     container. */
  overflow-x: clip;
}

/* Sized to the mat SVG's own intrinsic ratio (viewBox 1440x976), so the
   mat renders at exact 1:1 scale with zero cropping or letterboxing —
   its rounded corners are baked into the vector itself, so this frame
   must never carry its own border-radius or overflow:hidden, or the
   corners would double up/distort. */
.hero__mat-frame {
  position: relative;
  /* On a phone the mat is deliberately BIGGER than the window and runs
     off both sides, rather than shrinking to fit it.

     It has to be one or the other. The mat's height follows its width
     (fixed aspect ratio) but the composition standing on it has a size
     below which the greeting stops being readable — so a mat scaled to
     a 390px window is 264px tall and the composition that belongs on
     it no longer fits inside it at all. That is what was pushing
     "Welcome to" off the top of the screen and the scroll hint off the
     bottom edge onto the bare page.

     Letting the mat run past the window keeps the one relationship
     that matters — composition to mat, at the exact Figma ratio below
     — and costs only the mat's left and right edges, which is what a
     cutting mat photographed on a phone looks like anyway: bigger than
     the frame. Its top and bottom edges, the rounded corners there and
     the drop shadow all stay in view.

     654px is where the two settle: at that mat width the composition
     comes out 328px, which is the smallest the greeting reads well at.
     min() with 168vw holds the same ratio on the narrowest phones
     (320px), where a flat 654px mat would push the composition wider
     than the window itself. At 654px and up the window wins and
     nothing overhangs — the desktop layout is untouched. */
  --mat-width: max(100%, min(654px, 168vw));
  width: var(--mat-width);
  aspect-ratio: 1440 / 976;
  /* Centres the overhang. `margin: 0 auto` cannot: a block wider than
     its container is over-constrained, so both auto margins compute to
     0 and the mat would sit flush against the left edge with the whole
     overhang on the right. This is always <= 0, since --mat-width is
     never less than 100%. */
  margin-left: calc((100% - var(--mat-width)) / 2);
}

/* Exact vector export of the mat (assets/hero-mat.svg, inlined in the HTML
   for crisp edges). Fills .hero__mat-frame exactly (same aspect ratio),
   so no preserveAspectRatio cropping is needed. */
.hero__mat {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* The original Figma "hero frame" (1440x773) that the greeting/envelope/
   scroll-hint composition is centered within — only the TOP portion of
   the taller 1440x976 mat; the remaining ~203 units of mat below it is
   deliberately bare rug, not a place content was ever meant to center
   against. 773/976 = 79.2%. */
.hero__content-frame {
  position: absolute;
  inset: 0;
  height: 79.2%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The nav bar floats over the top of the mat at every width, and the
   room the composition has above it does NOT scale with the window:
   the gap the mat leaves is a percentage of the mat's height, so it
   shrinks with the screen, while the bar stays the same 66px tall.
   At 1440 that gap is 104px and the bar clears easily; by 768 it is
   55px and the greeting's first swash runs into the pill.

   So the shortfall is paid back, and only where there is one: padding
   here, not a top offset, so the composition still CENTRES — in the
   room left below the bar rather than in the whole mat. The padding is
   twice the shortfall because centring gives back half of it.
   8vw is the rate the gap grows at (0.0723 of the window, doubled),
   which is what makes this reach exactly zero at 1375px — every width
   from there up, the approved desktop composition is untouched. */
.hero__content-frame {
  padding-top: max(0px, calc(110px - 8vw));
}

/* Shared bounding box of "Welcome to" + envelope + scroll-hint in the
   1440-wide Figma artboard: x 358–1080, y 138–703 (722 x 565 units). */
.hero__composition {
  position: relative;
  /* A percentage of the mat, not of the window. 722/1440 of the Figma
     artboard is 50.14%, so this is the same number the vw version
     carried — but measured against the thing the composition actually
     stands on, which is what keeps the two in step at every width,
     including the ones where the mat is wider than the window.
     It carried a 380px floor before, to stop the composition
     disappearing on small screens. The mat's own floor above does that
     job now, and does it better: the floor used to hold the
     composition at 380px while the mat kept shrinking past it, which
     is exactly how the two came apart.
     No upper bound either — this scales past its native 722px on wide
     screens together with the (also uncapped) mat. */
  width: 50.14%;
  aspect-ratio: 722 / 565;
}

.hero__title {
  position: absolute;
  inset: 0;
}

/* "Welcome to" — figma x 358–1080, y 138–358 */
.hero__greeting {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 38.94%;
}

/* Envelope group — figma x 538.016–890.452, y 274.284–627.84. Nudged
   down slightly from the exact Figma top (24.12% -> 25.4%) so a bit
   more of the greeting's final "o" clears the envelope's peak. */
.hero__envelope {
  display: block;
  position: absolute;
  left: 24.94%;
  top: 25.4%;
  width: 48.81%;
  height: 62.58%;
  cursor: pointer;
}

.hero__envelope-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Split into 3 separate exports (back flap / letter / front pocket)
   specifically so the letter alone can slide — per Clara's own Figma
   motion notes, only the paper pokes out on hover, not the whole
   envelope. Resting a little further into the pocket than its native
   drawn position makes the hover pop read as a bigger, more
   deliberate move rather than a small nudge. */
.hero__envelope-card {
  transition: transform var(--dur-medium) var(--ease-out);
  transform: translateY(5px);
}

.hero__envelope:hover .hero__envelope-card,
.hero__envelope:focus-visible .hero__envelope-card {
  transform: translateY(-10px) rotate(-1deg);
}

/* "Let's get in touch..." + arrows — figma x 611–827, y 686–703.
   Sits at the very bottom of the composition. Cream, to match the mat
   it is printed on — it used to need a dark fallback for narrow
   viewports, where it spilled past the mat's bottom edge onto the bare
   page, but the composition is measured against the mat at every width
   now (see .hero__mat-frame) and can no longer leave it. */
.hero__scroll-hint {
  display: block;
  position: absolute;
  left: 35.04%;
  top: 96.99%;
  width: 29.92%;
  color: var(--color-hero-greeting);
  animation: bob 1.6s ease-in-out infinite;
}

.hero__scroll-hint-art {
  width: 100%;
  height: auto;
  display: block;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}