/* ============================================================================
 * scene-life.css — THE PHOTOGRAPHIC PLATE
 * ---------------------------------------------------------------------------
 * The retired version carried boats, glitter, and a canvas engine that moved
 * the photograph's own pixels. Those remain gone. The current ambience layer
 * is intentionally smaller: birds, distant people, and fireflies only.
 *
 * WHY, so it is not rebuilt by accident. Neither one animates the artwork. The
 * sprites were a second picture laid on top — a drawn boat next to a painted
 * boat is two boats. The canvas engine re-sampled a static plate every frame
 * (`out[x,y] = base[x+dx, y+dy]`), which warps a photograph rather than moving
 * it; the architecture never changed, but nothing was ever really animated
 * either. And the substrate defeats both: measured on this plate there is no
 * pixel grid at any scale, and 237,739 distinct colours, so it is a
 * continuous-tone render IN a pixel-art style, not pixel art.
 *
 * The scene is being rebuilt properly — the artwork redrawn as true pixel art
 * first, then animated — so what remains here is only what shows the plate.
 * ========================================================================== */

/* THE COVER FRAME.
   `background-size: cover` resolves against the image's own 1586x992 aspect and
   crops the overflow, which is fine for a background but useless as a
   coordinate space. Reconstructing the cover rectangle as a REAL box —
   `max(100%, 100cqh * 1586/992)` by `max(100%, 100cqw * 992/1586)` is exactly
   what cover computes — means anything positioned in percentages inside it
   lands on the same feature at every viewport size. The animation work to come
   needs that guarantee, so the frame stays even though nothing sits in it yet.

   Centring uses the `translate` PROPERTY, deliberately, so `transform` is left
   free for the pan without the two fighting. */
.pixel-worlds.scenery { container-type: size; }

.scene-photo {
  /* THE FOCAL POINT, DECLARED RATHER THAN INHERITED FROM `cover`.
     The artwork is 1586x992 (landscape, ratio 1.60). On a portrait phone
     (~0.46) `cover` is driven by height, so the frame shows the full height of
     the picture and only a NARROW VERTICAL SLICE of its width — at 390px that
     is about 27% of the image. Which 27% you get was previously whatever
     centring happened to land on.
     These two make it a decision. --focal-x is the point in the IMAGE that
     gets aligned to the same point in the FRAME, so moving it re-aims the
     crop without resizing or distorting anything. Portrait overrides live in
     the media query at the foot of this file. */
  --focal-x: 50%;
  /* Wide screens used to centre the oversized cover plate, cropping the sky
     and the mountain tops. Pinning the image to its top edge moves the full
     artwork down without ever exposing an empty band above it. */
  --focal-y: 0%;

  position: absolute;
  top: var(--focal-y);
  left: var(--focal-x);
  z-index: 0;
  pointer-events: none;

  /* Cover, plus 6% of overscan. The overscan is load-bearing twice over: it is
     where the pan travels so the plate never runs out of itself, and it covers
     the seam the chapter pages leave — those size #scenery to 25% and scale(4),
     and that 25% resolves against a width that EXCLUDES the scrollbar, so an
     exact-cover frame lands ~8px short of the right edge. */
  width: calc(max(100%, 100cqh * 1586 / 992) * 1.06);
  height: calc(max(100%, 100cqw * 992 / 1586) * 1.06);
  translate: calc(0% - var(--focal-x)) calc(0% - var(--focal-y));

  /* The detailed 4K-plus master used by the approved hero reference. Crisp
     browser sampling retains its visible pixel structure at every viewport. */
  background: url("../public/backgrounds/mediterranean-pixel-enhanced-4k.png") 0 0 / 100% 100% no-repeat;
  image-rendering: crisp-edges;
  image-rendering: pixelated;

  /* THE UNITS ARE PERCENTAGES, NOT PIXELS. A translate in px is measured in the
     element's own coordinate space, and the chapter pages run this layer through
     `scale(4)` — so `9px` of pan there is 36px on screen. A percentage resolves
     against the frame, so the pan is the same fraction of the picture at any
     scale. */
  transform: translate3d(
    calc(var(--pan-x, 0) * 0.7%),
    calc(var(--pan-y, 0) * 0.4% + var(--pan-s, 0) * 2%),
    0
  );
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* A soft fairy-tale grade made from light, not fog. The color layer is kept
   inside the scenery plate so every foreground label remains clean and crisp. */
.scene-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 79% 13%, rgba(255, 225, 168, 0.3), transparent 34%),
    radial-gradient(circle at 24% 24%, rgba(244, 178, 206, 0.13), transparent 43%),
    linear-gradient(135deg, rgba(237, 171, 202, 0.08), rgba(169, 190, 239, 0.07) 52%, rgba(255, 218, 145, 0.11));
  mix-blend-mode: soft-light;
}

.scene-ambience {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
}

/* THE LIVING PLATE.
   Sits exactly over the still background at the same size, so the still is a
   seamless fallback rather than a different picture. It is drawn at its NATIVE
   515x310 and stretched by CSS — never by the canvas — because a canvas sized
   to the viewport would put fractional pixels on the grid, and the entire point
   of the redraw was to have a grid worth keeping. */
.scene-plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

.scene-plate {
  z-index: 1;
}

/* The world box must stop contributing its own offset, or the frame above
   inherits the -2% the retired CSS worlds carried for their parallax. */
.pixel-world[data-world="mediterranean"] { inset: 0; }

/* The paper-coloured wash that used to sit here (a linear-gradient of --field,
   up to 66% opaque at the top/bottom) is gone by decision — it read as a milky
   film over the whole photo, not just where the nav and the record needed help
   clearing contrast. Type now holds its own contrast via text-shadow (see
   .hero__wordmark, .connect-panel, .stack-section .contact-kicker). */
.pixel-worlds.scenery::before { content: none; }

/* ---------------------------------------------------------------------------
 * PORTRAIT ART DIRECTION
 * A phone sees roughly the middle quarter of this picture's width, so which
 * quarter is the whole composition. Aimed slightly left of centre: that pulls
 * in the terrace and the stacked hillside architecture on the left and the
 * church tower, and still leaves the harbour and open water running off the
 * right edge — so the crop keeps foreground, town, water AND the mountain/sky
 * band instead of sitting on an anonymous middle strip.
 * Nothing is stretched: only the alignment point moves.
 * ------------------------------------------------------------------------ */
@media (max-width: 760px) {
  .scene-photo {
    --focal-x: 44%;
    --focal-y: 48%;

    /* No pointer to pan with on a phone, so only the scroll term survives. */
    transform: translate3d(0, calc(var(--pan-s, 0) * 1.4%), 0);
  }
}

/* Short landscape phones: height is scarce, so bias toward the horizon rather
   than the foreground terrace, which is the first thing worth losing. */
@media (max-height: 520px) and (orientation: landscape) {
  .scene-photo {
    --focal-y: 42%;
  }
}