/* 05-client-stories: pinned scatter of three story cards (desktop), stacked list (mobile <= 768px).
   Measured from _capture/styles-*.json + dom-*.html; motion per umano-motion-spec section 10.
   Card box is 280x370 (computed width/height). The 410x454 in the capture is the bounding rect of
   that box rotated 25deg (280cos25 + 370sin25, 280sin25 + 370cos25), not the card size. */

[data-section="05-client-stories"] { height: 250vh; background: var(--night); }

/* sticky inner (100vh). scale(1) is the original's resting state for the (phase-3) zoom-through, and it
   also sets the text rasterisation the reference shots were taken with (measured: removing it costs ~2.4k px on mobile). */
[data-section="05-client-stories"] .cs__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center;
  transform: scale(1); transform-origin: 50% 50%; }

/* heading layer: centred, under the cards, fades to .5 over the first quarter of the pin */
[data-section="05-client-stories"] .cs__head { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity .1s linear; }
[data-section="05-client-stories"] .cs__title { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(56px, 8vw, 120px); line-height: .95; letter-spacing: -.03em;
  color: #fff; text-align: center; }
[data-section="05-client-stories"] .cs__lead { margin: 24px 0 0; max-width: 560px; font: 400 18px/28px var(--f-ui); color: #fff; text-align: center; }
[data-section="05-client-stories"] .cs__count { font-family: var(--f-sub); font-weight: 700; }

/* card (the fly-in writes left/top/opacity/--rot inline; these are the n = 0 defaults) */
[data-section="05-client-stories"] .cs__card { position: absolute; display: block; width: 280px; height: 370px; padding: 0; border: 0; background: none; color: inherit; text-align: start;
  border-radius: var(--r-story); box-shadow: 0 16px 48px rgba(0, 0, 0, .4); cursor: pointer; top: 120%; opacity: 0;
  --rot: 25deg; transform: rotate(calc(var(--rot) * var(--dir, 1))) scale(1); transition: transform .4s ease; -webkit-tap-highlight-color: transparent; }
[data-section="05-client-stories"] .cs__card:nth-of-type(1) { inset-inline-start: 3%; z-index: 10; }
[data-section="05-client-stories"] .cs__card:nth-of-type(2) { inset-inline-start: 77%; z-index: 11; }
[data-section="05-client-stories"] .cs__card:nth-of-type(3) { inset-inline-start: 23%; z-index: 12; }
[data-section="05-client-stories"] .cs__card:focus { outline: none; }
[data-section="05-client-stories"] .cs__card:focus-visible .cs__surface { outline: 2px solid var(--orange); outline-offset: 3px; }

[data-section="05-client-stories"] .cs__surface { position: relative; display: block; width: 100%; height: 100%; border-radius: var(--r-story); overflow: hidden; background: var(--night-2); }
[data-section="05-client-stories"] .cs__video { display: inline-block; width: 100%; height: 100%; object-fit: cover; }

/* hover overlay: logo + case title */
[data-section="05-client-stories"] .cs__over { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 24px 24px 16px;
  background: rgba(10, 13, 18, .9); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
[data-section="05-client-stories"] .cs__brand { display: block; }
[data-section="05-client-stories"] .cs__logo { display: block; height: 24px; width: auto; margin-bottom: 12px; object-fit: contain; }
[data-section="05-client-stories"] .cs__logo--tall { height: 32px; }
[data-section="05-client-stories"] .cs__name { display: block; margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 14px; line-height: 21px; color: #fff; }

/* "Read use case" bar */
[data-section="05-client-stories"] .cs__btn { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 0; border-radius: 12px; background: var(--orange); font: 600 13px var(--f-ui); color: #fff; pointer-events: none; }

/* stat chips: pop out on the inline-end side of the hovered card (right in LTR, left in RTL), 70ms stagger */
[data-section="05-client-stories"] .cs__chip { position: absolute; inset-inline-end: -180px; top: calc(20px + var(--k) * 90px); display: block; width: 160px; padding: 14px 16px; border-radius: 14px;
  background: #fff; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); pointer-events: none; opacity: 0;
  transform: translateY(calc(40px + var(--k) * 20px)) rotate(0deg) scale(.85);
  transition: opacity .3s ease calc(var(--k) * .07s), transform .45s var(--e-spring) calc(var(--k) * .07s); }
[data-section="05-client-stories"] .cs__val { display: block; margin: 0; font-family: var(--f-sub); font-weight: 900; font-size: 26px; line-height: 1; color: var(--night); }
[data-section="05-client-stories"] .cs__lbl { display: block; margin: 4px 0 0; font: 500 11px var(--f-ui); color: var(--grey-600); text-transform: uppercase; letter-spacing: .05em; }
[data-section="05-client-stories"] .cs__dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); margin-bottom: 8px; }
[data-section="05-client-stories"] .cs__impact { display: block; margin: 0; font: 600 12px/1.4 var(--f-ui); color: var(--night); }

/* hover (mouse, toggled by JS like the original's mouseenter/leave) + keyboard focus:
   straighten, scale 1.06 on a spring, overlay + chips in */
@media (min-width: 769px) {
  [data-section="05-client-stories"] .cs__card.is-hover,
  [data-section="05-client-stories"] .cs__card:focus-visible { z-index: 20; transform: rotate(0deg) scale(1.06); transition: transform .5s var(--e-spring), z-index 0s; }
  [data-section="05-client-stories"] .cs__card.is-hover .cs__over,
  [data-section="05-client-stories"] .cs__card:focus-visible .cs__over { opacity: 1; }
  [data-section="05-client-stories"] .cs__card.is-hover .cs__chip,
  [data-section="05-client-stories"] .cs__card:focus-visible .cs__chip { opacity: 1; transform: translateY(0) rotate(calc(var(--cr) * var(--dir, 1))) scale(1); }
}

/* reduced motion: cards sit in their final scatter (JS writes the same), no spring, no chip travel */
html.reduce-motion [data-section="05-client-stories"] .cs__card { opacity: 1; transition: none; }
html.reduce-motion [data-section="05-client-stories"] .cs__card:nth-of-type(1) { inset-inline-start: 18%; top: 22%; --rot: -12deg; }
html.reduce-motion [data-section="05-client-stories"] .cs__card:nth-of-type(2) { inset-inline-start: 62%; top: 20%; --rot: 10deg; }
html.reduce-motion [data-section="05-client-stories"] .cs__card:nth-of-type(3) { inset-inline-start: 38%; top: 42%; --rot: 2deg; }
html.reduce-motion [data-section="05-client-stories"] .cs__card.is-hover,
html.reduce-motion [data-section="05-client-stories"] .cs__card:focus-visible { transform: rotate(calc(var(--rot) * var(--dir, 1))) scale(1); transition: none; }
html.reduce-motion [data-section="05-client-stories"] .cs__chip,
html.reduce-motion [data-section="05-client-stories"] .cs__card.is-hover .cs__chip,
html.reduce-motion [data-section="05-client-stories"] .cs__card:focus-visible .cs__chip { transform: rotate(calc(var(--cr) * var(--dir, 1))); transition: opacity .2s ease; }
html.reduce-motion [data-section="05-client-stories"] .cs__head { transition: none; }

/* ---------- phone (<= 768px), mobile parity 2026-10-17: the desktop composition scaled to the phone ----------
   Same pinned scatter (sticky 100svh), same giant title behind the cards, same fly-in. Cards keep the 280x370 portrait at
   min(58vw, 280px); their resting spot is static CSS (below) and the fly-in moves them with transform only (JS writes an inline
   transform, only when it changes; never left/top, never a per-frame custom property, which would restyle the films inside). The films stay clean: a bottom gradient carries logo + name instead of the old 85% veil.
   Tap replaces hover: the card straightens, scales 1.04, and its 3 chips stack under it (or above it, .is-up, when there is no room).
   Revert: cp backups/pre-mobile-parity/05-client-stories.css css/sections/ && cp backups/pre-mobile-parity/05-client-stories.js js/sections/ */
@media (max-width: 768px) {
  [data-section="05-client-stories"] { height: 250svh; }
  [data-section="05-client-stories"] .cs__pin { height: 100svh; }
  [data-section="05-client-stories"] .cs__title { font-size: clamp(56px, 17vw, 96px); }
  [data-section="05-client-stories"] .cs__lead { margin-top: 18px; max-width: min(86vw, 420px); font-size: 18px; line-height: 29px; text-wrap: balance; } /* phone type pass: was 15/24 */

  [data-section="05-client-stories"] .cs__card,
  html.reduce-motion [data-section="05-client-stories"] .cs__card { width: min(58vw, 280px); height: auto; aspect-ratio: 280 / 370; box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
    will-change: transform, opacity; transform: rotate(calc(var(--rot) * var(--dir, 1))); transition: transform .2s ease-out; }
  [data-section="05-client-stories"] .cs__card:nth-of-type(1),
  html.reduce-motion [data-section="05-client-stories"] .cs__card:nth-of-type(1) { inset-inline-start: 8.5%; top: 15%; --rot: -8deg; }
  [data-section="05-client-stories"] .cs__card:nth-of-type(2),
  html.reduce-motion [data-section="05-client-stories"] .cs__card:nth-of-type(2) { inset-inline-start: 33%; top: 28%; --rot: 7deg; }
  [data-section="05-client-stories"] .cs__card:nth-of-type(3),
  html.reduce-motion [data-section="05-client-stories"] .cs__card:nth-of-type(3) { inset-inline-start: 14%; top: 46%; --rot: -2deg; }
  /* tapped: JS writes the straight + 1.04 pose inline; CSS raises it and springs the change */
  [data-section="05-client-stories"] .cs__card.is-hover { z-index: 20; transition: transform .5s var(--e-spring), z-index 0s; }
  html.reduce-motion [data-section="05-client-stories"] .cs__card.is-hover { z-index: 20; transform: rotate(calc(var(--rot) * var(--dir, 1))); transition: none; }

  /* brand strip: logo + name on a gradient over the lower ~30% only, always on */
  [data-section="05-client-stories"] .cs__over { opacity: 1; justify-content: flex-end; padding: 0 16px 14px;
    background: linear-gradient(180deg, rgba(10, 13, 18, 0) 66%, rgba(10, 13, 18, .75) 100%); }
  [data-section="05-client-stories"] .cs__logo { height: 20px; margin-bottom: 6px; }
  [data-section="05-client-stories"] .cs__logo--tall { height: 26px; }
  [data-section="05-client-stories"] .cs__name { font-size: 17px; line-height: 23px; } /* was 14/20 */

  /* chips: two side by side under the card, the "what it does" chip full width under them (--row = their measured height) */
  [data-section="05-client-stories"] .cs__chip { inset-inline-end: auto; inset-inline-start: 0; top: calc(100% + 12px); width: calc(50% - 4px); padding: 10px 12px; border-radius: 12px;
    transform: translateY(14px) scale(.9); }
  [data-section="05-client-stories"] .cs__chip:nth-child(3) { inset-inline-start: auto; inset-inline-end: 0; }
  [data-section="05-client-stories"] .cs__chip:nth-child(2),
  [data-section="05-client-stories"] .cs__chip:nth-child(3) { min-height: var(--row, 0px); }
  [data-section="05-client-stories"] .cs__chip:nth-child(4) { width: 100%; top: calc(100% + 20px + var(--row, 52px)); }
  /* above the card (.is-up), phone type pass: the pair sits next to the card and the wide chip on top of it, so the wide chip (taller than
     the pair since the type grew) grows away from the card instead of into the pair. Was: pair at 100% + 20 + row, wide chip at 100% + 12 */
  [data-section="05-client-stories"] .cs__card.is-up .cs__chip { top: auto; bottom: calc(100% + 12px); transform: translateY(-14px) scale(.9); }
  [data-section="05-client-stories"] .cs__card.is-up .cs__chip:nth-child(4) { bottom: calc(100% + 20px + var(--row, 52px)); }
  [data-section="05-client-stories"] .cs__card.is-hover .cs__chip { opacity: 1; transform: translateY(0) rotate(calc(var(--cr) * .4 * var(--dir, 1))) scale(1); }
  [data-section="05-client-stories"] .cs__val { font-size: 20px; line-height: 1.2; }     /* phone type pass: was 18 */
  [data-section="05-client-stories"] .cs__lbl { font-size: 13px; margin-top: 3px; }        /* was 10 */
  [data-section="05-client-stories"] .cs__impact { font-size: 14px; line-height: 1.5; }    /* was 12/1.45 */
  html.reduce-motion [data-section="05-client-stories"] .cs__chip,
  html.reduce-motion [data-section="05-client-stories"] .cs__card.is-hover .cs__chip { transform: none; transition: opacity .2s ease; }
}

/* Proof cards v1 (2026-10-15): real app screens in a phone frame; object-fit: cover crops ~25% of the 606×1080 loop,
   so each card is positioned on the part of the screen that carries the app's job. Revert: cp backups/pre-proof-cards/05-client-stories.css css/sections/05-client-stories.css */
[data-section="05-client-stories"] .cs__card:nth-of-type(1) .cs__video { object-position: center 40%; }  /* الفاحص: report + booking */
[data-section="05-client-stories"] .cs__card:nth-of-type(2) .cs__video { object-position: center 15%; }  /* قاولني: dashboard header + stats */
[data-section="05-client-stories"] .cs__card:nth-of-type(3) .cs__video { object-position: center 35%; }  /* سند: technician list + map */

/* Live films v1 (2026-10-15): card 1 «نظام شركتك» shows film 3 (lab/trailer-engine ops-loop) as live code instead of a video.
   js/films/boot.js mounts it into .cs__film ('card' variant; in the <= 768 px stacked list the 280 px band shows its middle); the engine cover-fits its
   stage to the host, and .cs__surface's radius + overflow clip it, so the fly-in and the hover straighten/scale move it like the video.
   Revert: cp backups/pre-live-films/05-client-stories.css css/sections/05-client-stories.css (and index.html). */
[data-section="05-client-stories"] .cs__film { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: inherit; opacity: 0; transition: opacity .5s ease; }
[data-section="05-client-stories"] .cs__film.is-film { opacity: 1; }
html.reduce-motion [data-section="05-client-stories"] .cs__film { transition: none; }

/* text balance 2026-10-18 (NOTES-text-balance.md): on phone the two small chips sit side by side; cap the value measure so every value
   breaks into the same two lines (one phrase part per line) at 360, 390 and 430, so the pair always shares line count and label baseline.
   Revert: delete this block. */
@media (max-width: 540px) {
  [data-section="05-client-stories"] .cs__val { max-inline-size: min-content; } /* card sub-text lines 2026-10-18: was 4.4em. Every value is two words, so min-content puts one word per line in any font
     (the system fallback fit some values on one line under 4.4em). Revert: set back to 4.4em. */
  [data-section="05-client-stories"] .cs__lbl { white-space: nowrap; } /* card sub-text lines 2026-10-18: «تاريخ التشغيل» needs 72-74px of a 74px chip at 350, so it
     wrapped beside a 1-line label in the fallback font. Kept on one line; at 320 it runs 7px into the 12px chip padding. Revert: delete. */
}