@keyframes buttonLightBounceIn {
   0% {
      opacity: 0;
      transform: translateY(30px) scale(0.8);
   }
   60% {
      opacity: 0.8;
      transform: translateY(-5px) scale(1.05);
   }
   80% {
      opacity: 0.95;
      transform: translateY(2px) scale(1.02);
   }
   100% {
      opacity: 1;
      transform: translateY(0) scale(1);
   }
}

@keyframes buttonLightBounceOut {
   0% {
      opacity: 1;
      transform: translateY(0) scale(1);
   }
   100% {
      opacity: 0;
      transform: translateY(30px) scale(0.8);
   }
}


@keyframes sectionContentsSlideIn {
   0% {
      opacity: 0;
      transform: translateX(50px) scale(0.9);
   }
   40% {
      opacity: 0.6;
      transform: translateX(20px) scale(0.95);
   }
   70% {
      opacity: 0.9;
      transform: translateX(-5px) scale(1.02);
   }
   100% {
      opacity: 1;
      transform: translateX(0) scale(1);
   }
}

@keyframes sectionContentsSlideOut {
   0% {
      opacity: 1;
      transform: translateX(0) scale(1);
   }
   100% {
      opacity: 0;
      transform: translateX(50px) scale(0.9);
   }
}

/* Animation keyframes */
@keyframes contentLeftSlideIn {
   0% {
      opacity: 0;
      transform: translateY(50px) translateX(-40px) rotate(-5deg) scale(0.7);
      filter: blur(8px);
   }
   30% {
      opacity: 0.3;
      transform: translateY(25px) translateX(-20px) rotate(-2deg) scale(0.85);
      filter: blur(4px);
   }
   60% {
      opacity: 0.7;
      transform: translateY(10px) translateX(-5px) rotate(1deg) scale(0.95);
      filter: blur(1px);
   }
   100% {
      opacity: 1;
      transform: translateY(0) translateX(0) rotate(0deg) scale(1);
      filter: blur(0px);
   }
}

@keyframes contentCenterSlideIn {
   0% {
      opacity: 0;
      transform: translateY(80px) scale(0.3) rotateY(90deg);
      filter: brightness(0.5) contrast(0.8);
   }
   25% {
      opacity: 0.2;
      transform: translateY(60px) scale(0.5) rotateY(45deg);
      filter: brightness(0.7) contrast(0.85);
   }
   50% {
      opacity: 0.5;
      transform: translateY(30px) scale(0.8) rotateY(15deg);
      filter: brightness(0.9) contrast(0.9);
   }
   75% {
      opacity: 0.8;
      transform: translateY(5px) scale(1.1) rotateY(2deg);
      filter: brightness(1.1) contrast(0.95);
   }
   100% {
      opacity: 1;
      transform: translateY(0) scale(1) rotateY(0deg);
      filter: brightness(1) contrast(1);
   }
}

@keyframes contentRightSlideIn {
   0% {
      opacity: 0;
      transform: translateY(40px) translateX(60px) scale(0.6) skew(-10deg);
      filter: saturate(0.3) hue-rotate(180deg);
   }
   20% {
      opacity: 0.2;
      transform: translateY(30px) translateX(40px) scale(0.75) skew(-5deg);
      filter: saturate(0.5) hue-rotate(90deg);
   }
   40% {
      opacity: 0.4;
      transform: translateY(20px) translateX(20px) scale(0.85) skew(-2deg);
      filter: saturate(0.7) hue-rotate(45deg);
   }
   60% {
      opacity: 0.7;
      transform: translateY(10px) translateX(5px) scale(0.95) skew(-1deg);
      filter: saturate(0.9) hue-rotate(20deg);
   }
   80% {
      opacity: 0.9;
      transform: translateY(2px) translateX(1px) scale(1.02) skew(0deg);
      filter: saturate(1.1) hue-rotate(5deg);
   }
   100% {
      opacity: 1;
      transform: translateY(0) translateX(0) scale(1) skew(0deg);
      filter: saturate(1) hue-rotate(0deg);
   }
}

@keyframes contentSlideOut {
   0% {
      opacity: 1;
      transform: translateY(0);
   }
   100% {
      opacity: 0;
      transform: translateY(30px);
   }
}


