/* ---------------------------------------------------------------
   story.css: the scroll-driven story. Choreography only; figures.css
   decides how the pieces look and where they sit on the page.

   Rule 04 (method page, Figure 2): a 99%-accurate test flags 91
   cases, then 90 of them fade as false alarms and one stays lit.

   Without scroll-driven animation support, and for anyone who asks
   for reduced motion, the story simply shows its ending: the one real
   hit among 90 false alarms.

   Until 2026-10-13 this file also ran "the paper has to line up
   first", the home page's scroll story of six files sorting into one
   record. It retired with the decision-science home page and is in
   git history.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------- the ending */

.br{margin:1.2rem 0 .4rem}
.br-grid{display:grid; grid-template-columns:repeat(13,minmax(0,1fr)); gap:clamp(3px,.6vw,6px); max-width:30rem}
.br-grid i{display:block; aspect-ratio:1}
.br-key{display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; margin:.7rem 0 0}
.bk-flag{display:none}

/* ---------------------------------------------------------------- the moving version */

@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){

  .br{view-timeline-name:--br}
  .bk-flag{display:inline-block}
  @keyframes br-cell{
    0%{opacity:0; scale:.3; background-color:var(--br-off)}
    16%{opacity:1; scale:1; background-color:var(--br-off)}
    30%,52%{background-color:var(--br-flag)}
    70%,100%{opacity:1; scale:1; background-color:var(--br-false)}
  }
  @keyframes br-hit{
    0%{opacity:0; scale:.3; background-color:var(--br-off); box-shadow:none}
    16%{opacity:1; scale:1; background-color:var(--br-off)}
    30%,52%{scale:1; background-color:var(--br-flag); box-shadow:none}
    66%{scale:1.45; background-color:var(--br-hit); box-shadow:var(--hit-glow,none)}
    76%,100%{scale:1.2; background-color:var(--br-hit); box-shadow:var(--hit-glow,none)}
  }
  @keyframes bk-flag{0%,26%{opacity:0} 34%,52%{opacity:1} 60%,100%{opacity:0}}
  @keyframes bk-after{0%,62%{opacity:0} 74%,100%{opacity:1}}
  .br-grid i{animation:br-cell linear both; animation-timeline:--br; animation-range:cover 4% cover 58%}
  .br-grid i:nth-child(n+14){animation-range:cover 6% cover 58%}
  .br-grid i:nth-child(n+27){animation-range:cover 8% cover 58%}
  .br-grid i:nth-child(n+40){animation-range:cover 10% cover 58%}
  .br-grid i:nth-child(n+53){animation-range:cover 12% cover 58%}
  .br-grid i:nth-child(n+66){animation-range:cover 14% cover 58%}
  .br-grid i:nth-child(n+79){animation-range:cover 16% cover 58%}
  .br-grid i.hit{animation-name:br-hit}
  .bk-flag{animation:bk-flag linear both; animation-timeline:--br; animation-range:cover 4% cover 58%}
  .bk-false,.bk-hit{animation:bk-after linear both; animation-timeline:--br; animation-range:cover 4% cover 58%}
}
}