/* ---------------------------------------------------------------
   story.css: the two scroll-driven stories, shared by D and E.
   Choreography only. Each design's own stylesheet decides how the
   pieces look and where the story sits on the page.

   1. "The paper has to line up first" (home). Six case files:
        Intake       they arrive, tumbling, in a heap
        Triage       they sort into complete and incomplete; two get
                     a missing-page flag
        Review       they straighten into a grid and the same three
                     fields light up on every one
        Comparison   two reviewers' copies of one case come forward,
                     scored 38 and 79, and the 41 between them is
                     measured
        Decision     everything folds into one structured record
      Each file is nested six deep. Every wrapper carries exactly one
      step's move, so the moves compose instead of fighting over one
      transform. Each step is bound to the view timeline of its own
      paragraph (--wk1 .. --wk5), shared across the section by
      timeline-scope, so a state lands when its words are centred.

   2. Rule 04 (method): 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, each story simply shows its ending: the
   record, and the one real hit among 90 false alarms.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------- the stage, and the ending */

.story{margin:1.5rem 0 0}
.stage{
  position:relative;
  container-type:size;
  width:100%;
  height:clamp(20rem,58vw,31rem);
  overflow:hidden;
}
.doc,.gap{display:none}
.doc,.doc div{width:100%; height:100%}
.record{
  position:absolute;
  left:16cqw; right:16cqw; top:10cqh; bottom:10cqh;
  display:grid; place-items:center;
}
.rec-in{width:100%}

