/* ===== ONLY PARTICLE/DOTS ANIMATIONS ACTIVE ===== */
/* All other animations have been disabled */

/* Background Canvas and Particle System */
#backgroundCanvas {
  animation: fadeIn 2s ease-out;
}

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

/* Performance optimizations for particle system */
*, *::before, *::after {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Force GPU acceleration for smooth particle animations */
#backgroundCanvas {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: auto;
}

/* Motion accessibility - disable all animations if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  
  #backgroundCanvas {
    animation: none !important;
  }
}

/* Basic hover effects without animations */
a {
  transition: color 0.3s ease;
}

a:hover {
  transition: color 0.3s ease;
}

/* Minimal button interactions without complex animations */
button:hover,
.button:hover {
  transition: opacity 0.2s ease;
}

/* All other animations disabled - only background particles active */

/* Labor Market Icon Animations */
.labor-market-icon .arc-path {
  transition: all 0.3s ease-in-out;
}

.labor-market-icon .spark {
  transition: all 0.5s ease-out;
  offset-path: path('M6,18 C6,10 18,10 18,18');
  offset-distance: 0%;
  opacity: 1;
}

.labor-market-icon .trail {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.5s ease-out;
  opacity: 0;
}

.labor-market-icon .bloom {
  opacity: 0;
  transform-origin: 12px 7.5px;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.labor-market-icon:hover .spark {
  animation: move-spark 1.2s ease-in-out forwards;
}

.labor-market-icon:hover .trail {
  animation: draw-trail 1.2s ease-in-out forwards;
}

.labor-market-icon:hover .bloom {
  animation: bloom-effect 1.2s ease-in-out forwards;
}

@keyframes move-spark {
  0% { offset-distance: 0%; opacity: 1; }
  50% { offset-distance: 100%; opacity: 1; }
  51% { opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

@keyframes draw-trail {
  0% { stroke-dashoffset: 100; opacity: 0.7; }
  50% { stroke-dashoffset: 0; opacity: 0.7; }
  80% { opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes bloom-effect {
  0%, 49% { opacity: 0; transform: scale(0.5); }
  60% { opacity: 1; transform: scale(1.2); }
  80% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 0; }
}

/* Social Development Icon Animations */
.social-development-icon .node {
  transition: all 0.3s ease-in-out;
  transform-origin: center;
}

.social-development-icon .line {
  transition: all 0.3s ease-in-out;
  stroke-dasharray: 3 3;
  stroke-opacity: 0.5;
}

.social-development-icon .ghost-line {
  stroke-opacity: 0;
  stroke-dasharray: 2 4;
}

.social-development-icon:hover .line {
  stroke-dasharray: none;
  stroke-opacity: 1;
  animation: pulse-line 1.5s infinite;
}

.social-development-icon:hover .node {
  animation: grow-node 1.5s infinite;
}

.social-development-icon:hover .ghost-line {
  animation: ghost-lines 2s infinite;
}

@keyframes pulse-line {
  0%, 100% { stroke-opacity: 0.7; stroke-width: 1.5; }
  50% { stroke-opacity: 1; stroke-width: 2; }
}

@keyframes grow-node {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

@keyframes ghost-lines {
  0% { stroke-opacity: 0; stroke-dashoffset: 10; }
  50% { stroke-opacity: 0.3; stroke-dashoffset: 5; }
  100% { stroke-opacity: 0; stroke-dashoffset: 0; }
}

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

/* Interactive map animations */
@keyframes drawLine {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes flowDots {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    10% {
        opacity: 1;
        transform: scale(1);
    }
    90% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

@keyframes labelFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes countryPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes connectionGlow {
    0%, 100% {
        stroke-opacity: 0.3;
        filter: drop-shadow(0 0 2px hsl(var(--primary)));
    }
    50% {
        stroke-opacity: 0.6;
        filter: drop-shadow(0 0 8px hsl(var(--primary)));
    }
}

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Icon Animations and Transitions */

/* Labor Market Icon Animations */
.labor-market-icon .arc-path {
    transition: all 0.3s ease-in-out;
}

.labor-market-icon .spark {
    transition: all 0.5s ease-out;
    offset-path: path('M6,18 C6,10 18,10 18,18');
    offset-distance: 0%;
    opacity: 1;
}

.labor-market-icon .trail {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 0.5s ease-out;
    opacity: 0;
}

.labor-market-icon .bloom {
    opacity: 0;
    transform-origin: 12px 7.5px;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.labor-market-icon:hover .spark {
    animation: move-spark 1.2s ease-in-out forwards;
}

.labor-market-icon:hover .trail {
    animation: draw-trail 1.2s ease-in-out forwards;
}

.labor-market-icon:hover .bloom {
    animation: bloom-effect 1.2s ease-in-out forwards;
}

@keyframes move-spark {
    0% { offset-distance: 0%; opacity: 1; }
    50% { offset-distance: 100%; opacity: 1; }
    51% { opacity: 0; }
    100% { offset-distance: 100%; opacity: 0; }
}

@keyframes draw-trail {
    0% { stroke-dashoffset: 100; opacity: 0.7; }
    50% { stroke-dashoffset: 0; opacity: 0.7; }
    80% { opacity: 0; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes bloom-effect {
    0%, 49% { opacity: 0; transform: scale(0.5); }
    60% { opacity: 1; transform: scale(1.2); }
    80% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 0; }
}

/* Social Development Icon Animations */
@keyframes pulse-line {
    0%, 100% { stroke-opacity: 0.7; stroke-width: 1.5; }
    50% { stroke-opacity: 1; stroke-width: 2; }
}

@keyframes grow-node {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

@keyframes ghost-lines {
    0% { stroke-opacity: 0; stroke-dashoffset: 10; }
    50% { stroke-opacity: 0.3; stroke-dashoffset: 5; }
    100% { stroke-opacity: 0; stroke-dashoffset: 0; }
}

.social-development-icon .node {
    transition: all 0.3s ease-in-out;
    transform-origin: center;
}

.social-development-icon .line {
    transition: all 0.3s ease-in-out;
    stroke-dasharray: 3 3;
    stroke-opacity: 0.5;
}

.social-development-icon .ghost-line {
    stroke-opacity: 0;
    stroke-dasharray: 2 4;
}

.social-development-icon:hover .line {
    stroke-dasharray: none;
    stroke-opacity: 1;
    animation: pulse-line 1.5s infinite;
}

.social-development-icon:hover .node {
    animation: grow-node 1.5s infinite;
}

.social-development-icon:hover .ghost-line {
    animation: ghost-lines 2s infinite;
}
.labor-market-icon {
  animation: pulse 2s infinite;
}

.labor-market-icon circle {
  transform-origin: center;
  animation: rotate 20s linear infinite;
}

.labor-market-icon path {
  transform-origin: center;
  animation: bounce 3s ease-in-out infinite;
}

.social-development-icon {
  animation: fadeIn 1s ease-out;
}

.social-development-icon .gear {
  transform-origin: center;
  animation: rotate 10s linear infinite;
}

.social-development-icon .person {
  animation: pulse 3s ease-in-out infinite;
}

/* Feature Card Animations */
.feature-card,
.group {
  animation: slideInLeft 0.6s ease-out;
  animation-fill-mode: both;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:nth-child(1),
.group:nth-child(1) {
  animation-delay: 0.1s;
}

.feature-card:nth-child(2),
.group:nth-child(2) {
  animation-delay: 0.2s;
}

.feature-card:nth-child(3),
.group:nth-child(3) {
  animation-delay: 0.3s;
}

.feature-card:nth-child(4),
.group:nth-child(4) {
  animation-delay: 0.4s;
}

/* Hero Content Animations */
.main-column {
  animation: scaleIn 0.8s ease-out;
}

.map-column {
  animation: slideInRight 0.8s ease-out;
  animation-delay: 0.2s;
  animation-fill-mode: both;
}

/* Header Animations */
.header {
  animation: slideInLeft 0.5s ease-out;
}

/* Scroll Button Animations */
.nav-buttons {
  animation: fadeIn 1s ease-out;
  animation-delay: 1s;
  animation-fill-mode: both;
}

.scroll-button {
  transition: all 0.3s ease;
}

.scroll-button:hover {
  transform: translateY(-2px);
}

/* Interactive Hover Animations */
.logo:hover .logo-icon {
  animation: pulse 0.5s ease-in-out;
}

.search-button:hover {
  animation: pulse 0.3s ease-in-out;
}

.user-menu-button:hover {
  animation: bounce 0.5s ease-in-out;
}

/* Country Map Animations */
.country-link {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.country-circle {
  animation: pulse 4s ease-in-out infinite;
}

.country-circle:nth-child(odd) {
  animation-delay: 1s;
}

.country-circle:nth-child(even) {
  animation-delay: 2s;
}

.country-dot {
  animation: bounce 2s ease-in-out infinite;
}

.country-dot:nth-child(1) {
  animation-delay: 0.5s;
}

.country-dot:nth-child(2) {
  animation-delay: 1s;
}

.country-dot:nth-child(3) {
  animation-delay: 1.5s;
}

/* Section Animations */
.info-section {
  animation: fadeIn 1s ease-out;
}

.contact-section {
  animation: fadeIn 1s ease-out;
}


/* Contact Items Animation */
.contact-item {
  animation: scaleIn 0.6s ease-out;
  animation-fill-mode: both;
}

.contact-item:nth-child(1) {
  animation-delay: 0.1s;
}

.contact-item:nth-child(2) {
  animation-delay: 0.2s;
}

.contact-item:nth-child(3) {
  animation-delay: 0.3s;
}

/* Form Animations */
.search-input:focus {
  animation: scaleIn 0.2s ease-out;
}

/* Background Canvas Animation */
#backgroundCanvas {
  animation: fadeIn 2s ease-out;
}

/* Performance optimizations and conflict prevention */
*, *::before, *::after {
  /* Ensure consistent animation behavior */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Prevent animation conflicts with transform stacking */
[data-aos] {
  transform-style: preserve-3d;
}

/* Force GPU acceleration for smooth animations */
.feature-card,
.group,
#box-Labor,
#box-Social,
[data-aos] {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Ensure consistent z-index for animated elements */
[data-aos] {
  position: relative;
  z-index: 1;
}

[data-aos]:hover {
  z-index: 2;
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    animation: none !important;
    transition: none !important;
  }
  
  .feature-card,
  .group,
  #box-Labor,
  #box-Social {
    transition: none !important;
    transform: none !important;
  }
}

/* AOS Animation Conflict Prevention */
[data-aos] {
  /* Ensure AOS doesn't interfere with custom transitions */
  transition-property: transform, opacity !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Prevent AOS transform conflicts on hover elements */
[data-aos]:hover {
  transition-delay: 0s !important;
}

/* Specific fixes for interactive elements */
#box-Labor,
#box-Social {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Prevent AOS from overriding custom transitions */
  will-change: transform, opacity;
  /* Ensure stable positioning */
  position: relative;
  transform-style: preserve-3d;
}

/* Override AOS animations to prevent horizontal slide conflicts */
#box-Labor[data-aos="fade-up"],
#box-Social[data-aos="fade-up"] {
  /* Ensure only vertical transforms are used */
  transform: translate3d(0, 0, 0) !important;
}

/* Prevent AOS from overriding hover states */
#box-Labor[data-aos]:not(.aos-animate),
#box-Social[data-aos]:not(.aos-animate) {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
}

#box-Labor[data-aos].aos-animate,
#box-Social[data-aos].aos-animate {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

#box-Labor:hover,
#box-Social:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* Override any AOS transforms on hover */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Feature card animation fixes */
.feature-card,
.group {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateZ(0); /* Force hardware acceleration */
  will-change: transform;
}

.feature-card:hover,
.group:hover,
.feature-card.hovered,
.group.hovered {
  animation: none !important; /* Prevent animation conflicts */
  transform: translateY(-2px) translateZ(0);
}

/* Specific hover states for box elements */
.group.hovered {
  transform: translateY(-4px) translateZ(0) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

/* AOS Animation Duration Control */
[data-aos][data-aos-delay] {
  transition-delay: 0s !important;
}

/* Ensure smooth transitions between states */
[data-aos] {
  transition-duration: 0.6s !important;
}

[data-aos="fade-up"] {
  transform: translate3d(0, 30px, 0);
  opacity: 0;
}

[data-aos="fade-up"].aos-animate {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

@media (max-width: 768px) {
  .feature-card {
    animation: fadeIn 0.5s ease-out;
  }

  .main-column,
  .map-column {
    animation: fadeIn 0.6s ease-out;
    animation-delay: 0.1s;
  }
}

/* Hover Effect Animations */
.feature-card:hover,
.group:hover {
  animation: none;
  transform: translateY(-2px);
}

#box-Labor,
#box-Social {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Prevent AOS from overriding custom transitions */
  will-change: transform, opacity;
}

#box-Labor[data-aos="fade-up"],
#box-Social[data-aos="fade-up"] {
  /* Override AOS fade-left animation conflicts */
  transform: translate3d(0, 0, 0) !important;
}

#box-Labor:hover,
#box-Social:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.nav-button:hover {
  transform: translateY(-1px);
}

.contact-icon:hover {
  animation: bounce 0.6s ease-in-out;
}

/* Loading Animation States */
.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

.loading-spinner {
  animation: rotate 1s linear infinite;
}

/* Intersection Observer Animations */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.animate-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered Animation Classes */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }