/* Motion utilities for EchoNote blog */
@keyframes blobFloat{0%,100%{transform:translate3d(0,0,0);}50%{transform:translate3d(20px,10px,0);}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes shineSweep{from{transform:translateX(-100%);}to{transform:translateX(100%);}}
.fade-up{opacity:0;animation:fadeUp .2s var(--ease) forwards}
.reveal{opacity:0}
.tilt{transition:transform .3s;will-change:transform}
.parallax{transition:transform .3s;will-change:transform}
.skeleton{background:rgba(255,255,255,.1);border-radius:1rem;height:200px;animation:fadeIn 1s ease-in-out infinite alternate}
.progress-top{position:fixed;top:0;left:0;height:3px;width:0;background:var(--color-accent);z-index:1000}
@media(prefers-reduced-motion:reduce){
  .fade-up,.reveal,.tilt,.parallax,.skeleton,.shine{animation:none;transition:none}
}
.shine{position:relative;overflow:hidden}
.shine::after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent)}
.shine:hover::after{animation:shineSweep .8s forwards}
@keyframes tiltFloat{0%,100%{transform:rotate(0);}50%{transform:rotate(1deg);}}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .tilt,.parallax{transform:none!important}
}

/* additional motion safeguards */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes shineSweep{from{transform:translateX(-100%);}to{transform:translateX(100%);}}
@keyframes fadeUp{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
@keyframes shine{from{transform:translateX(-120%)} to{transform:translateX(120%)}}
.shine-wrap{position:relative; overflow:hidden}
.shine-wrap::before{content:""; position:absolute; inset:-10% -60%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  transform:translateX(-120%); pointer-events:none}
.shine-wrap:hover::before{animation:shine .8s ease-out}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes shine{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
.shine-wrap{position:relative;overflow:hidden}
.shine-wrap::before{content:"";position:absolute;inset:-10% -60%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transform:translateX(-120%);pointer-events:none}
.shine-wrap:hover::before{animation:shine .8s ease-out}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}