/* TrustPay site: use cases "Payments built for strangers" (v4, 2 Oct 2026; v6 skin 3 Oct: flat tones, Forest & Mint).
   Base = the still layout (reduced motion, Pause motion at load, screens under 560 px tall): five cards, each with
   its icon. Pinned layout (html.motion and min-height 560 px): the stage sticks for five stretches of scroll and
   cases.js crossfades the cases and drives each scene's clock from the scroll (one case per stretch). */

/* each case's colour block */
.case-fig, .clist .case-still { background-color: var(--ground-2); }
.case-fig[data-case="0"], .clist li[data-case="0"] .case-still,
.case-fig[data-case="3"], .clist li[data-case="3"] .case-still { background-color: var(--brand-soft); }
/* the stand-in until a scene is live, and the still card's picture: the case's icon on its tone */
.case-fb, .case-still { display: grid; place-items: center; color: var(--brand-text); }
.case-fb { position: absolute; inset: 0; }
.case-fb .i { width: 22%; height: auto; }
.case-still .i { width: 64px; height: 64px; }

/* ---------------------------------------------------------------- still: a list of five cards */
.cases-art, .cases-prog { display: none; }
.clist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(32px, 4vw, 52px); }
.clist > li { display: flex; flex-direction: column-reverse; justify-content: flex-end; border-radius: var(--r-block); background: var(--ground-2); overflow: hidden; }
.clist button { display: block; width: 100%; padding: 18px 22px 22px; border: 0; background: none; text-align: left; cursor: default; pointer-events: none; }
.case-still { aspect-ratio: 16 / 9; }
.ct b { display: block; font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -.025em; color: var(--ink); transition: color var(--t2) var(--ease); }
.ct-d { display: grid; grid-template-rows: 1fr; }
.ct-d > span { display: block; min-height: 0; overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 15.5px; line-height: 1.45; }

/* ---------------------------------------------------------------- pinned: the scroll sequence */
@media (min-height: 560px) {
  html.motion .cases { padding-block: 0; }
  html.motion .cases-pin { --case-run: 80vh; height: calc(100vh + 5 * var(--case-run)); }
  html.motion .cases-stage {
    position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center;
    padding: calc(var(--pill-b) + 8px) 0 clamp(16px, 3vh, 32px);
  }
  html.motion .cases-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4.4vw, 72px); align-items: center; width: 100%; }
  html.motion .cases-art {
    display: block; position: relative; justify-self: center; width: min(100%, calc((100svh - var(--pill-b) - 72px) * 1.25)); aspect-ratio: 5 / 4;
    border-radius: var(--r-block); overflow: hidden; --zr0: 40px; --zr1: 34px; isolation: isolate;
  }
  /* v8 (client r8): no pale panel; the scene stands on the page ground */
  html.motion .case-fig { background-color: transparent; }
  html.motion .case-fig { position: absolute; inset: 0; will-change: opacity, transform; }
  html.motion .case-fig > .art { position: absolute; inset: 0; }
  html.motion .case-still { display: none; }

  html.motion .clist { display: grid; grid-template-columns: none; gap: 4px; margin-top: 30px; }
  html.motion .clist > li { display: block; border-radius: 22px; background: none; overflow: visible; }
  /* v8 (client r8): exactly one highlighted item (the one on); the rest are plain rows of one height, hover only
     darkens the title (no second tint) */
  html.motion .clist button { min-height: 60px; padding: 15px 20px; border-radius: 22px; cursor: pointer; pointer-events: auto; transition: background-color var(--t2) var(--ease); }
  html.motion .clist button[aria-pressed="true"] { background: var(--ground-2); }
  html.motion .clist .ct b { color: var(--muted); }
  html.motion .clist button[aria-pressed="true"] .ct b, html.motion .clist button:hover .ct b { color: var(--ink); }
  html.motion .ct-d { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s var(--ease), opacity .35s var(--ease); }
  html.motion [aria-pressed="true"] .ct-d { grid-template-rows: 1fr; opacity: 1; transition-delay: 0s, .08s; }

  html.motion .cases-prog { display: flex; align-items: center; gap: 14px; margin: 22px 0 0 20px; color: var(--muted); font-size: 14px; }
  html.motion .cp-n { min-width: 3.2em; font-variant-numeric: tabular-nums; }
  html.motion .cp-n b { color: var(--ink); font-weight: 650; }
  html.motion .cp-bar { display: flex; gap: 6px; }
  html.motion .cp-bar i { position: relative; width: 28px; height: 4px; border-radius: 4px; background: var(--field); overflow: hidden; }
  html.motion .cp-bar i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--brand); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); transition: transform .45s var(--ease); }
}

/* phones and tablets, pinned: title, art, then the one case that is on, stacked; nothing scrolls sideways */
@media (min-height: 560px) and (max-width: 1023px) {
  html.motion .cases-stage { align-items: stretch; padding-top: calc(var(--pill-b) + 12px); }
  html.motion .cases-grid { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 0; }
  html.motion .cases-side { display: contents; }
  html.motion .cases .sec-head { order: 0; }
  html.motion .cases .sub { margin-top: 8px; font-size: 1rem; }
  html.motion .cases-art { order: 1; align-self: center; margin-top: clamp(14px, 2.4vh, 24px); width: min(100%, calc(100svh - 430px)); aspect-ratio: 1 / 1; }
  html.motion .clist { order: 2; display: grid; margin-top: clamp(12px, 2vh, 20px); }
  html.motion .clist > li {
    grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translate3d(0, 10px, 0);
    transition: opacity .2s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
  }
  /* the old text is gone before the new one fades in (no overlap) */
  html.motion .clist > li.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease) .22s, transform .45s var(--ease) .22s, visibility 0s linear 0s; }
  html.motion .clist button, html.motion .clist button[aria-pressed="true"], html.motion .clist button:hover { padding: 0; background: none; pointer-events: none; }
  html.motion .clist .ct b { color: var(--ink); }
  html.motion .ct-d, html.motion [aria-pressed="true"] .ct-d { grid-template-rows: 1fr; opacity: 1; }
  html.motion .cases-prog { order: 3; margin: clamp(10px, 1.8vh, 18px) 0 0; }
  html.motion .cp-bar i { width: 22px; }
}