/* SECTION 5 *

@keyframes mapContainerFadeIn {
   0% {
      opacity: 0;
      transform: translateY(20px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}


/* Main flow animation for .closing-page */
@keyframes closingPageFlow {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(0deg);
    background: 
      linear-gradient(135deg, 
        rgba(99, 13, 24, 0.9) 0%, 
        rgba(148, 88, 96, 1) 40%, 
        rgba(188, 151, 156, 1) 70%, 
        rgba(255, 255, 255, 0.8) 100%);
    width: 100%;
    height: 100%;
  }
  
  25% {
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    background: 
      linear-gradient(135deg, 
        rgba(99, 13, 24, 1) 0%, 
        rgba(148, 88, 96, 1) 30%, 
        rgba(188, 151, 156, 1) 60%, 
        rgba(255, 255, 255, 0.9) 100%);
    width: 100%;
    height: 100%;
  }
  
  50% {
    transform: translateX(0%) translateY(0%) rotate(90deg);
    background: 
      linear-gradient(135deg, 
        rgba(99, 13, 24, 1) 0%, 
        rgba(148, 88, 96, 1) 25%, 
        rgba(188, 151, 156, 1) 50%, 
        rgba(255, 255, 255, 1) 100%);
    width: 100%;
    height: 100%;
  }
  
  75% {
    transform: translateX(50%) translateY(50%) rotate(135deg);
    background: 
      linear-gradient(135deg, 
        rgba(99, 13, 24, 1) 0%, 
        rgba(148, 88, 96, 1) 30%, 
        rgba(188, 151, 156, 1) 60%, 
        rgba(255, 255, 255, 0.9) 100%);
    width: 100%;
    height: 100%;
  }
  
  100% {
    transform: translateX(100%) translateY(100%) rotate(180deg);
    background: 
      linear-gradient(135deg, 
        rgba(99, 13, 24, 0.9) 0%, 
        rgba(148, 88, 96, 1) 40%, 
        rgba(188, 151, 156, 1) 70%, 
        rgba(255, 255, 255, 0.8) 100%);
    width: 100%;
    height: 100%;
  }
}

/* Scroll down button animation */
@keyframes scrollDownBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Button form floating animation */
@keyframes buttonFormFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* Section 2 overlay fade in animation */
@keyframes overlayFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  50% {
    opacity: 0.7;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Section 2 logo top entrance animation */
@keyframes logoTopEntrance {
  0% {
    opacity: 0;
    transform: translateY(-50px) scale(0.8) rotate(-5deg);
    filter: blur(8px);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-15px) scale(0.95) rotate(-2deg);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0px);
  }
}


@keyframes overlayFadeBackground {
  0% {opacity: 0;}
  50% {opacity: 0.3;}
  100% {opacity: 1;}
}


/* Section 2 overlay fade out animation (reverse) */
@keyframes overlayFadeOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.3;
    transform: translateY(10px);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* Section 2 logo top exit animation (reverse) */
@keyframes logoTopExit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0px);
  }
  50% {
    opacity: 0.2;
    transform: translateY(-25px) scale(0.9) rotate(-2deg);
    filter: blur(4px);
  }
  100% {
    opacity: 0;
    transform: translateY(-50px) scale(0.8) rotate(-5deg);
    filter: blur(8px);
  }
}

/* Button form dismiss animation */
@keyframes buttonFormDismiss {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  50% {
    opacity: 0.3;
    transform: translateY(-10px) scale(0.9);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(0.8);
  }
}

/* Button form appear animation */
@keyframes buttonFormAppear {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.8);
  }
  50% {
    opacity: 0.7;
    transform: translateY(-10px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Logo Clients Animations */
@keyframes logoClientsEntrance {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.9) rotate(-2deg);
    filter: blur(5px);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-5px) scale(1.02) rotate(1deg);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0px);
  }
}

@keyframes logoClientsExit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0px);
  }
  50% {
    opacity: 0.3;
    transform: translateY(15px) scale(0.95) rotate(-1deg);
    filter: blur(2px);
  }
  100% {
    opacity: 0;
    transform: translateY(30px) scale(0.9) rotate(-2deg);
    filter: blur(5px);
  }
}

@keyframes logoRowEntrance {
  0% {
    opacity: 0;
    transform: translateX(-50px) scale(0.9);
    filter: blur(3px);
  }
  50% {
    opacity: 0.7;
    transform: translateX(-10px) scale(0.98);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0px);
  }
}

@keyframes logoColEntrance {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.8) rotate(-3deg);
    filter: blur(4px);
  }
  50% {
    opacity: 0.6;
    transform: translateY(8px) scale(0.9) rotate(-1deg);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0px);
  }
}

/* Exit Animations for Logo Elements */
@keyframes logoRowExit {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0px);
  }
  50% {
    opacity: 0.4;
    transform: translateX(-25px) scale(0.95);
    filter: blur(1px);
  }
  100% {
    opacity: 0;
    transform: translateX(-50px) scale(0.9);
    filter: blur(3px);
  }
}

