@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px);} to { opacity:1; transform:translateY(0);} }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px);} to { opacity:1; transform:translateY(0);} }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px);} to { opacity:1; transform:translateX(0);} }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(30px);} to { opacity:1; transform:translateX(0);} }
@keyframes bounceInUp {
  0% {opacity:0;transform:translateY(500px);}
  60%{opacity:1;transform:translateY(-20px);}
  80%{transform:translateY(10px);}
  100%{transform:translateY(0);}
}
@keyframes bounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
@keyframes rubberBand {
  0%{transform:scaleX(1);}
  30%{transform:scaleX(1.25);}
  40%{transform:scaleX(0.75);}
  50%{transform:scaleX(1.15);}
  65%{transform:scaleX(.95);}
  75%{transform:scaleX(1.05);}
  100%{transform:scaleX(1);}
}
@keyframes pulse { 0%{transform:scale(1);}50%{transform:scale(1.1);}100%{transform:scale(1);} }
@keyframes tada {
  0%{transform:scale(1);}
  10%,20%{transform:scale(.9) rotate(-3deg);}
  30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);}
  40%,60%,80%{transform:scale(1.1) rotate(-3deg);}
  100%{transform:scale(1) rotate(0);}
}
@keyframes flash { 0%,50%,100%{opacity:1;}25%,75%{opacity:0;} }
@keyframes flipInY { from{transform:perspective(400px) rotateY(90deg);opacity:0;}to{transform:perspective(400px) rotateY(0); opacity:1;} }
@keyframes zoomIn { from{opacity:0;transform:scale(.5);} to{opacity:1; transform:scale(1);} }
@keyframes rotateIn { from{ transform: rotate(-200deg); opacity: 0; } to{ transform: rotate(0); opacity: 1; } }
@keyframes slideInDown { from { transform:translateY(-120%); opacity: 0;} to { transform:translateY(0); opacity:1;} }
@keyframes slideInLeft { from { transform:translateX(-120%); opacity: 0;} to { transform:translateX(0); opacity:1;} }
@keyframes slideInRight { from { transform:translateX(120%); opacity: 0;} to { transform:translateX(0); opacity:1;} }
@keyframes slideInUp { from{ transform: translateY(120%); opacity:0;} to{ transform:translateY(0); opacity:1;} }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
@keyframes gradientFlash {
  0%,100% {background-position:0 50%;}
  50% {background-position:100% 50%;}
}

/* Animation classes */
.animate__fadeIn        { animation: fadeIn 1s both; }
.animate__fadeInUp      { animation: fadeInUp 1.2s both; }
.animate__fadeInDown    { animation: fadeInDown 1.2s both; }
.animate__fadeInLeft    { animation: fadeInLeft 1.2s both; }
.animate__fadeInRight   { animation: fadeInRight 1.2s both; }
.animate__bounceInUp    { animation: bounceInUp 1.1s both; }
.animate__slideInDown   { animation: slideInDown 1.1s both; }
.animate__slideInLeft   { animation: slideInLeft 1.1s both; }
.animate__slideInRight  { animation: slideInRight 1.1s both; }
.animate__slideInUp     { animation: slideInUp 1.1s both; }
.animate__zoomIn        { animation: zoomIn 1.2s both; }
.animate__flash         { animation: flash 1.2s both; }
.animate__pulse         { animation: pulse 10s infinite; }
.animate__pulseOnHover:hover,
.animate__pulseOnHover:focus { animation: pulse 5.6s; }
.animate__tada          { animation: tada 1.2s infinite; }
.animate__flipInY       { animation: flipInY 1.2s both; backface-visibility: visible !important; }
.animate__rubberBand    { animation: rubberBand 1.2s; }
.animate__bounce        { animation: bounce 2s infinite; }
.animate__rotateIn      { animation: rotateIn 1.1s both; }
.animate__float         { animation: float 3s infinite alternate; }
.animate__gradientFlash { animation: gradientFlash 2.5s infinite linear; background-size: 300% 100% !important; }
.animate__fadeOut       { animation: fadeOut 0.8s both; }

/* Modern micro-interactions and section reveals */
@keyframes modern-section-in {
  0% { opacity: 0; transform: translateY(40px) scale(.98);}
  100% { opacity: 1; transform: none; }
}
.modern-section-reveal {
  opacity: 0;
  transform: translateY(40px) scale(.98);
  animation: modern-section-in 1.1s cubic-bezier(.4,1.6,.5,1) forwards;
}
.modern-section-reveal:nth-of-type(2) { animation-delay: .2s;}
.modern-section-reveal:nth-of-type(3) { animation-delay: .4s;}
.modern-section-reveal:nth-of-type(4) { animation-delay: .6s;}
.modern-section-reveal:nth-of-type(5) { animation-delay: .8s;}

/* Animated gradient backgrounds */
.animate-gradient-bg {
  background: linear-gradient(-45deg, #1b365d 0%, #ff6b35 50%, #daa520 100%);
  background-size: 400% 400%;
  animation: animateGradient 8s ease-in-out infinite;
}
@keyframes animateGradient {
  0%,100% {background-position: 0 0;}
  50% {background-position: 100% 80%;}
}

/* Neon and glass effect */
.modern-glass {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 22px;
  box-shadow: 0 4px 32px rgba(44, 80, 143, 0.11);
  border: 1.5px solid rgba(255,255,255,0.3);
}
:focus-visible, .btn-hero:focus {
  outline: 2.5px solid #05ffee;
  box-shadow: 0 0 0 4px #05ffee60;
}

/* Raised shadow and glass on hover/focus */
.modern-elevate, .attraction-card:hover, .food-card:hover, .hotel-card:hover, .shopping-card:hover {
  box-shadow: 0 10px 40px 4px rgba(59, 130, 246, 0.13), 0 2px 6px 0 rgba(255,107,53,0.06);
  transition: box-shadow 0.33s cubic-bezier(.4,1.6,.5,1), transform 0.33s cubic-bezier(.4,1.6,.5,1), background 0.18s;
}

/* Underline grows in from center for active/hover nav links */
.nav-link {
  position: relative;
  overflow: visible;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 8px;
  width: 0; height: 3px;
  background: linear-gradient(90deg, #FF6B35, #DAA520);
  border-radius: 4px;
  transition: all 0.3s;
}
.nav-link.active::after,
.nav-link:hover::after {
  left: 22%;
  width: 56%;
}

.attractions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 4rem;
}

@keyframes modern-wobble {
  0%, 100% { transform: rotate(-3deg);}
  45% { transform: rotate(2deg);}
  70% { transform: rotate(-4deg);}
  90% { transform: rotate(4.5deg);}
}

/* Misc scroll/animation duration adjustments for mobile */
@media (max-width:700px){
  .animate__fadeInUp,
  .animate__fadeInDown,
  .animate__slideInLeft,
  .animate__slideInRight { animation-duration: .7s !important; }
}