/* dragne: 04-animations.css | v1.0.0 | 2026-03-17 */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { transform: scale(1.05); }
  70%  { transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes flipInX {
  from { opacity: 0; transform: perspective(400px) rotateX(90deg); }
  to   { opacity: 1; transform: perspective(400px) rotateX(0deg); }
}

@keyframes flipInY {
  from { opacity: 0; transform: perspective(400px) rotateY(90deg); }
  to   { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.type-post.bounceIn,
.type-post.flipInX,
.type-post.flipInY,
.animated           { animation-duration: 1s; animation-fill-mode: both; }

.type-post.fadeIn,
.type-post.fadeInDown,
.type-post.fadeInUp { animation-duration: .5s; animation-fill-mode: both; }

.disable-animate    { opacity: 1 !important; animation-name: none !important; }

.slupy-fadeindown,
.slupy-fadeinup,
.slupy-fadeinleft,
.slupy-fadeinright,
.slupy-fadein       { visibility: hidden; }

.no-js .slupy-fadeindown,
.no-js .slupy-fadeinup,
.no-js .slupy-fadeinleft,
.no-js .slupy-fadeinright,
.no-js .slupy-fadein { visibility: visible; }

.slupy-animated     { visibility: visible; animation-duration: 1s; animation-fill-mode: both; }

.fadeIn             { animation-name: fadeIn; }
.fadeInDown         { animation-name: fadeInDown; }
.fadeInUp           { animation-name: fadeInUp; }
.bounceIn           { animation-name: bounceIn; }
.flipInX            { animation-name: flipInX; }
.flipInY            { animation-name: flipInY; }
.fadeInLeft         { animation-name: fadeInLeft; }
.fadeInRight        { animation-name: fadeInRight; }

@media (prefers-reduced-motion: reduce) {
  .animated,
  .slupy-animated   { animation: none !important; transition: none !important; }
  .slupy-fadein,
  .slupy-fadeindown,
  .slupy-fadeinup,
  .slupy-fadeinleft,
  .slupy-fadeinright { visibility: visible; }
}