@keyframes logoColExit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0px);
  }
  50% {
    opacity: 0.3;
    transform: translateY(10px) scale(0.9) rotate(-1deg);
    filter: blur(2px);
  }
  100% {
    opacity: 0;
    transform: translateY(20px) scale(0.8) rotate(-3deg);
    filter: blur(4px);
  }
}

/* Contact Info Animations */
@keyframes contactInfoEntrance {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.9) rotate(-1deg);
    filter: blur(3px);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-5px) scale(1.02) rotate(0.5deg);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0px);
  }
}

@keyframes contactInfoExit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0px);
  }
  50% {
    opacity: 0.3;
    transform: translateY(20px) scale(0.95) rotate(-0.5deg);
    filter: blur(1px);
  }
  100% {
    opacity: 0;
    transform: translateY(40px) scale(0.9) rotate(-1deg);
    filter: blur(3px);
  }
}

@keyframes contactSocialEntrance {
  0% {
    opacity: 0;
    transform: scale(0.8) rotate(-2deg);
    filter: blur(2px);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.95) rotate(-1deg);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: blur(0px);
  }
}

@keyframes contactSocialExit {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: blur(0px);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.9) rotate(-1deg);
    filter: blur(1px);
  }
  100% {
    opacity: 0;
    transform: scale(0.8) rotate(-2deg);
    filter: blur(2px);
  }
}

@keyframes socialIconEntrance {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.7) rotate(-10deg);
    filter: blur(3px);
  }
  50% {
    opacity: 0.6;
    transform: translateY(8px) scale(0.9) rotate(-5deg);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0px);
  }
}

@keyframes socialIconExit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0px);
  }
  50% {
    opacity: 0.3;
    transform: translateY(10px) scale(0.85) rotate(-5deg);
    filter: blur(1px);
  }
  100% {
    opacity: 0;
    transform: translateY(20px) scale(0.7) rotate(-10deg);
    filter: blur(3px);
  }
}

@keyframes labelEntrance {
  0% {
    opacity: 0;
    transform: translateX(30px) scale(0.8) rotate(1deg);
    filter: blur(2px);
  }
  50% {
    opacity: 0.7;
    transform: translateX(10px) scale(0.95) rotate(0.5deg);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(0deg);
    filter: blur(0px);
  }
}

@keyframes labelExit {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(0deg);
    filter: blur(0px);
  }
  50% {
    opacity: 0.4;
    transform: translateX(15px) scale(0.9) rotate(0.5deg);
    filter: blur(1px);
  }
  100% {
    opacity: 0;
    transform: translateX(30px) scale(0.8) rotate(1deg);
    filter: blur(2px);
  }
}

/* Brand elements initial state - handled by brand-animations.css */

/* Menu Entrance Animation */
@keyframes menuEntrance {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(-100px);
    filter: blur(10px);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-50%) translateX(-20px);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    filter: blur(0px);
  }
}

/* Menu Item Entrance Animation */
@keyframes menuItemEntrance {
  0% {
    opacity: 0;
    transform: translateX(-50px);
    filter: blur(5px);
  }
  50% {
    opacity: 0.7;
    transform: translateX(-10px);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0px);
  }
}



/* Menu items entrance animation */
@keyframes menuItemsEntrance {
	0% {
		opacity: 0;
		transform: translateY(50px) scale(0.8) rotate(-2deg);
		filter: blur(5px);
	}
	50% {
		opacity: 0.8;
		transform: translateY(-10px) scale(1.05) rotate(1deg);
		filter: blur(1px);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1) rotate(0deg);
		filter: blur(0px);
	}
}

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


/* Icon floating animation on hover */
@keyframes iconFloat {
	0%, 100% {
		transform: scale(1.1) translateY(-2px);
	}
	50% {
		transform: scale(1.15) translateY(-4px);
	}
}

@keyframes activeIconPulse {
	0%, 100% {
		transform: scale(1);
		filter: brightness(1);
	}
	50% {
		transform: scale(1.05);
		filter: brightness(1.3);
	}
}

/* Animated gradient flow for active menu items */
@keyframes gradientFlow {
	0% {
		background-position: 0% 50%;
	}
	25% {
		background-position: 100% 50%;
	}
	50% {
		background-position: 100% 100%;
	}
	75% {
		background-position: 0% 100%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* Text color flow animation for active menu items */
@keyframes textColorFlow {
	0% {
		color: #E6D3A6;
	}
	16.67% {
		color: #FFD892;
	}
	33.33% {
		color: #FBE67B;
	}
	50% {
		color: #FCFBE7;
	}
	66.67% {
		color: #F7D14E;
	}
	83.33% {
		color: #D4A041;
	}
	100% {
		color: #E6D3A6;
	}
}

@keyframes menuFloat {
  0%, 100% {
    transform: translateY(-50%) translateX(0);
  }
  50% {
    transform: translateY(-50%) translateX(3px);
  }
}

@keyframes activeIconPulse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.05) rotate(2deg);
    filter: brightness(1.3);
  }
}

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

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

