/* =========================================================
   MLSC SVCE — ANIMATIONS
   ========================================================= */

/* ─── Keyframes ──────────────────────────────────────────── */
@keyframes fadeInUp    { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInDown  { from { opacity:0; transform:translateY(-30px);} to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn      { from { opacity:0; } to { opacity:1; } }
@keyframes scaleIn     { from { opacity:0; transform:scale(0.88); } to { opacity:1; transform:scale(1); } }
@keyframes slideRight  { from { transform:translateX(-100%); } to { transform:translateX(0); } }

@keyframes float {
  0%,100% { transform:translateY(0) rotate(0deg); }
  33%     { transform:translateY(-12px) rotate(2deg); }
  66%     { transform:translateY(-6px) rotate(-1.5deg); }
}

@keyframes pulse {
  0%,100% { opacity:1; }
  50%     { opacity:0.5; }
}

@keyframes blink {
  0%,100% { opacity:1; }
  50%     { opacity:0; }
}

@keyframes gradientShift {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}

@keyframes shimmer {
  from { background-position:-200% 0; }
  to   { background-position:200% 0; }
}

@keyframes spin    { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes bounce  {
  0%,100% { transform:translateY(0); animation-timing-function:cubic-bezier(.8,0,1,1); }
  50%     { transform:translateY(-10px); animation-timing-function:cubic-bezier(0,0,.2,1); }
}

@keyframes scrollLeft {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

@keyframes confettiFall {
  0%   { transform:translateY(-20px) rotateZ(0deg); opacity:1; }
  100% { transform:translateY(100vh) rotateZ(720deg); opacity:0; }
}

/* ─── Scroll Reveal ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.reveal--up    { transform: translateY(40px); }
.reveal.reveal--left  { transform: translateX(-40px); }
.reveal.reveal--right { transform: translateX(40px); }
.reveal.reveal--scale { transform: scale(0.92); }
.reveal.is-visible    { opacity:1; transform:none; }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-stagger.is-visible > *:nth-child(1) { opacity:1;transform:none;transition-delay:0ms;   }
.reveal-stagger.is-visible > *:nth-child(2) { opacity:1;transform:none;transition-delay:100ms; }
.reveal-stagger.is-visible > *:nth-child(3) { opacity:1;transform:none;transition-delay:200ms; }
.reveal-stagger.is-visible > *:nth-child(4) { opacity:1;transform:none;transition-delay:300ms; }
.reveal-stagger.is-visible > *:nth-child(5) { opacity:1;transform:none;transition-delay:400ms; }
.reveal-stagger.is-visible > *:nth-child(6) { opacity:1;transform:none;transition-delay:500ms; }
.reveal-stagger.is-visible > *:nth-child(7) { opacity:1;transform:none;transition-delay:600ms; }
.reveal-stagger.is-visible > *:nth-child(8) { opacity:1;transform:none;transition-delay:700ms; }

/* ─── Utility classes ────────────────────────────────────── */
.float      { animation: float 6s ease-in-out infinite; }
.float-slow { animation: float 9s ease-in-out infinite; }
.pulse-anim { animation: pulse 2s ease-in-out infinite; }
.spin-slow  { animation: spin 20s linear infinite; }
.page-load  { animation: fadeIn 0.4s ease both; }

/* ─── Gradient animated bg ───────────────────────────────── */
.noise-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* ─── Reduce Motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}