/* #for — calm: centred statement (lines rise from masks when seen) over two cards side by side, which arrive from
   opposite sides. Deliberately an enter-trigger: the section before it (#night) is the scroll scrub. */
.for { overflow-x: clip; }
.for-statement { font-size: var(--d-h2); }
.for-line { display: block; overflow: hidden; padding-block: .14em .3em; margin-block: -.14em -.3em; }
.for-line__in { display: inline-block; }
.for-lead { color: var(--ink-2); }

.for-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); align-items: stretch; max-inline-size: 1000px; margin-inline: auto; }
.for-card { padding: clamp(24px, 3.4vw, 40px); border-radius: var(--r-card); }
.for-card .h3 { margin-block-end: 22px; }
.for-card--yes { background: var(--sand-2); box-shadow: var(--sh-1); }
.for-card--no { background: transparent; border: 1px dashed var(--line); }

.for-list { display: grid; gap: 16px; }
.for-list li { position: relative; padding-inline-start: 42px; color: var(--ink-2); }
.for-list li::before, .for-list li::after { content: ""; position: absolute; }
.for-card--yes .for-list li::before { inset-inline-start: 0; inset-block-start: 4px; inline-size: 24px; block-size: 24px; border-radius: 50%; background: var(--ochre); }
.for-card--yes .for-list li::after {
  inset-inline-start: 6px; inset-block-start: 10px; inline-size: 12px; block-size: 12px; background: var(--gold);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.for-card--no .for-list li::before, .for-card--no .for-list li::after {
  inset-inline-start: 5px; inset-block-start: 15px; inline-size: 14px; block-size: 2px; border-radius: var(--r-pill); background: var(--ink-3);
}
.for-card--no .for-list li::before { rotate: 45deg; }
.for-card--no .for-list li::after { rotate: -45deg; }

/* reveal: armed by JS (nothing hides if the module fails); reduced motion never arms */
@media (prefers-reduced-motion: no-preference) {
  .for-line__in { transition: translate 1.1s var(--ease-reveal) var(--dl, 0s); }
  .for-line + .for-line .for-line__in { --dl: .1s; }
  .for-card { transition: translate 1s var(--ease-reveal) var(--dl, 0s), opacity .8s ease var(--dl, 0s); }
  .for-card--yes { --dl: .25s; }
  .for-card--no { --dl: .4s; }
  .for[data-armed]:not(.is-in) .for-line__in { translate: 0 115%; }
  .for[data-armed]:not(.is-in) .for-card--yes { translate: 64px 0; opacity: 0; }   /* physical x: right = inline-start */
  .for[data-armed]:not(.is-in) .for-card--no { translate: -64px 0; opacity: 0; }
}
@media (max-width: 760px) {
  .for-grid { grid-template-columns: minmax(0, 1fr); }
  .for[data-armed]:not(.is-in) .for-card--yes { translate: 32px 0; }
  .for[data-armed]:not(.is-in) .for-card--no { translate: -32px 0; }
}