/* Deft Digital Media — Home intro motion (Daniel, October 18, 2026). design-system/DECISIONS.md 5d.
   One small set, played once when a block enters the view: eyebrows decode out of digits (like the number fields),
   headings rise word by word behind a mask, text fades up, chips pop, buttons settle. Only opacity, translate and scale
   move, so nothing reflows. scripts/intro.js adds .ddm-intro-ready and the data-in roles; without it (no script or
   reduced motion) everything is simply there. */

.ddm-x.ddm-intro-ready [data-in] { --in-d:0s;
  transition:opacity .8s var(--ease) var(--in-d), translate .8s var(--ease) var(--in-d), scale .8s var(--ease) var(--in-d); }
.ddm-x.ddm-intro-ready [data-in]:not(.is-in) { opacity:0; }
.ddm-x.ddm-intro-ready [data-in="text"]:not(.is-in) { translate:0 14px; }
.ddm-x.ddm-intro-ready [data-in="chip"] { transition-duration:.55s; }
.ddm-x.ddm-intro-ready [data-in="chip"]:not(.is-in) { translate:0 6px; scale:.92; }
/* Buttons settle with a slight overshoot */
.ddm-x.ddm-intro-ready [data-in="btn"] { transition:opacity .5s var(--ease) var(--in-d), translate .75s cubic-bezier(.34,1.45,.64,1) var(--in-d), scale .75s cubic-bezier(.34,1.45,.64,1) var(--in-d); }
.ddm-x.ddm-intro-ready [data-in="btn"]:not(.is-in) { translate:0 12px; scale:.95; }

/* Headings: each word rises out of its own mask (same feel as the Snapshots and Working with Deft headings) */
.ddm-x .ddm-in-w { display:inline-block; overflow:hidden; vertical-align:top; padding:0 .04em .14em 0; margin-bottom:-.14em; }
.ddm-x .ddm-in-w > span { display:inline-block; translate:0 110%; transition:translate 1s cubic-bezier(.23,1,.32,1) calc(var(--in-d) + var(--wi,0) * 60ms); }
.ddm-x [data-in="head"].is-in .ddm-in-w > span { translate:none; }
/* Highlight bands in a rising heading wait until the words are up, then swipe in left to right (Daniel, Oct 18) */
.ddm-x .ddm-mark-wait .ddm-mark { background-repeat:no-repeat; background-size:0% 100%; transition:background-size .75s cubic-bezier(.65,0,.35,1) var(--mark-d,.5s); }
.ddm-x .ddm-mark-wait.is-marked .ddm-mark { background-size:100% 100%; }

/* Eyebrows: the real text stays in place (transparent, still read by screen readers) while digits resolve into it, left to right */
.ddm-x .ddm-in-dec { position:relative; }
.ddm-x .ddm-in-dec .ddm-in-real { color:transparent; }
.ddm-x .ddm-in-fx { position:absolute; left:0; top:0; white-space:pre; pointer-events:none; }
.ddm-x .ddm-in-fx i { font-style:normal; color:var(--blue-ink); }
.ddm-x :is(.ddm-dark,.ddm-obsidian,.ddm-portal,.ddm-footer-card) .ddm-in-fx i { color:var(--blue-light); }

@media (prefers-reduced-motion:reduce) {
  .ddm-x .ddm-mark-wait .ddm-mark { background-size:100% 100% !important; transition:none !important; }
  .ddm-x [data-in], .ddm-x .ddm-in-w > span { opacity:1 !important; translate:none !important; scale:none !important; transition:none !important; }
}