/*
  Odpowiednik animacji framer-motion z oryginalnego App.tsx.
  Domyslny easing framer-motion dla tweenow z podanym `duration` to "easeInOut",
  czyli cubic-bezier(0.42, 0, 0.58, 1) - i taki jest tu uzyty.
*/

/* <motion.div initial={{opacity:0,y:14}} animate={{opacity:1,y:0}} transition={{duration:0.45}}> */
@keyframes ve-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* <motion.div initial={{opacity:0,scale:0.985}} animate={{opacity:1,scale:1}} transition={{duration:0.55,delay:0.05}}> */
@keyframes ve-fade-scale {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* <motion.p key={status} initial={{opacity:0,y:-4}} animate={{opacity:1,y:0}} transition={{duration:0.2}}> */
@keyframes ve-fade-down {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* <motion.canvas initial={{opacity:0.2}} animate={{opacity:1}} transition={{duration:0.35}}> */
@keyframes ve-fade-in {
  from { opacity: 0.2; }
  to   { opacity: 1; }
}

.anim-left-panel {
  animation: ve-fade-up 0.45s cubic-bezier(0.42, 0, 0.58, 1) both;
}

.anim-right-panel {
  animation: ve-fade-scale 0.55s cubic-bezier(0.42, 0, 0.58, 1) 0.05s both;
}

.anim-status {
  animation: ve-fade-down 0.2s cubic-bezier(0.42, 0, 0.58, 1) both;
}

.anim-canvas {
  animation: ve-fade-in 0.35s cubic-bezier(0.42, 0, 0.58, 1) both;
}