/* Loaded non-blocking from `app/layout.tsx` to reduce mobile render-blocking CSS. */

/* Mobile header brand swap (logo <-> wordmark) */
@keyframes mobileBrandLogoSwap {
  0%, 40% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  48%, 94% {
    opacity: 0;
    transform: translateY(2px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mobileBrandTextSwap {
  0%, 48% {
    opacity: 0;
    transform: translateY(-2px) scale(0.995);
  }
  56%, 88% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-2px) scale(0.995);
  }
}

.animate-mobile-brand-logo-swap {
  animation: mobileBrandLogoSwap 5s ease-in-out infinite;
  will-change: opacity, transform;
}

.animate-mobile-brand-text-swap {
  animation: mobileBrandTextSwap 5s ease-in-out infinite;
  will-change: opacity, transform;
}

/* Under Construction Banner Animation */
@keyframes scroll-banner {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}

/* Subtle pulse to draw attention to mobile menu button (runs a few times then stops) */
@keyframes subtle-pulse {
  0%, 100% { box-shadow: 0 1px 2px rgba(30, 63, 57, 0.08); }
  50% { box-shadow: 0 0 0 3px rgba(222, 151, 35, 0.25); }
}

.animate-subtle-pulse {
  animation: subtle-pulse 2s ease-in-out 3 forwards;
}

/* Scroll progress indicator */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(to right, #1E3F39, #DE9723);
  z-index: 9999;
  transition: width 0.1s ease-out;
}

/* Scroll-triggered animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

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

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

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

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

.animate-fade-in-up { animation: fadeInUp 0.8s ease-out; }
.animate-fade-in-left { animation: fadeInLeft 0.8s ease-out; }
.animate-fade-in-right { animation: fadeInRight 0.8s ease-out; }
.animate-scale-in { animation: scaleIn 0.8s ease-out; }
.animate-slide-down { animation: slideDown 0.6s ease-out; }

/* Open daily flash green */
@keyframes flashGreen {
  0%, 100% { color: #1E3F39; }
  50% { color: #16a34a; }
}
.animate-flash-green { animation: flashGreen 2.5s ease-in-out infinite; }

/* Vertical welcome wave — each letter moves in a wave along the line */
@keyframes welcomeWave {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(0.35em); }
}
.animate-welcome-wave { animation: welcomeWave 2s ease-in-out infinite; }

/* Follow / Us chase */
@keyframes followUsChaseLead {
  0% { transform: translateX(0); }
  100% { transform: translateX(28vw); }
}
@keyframes followUsChaseFollow {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(28vw - 2.5em)); }
}
.animate-follow-chase { animation: followUsChaseFollow 6s ease-in-out 2s infinite alternate; }
.animate-us-chase { animation: followUsChaseLead 6s ease-in-out 2s infinite alternate; }

/* Scroll reveal helpers */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.scroll-reveal.revealed { opacity: 1; transform: translateY(0); }

.scroll-reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.scroll-reveal-left.revealed { opacity: 1; transform: translateX(0); }

.scroll-reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.scroll-reveal-right.revealed { opacity: 1; transform: translateX(0); }

/* Staggered animations for children */
.stagger-children > * {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.7s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.8s; }
.stagger-children > *:nth-child(9) { animation-delay: 0.9s; }
.stagger-children > *:nth-child(10) { animation-delay: 1s; }

/* Parallax scroll effect */
.parallax-slow { will-change: transform; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.parallax-medium { will-change: transform; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.parallax-fast { will-change: transform; transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.parallax-bg { transform: translateZ(0); will-change: transform; }

/* Hover helpers */
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); }
.card-hover { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); }

/* Navigation underline */
.nav-link { position: relative; transition: color 0.3s ease; }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(to right, #1E3F39, #DE9723);
  transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

/* Buttons */
.btn-primary { position: relative; overflow: hidden; transition: all 0.3s ease; }
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}
.btn-primary:hover::before { left: 100%; }

/* Floating elements */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
.float-animation { animation: float 3s ease-in-out infinite; }

/* Gradient text animation */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.gradient-animate { background-size: 200% 200%; animation: gradientShift 3s ease infinite; }

/* Enhanced backdrop blur for header */
.header-backdrop {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.header-transition { transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }

/* Active link indicator */
.nav-link-active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #1E3F39, #DE9723);
  animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
  from { width: 0; }
  to { width: 100%; }
}

/* Hide scrollbar for horizontal scrolling tabs */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Custom scrollbar styling */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb { background: #1E3F39; border-radius: 10px; border: none; }
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover { background: #DE9723; }
html { scrollbar-width: thin; scrollbar-color: #1E3F39 transparent; }
body { scrollbar-width: thin; scrollbar-color: #1E3F39 transparent; }

/* Logo glow effect */
@keyframes logoGlow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(30, 63, 57, 0.3)); }
  50% { filter: drop-shadow(0 0 15px rgba(222, 151, 35, 0.4)); }
}
.logo-glow { animation: logoGlow 3s ease-in-out infinite; }

/* Reduced motion: disable purely decorative animations */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .logo-glow { animation: none; }
  /* Keep header brand swap working with reduced motion (opacity-only, slower, no movement). */
  @keyframes mobileBrandLogoSwapReduced {
    0%, 40% { opacity: 1; }
    48%, 94% { opacity: 0; }
    100% { opacity: 1; }
  }

  @keyframes mobileBrandTextSwapReduced {
    0%, 48% { opacity: 0; }
    56%, 88% { opacity: 1; }
    100% { opacity: 0; }
  }

  .animate-mobile-brand-logo-swap {
    animation: mobileBrandLogoSwapReduced 7s ease-in-out infinite !important;
    transform: none !important;
    will-change: opacity;
  }

  .animate-mobile-brand-text-swap {
    animation: mobileBrandTextSwapReduced 7s ease-in-out infinite !important;
    transform: none !important;
    will-change: opacity;
  }
  .animate-subtle-pulse,
  .animate-fade-in-up,
  .animate-fade-in-left,
  .animate-fade-in-right,
  .animate-scale-in,
  .animate-slide-down,
  .animate-flash-green,
  .animate-welcome-wave,
  .animate-follow-chase,
  .animate-us-chase,
  .stagger-children > *,
  .float-animation,
  .gradient-animate {
    animation: none !important;
  }
}