@keyframes watermarkFadeIn {
   0% {
      opacity: 0;
      transform: scale(0.9);
   }
   50% {
      opacity: 0.03;
      transform: scale(0.95);
   }
   100% {
      opacity: 1;
      transform: scale(1);
   }
}

@keyframes watermarkFadeOut {
   0% {
      opacity: 1;
      transform: scale(1);
   }
   100% {
      opacity: 0;
      transform: scale(0.9);
   }
}


@keyframes sectionImagesCircleReveal {
   0% {
      clip-path: circle(0 at 100% 0);
   }
   30% {
      clip-path: circle(50% at 100% 0);
   }
   60% {
      clip-path: circle(120% at 100% 0);
   }
   100% {
      clip-path: circle(150% at 100% 0);
   }
}

@keyframes sectionImagesCircleHide {
   0% {
      clip-path: circle(150% at 100% 0);
   }
   100% {
      clip-path: circle(0 at 100% 0);
   }
}

/* Keyframe animation for the running line effect */
@keyframes dash {
  to {
    stroke-dashoffset: -30;
  }
}


@keyframes flow {
  0% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: -45;
  }
  100% {
    stroke-dashoffset: -90;
  }
}

/* Map Section Animations */
@keyframes sectionMapEntrance {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    filter: blur(2px);
  }
  50% {
    opacity: 0.8;
    transform: translateY(10px) scale(0.98);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

@keyframes sectionMapExit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
  50% {
    opacity: 0.4;
    transform: translateY(15px) scale(0.95);
    filter: blur(1px);
  }
  100% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    filter: blur(2px);
  }
}



@keyframes sectionMapInfoEntrance {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    filter: blur(2px);
  }
  50% {
    opacity: 0.6;
    transform: translateY(15px) scale(0.95);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

@keyframes sectionMapInfoExit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
  50% {
    opacity: 0.3;
    transform: translateY(15px) scale(0.95);
    filter: blur(1px);
  }
  100% {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    filter: blur(2px);
  }
}



@keyframes sectionMapContentsSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(80px) scale(0.95);
  }
  60% {
    opacity: 0.8;
    transform: translateY(-50%) translateX(10px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
  }
}

@keyframes sectionMapContentsSlideOut {
  0% {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-50%) translateX(80px) scale(0.95);
  }
}

