/*
 * The landing's stage geometry, shared by the first paint and the page.
 *
 * index.html draws the landing before any bundle arrives, and pages/LandingPage.tsx draws it
 * again the moment React mounts; the two have to agree to the pixel or the hero jumps on a slow
 * network. Both use the class names below, and this file is served from the public dir as-is —
 * linked from index.html with a `?v=` the nginx one-year cache is busted by (bump it on every
 * change), and in force for the React page because the link stays in the document.
 *
 * In a wide landscape window (1024px+, 11:10 or wider — the `stage:` variant in
 * tailwind.config.ts) the copy stands against the left edge and the NEXT UP card against the
 * right one, and the photo is sized and shifted so the right fighter's head sits whole in the gap
 * between them at every size — never under the copy, never under the card, never cut (owner,
 * 2026-10-16). The photo always covers the whole stage, so its head grows with the stage's
 * height; the columns and the gutter step with the screen to keep the gap wide enough for it.
 * Verified for every window from 1024px wide and 560px tall up to 2600px, at any aspect from
 * 11:10 to ultra-wide: the head clears both neighbours by 10px or more and the photo reaches every
 * edge of the stage. In a squarer window the photo is the band above the copy and none of this
 * applies.
 */
.landing-stage {
  --stage-gutter: 16px;
  --stage-text: 364px;
  --stage-card: 316px;
  --stage-gap: 10px;
}
@media (min-width: 1280px) {
  .landing-stage { --stage-gutter: 32px; --stage-text: 440px; --stage-card: 380px; --stage-gap: 16px; }
}
@media (min-width: 1440px) {
  .landing-stage { --stage-gutter: 40px; --stage-text: 540px; --stage-card: 400px; --stage-gap: 20px; }
}
@media (min-width: 1700px) {
  .landing-stage { --stage-gutter: 64px; --stage-text: 540px; --stage-card: 440px; --stage-gap: 24px; }
}
/* In a wide window the copy and the card come in from the edges by about a centimetre (owner,
   2026-10-16); in a squarer one that room is the head's, so the gutters above stand. Verified
   by the same sweep: the head still clears both by 10px or more. */
@media (min-width: 1024px) and (min-aspect-ratio: 7/5) {
  .landing-stage { --stage-gutter: 32px; }
}
@media (min-width: 1280px) and (min-aspect-ratio: 7/5) {
  .landing-stage { --stage-gutter: 72px; }
}
@media (min-width: 1440px) and (min-aspect-ratio: 7/5) {
  .landing-stage { --stage-gutter: 80px; }
}
@media (min-width: 1700px) and (min-aspect-ratio: 7/5) {
  .landing-stage { --stage-gutter: 104px; }
}
/* The photo below the stage: the band above the copy, pinned to the top and as tall as the faces
   need, fading out at its foot. Two classes deep on purpose (and the stage rule below the same):
   this sheet is linked before the app's own CSS, and a single class written earlier would lose
   to any utility on the element. */
.landing-stage > .landing-stage-photo {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: max(26rem, 52vw);
  object-fit: cover;
  object-position: top;
  filter: grayscale(0.65) contrast(1.05);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent);
  mask-image: linear-gradient(to bottom, black 55%, transparent);
}
@media (min-width: 1024px) and (min-aspect-ratio: 11/10) {
  .landing-stage { container-type: inline-size; }
  .landing-stage > .landing-stage-photo {
    /* The right fighter's head in hero.webp (1280×720): x 630–870, y 30–365, as fractions of
       the photo's WIDTH, so every one scales with the width the photo is drawn at. */
    --head-left: 0.4921875;
    --head-right: 0.6796875;
    --head-top: 0.0234375;
    --head-height: 0.26171875;
    --text-edge: calc(var(--stage-gutter) + var(--stage-text));
    --card-edge: calc(100cqw - var(--stage-gutter) - var(--stage-card));
    /* Wide enough to cover the stage across and down (the stage's own minimum height: the
       screen under the header and the footer, and never less than 30% of the width), for the
       part right of the head to reach past the card to the edge, and for the part left of it to
       reach past the copy. */
    --photo-w: max(
      100cqw,
      max(100svh - 9.5rem, 30vw) * 16 / 9,
      (var(--stage-gutter) + var(--stage-card) + var(--stage-gap)) / (1 - var(--head-right)),
      (var(--text-edge) + var(--stage-gap)) / var(--head-left)
    );
    inset: auto;
    width: var(--photo-w);
    max-width: none;
    height: auto;
    left: clamp(
      max(100cqw - var(--photo-w), var(--text-edge) + var(--stage-gap) - var(--head-left) * var(--photo-w)),
      (var(--text-edge) + var(--card-edge) - (var(--head-left) + var(--head-right)) * var(--photo-w)) / 2,
      min(0px, var(--card-edge) - var(--stage-gap) - var(--head-right) * var(--photo-w))
    );
    /* A quarter of the room above the head, and the photo's top edge never inside the stage: a
       stage the content stretched past the photo's height keeps the photo at the top and fades
       its foot out instead. */
    top: min(0px, max(100% - var(--photo-w) * 9 / 16, (100% - var(--head-height) * var(--photo-w)) / 4 - var(--head-top) * var(--photo-w)));
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent);
    mask-image: linear-gradient(to bottom, black 85%, transparent);
  }
}