/*
 * Motion. Content is visible by default; the inline head script adds .motion to <html> only
 * when JS runs and the visitor has not asked for reduced motion. motion.js marks .is-in.
 * Thesis: the cycle chart is the one authored moment. Everything else explains state or
 * acknowledges an action; entrances are short and never block reading.
 */

/* entrances: rise + fade, staggered inside a group by --i (set in motion.js, capped) */
.motion .rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 640ms var(--ease-out), transform 860ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.motion .rv.is-in { opacity: 1; transform: none; }

/* steprule: the logo's bars rise when their section arrives */
.motion .kicker .steprule i {
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 560ms var(--ease-out);
}
.motion .kicker .steprule i:nth-child(2) { transition-delay: 90ms; }
.motion .kicker .steprule i:nth-child(3) { transition-delay: 180ms; }
.motion .kicker.is-in .steprule i { transform: none; }

/* photographs open from an inset frame to full bleed */
.motion .ph { overflow: hidden; }
.motion .ph img {
  clip-path: inset(7% 5% 7% 5% round var(--r-sm));
  transform: scale(1.07);
  transition: clip-path 1100ms var(--ease-out), transform 1500ms var(--ease-out);
}
.motion .ph.is-in img { clip-path: inset(0 0 0 0 round 0); transform: none; }
.motion .photo-band.ph { background: transparent; }
.motion .ph figcaption { opacity: 0; transform: translateY(6px); transition: opacity 500ms var(--ease-out) 450ms, transform 600ms var(--ease-out) 450ms; }
.motion .ph.is-in figcaption { opacity: 1; transform: none; }

/* trust rail: hairlines draw across, like ruling a record sheet */
.motion .trust__cell::before, .motion .trust__iso::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--navy);
  transform: scaleX(0); transform-origin: left;
  transition: transform 900ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
  opacity: 0.6;
}
.motion .trust__iso { position: relative; }  /* .trust__cell is already relative */
.motion .trust__cell.is-in::before, .motion .trust__iso.is-in::before { transform: scaleX(1); opacity: 0; transition: transform 900ms var(--ease-out), opacity 600ms linear 900ms; }

/* release checks tick through, then the report is released */
.motion .ledger--checks tbody tr { transition: background-color 400ms var(--ease-out); }
.motion .ledger--checks tr.is-pending .ledger__result { color: var(--ink-3); }
.motion .ledger--checks tr.is-pending .ledger__result::before { opacity: 0; }
.motion .ledger--checks tr.is-ticked { background: var(--ground); }
.motion .ledger--checks tr.is-ticked .ledger__result::before { animation: tick 360ms var(--ease-out); }
@keyframes tick { from { transform: rotate(-45deg) scale(0); } to { transform: rotate(-45deg) scale(1); } }

/* details disclosure opens with height, where the browser supports it */
@supports (interpolate-size: allow-keywords) {
  .motion .faq { interpolate-size: allow-keywords; }
  .motion .faq details::details-content {
    height: 0; overflow: clip;
    transition: height 380ms var(--ease-out), content-visibility 380ms allow-discrete;
  }
  .motion .faq details[open]::details-content { height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .motion .rv, .motion .ph img, .motion .ph figcaption, .motion .kicker .steprule i { opacity: 1; transform: none; clip-path: none; }
}