/* Page Transition Styles */
.page-transition {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.page-transition.loaded {
  opacity: 1;
  transform: translateY(0);
}

/* Fade out effect when leaving */
.page-transition.leaving {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.4s ease-in, transform 0.4s ease-in;
}

/* Loading spinner for transitions */
.transition-spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 203, 5, 0.3);
  border-top: 3px solid #FFCB05;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 9999;
  display: none;
}

.transition-spinner.active {
  display: block;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Smooth link hover effects */
a {
  transition: all 0.3s ease;
}

a:hover {
  transform: translateY(-2px);
}

/* Button hover effects */
.cta-button {
  transition: all 0.3s ease;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 30, 60, 0.3);
}

/* Service box hover effects */
.clickable-service {
  transition: all 0.3s ease;
}

.clickable-service:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Mobile menu transitions */
.mobile-nav {
  transition: all 0.3s ease;
  transform: translateY(-10px);
  opacity: 0;
}

.mobile-nav.open {
  transform: translateY(0);
  opacity: 1;
}

/* Prevent content flash during transitions */
body {
  opacity: 0;
  transition: opacity 0.3s ease;
}

body.loaded {
  opacity: 1;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Focus states for accessibility */
a:focus,
button:focus {
  outline: 2px solid #FFCB05;
  outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .page-transition,
  .page-transition.loaded,
  .page-transition.leaving,
  a,
  .cta-button,
  .clickable-service,
  .mobile-nav,
  body {
    transition: none;
    transform: none;
    animation: none;
  }
}