/* THAI KALAIGAL - V2 ANIMATION STYLES */

/* --- 1. Navigation Styles --- */
#main-header {
  transition: all 0.4s ease-in-out;
}

#main-header.scrolled {
  height: 70px; /* Reduce height */
  background: rgba(10, 10, 10, 0.85); /* Blur background */
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); /* Shadow enhance */
}

/* Active Link Gold Underline (Wave effect) */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link.active::after {
  animation: waveUnderline 2s infinite linear;
  background-size: 200% 100%;
}

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

@media (max-width: 1024px) {
  .nav-link::before,
  .nav-link::after {
    display: none !important;
  }

  .nav-link {
    -webkit-tap-highlight-color: transparent;
  }
}

/* --- 2. Hero Section Styles --- */
#hero-title-kalaigal span {
  display: inline-block;
}

/* CTA Button Glow Hover */
.cta-btn {
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.cta-btn:hover {
  box-shadow: 0 0 20px var(--color-gold), 0 0 40px var(--color-gold-dark);
}

.cta-btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,215,0,0.4) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  transform: scale(0.5);
}

.cta-btn:hover::before {
  opacity: 1;
  transform: scale(1);
}

/* Scroll indicator animation */
.scroll-indicator {
  color: var(--color-gold);
  font-size: 24px;
}

.scroll-arrow {
  display: block;
  animation: bounceDown 2s infinite;
}

@keyframes bounceDown {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}


/* --- Generic Base Animations --- */
.animate-entrance {
  animation: fadeInScale 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  opacity: 0;
}

.animate-fade-slide {
  animation: fadeInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  opacity: 0;
}

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pulse animation */
.animate-pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  /* Disable parallax on mobile */
  [data-parallax] {
    transform: none !important;
  }
}

/* Blur-up Lazy Loading */
.blur-up {
  filter: blur(20px);
  transition: filter 0.5s ease-out;
}
.blur-up.lazyloaded {
  filter: blur(0);
}

/* Lightbox GSAP integration override */
.lightbox-content {
  transform: scale(0.8);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.lightbox-overlay.active .lightbox-content {
  transform: scale(1);
  opacity: 1;
}

/* --- 4. Forms & Microinteractions --- */
/* Focus Border Glow */
input:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5), inset 0 1px 3px rgba(0,0,0,0.5);
  border-color: var(--color-gold);
  transition: all 0.3s ease;
}

/* Input Error Shake */
.input-error {
  animation: shakeError 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  border-color: red !important;
}

@keyframes shakeError {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* Loading Spinner */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255,215,0,0.3);
  border-radius: 50%;
  border-top-color: var(--color-gold);
  animation: spin 1s ease-in-out infinite;
  display: inline-block;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Success Checkmark Draw Animation */
.success-checkmark {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: var(--color-gold);
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px var(--color-gold);
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: var(--color-gold);
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% { stroke-dashoffset: 0; }
}
@keyframes scale {
  0%, 100% { transform: none; }
  50% { transform: scale3d(1.1, 1.1, 1); }
}
@keyframes fill {
  100% { box-shadow: inset 0px 0px 0px 30px rgba(255, 215, 0, 0.1); }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}