/*
 * RECOMPOSITION.
 *
 * The stage size and the corner-prop pull are computed in src/core/viewport.js —
 * that is the structural half of responsiveness and it is done in script because
 * it depends on the aspect ratio, not on a width alone.
 *
 * What lives here is the *editorial* half: at each size the composition is
 * deliberately re-weighted rather than left to scale. A phone gets a closer,
 * warmer, more intimate frame; an ultrawide gets a cooler, wider tabletop with
 * the letter held smaller in more space.
 */

/* ── phones, portrait ─────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  :root {
    /* Type is keyed to the sheet in variables.css and the sheet already grows on
       small screens, so there is nothing to restate here — only the atmosphere,
       which a small screen held close wants more of. */
    --vignette-strength: 0.42;
    --grain-opacity: 0.042;
    --dapple-opacity: 0.1;
  }

  /* The props are pulled inward by script; softening their masks stops the
     newly-visible edges from reading as cut-outs. */
  .prop--tl,
  .prop--tr,
  .prop--bl,
  .prop--br {
    --depth: 0.7;
  }

  .letter {
    inset: 8.5% 8.5% 7% 9%;
  }
}

/* ── phones, landscape ────────────────────────────────────────────────────────
   Very short and very wide. The stage is height-driven and therefore small, so
   the composition is pushed wider and the letter is given proportionally more
   of it, otherwise the writing becomes unreadable. */

@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --vignette-strength: 0.3;
  }

  .letter {
    inset: 8% 9% 6.5% 9.5%;
    line-height: 1.5;
  }

  /* The bloom is a luxury that a phone GPU in landscape does not need. */
  .bloom {
    display: none;
  }
}

/* ── tablets ──────────────────────────────────────────────────────────────── */

@media (min-width: 601px) and (max-width: 1023px) {
  :root {
    --vignette-strength: 0.36;
  }
}

/* ── large desktop ────────────────────────────────────────────────────────── */

@media (min-width: 1600px) {
  :root {
    --vignette-strength: 0.3;
    --grain-opacity: 0.055;
  }
}

/* ── ultrawide ────────────────────────────────────────────────────────────────
   Past roughly 2.1:1 the procedural bed is most of what is on screen, so it
   earns a little more structure: a second, wider falloff so the surface does not
   read as a flat wash out at the edges of a 32:9 monitor. */

@media (min-aspect-ratio: 21/10) {
  .bed {
    background:
      radial-gradient(
        90% 130% at 18% 4%,
        hsl(20 62% 85% / 0.9) 0%,
        hsl(18 55% 78% / 0.32) 34%,
        transparent 66%
      ),
      radial-gradient(70% 120% at 84% 92%, hsl(12 40% 68% / 0.5) 0%, transparent 62%),
      radial-gradient(150% 120% at 55% 46%, var(--c-surface) 0%, var(--c-surface-deep) 40%, #c08d7b 100%);
  }

  :root {
    --vignette-strength: 0.4;
  }
}

/* ── coarse pointers ──────────────────────────────────────────────────────────
   No hover, no pointer parallax, and every touch target the browser might
   invent is suppressed — the scene is not interactive. */

@media (pointer: coarse) {
  .scene {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ── very tall phones ─────────────────────────────────────────────────────────
   19.5:9 and beyond. The stage is already width-driven; here the letter gets a
   touch more vertical room so the signature never crowds the lower edge. */

@media (max-width: 600px) and (min-aspect-ratio: 9/20) and (max-aspect-ratio: 9/16) {
  .letter {
    inset: 8% 8.5% 8.5% 9%;
  }
}

/* ── forced colours / high contrast ───────────────────────────────────────── */

@media (forced-colors: active) {
  .letter {
    mix-blend-mode: normal;
    forced-color-adjust: none;
    color: CanvasText;
  }
}