/* Per-sheet animation rules (original CSS block 2, lines 1306-1424).
   State classes (.pulled, .open8, .swap9, .rush, .moved, .go, .grow, .open,
   .extend, .tested, .broken, .asked, .solved, .branched, .merged, .conflicted)
   are toggled on the sc{N} scene by each sheet module. The .flipped helpers at
   the bottom drive the code-side reveal for every flip card. */

/* --- A-7 cabinet run --- */
#slabA7{transition:opacity .4s ease .35s}
#sc7.pulled #slabA7{opacity:0}
#slabSag7{opacity:0!important;transition:opacity .5s ease .5s}
#sc7.pulled #slabSag7{opacity:1!important}
#sc7.pulled #slabSag7{opacity:1}
#divMid7{transition:opacity .35s ease}
#sc7.pulled #divMid7{opacity:0}
#failA7{transition:opacity .5s ease .8s}
#sc7.pulled #failA7{opacity:1}
#box7c{transition:transform .7s cubic-bezier(.5,0,.2,1),opacity .5s ease}
#sc7.pulled #box7c{transform:translateY(120px);opacity:.18}
#slot7{transition:opacity .5s ease .5s}
#sc7.pulled #slot7{opacity:1}

/* --- A-8 as-builts --- */
#leftslots8,#labels8,#scrawl8,#dir8{transition:opacity .5s ease .3s}
#sc8.open8 #leftslots8,#sc8.open8 #labels8,#sc8.open8 #scrawl8,#sc8.open8 #dir8{opacity:1}
#hunt8,#fast8{transition:opacity .5s ease .2s}
#sc8.crew8 #hunt8,#sc8.crew8 #fast8{opacity:1}

/* --- A-9 the disconnect --- */
#failA9{transition:opacity .5s ease .3s}
#sc9.swap9 #failA9{opacity:1}
#sc9.swap9 #valve9{transform:rotate(90deg)}
#flex9{transition:opacity .4s ease .4s}
#sc9.swap9 #flex9{opacity:.2}
#sc9.swap9 #dish9{transform:translateX(60px) translateY(30px);opacity:.18}
#slot9{transition:opacity .5s ease .6s}
#sc9.swap9 #slot9{opacity:1}

/* --- A-10 the schedule --- */
.bar10{transition:transform .9s cubic-bezier(.5,0,.2,1),stroke .4s,fill .4s}
#sc10.rush .bar10{transform:translateX(var(--tx));stroke:var(--red);fill:rgba(242,87,61,.10)}
#chaos10{transition:opacity .5s ease .7s}
#sc10.rush #chaos10{opacity:1}
#deps10{transition:opacity .5s ease .8s}
#sc10.seq #deps10{opacity:1}
#okmsg10{transition:opacity .5s ease .9s}
#sc10.seq #okmsg10{opacity:1}

/* --- A-1 the cabin --- */
#inside1{transition:opacity .5s ease .1s}
#sc1.moved #inside1{opacity:1}
#queue1{transition:opacity .6s ease .5s}
#sc1.moved #queue1{opacity:1}
#sc1.scaled #queue1{opacity:.14;transition:opacity .5s ease}
#block1{transition:opacity .8s ease .1s}
#sc1.scaled #block1{opacity:1}
#cablab1{transition:opacity .5s ease .6s}
#sc1.scaled #cablab1{opacity:1}

/* --- A-2 build sequence --- */
.bp{opacity:0;transform:translateY(-10px);
    transition:opacity .5s ease var(--d,0s),transform .5s ease var(--d,0s)}
#sc2.go .bp{opacity:1;transform:none}
/* nothing fails until you try to build UP */
#roofA2{transition:transform .8s cubic-bezier(.3,1.2,.5,1) .1s}
#sc2.grow #roofA2{transform:translateY(-128px)}
#storyA2{transition:opacity .5s ease .5s}
#sc2.grow #storyA2{opacity:1}
#tilt2{transition:transform 1.2s cubic-bezier(.4,0,.6,1) 1.15s!important}
#sc2.grow #tilt2{transform:rotate(-3.5deg) translateY(10px)}
#cracks2{transition:opacity .5s ease 1.35s!important}
#void2{transition:opacity .5s ease 1.6s!important}
#sc2.grow #cracks2,#sc2.grow #void2{opacity:1}
#sc2.grow #story2{opacity:1;transform:none}

/* --- A-3 panels --- */
#sc3.open #panelA,#sc3.open #panelB{transform:rotateY(-102deg)}
#sc3.open #revealA,#sc3.open #revealB{opacity:1}
#sc3.extend #addB,#sc3.extend #failA{opacity:1}

/* --- A-4 --- */
.wall rect{transition:opacity .5s,stroke .3s,fill .3s}
#sc4.tested #labels4{opacity:1}
#sc4.tested .wall[data-w="3"] rect{stroke:var(--red);fill:rgba(242,87,61,.14)}
#sc4.tested .wall:not([data-w="3"]) rect{stroke:var(--green);fill:rgba(91,214,160,.08)}
#sc4.broken #wall3{opacity:0}
#sc4.broken #slab4{opacity:0}
#sag4{opacity:0!important}
#sc4.broken #sag4{opacity:1!important}
#sc4.broken #cracks4{opacity:1}
#sc4.broken #upper4{transform:translateY(22px)}
@keyframes ripple{from{transform:scale(.1);opacity:.9}to{transform:scale(11);opacity:0}}
#sc4.broken #ripple4{animation:ripple 1.2s ease-out .1s}
@keyframes nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
#wall3.blocked{animation:nudge .32s ease 2;transform-box:fill-box}

/* --- A-5 --- */
.q{opacity:0;transform:translateY(8px);
   transition:opacity .45s ease var(--d,0s),transform .45s ease var(--d,0s)}
#sc5.asked .q{opacity:1;transform:none}
#sc5.solved .q{opacity:.22}
#sc5.solved #answered5{opacity:1}
#sc5.solved #siteLabel5{opacity:0}
#sc5.solved #site5{opacity:.12}

/* --- A-6 --- */
.uni{opacity:0;transform:translateX(-40px);
     transition:opacity .5s ease,transform .6s cubic-bezier(.3,1.2,.5,1)}
#sc6.branched .uni{opacity:1;transform:none}
#sc6.branched .uni[data-u="2"]{transition-delay:.12s}
#sc6.branched .uni[data-u="3"]{transition-delay:.24s}
#sc6.branched #branches6{opacity:1}
#sc6.merged .uni{opacity:0;transform:translateX(90px)}
#sc6.merged #branches6{opacity:.3}
#sc6.merged #merged6{opacity:1}
#sc6.conflicted #conflict6{opacity:1}

/* --- shared flip-card code reveal --- */
.codeln{font-family:var(--mono);font-size:16px;opacity:0;transform:translateX(-10px);
  transition:opacity .3s var(--d,0s),transform .3s var(--d,0s)}
.flipped .codeln{opacity:1!important;transform:translateX(0)}
.sq{opacity:0;transition:opacity .35s var(--d,0s)}
.flipped .sq{opacity:var(--o,.32)!important}
.codeback .stamp{transition:opacity .5s 1.4s}
.flipped .codeback .stamp{opacity:.9!important}