/* GPU Accelerated Motion & Keyframe Animations */

@keyframes mesh-float {
  0% {
    transform: translate(0px, 0px) scale(1) rotate(0deg);
  }
  33% {
    transform: translate(30px, -50px) scale(1.15) rotate(120deg);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9) rotate(240deg);
  }
  100% {
    transform: translate(0px, 0px) scale(1) rotate(360deg);
  }
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.5);
    opacity: 0.8;
  }
  80%, 100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.85);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(0.85);
  }
}

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

@keyframes border-glow {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes float-badge {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes float-ui-element {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(2deg);
  }
}

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

/* Micro-interaction Helper Classes */
.animate-mesh-1 {
  animation: mesh-float 24s infinite alternate ease-in-out;
}

.animate-mesh-2 {
  animation: mesh-float 32s infinite alternate-reverse ease-in-out;
}

.animate-pulse-ring {
  position: relative;
}
.animate-pulse-ring::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background-color: var(--primary);
  opacity: 0.15;
  animation: pulse-ring 2s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
  z-index: 0;
}

.pulse-dot-green {
  animation: pulse-dot 1.8s infinite ease-in-out;
  background-color: var(--success);
}

.pulse-dot-blue {
  animation: pulse-dot 1.8s infinite ease-in-out;
  background-color: var(--primary);
}

.infinite-scroll-track {
  display: flex;
  width: max-content;
  animation: infinite-scroll 35s linear infinite;
}

.infinite-scroll-track:hover {
  animation-play-state: paused;
}

/* Scroll-Driven Animation & CSS View Transitions Support */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fade entry/exit for routing */
::view-transition-old(root) {
  animation-name: fade-out;
}
::view-transition-new(root) {
  animation-name: fade-in;
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Modern Starting Styles for Entry Transitions (Dialogs, Popovers, Accordions) */
@starting-style {
  .details-content[open] {
    opacity: 0;
    transform: translateY(-8px);
  }
  .dynamic-toast {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
}