/* =========================================================
   Scroll animations: "the page comes together"
   Pieces fade and settle into place as you scroll down. Each piece animates once.
   Uses the separate translate / rotate / scale properties so every piece keeps its own tilt.
   To switch off: remove the animations.css link and animations.js script from the pages.
   Visitors with "reduce motion" turned on see no animation.
   ========================================================= */
.anim-on [data-anim] { opacity: 0; transition: opacity .7s ease, translate .8s cubic-bezier(.2,.8,.2,1), rotate .8s cubic-bezier(.2,.8,.2,1), scale .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.anim-on [data-anim].in { opacity: 1; translate: none; rotate: none; scale: none; }

/* Headings, text and rows rise gently */
.anim-on [data-anim="rise"] { translate: 0 28px; }
/* Note cards and paper drop onto the board, then settle */
.anim-on [data-anim="drop"] { translate: 0 -40px; rotate: -7deg; scale: 1.06; }
.anim-on [data-anim="drop"].in { transition-timing-function: ease, cubic-bezier(.34,1.45,.5,1), cubic-bezier(.34,1.45,.5,1), cubic-bezier(.34,1.45,.5,1); }
/* Torn-paper labels slap on from the side */
.anim-on [data-anim="slap"] { translate: -60px 0; rotate: -9deg; scale: 1.15; }
.anim-on [data-anim="slap"].in { transition-timing-function: ease, cubic-bezier(.34,1.5,.5,1), cubic-bezier(.34,1.5,.5,1), cubic-bezier(.34,1.5,.5,1); }
/* Pictures and video frames zoom in from slightly smaller */
.anim-on [data-anim="zoom"] { scale: .94; }
/* Logos pop in one by one */
.anim-on [data-anim="pop"] { translate: 0 14px; scale: .9; }

@media (prefers-reduced-motion: reduce) {
  .anim-on [data-anim] { opacity: 1 !important; translate: none !important; rotate: none !important; scale: none !important; transition: none !important; }
}