/* ===========================================================================
   INERA Connection — index.css
   Page-specific additions for the home page (/index.html).

   1. HERO — a new full-bleed section, first child of <main>, image only, no
      text. It reads --p from site.css's scroll driver (0..100, defaulting to
      100 = lit/end-state so no-JS and reduced-motion both render correctly)
      and zooms slowly toward the bright clearing in the upper-centre of the
      photograph as the reader scrolls down, unwinding on scroll-up. Capped at
      1.09x so the crop never eats the tree line at the frame's edges.

   2. GROUND OVERRIDES — im-6339.webp (landscape, 1300x866) replaces
      osveny.webp as the arrival's first-screen companion photograph.
      site.css's shared `.ground--path img` crop (height:100%,
      object-fit:cover) was tuned for the old, taller-than-wide source; only
      the recentring point needs to move here, not the crop mechanics.
      The stance's im-6213.webp needs no override: its portrait ratio
      (866x1300, 0.666) lands within a percent of the file it replaces
      (1200x1801, 0.666), so the existing `.ground--portrait` seed-clip reads
      the same as before.
   =========================================================================== */

.hero__figure {
  margin: 0;
  overflow: hidden;
  height: min(92svh, 62rem);
}

.hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the bright clearing the path opens onto sits upper-centre, slightly left */
  object-position: 48% 42%;
  transform: scale(clamp(1, calc(1 + var(--p) * 0.008), 1.09));
  transform-origin: 48% 34%;
  will-change: transform;
}

/* hero zoom always runs (client 2026-08) — reduced-motion opt-out removed */

/* im-6339.webp: the woman and the mirror she holds sit roughly centred
   across the frame's width (head ~10-45%, mirror ~50-85%) and in the upper
   half vertically (mirror + reflection resolve by ~55%); the old
   `52% 58%` point (tuned to hold osveny.webp's path mouth) would crop into
   both the bun and the mirror's rim on the narrow desktop column. */
.ground--path img { object-position: 49% 28%; }

/* 3. MOBILE ARRIVAL REORDER — client, 2026-08. Stacked to one column
   (site.css, `@media (max-width: 58rem)`), .arrival__first reads in plain
   DOM order: arrival text, then .ground--path (im-6339) — the LAST thing in
   .arrival__first — immediately followed by .stance's FIRST thing,
   .ground--portrait (im-6213). The two photographs land directly adjacent,
   stacked with no text between them. The client asked for im-6339 to move up
   by about a paragraph so arrival text separates the two images.

   .arrival__screen is always `display: flex; flex-direction: column`
   (site.css, unscoped) — never a grid — so turning it `display: contents` at
   this SAME breakpoint lets its own children (the whisper, h1, subtitle and
   two body paragraphs) join .ground--path as flat items of .arrival__first,
   which becomes the flex column instead. `order` then lifts the photograph
   to sit ahead of `.fold`, so `.fold`'s paragraph is the text that now
   separates the two images — nothing moves in the DOM, and desktop
   (`.arrival__screen` stays a boxed flex column, `.arrival__first` stays the
   two-column grid) is untouched: none of this runs above 58rem. */
@media (max-width: 58rem) {
  .arrival__first {
    display: flex;
    flex-direction: column;
    /* the unscoped `align-items: center` would otherwise shrink these
       paragraphs to content width and centre them, now that they are direct
       flex items instead of block children of a boxed .arrival__screen */
    align-items: stretch;
    /* replaced by explicit margins below — a single flex `gap` would apply
       uniformly between all six items once .arrival__screen's box is gone,
       doubling up the spacing each paragraph already sets for itself */
    gap: 0;
  }

  .arrival__screen { display: contents; }

  /* .arrival__screen's own padding-block (site.css, same breakpoint) no
     longer renders once it has no box of its own; re-home it on the first
     and last item that used to sit inside it. */
  .arrival__screen > .whisper { margin-top: var(--space-l); }
  .arrival__screen > .fold { padding-bottom: var(--space-s); }

  .arrival__first > .ground--path {
    order: 1;
    /* the gap .arrival__screen's flex column never had to give it (it used
       to be a separate grid item, spaced by .arrival__first's own `gap`,
       which is zeroed above) */
    margin-top: var(--space-l);
  }
  .arrival__screen > .fold { order: 2; }
}

/* client 2026-08: the tükör companion is now a portrait woodland path, not the
   old wide one — give the sweep frame a portrait ratio so it holds the path
   instead of a thin horizontal slice. */
.ground--tukor img { aspect-ratio: 100 / 124; object-position: 50% 52%; }

/* client 2026-08: on a phone the tall hero box showed only a vertical sliver of
   the wide beach frame. Below the desktop breakpoint the figure takes landscape
   proportions so the whole scene reads; a short landscape phone caps by height. */
@media (max-width: 48rem) {
  .hero__figure { height: auto; aspect-ratio: 16 / 10; max-height: 82svh; }
}
@media (orientation: landscape) and (max-height: 34rem) {
  .hero__figure { height: 82svh; aspect-ratio: auto; }
}