/* ============================================================
   MIXEDSKILLS TRANSITION & KEYFRAME ANIMATIONS
   ============================================================ */

/* CSS Fallback reveals if JS fails */
[data-ms-reveal] {
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
}

[data-ms-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Page transitions exit effect */
.ms-page-exit {
  opacity: 0 !important;
  transition: opacity 0.35s ease-out !important;
  pointer-events: none !important;
}

/* Image loading transitions */
img[loading="lazy"] {
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.6s ease, filter 0.6s ease;
}

img[loading="lazy"].ms-img-loaded {
  opacity: 1;
  filter: blur(0);
}

/* Float Animation micro effect */
.ms-float-element {
  animation: ms-float-anim 6s ease-in-out infinite;
}

@keyframes ms-float-anim {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Pulsing accent glows */
.ms-glow-pulsing {
  animation: ms-glow-pulse 4s ease-in-out infinite;
}

@keyframes ms-glow-pulse {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.25; transform: scale(1.05); }
}