/* Shared motion layer. Transform/opacity only; no layout changes. */
@keyframes ribbon-breathe{0%,100%{filter:saturate(1)}50%{filter:saturate(1.12)}}
body main{animation:page-in .42s var(--ease-out) both}
body main .grid>.card{animation:item-in .5s var(--ease-out) backwards}
body main .grid>.card:nth-child(2){animation-delay:60ms}
body main .grid>.card:nth-child(3){animation-delay:120ms}
body main .grid>.card:nth-child(4){animation-delay:180ms}
body main .grid>.card:nth-child(5){animation-delay:240ms}
a,button,.card,input,select,textarea{transition:background-color var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-fast)!important}
.btn:hover,button:hover{transform:translateY(-1px)}
.btn:active,button:active{transform:translateY(1px) scale(.985)}
a.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.tabs a{position:relative;transition:color var(--dur-fast),background var(--dur-fast)!important}
.tabs a:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--plum-500);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-fast)}
.tabs a:hover:after,.tabs a.active:after{transform:scaleX(1)}
.toast{animation:toast-in .25s ease-out both}
#review-area{animation:page-in .3s ease-out both}
html{scroll-behavior:smooth}
body.is-leaving main{opacity:0!important;transform:translateY(-6px)!important;transition:opacity var(--dur-fast),transform var(--dur-fast);animation:none!important}
body main{transition:opacity var(--dur-fast),transform var(--dur-fast)}
/* Keep the animated backdrop and navigation stable during native page transitions. */
@view-transition{navigation:none}
::view-transition-old(root){animation:vt-out .18s ease both}
::view-transition-new(root){animation:vt-in .3s ease both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}::view-transition-group(*){animation-duration:0s!important}}

section[aria-labelledby="pipe"] button[aria-pressed]{transition:opacity var(--dur-base),border-color var(--dur-fast),background var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-fast)!important}
section[aria-labelledby="pipe"] button[aria-pressed="true"]{outline:2px solid var(--plum-400);outline-offset:2px;box-shadow:0 0 0 5px color-mix(in srgb, var(--lavender) 20%, transparent)!important}
.flow button.card{text-align:left;display:block;cursor:pointer;align-self:start;color:inherit}
.flow button.card[aria-pressed="true"]{outline:2px solid var(--plum-500);outline-offset:4px;box-shadow:var(--shadow-lg)}
.flow .card.is-related{border-color:var(--plum-400)}
.flow-status{grid-column:1/-1;transform:rotate(4deg);font-size:var(--fs-small);background:color-mix(in srgb, var(--paper) 85%, transparent);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 14px}
@media(max-width:1000px){.flow-status{transform:none}}