/* ============================================
   Advanced Animations & Visual Effects
   ============================================ */

/* Smooth page transitions */
html {
  scroll-behavior: smooth;
}

/* Enhanced hover effects */
*:not(input, textarea, select) {
  -webkit-tap-highlight-color: transparent;
}

/* Cards entrance animation */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Floating animation */
@keyframes floating {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* Pulsing animation */
@keyframes pulsing {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(56, 182, 255, 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(56, 182, 255, 0);
  }
}

/* Shimmer effect */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Glow effect */
@keyframes glow {
  0% {
    text-shadow: 0 0 5px rgba(56, 182, 255, 0.5);
  }
  50% {
    text-shadow:
      0 0 20px rgba(56, 182, 255, 1),
      0 0 30px rgba(56, 182, 255, 0.8);
  }
  100% {
    text-shadow: 0 0 5px rgba(56, 182, 255, 0.5);
  }
}

/* Rotate animation */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Bounce animation */
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* Gradient shift animation */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Underline animation */
@keyframes underlineSize {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Wave animation */
@keyframes wave {
  0% {
    clip-path: polygon(
      0% 45%,
      16% 44%,
      33% 50%,
      54% 60%,
      70% 61%,
      84% 59%,
      100% 52%,
      100% 100%,
      0% 100%
    );
  }
  50% {
    clip-path: polygon(
      0% 60%,
      15% 65%,
      34% 66%,
      51% 62%,
      67% 50%,
      84% 45%,
      100% 46%,
      100% 100%,
      0% 100%
    );
  }
  100% {
    clip-path: polygon(
      0% 45%,
      16% 44%,
      33% 50%,
      54% 60%,
      70% 61%,
      84% 59%,
      100% 52%,
      100% 100%,
      0% 100%
    );
  }
}

/* Swirl animation */
@keyframes swirl {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* Text animation */
@keyframes typewriter {
  from {
    width: 0;
    border-right: 3px solid rgba(56, 182, 255, 0.75);
  }
  to {
    width: 100%;
    border-right: 3px solid transparent;
  }
}

/* Blur in animation */
@keyframes blurIn {
  from {
    filter: blur(10px);
    opacity: 0;
  }
  to {
    filter: blur(0px);
    opacity: 1;
  }
}

/* Shake animation */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

/* Slide and fade */
@keyframes slideAndFade {
  0% {
    opacity: 0;
    transform: translateX(-100px) rotateY(90deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotateY(0deg);
  }
}

/* Counter animation */
@keyframes countUp {
  0% {
    counter-increment: count 0;
  }
  100% {
    counter-increment: count 100;
  }
}

/* Glass morphism effect */
.glass-effect {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Smooth transitions */
a,
button,
input,
select,
textarea {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Element fade-in on scroll */
.fade-in-on-scroll {
  opacity: 0;
  animation: fadeIn 0.6s ease-in-out forwards;
}

.slide-up-on-scroll {
  opacity: 0;
  animation: slideInUp 0.6s ease-in-out forwards;
}

.scale-in-on-scroll {
  opacity: 0;
  animation: scaleIn 0.6s ease-in-out forwards;
}

/* Stagger animation */
.stagger-item {
  animation: slideInUp 0.6s ease-in-out forwards;
}

.stagger-item:nth-child(1) {
  animation-delay: 0.1s;
}
.stagger-item:nth-child(2) {
  animation-delay: 0.2s;
}
.stagger-item:nth-child(3) {
  animation-delay: 0.3s;
}
.stagger-item:nth-child(4) {
  animation-delay: 0.4s;
}
.stagger-item:nth-child(5) {
  animation-delay: 0.5s;
}

/* Loading skeleton */
.skeleton {
  animation: shimmer 2s infinite;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.2) 25%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.2) 75%
  );
  background-size: 1000px 100%;
}

/* Hover lift effect */
.hover-lift {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #0a3d62 0%, #38b6ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Neon glow */
.neon-glow {
  text-shadow:
    0 0 10px rgba(56, 182, 255, 0.5),
    0 0 20px rgba(56, 182, 255, 0.3);
}

/* Smooth scroll behavior */
@supports (scroll-behavior: smooth) {
  html {
    scroll-behavior: smooth;
  }
}

/* Accessibility: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print styles */
@media print {
  .no-print,
  .btn,
  footer,
  header {
    display: none;
  }

  body {
    background: white;
    color: black;
  }
}
