/* Small moments of motion (2 November 2026): the stage bar charges up, Readiness cards fill, Issue shows a sent moment
   and Pin blinks, waves and tips the hat. delight.js only adds and removes the classes below; nothing here changes a
   size, a position or a saved value. Every animation sits inside prefers-reduced-motion: no-preference, so a device set to
   reduce motion sees the page exactly as before. */

@media (prefers-reduced-motion: no-preference) {

/* A. The stage bar charges up: each finished or started step's bar fills from the left, one after another, then a short
   light runs along the filled bars. A step that has just turned done pops its tick with a sky ring. */
.dl-fill .ev-stage.done::after,.dl-fill .ev-stage.active::after,.dl-fill .ev-stage.attention::after,
.dl-fill .ev-flow-step.done::after,.dl-fill .ev-flow-step.active::after,.dl-fill .ev-flow-step.attention::after{
 transform-origin:left center;animation:dlBarFill .5s cubic-bezier(.3,.7,.3,1) calc(var(--dl-i,0) * .14s + .1s) both}
.dl-fill .ev-stage.done::after,.dl-fill .ev-flow-step.done::after{
 background-image:linear-gradient(90deg,transparent 0 35%,#ffffffb3 50%,transparent 65% 100%);background-size:250% 100%;background-repeat:no-repeat;
 animation:dlBarFill .5s cubic-bezier(.3,.7,.3,1) calc(var(--dl-i,0) * .14s + .1s) both,dlBarRun 1.1s ease-in-out calc(var(--dl-n,5) * .14s + .55s) both}
@keyframes dlBarFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dlBarRun{from{background-position:130% 0}to{background-position:-30% 0}}
.dl-pop .ev-stage-mark,.dl-pop .ev-flow-mark{animation:dlTickPop .6s cubic-bezier(.3,1.6,.5,1) .35s both}
.dl-pop .ev-stage-mark::after,.dl-pop .ev-flow-mark::after{content:'';position:absolute;inset:-2px;border-radius:inherit;box-shadow:0 0 0 0 #8cbcffcc;animation:dlRing 1s ease-out .45s both;pointer-events:none}
.dl-pop .ev-stage-mark,.dl-pop .ev-flow-mark{position:relative}
@keyframes dlTickPop{0%{transform:scale(.55)}60%{transform:scale(1.18)}100%{transform:none}}
@keyframes dlRing{from{box-shadow:0 0 0 0 #8cbcffcc}to{box-shadow:0 0 0 14px #8cbcff00}}

/* B. Readiness: the meters fill as the page opens, card by card, and a stage that has just reached all done glows and
   pops its tick. */
.dl-fill .evr-stage .ev-meter i{animation:dlMeter .8s cubic-bezier(.3,.7,.3,1) calc(var(--dl-i,0) * .1s + .15s) both}
@keyframes dlMeter{from{width:0}}
.evr-stage.dl-ready{animation:dlCardGlow 1.6s ease-out .2s both}
.evr-stage.dl-ready .evr-stage-mark{animation:dlTickPop .6s cubic-bezier(.3,1.6,.5,1) .3s both}
@keyframes dlCardGlow{0%{box-shadow:0 0 0 0 #6aa6ff00}35%{box-shadow:0 0 0 4px #6aa6ff66,0 10px 34px #3d86ff33}100%{box-shadow:0 0 0 0 #6aa6ff00}}

/* C. Issue: when a document has just been downloaded, a sheet slides into an envelope at the card's corner, the envelope
   lifts away, and the status line lands like a stamp. */
.ev-out{position:relative}
.dl-env{position:absolute;top:14px;right:14px;width:58px;height:46px;pointer-events:none;z-index:2;animation:dlEnvAway .7s ease-in 1.5s both}
.dl-env svg{width:100%;height:100%;overflow:visible}
.dl-env .dl-sheet{animation:dlSheetIn .7s cubic-bezier(.4,.1,.3,1) .1s both}
.dl-env .dl-flap{transform-box:fill-box;transform-origin:center top;animation:dlFlap .35s ease-in .8s both}
.dl-env .dl-seal{transform-box:fill-box;transform-origin:center;animation:dlTickPop .45s cubic-bezier(.3,1.6,.5,1) 1.1s both}
@keyframes dlSheetIn{from{transform:translateY(-26px);opacity:0}25%{opacity:1}to{transform:translateY(4px);opacity:1}}
@keyframes dlFlap{from{transform:scaleY(-1)}to{transform:none}}
@keyframes dlEnvAway{from{transform:none;opacity:1}to{transform:translate(18px,-26px) rotate(10deg);opacity:0}}
.dl-sent .ev-out-status>span:first-child{display:inline-block;animation:dlStamp .5s cubic-bezier(.3,1.5,.5,1) 1.2s both}
@keyframes dlStamp{from{transform:scale(1.5) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}

/* D. Pin: the full Pin blinks now and then, waves as Help me start or Ask Pin opens and as the home page Pin comes into
   view, and the small Pin on the Help button tips its hat when a stage has just been finished. */
.ev-pin-eyes{transform-box:fill-box;transform-origin:center;animation:dlBlink 6.5s ease-in-out 2s infinite}
@keyframes dlBlink{0%,93%,100%{transform:none}95%{transform:scaleY(.12)}97%{transform:none}}
.dl-wave svg{transform-origin:50% 92%;animation:dlWave 1.2s ease-in-out both}
@keyframes dlWave{0%{transform:none}15%{transform:rotate(-12deg)}35%{transform:rotate(10deg)}55%{transform:rotate(-8deg)}75%{transform:rotate(5deg)}100%{transform:none}}
.ev-pin-hat{transform-box:fill-box;transform-origin:15% 100%}
.dl-tip .ev-pin-hat{animation:dlHatTip 1.4s ease-in-out both}
@keyframes dlHatTip{0%{transform:none}25%,60%{transform:translateY(-14%) rotate(-22deg)}100%{transform:none}}
.dl-tip{animation:dlHelpGlow 1.4s ease-out both}
@keyframes dlHelpGlow{0%{box-shadow:0 0 0 0 #6aa6ff00}30%{box-shadow:0 0 0 4px #6aa6ff55}100%{box-shadow:0 0 0 0 #6aa6ff00}}

}