.diagram-flow { animation-duration: var(--motion-method-duration, 4.8s); animation-iteration-count: infinite; animation-play-state: running; }
.flow-transfer { animation-name: packet-flow; animation-duration: 2.4s; animation-timing-function: linear; }
.flow-transfer--output { animation-delay: -1.2s; }
.flow-input { animation-name: input-stage; }
.flow-process { animation-name: processing-stage; }
.flow-result { animation-name: result-stage; }
.motion-region[data-motion="paused"] .diagram-flow { animation-play-state: paused; }
body.menu-open .motion-region .diagram-flow { animation-play-state: paused; }
@keyframes packet-flow { to { stroke-dashoffset: -100; } }
@keyframes input-stage { 0%, 100% { opacity: .12; } 24%, 42% { opacity: .9; } 68% { opacity: .18; } }
@keyframes processing-stage { 0%, 100% { opacity: .12; } 35%, 64% { opacity: .85; } }
@keyframes result-stage { 0%, 100% { opacity: .12; } 58%, 82% { opacity: .8; } }
.flow-index { animation-name: index-query; animation-duration: 3.2s; animation-timing-function: ease-in-out; }
@keyframes index-query { 0%, 100% { opacity: .25; } 40%, 58% { opacity: 1; } }
 
 
@media screen {
  .range-row.reveal-pending { opacity: 0; }
  .range-row.reveal-active {
    animation: range-entrance 800ms cubic-bezier(.25, .1, .25, 1) both;
    animation-delay: var(--reveal-delay, 180ms);
  }
  body.menu-open .reveal-active { animation-play-state: paused; }
}
@keyframes range-entrance {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

 
.cover-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }

 
.scientific-figure { overflow: visible; }
@container (max-width: 480px) {
  .scientific-figure .scientific-label { font-size: 17px; }
  .scientific-figure .scientific-detail { font-size: 14px; }
  .scientific-figure .scientific-sequence { font-size: 15.5px; }
  .scientific-figure .scientific-residue { font-size: 20px; }
  .scientific-figure .scientific-optional { display: none; }
  .scientific-figure .scientific-application { font-size: 13px; }
  .scientific-figure .diagram-range-caption { font-size: 18px; }
  .dda-legend, .dda-tick, .dda-axis { font-size: var(--diagram-detail-compact); }
  .dda-axis-title { transform: translateY(10px); }
   
  .dda-footer { display: none; }
}