@charset "UTF-8";

/* ==================================================
   MODERN ANIMATE REPLACEMENT (2026)
   SEO + CWV Safe | Lightweight | Premium UI
================================================== */

:root{
  --anim-duration:.6s;
  --anim-ease:cubic-bezier(.4,0,.2,1);
}

/* =========================
   BASE
========================= */
.animated{
  animation-duration:var(--anim-duration);
  animation-fill-mode:both;
  will-change:transform,opacity;
}

/* =========================
   ACCESSIBILITY (GOOGLE UX)
========================= */
@media (prefers-reduced-motion: reduce){
  .animated{
    animation:none !important;
    transition:none !important;
  }
}

/* =========================
   FADE
========================= */
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
.fadeIn{animation-name:fadeIn}

/* =========================
   FADE + SLIDE (MMT STYLE)
========================= */
@keyframes fadeInUp{
  from{
    opacity:0;
    transform:translateY(16px);
  }
  to{
    opacity:1;
    transform:none;
  }
}
.fadeInUp{animation-name:fadeInUp}

@keyframes fadeInDown{
  from{
    opacity:0;
    transform:translateY(-16px);
  }
  to{
    opacity:1;
    transform:none;
  }
}
.fadeInDown{animation-name:fadeInDown}

@keyframes fadeInLeft{
  from{
    opacity:0;
    transform:translateX(-16px);
  }
  to{
    opacity:1;
    transform:none;
  }
}
.fadeInLeft{animation-name:fadeInLeft}

@keyframes fadeInRight{
  from{
    opacity:0;
    transform:translateX(16px);
  }
  to{
    opacity:1;
    transform:none;
  }
}
.fadeInRight{animation-name:fadeInRight}

/* =========================
   ZOOM (SUBTLE)
========================= */
@keyframes zoomIn{
  from{
    opacity:0;
    transform:scale(.96);
  }
  to{
    opacity:1;
    transform:none;
  }
}
.zoomIn{animation-name:zoomIn}

/* =========================
   SLIDE
========================= */
@keyframes slideInUp{
  from{
    opacity:0;
    transform:translateY(24px);
  }
  to{
    opacity:1;
    transform:n