/* Middlebrook — tasteful scroll-reveal + staged diagram. JS adds the classes,
   so with JS off (or reduced-motion) nothing is ever hidden. */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}

/* points-of-control SVG: stages fade in left-to-right when the diagram enters view */
.anim-ready .mc-diagram svg>g{opacity:0;transition:opacity .55s ease}
.anim-ready .mc-diagram.in svg>g{opacity:1}
.anim-ready .mc-diagram.in svg>g:nth-of-type(1){transition-delay:.05s}
.anim-ready .mc-diagram.in svg>g:nth-of-type(2){transition-delay:.13s}
.anim-ready .mc-diagram.in svg>g:nth-of-type(3){transition-delay:.21s}
.anim-ready .mc-diagram.in svg>g:nth-of-type(4){transition-delay:.29s}
.anim-ready .mc-diagram.in svg>g:nth-of-type(5){transition-delay:.37s}
.anim-ready .mc-diagram.in svg>g:nth-of-type(6){transition-delay:.45s}
.anim-ready .mc-diagram.in svg>g:nth-of-type(7){transition-delay:.53s}
.anim-ready .mc-diagram.in svg>g:nth-of-type(8){transition-delay:.61s}
.anim-ready .mc-diagram.in svg>g:nth-of-type(9){transition-delay:.69s}
.anim-ready .mc-diagram.in svg>g:nth-of-type(10){transition-delay:.77s}

@media(prefers-reduced-motion:reduce){
  .reveal,.anim-ready .mc-diagram svg>g{opacity:1!important;transform:none!important;transition:none!important}
}