/* Vedøy Motion — optional animation add-on for Vedøy CSS. */
:root {
  --vd-motion-duration: 420ms;
  --vd-motion-ease: cubic-bezier(.22, .8, .22, 1);
  --vd-motion-distance: 18px;
}

[data-vd-motion], .vd-motion { animation-duration:var(--vd-motion-duration); animation-timing-function:var(--vd-motion-ease); animation-fill-mode:both; }
.vd-motion-fade { animation-name:vd-fade; }
.vd-motion-fade-up, [data-vd-motion="fade-up"] { animation-name:vd-fade-up; }
.vd-motion-fade-down, [data-vd-motion="fade-down"] { animation-name:vd-fade-down; }
.vd-motion-fade-left, [data-vd-motion="fade-left"] { animation-name:vd-fade-left; }
.vd-motion-fade-right, [data-vd-motion="fade-right"] { animation-name:vd-fade-right; }
.vd-motion-scale, [data-vd-motion="scale"] { animation-name:vd-scale; }
.vd-motion-pop, [data-vd-motion="pop"] { animation-name:vd-pop; }
.vd-motion-blur, [data-vd-motion="blur"] { animation-name:vd-blur; }
.vd-motion-bounce, [data-vd-motion="bounce"] { animation-name:vd-bounce; }
.vd-motion-shake, [data-vd-motion="shake"] { animation-name:vd-shake; }
.vd-motion-spin, [data-vd-motion="spin"] { animation:vd-spin 900ms linear infinite; }
.vd-motion-pulse, [data-vd-motion="pulse"] { animation:vd-pulse 1.8s ease-in-out infinite; }
.vd-motion-ping, [data-vd-motion="ping"] { animation:vd-ping 1.5s cubic-bezier(0,0,.2,1) infinite; }
.vd-motion-shimmer, [data-vd-motion="shimmer"] { color:transparent; background:linear-gradient(100deg,var(--vd-surface-raised) 25%,var(--vd-border) 40%,var(--vd-surface-raised) 55%); background-size:220% 100%; animation:vd-shimmer 1.35s linear infinite; border-radius:8px; }
.vd-motion-float, [data-vd-motion="float"] { animation:vd-float 3.5s ease-in-out infinite; }

.vd-motion-on-hover { transition:transform var(--vd-motion-duration) var(--vd-motion-ease), box-shadow var(--vd-motion-duration) var(--vd-motion-ease); }
.vd-motion-on-hover:hover, .vd-motion-on-hover:focus-visible { transform:translateY(-4px); box-shadow:var(--vd-shadow); }
.vd-motion-scale-on-hover:hover, .vd-motion-scale-on-hover:focus-visible { transform:scale(1.03); }
.vd-motion-glow-on-hover:hover, .vd-motion-glow-on-hover:focus-visible { box-shadow:0 0 0 4px color-mix(in srgb,var(--vd-brand) 18%,transparent), var(--vd-shadow); }
.vd-motion-stagger > * { animation-delay:calc(var(--vd-motion-delay, 0ms) + var(--vd-motion-step, 70ms) * var(--vd-motion-index, 0)); }
.vd-motion-stagger > :nth-child(1){--vd-motion-index:0}.vd-motion-stagger > :nth-child(2){--vd-motion-index:1}.vd-motion-stagger > :nth-child(3){--vd-motion-index:2}.vd-motion-stagger > :nth-child(4){--vd-motion-index:3}.vd-motion-stagger > :nth-child(5){--vd-motion-index:4}.vd-motion-stagger > :nth-child(6){--vd-motion-index:5}.vd-motion-stagger > :nth-child(7){--vd-motion-index:6}.vd-motion-stagger > :nth-child(8){--vd-motion-index:7}
.vd-motion-reveal { opacity:0; transform:translateY(var(--vd-motion-distance)); transition:opacity var(--vd-motion-duration) var(--vd-motion-ease), transform var(--vd-motion-duration) var(--vd-motion-ease); }
.vd-motion-reveal.is-visible { opacity:1; transform:none; }
.vd-motion-reveal-left { opacity:0; transform:translateX(calc(var(--vd-motion-distance) * -1)); transition:opacity var(--vd-motion-duration) var(--vd-motion-ease), transform var(--vd-motion-duration) var(--vd-motion-ease); }
.vd-motion-reveal-left.is-visible { opacity:1; transform:none; }
.vd-motion-reveal-scale { opacity:0; transform:scale(.94); transition:opacity var(--vd-motion-duration) var(--vd-motion-ease), transform var(--vd-motion-duration) var(--vd-motion-ease); }
.vd-motion-reveal-scale.is-visible { opacity:1; transform:none; }

@keyframes vd-fade{from{opacity:0}to{opacity:1}}
@keyframes vd-fade-up{from{opacity:0;transform:translateY(var(--vd-motion-distance))}to{opacity:1;transform:none}}
@keyframes vd-fade-down{from{opacity:0;transform:translateY(calc(var(--vd-motion-distance) * -1))}to{opacity:1;transform:none}}
@keyframes vd-fade-left{from{opacity:0;transform:translateX(var(--vd-motion-distance))}to{opacity:1;transform:none}}
@keyframes vd-fade-right{from{opacity:0;transform:translateX(calc(var(--vd-motion-distance) * -1))}to{opacity:1;transform:none}}
@keyframes vd-scale{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes vd-pop{0%{opacity:0;transform:scale(.7)}70%{opacity:1;transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes vd-blur{from{opacity:0;filter:blur(10px);transform:scale(1.02)}to{opacity:1;filter:none;transform:none}}
@keyframes vd-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-4px)}}
@keyframes vd-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes vd-spin{to{transform:rotate(360deg)}}
@keyframes vd-pulse{50%{opacity:.45;transform:scale(.98)}}
@keyframes vd-ping{75%,100%{opacity:0;transform:scale(1.7)}}
@keyframes vd-shimmer{to{background-position:-220% 0}}
@keyframes vd-float{50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}.vd-motion-reveal,.vd-motion-reveal-left,.vd-motion-reveal-scale{opacity:1;transform:none}}