/* New smooth right-to-left animations */
@keyframes titleSlideInRight {
  0% {
    opacity: 0;
    transform: translateX(60px) scale(0.9);
  }
  70% {
    opacity: 0.8;
    transform: translateX(15px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes descriptionSlideInRight {
  0% {
    opacity: 0;
    transform: translateX(80px) scale(0.85);
  }
  60% {
    opacity: 0.7;
    transform: translateX(25px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}



@keyframes buttonBounceInRight {
  0% {
    opacity: 0;
    transform: translateX(100px) scale(0.8);
  }
  50% {
    opacity: 0.8;
    transform: translateX(30px) scale(0.9);
  }
  70% {
    opacity: 1;
    transform: translateX(10px) scale(1.05);
  }
  85% {
    opacity: 1;
    transform: translateX(-3px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Reverse/Exit animations - slide out to the right */
@keyframes titleSlideOutRight {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(60px) scale(0.9);
  }
}

@keyframes descriptionSlideOutRight {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(80px) scale(0.85);
  }
}

@keyframes buttonBounceOutRight {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  30% {
    opacity: 0.8;
    transform: translateX(20px) scale(0.95);
  }
  60% {
    opacity: 0.4;
    transform: translateX(50px) scale(0.85);
  }
  100% {
    opacity: 0;
    transform: translateX(100px) scale(0.8);
  }
}



@keyframes mapGlowPulse {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(0.95);
  }
}

@keyframes mapShine {
  0% {
    opacity: 0;
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  25% {
    opacity: 0.3;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
  }
  50% {
    opacity: 0.6;
    transform: translateX(0%) translateY(0%) rotate(45deg);
  }
  75% {
    opacity: 0.3;
    transform: translateX(50%) translateY(50%) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}



@keyframes mapGlowPulse {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(0.95);
  }
}

@keyframes mapShine {
  0% {
    opacity: 0;
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  25% {
    opacity: 0.3;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
  }
  50% {
    opacity: 0.6;
    transform: translateX(0%) translateY(0%) rotate(45deg);
  }
  75% {
    opacity: 0.3;
    transform: translateX(50%) translateY(50%) rotate(45deg);
  }
  100% {
    opacity: 0;
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

/* Missing animations for complete functionality */
@keyframes buttonBounceOutRight {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  30% {
    opacity: 0.8;
    transform: translateX(20px) scale(0.95);
  }
  60% {
    opacity: 0.4;
    transform: translateX(50px) scale(0.85);
  }
  100% {
    opacity: 0;
    transform: translateX(100px) scale(0.8);
  }
}

@keyframes sectionMapHighlight {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.85);
    filter: blur(6px) brightness(0.7);
  }
  20% {
    opacity: 0.3;
    transform: translateY(20px) scale(0.9);
    filter: blur(4px) brightness(0.8);
  }
  40% {
    opacity: 0.6;
    transform: translateY(10px) scale(0.95);
    filter: blur(2px) brightness(0.9);
  }
  60% {
    opacity: 0.85;
    transform: translateY(2px) scale(1.05);
    filter: blur(1px) brightness(1.1);
  }
  80% {
    opacity: 0.95;
    transform: translateY(-1px) scale(1.02);
    filter: blur(0px) brightness(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px) brightness(1);
  }
}

@keyframes sectionMapHighlightOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px) brightness(1);
  }
  30% {
    opacity: 0.7;
    transform: translateY(15px) scale(0.9);
    filter: blur(2px) brightness(0.8);
  }
  60% {
    opacity: 0.3;
    transform: translateY(25px) scale(0.8);
    filter: blur(4px) brightness(0.6);
  }
  100% {
    opacity: 0;
    transform: translateY(30px) scale(0.85);
    filter: blur(6px) brightness(0.5);
  }
}

/* Spectacular Map Highlight Animations */
@keyframes sectionMapHighlight {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.85);
    filter: blur(6px) brightness(0.7);
  }
  20% {
    opacity: 0.3;
    transform: translateY(20px) scale(0.9);
    filter: blur(4px) brightness(0.8);
  }
  40% {
    opacity: 0.6;
    transform: translateY(10px) scale(0.95);
    filter: blur(2px) brightness(0.9);
  }
  60% {
    opacity: 0.85;
    transform: translateY(2px) scale(1.05);
    filter: blur(1px) brightness(1.1);
  }
  80% {
    opacity: 0.95;
    transform: translateY(-1px) scale(1.02);
    filter: blur(0px) brightness(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px) brightness(1);
  }
}

@keyframes sectionMapHighlightOut {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px) brightness(1);
  }
  30% {
    opacity: 0.7;
    transform: translateY(15px) scale(0.9);
    filter: blur(2px) brightness(0.8);
  }
  60% {
    opacity: 0.3;
    transform: translateY(25px) scale(0.8);
    filter: blur(4px) brightness(0.6);
  }
  100% {
    opacity: 0;
    transform: translateY(30px) scale(0.85);
    filter: blur(6px) brightness(0.5);
  }
}

/* Section 5 Block Contents Animations */
@keyframes tin-tucBlockContentsEntrance {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.95);
  }
  50% {
    opacity: 0.7;
    transform: translateY(20px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes tin-tucBlockContentsExit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(60px) scale(0.95);
  }
}

@keyframes tin-tucTitleEntrance {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
    filter: blur(3px);
  }
  60% {
    opacity: 0.8;
    transform: translateY(10px) scale(0.95);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

@keyframes tin-tucTaglineEntrance {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.92);
    filter: blur(2px);
  }
  70% {
    opacity: 0.7;
    transform: translateY(8px) scale(0.97);
    filter: blur(0.5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

@keyframes tin-tucNewsItem1Entrance {
  0% {
    opacity: 0;
    transform: translateX(-50px) scale(0.9);
    filter: blur(2px);
  }
  60% {
    opacity: 0.8;
    transform: translateX(-15px) scale(0.95);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0px);
  }
}

@keyframes tin-tucNewsItem2Entrance {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
    filter: blur(2px);
  }
  60% {
    opacity: 0.8;
    transform: translateY(15px) scale(0.95);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

@keyframes tin-tucNewsItem3Entrance {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
    filter: blur(2px);
  }
  60% {
    opacity: 0.8;
    transform: translateY(15px) scale(0.95);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

@keyframes linkUnderlineExpand {
  0% {
    transform: scaleX(0);
  }
  30% {
    transform: scaleX(0.4);
  }
  70% {
    transform: scaleX(0.8);
  }
  100% {
    transform: scaleX(1);
  }
}