/* =====================================================================
   css/sections/04-how-it-works.css
   Pinned 500vh horizontal card track + night takeover. Geometry measured on
   the live site (_capture/styles-*.json, SECTION-MAP §04); motion values from
   umano-motion-spec §8.4 + §9. Viewport-dependent sizes arrive from the JS as
   --hiw-* custom properties; the values below are the no-JS fallbacks.
   ===================================================================== */
[data-section="04-how-it-works"] {
  --hiw-w: 487px;                                       /* card width */
  --hiw-h: clamp(240px, calc(100vh - 372px), 694px);    /* media height = clamp(240, vh-112-260, 694) */
  --hiw-r: 28px;                                        /* media radius = round(h/694*37) */
  --hiw-pad: 80px;                                      /* track padding-inline */
  position: relative;
  height: 500vh;
  background: var(--intro-grey);                        /* outer is #e7e8e6 on the original; the white pin covers it */
}

[data-section="04-how-it-works"] .hiw__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* sticky 100vh pin -> zoom wrapper (scaled in the last fifth) -> stage (perspective) -> track (translated) */
[data-section="04-how-it-works"] .hiw__pin {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden; overflow: clip;                     /* clip: focus can never scroll the pin sideways */
  display: flex; flex-direction: column;
  background: var(--paper);
}
[data-section="04-how-it-works"] .hiw__zoom { display: flex; flex-direction: column; height: 100%; }
[data-section="04-how-it-works"] .hiw__stage {
  flex: 1; min-width: 0; min-height: 0;
  overflow: hidden; overflow: clip;
  display: flex; align-items: center;
  perspective: 1400px; perspective-origin: 50% 50%;
}
[data-section="04-how-it-works"] .hiw__track {
  display: flex; gap: 33px; flex-shrink: 0;
  padding-inline: var(--hiw-pad);
  will-change: transform;
}

/* card = lag wrapper (translateX from the JS) > rise (reveal) > body; nested so the two transforms never fight */
[data-section="04-how-it-works"] .hiw__card { flex-shrink: 0; }
[data-section="04-how-it-works"] .hiw__rise {
  opacity: 0; transform: translateY(80px) skewY(3deg);
  transition: opacity .6s ease, transform 1.2s var(--e-media);
  will-change: transform, opacity;
}
[data-section="04-how-it-works"] .hiw__card.is-in .hiw__rise { opacity: 1; transform: translateY(0) skewY(0deg); }

[data-section="04-how-it-works"] .hiw__body {
  display: flex; flex-direction: column; gap: 20px;
  width: var(--hiw-w); flex-shrink: 0;
  cursor: pointer; outline: none;
}
[data-section="04-how-it-works"] .hiw__body:focus-visible .hiw__media { outline: 2px solid var(--orange); outline-offset: 4px; }

[data-section="04-how-it-works"] .hiw__media {
  position: relative; height: var(--hiw-h); flex-shrink: 0;
  border-radius: var(--hiw-r); overflow: hidden;
  background: var(--intro-grey);
}
[data-section="04-how-it-works"] .hiw__media--cream { background: var(--cream); }

[data-section="04-how-it-works"] .hiw__video {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.15); transition: transform 1.8s var(--e-media);
}
[data-section="04-how-it-works"] .hiw__card.is-in .hiw__video { transform: scale(1); }

/* text */
[data-section="04-how-it-works"] .hiw__text { display: flex; flex-direction: column; gap: 8px; max-width: 437px; }
[data-section="04-how-it-works"] .hiw__head { display: flex; gap: 9px; align-items: center; }
[data-section="04-how-it-works"] .hiw__icon { display: block; width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
[data-section="04-how-it-works"] .hiw__title {
  font-family: var(--f-sub); font-weight: 700; font-size: 20px; line-height: normal; letter-spacing: -.2px;
  color: var(--ink); margin: 0;
}
[data-section="04-how-it-works"] .hiw__desc {
  font-family: var(--f-sub); font-weight: 500; font-size: 18px; line-height: 1.4; letter-spacing: -.18px;
  color: var(--ink); margin: 0;
}

/* card 3: 5x5 dot grid (SVG built by the JS) */
[data-section="04-how-it-works"] .hiw__dots { position: absolute; inset: 0; display: block; }
[data-section="04-how-it-works"] .hiw__dots circle { transition: fill .15s ease; }
[data-section="04-how-it-works"] .hiw__dots .is-glyph-cell { transition: none; }

/* card 4: physics canvas */
[data-section="04-how-it-works"] .hiw__phys { position: absolute; inset: 0; display: block; }

/* card 5: logo glyph between two clouds; the clouds split apart with the zoom */
[data-section="04-how-it-works"] .hiw__art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
[data-section="04-how-it-works"] .hiw__glyph {
  position: absolute; left: 50%; top: 50%; display: block;
  width: 219px; height: 258.6px;                        /* min(w, h)*.45 x 1.18, set by the JS */
  transform: translate(-50%, -50%);
  color: var(--orange); overflow: visible; will-change: transform;
}
[data-section="04-how-it-works"] .hiw__cloud {
  position: absolute; display: block; width: 316.55px; height: auto; max-width: none;  /* min(w, h)*.65, set by the JS */
  pointer-events: none; will-change: transform;
}
[data-section="04-how-it-works"] .hiw__cloud--a { top: 8%; inset-inline-start: -5%; }
[data-section="04-how-it-works"] .hiw__cloud--b { bottom: 8%; inset-inline-end: -5%; }

/* reduced-motion hand-off layer (unused in full motion) */
[data-section="04-how-it-works"] .hiw__night {
  position: absolute; inset: 0; background: var(--night); opacity: 0; pointer-events: none;
  transition: opacity .4s ease;
}

/* ---------- mobile (<= 768px): same pin, narrower cards, smaller type ---------- */
@media (max-width: 768px) {
  [data-section="04-how-it-works"] {
    --hiw-w: min(440px, calc(100vw - 56px));
    --hiw-h: min(calc(var(--hiw-w) * 1.35), max(240px, calc(100vh - 300px))); /* phone type pass: 262 -> 300, room for the larger card text */
    --hiw-r: 23px;
    --hiw-pad: 20px;
  }
  [data-section="04-how-it-works"] .hiw__title { font-size: 21px; line-height: 1.35; text-wrap: balance; } /* phone type pass: was 17 */
  [data-section="04-how-it-works"] .hiw__desc { font-size: 17px; line-height: 1.6; text-wrap: pretty; }   /* was 15/1.4 */
}

/* ---------- reduced motion: end states, no scrubbing ----------
   The pin stays (page height unchanged). The track becomes a native horizontal
   scroll-snap row with every card centrable; cards are revealed, videos at rest,
   no lag, no zoom. The night hand-off is a plain fade (the JS adds .is-night). */
html.reduce-motion [data-section="04-how-it-works"] .hiw__rise,
html.reduce-motion [data-section="04-how-it-works"] .hiw__video { transition: none; }
html.reduce-motion [data-section="04-how-it-works"] .hiw__stage {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin;
}
html.reduce-motion [data-section="04-how-it-works"] .hiw__track {
  padding-inline: calc(50% - var(--hiw-w) / 2);
  will-change: auto;
}
html.reduce-motion [data-section="04-how-it-works"] .hiw__card { scroll-snap-align: center; }
html.reduce-motion [data-section="04-how-it-works"] .hiw__night.is-night { opacity: 1; }

/* card sub-text lines 2026-10-18 (NOTES-card-subtext-lines.md): phones only. The card is min(440px, 100vw - 56px) wide, so the
   measure used to change with every phone width and the five bodies broke into 2 or 3 lines (or 1) depending on the phone.
   Type now scales with the card (17px from a 388px screen up, down to 15px at 350) inside a fixed 19.5em measure, so every phone
   lays the text out identically: bodies 2 lines (raw length 1.45 to 1.77 lines), titles 1 line. min-height keeps the 2-line box
   as an alignment safety net only. Revert: delete this block. */
@media (max-width: 540px) {
  [data-section="04-how-it-works"] .hiw__desc {
    font-size: min(17px, calc(var(--hiw-w) / 19.5)); max-inline-size: 19.5em; min-height: 3.2em; text-wrap: balance;
  }
  [data-section="04-how-it-works"] .hiw__title { font-size: min(21px, calc((var(--hiw-w) - 29px) / 14.4)); }
}

/* ios-fix3 (BRAND-SWAP-NOTES.md): phones with the WhatsApp dock. The pin stays 100vh (on iOS the toolbars-hidden height, so the night
   takeover still fills the screen), but the card is centred in the toolbars-shown part of it, between the nav pill (--hiw-top, set by the
   JS) and the dock band (16 + 56 + 16 px, plus the home-bar inset). The JS sizes the media from 100svh to fit that band, so the card
   text is never under the dock, whichever way the toolbar is. */
@media (max-width: 700px) {
  html:not(.reduce-motion) [data-section="04-how-it-works"] .hiw__stage { box-sizing: border-box;
    padding-top: var(--hiw-top, 92px); padding-bottom: calc(100vh - 100svh + 88px + env(safe-area-inset-bottom, 0px)); }
}