/* the base-rate grid, ending: 90 false alarms, one real hit */
.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 (timeline-scope:--a) and (animation-timeline:view()){

  /* the steps become the scroll track the story plays along */
  .s-work{timeline-scope:--wk1,--wk2,--wk3,--wk4,--wk5}
  .s-work .steps > li:nth-child(1){view-timeline-name:--wk1}
  .s-work .steps > li:nth-child(2){view-timeline-name:--wk2}
  .s-work .steps > li:nth-child(3){view-timeline-name:--wk3}
  .s-work .steps > li:nth-child(4){view-timeline-name:--wk4}
  .s-work .steps > li:nth-child(5){view-timeline-name:--wk5}
  .s-work .steps > li{min-height:66vh; display:flex; flex-direction:column; justify-content:center}

  /* the paragraph being told is in full ink; the others wait */
  @keyframes step-focus{0%{opacity:.26} 32%,68%{opacity:1} 100%{opacity:.26}}
  .s-work .steps > li{animation:step-focus linear both; animation-timeline:view(); animation-range:cover 8% cover 92%}

  .story{position:sticky; top:var(--story-top,14vh); align-self:start; z-index:2}
  .stage{height:var(--story-h,68vh)}

  .doc,.gap{display:block}
  .doc1,.doc4{z-index:3}   /* the two copies that come forward always paint over the rest */
  .doc{
    position:absolute;
    width:20cqw; height:27cqh;
    left:calc(var(--x) * 1cqw - 10cqw);
    top:calc(var(--y) * 1cqh - 13.5cqh);
  }

  /*        pile (x,y,rot)   triage delta   review delta   compare delta, scale, ink   fold delta */
  .doc1{--x:40; --y:45; --r:-14deg; --spin:38deg;  --dx2:-10; --dy2:-5;  --dx3:-8;  --dy3:-10; --dx4:10; --dy4:20;  --s4:1.3; --o4:1;   --dx5:18;  --dy5:0}
  .doc2{--x:55; --y:40; --r:9deg;   --spin:-44deg; --dx2:15;  --dy2:0;   --dx3:-20; --dy3:-10; --dx4:0;  --dy4:0;   --s4:1;   --o4:.08; --dx5:0;   --dy5:20}
  .doc3{--x:48; --y:55; --r:-6deg;  --spin:52deg;  --dx2:-18; --dy2:-9;  --dx3:48;  --dy3:-16; --dx4:0;  --dy4:0;   --s4:1;   --o4:.08; --dx5:-28; --dy5:20}
  .doc4{--x:60; --y:58; --r:16deg;  --spin:-30deg; --dx2:-30; --dy2:-6;  --dx3:-8;  --dy3:18;  --dx4:46; --dy4:-20; --s4:1.3; --o4:1;   --dx5:-18; --dy5:0}
  .doc5{--x:38; --y:62; --r:7deg;   --spin:60deg;  --dx2:32;  --dy2:-12; --dx3:-20; --dy3:20;  --dx4:0;  --dy4:0;   --s4:1;   --o4:.08; --dx5:0;   --dy5:-20}
  .doc6{--x:52; --y:48; --r:-11deg; --spin:-56deg; --dx2:-22; --dy2:10;  --dx3:48;  --dy3:12;  --dx4:0;  --dy4:0;   --s4:1;   --o4:.08; --dx5:-28; --dy5:-20}

  @keyframes st-in{from{translate:0 -118cqh; opacity:0} 35%{opacity:1} to{translate:0 0; opacity:1}}
  @keyframes st-spin{from{rotate:var(--spin)} to{rotate:0deg}}
  @keyframes st-2{to{translate:calc(var(--dx2) * 1cqw) calc(var(--dy2) * 1cqh)}}
  @keyframes st-3{to{translate:calc(var(--dx3) * 1cqw) calc(var(--dy3) * 1cqh)}}
  @keyframes st-tilt{from{rotate:var(--r)} to{rotate:0deg}}
  @keyframes st-4{to{translate:calc(var(--dx4) * 1cqw) calc(var(--dy4) * 1cqh); scale:var(--s4); opacity:var(--o4)}}
  @keyframes st-5{to{translate:calc(var(--dx5) * 1cqw) calc(var(--dy5) * 1cqh); scale:.5; opacity:0}}
  @keyframes st-show{from{opacity:0; scale:.6} to{opacity:1; scale:1}}
  @keyframes st-hide{from{opacity:1} to{opacity:0}}
  @keyframes st-span{from{scale:0 1} to{scale:1 1}}
  @keyframes st-record{from{opacity:0; scale:.86; translate:0 4cqh} to{opacity:1; scale:1; translate:0 0}}
  @keyframes st-field{from{background-color:var(--field-off)} to{background-color:var(--field-on)}}

  /* intake: each file drops in a little after the last */
  .doc .k1,.doc .spin{animation-timeline:--wk1; animation-fill-mode:both; animation-timing-function:cubic-bezier(.3,.7,.3,1)}
  .doc .k1{animation-name:st-in}
  .doc .spin{animation-name:st-spin}
  .doc1 .k1,.doc1 .spin{animation-range:cover 6% cover 34%}
  .doc2 .k1,.doc2 .spin{animation-range:cover 9% cover 37%}
  .doc3 .k1,.doc3 .spin{animation-range:cover 12% cover 40%}
  .doc4 .k1,.doc4 .spin{animation-range:cover 15% cover 43%}
  .doc5 .k1,.doc5 .spin{animation-range:cover 18% cover 46%}
  .doc6 .k1,.doc6 .spin{animation-range:cover 21% cover 49%}

  /* triage */
  .doc .k2{animation:st-2 ease-in-out both; animation-timeline:--wk2; animation-range:cover 16% cover 44%}
  .p-flag{animation:st-show ease-out both; animation-timeline:--wk2; animation-range:cover 30% cover 46%}

  /* review: straighten, align, and light the same three fields on every file */
  .tilt{rotate:var(--r)}
  .doc .k3{animation:st-3 ease-in-out both; animation-timeline:--wk3; animation-range:cover 14% cover 42%}
  .doc .tilt{animation:st-tilt ease-in-out both; animation-timeline:--wk3; animation-range:cover 14% cover 42%}
  .p-row{animation:st-field linear both; animation-timeline:--wk3; animation-range:cover 30% cover 46%}

  /* comparison: two copies of one case come forward and the gap is measured */
  .doc .k4{animation:st-4 ease-in-out both; animation-timeline:--wk4; animation-range:cover 14% cover 40%}
  .p-score{animation:st-show ease-out both; animation-timeline:--wk4; animation-range:cover 28% cover 42%}
  .gap{animation:st-show ease-out both; animation-timeline:--wk4; animation-range:cover 34% cover 46%}
  .gap-line{animation:st-span ease-out both; animation-timeline:--wk4; animation-range:cover 36% cover 48%}

  /* decision support: everything folds into one record */
  .doc .k5{animation:st-5 ease-in both; animation-timeline:--wk5; animation-range:cover 12% cover 36%}
  .gap-in{animation:st-hide linear both; animation-timeline:--wk5; animation-range:cover 10% cover 22%}
  .record{animation:st-record ease-out both; animation-timeline:--wk5; animation-range:cover 26% cover 44%}

  /* ------------------------------------------------ rule 04, the base rate */

  .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%}
}
}