/* ================================================================
   ANIMATIONS & MOTION SYSTEM
   ================================================================ */

/* ── SCROLL REVEAL ANIMATIONS ─────────────────────────────────── */

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@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);
  }
}

/* ── SCROLL-TRIGGERED ANIMATION CLASSES ──────────────────────── */

.fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 600ms cubic-bezier(.4, 0, .2, 1) forwards;
  will-change: transform, opacity;
}

/* Staggered animation delays for multiple elements */
.fade-up:nth-child(1) { animation-delay: 0ms; }
.fade-up:nth-child(2) { animation-delay: 100ms; }
.fade-up:nth-child(3) { animation-delay: 200ms; }
.fade-up:nth-child(4) { animation-delay: 300ms; }
.fade-up:nth-child(5) { animation-delay: 400ms; }
.fade-up:nth-child(6) { animation-delay: 500ms; }
.fade-up:nth-child(7) { animation-delay: 600ms; }
.fade-up:nth-child(8) { animation-delay: 700ms; }
.fade-up:nth-child(n+9) { animation-delay: 800ms; }

/* Apply fade-up to element when scrolled into view */
.fade-up.visible {
  animation: fadeInUp 600ms cubic-bezier(.4, 0, .2, 1) forwards;
}

/* ── HERO CONTENT ANIMATIONS ─────────────────────────────────── */

.hero-heading {
  opacity: 0;
  animation: fadeInUp 600ms cubic-bezier(.4, 0, .2, 1) forwards 100ms;
  will-change: transform, opacity;
}

.hero-subheading {
  opacity: 0;
  animation: fadeInUp 600ms cubic-bezier(.4, 0, .2, 1) forwards 200ms;
  will-change: transform, opacity;
}

.hero-cta {
  opacity: 0;
  animation: fadeInUp 600ms cubic-bezier(.4, 0, .2, 1) forwards 300ms;
  will-change: transform, opacity;
}

/* ── HOVER INTERACTIONS FOR CARDS ────────────────────────────── */

/* Service Card Hover */
.card {
  transition: transform 300ms cubic-bezier(.4, 0, .2, 1),
              box-shadow 300ms cubic-bezier(.4, 0, .2, 1),
              border-color 300ms cubic-bezier(.4, 0, .2, 1);
}

.card:hover {
  transform: translateY(-12px);
  box-shadow: 0 20px 48px rgba(15, 42, 68, .15);
}

/* Service Feature Card Hover */
.svc-feature-card {
  transition: transform 300ms cubic-bezier(.4, 0, .2, 1),
              box-shadow 300ms cubic-bezier(.4, 0, .2, 1),
              color 300ms cubic-bezier(.4, 0, .2, 1);
}

.svc-feature-card:hover {
  transform: translateY(-10px);
}

/* Testimonial Card Hover */
.testimonial-card {
  transition: transform 300ms cubic-bezier(.4, 0, .2, 1),
              box-shadow 300ms cubic-bezier(.4, 0, .2, 1);
}

.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(44, 166, 164, .12);
}

/* ── BUTTON HOVER ANIMATIONS ─────────────────────────────────── */

button,
.btn,
.button,
a[class*="btn"],
a[class*="button"] {
  transition: background-color 150ms cubic-bezier(.4, 0, .2, 1),
              color 150ms cubic-bezier(.4, 0, .2, 1),
              box-shadow 150ms cubic-bezier(.4, 0, .2, 1),
              transform 150ms cubic-bezier(.4, 0, .2, 1),
              border-color 150ms cubic-bezier(.4, 0, .2, 1);
}

button:hover,
.btn:hover,
.button:hover,
a[class*="btn"]:hover,
a[class*="button"]:hover {
  transform: scale(1.02);
}

button:active,
.btn:active,
.button:active,
a[class*="btn"]:active,
a[class*="button"]:active {
  transform: scale(0.98);
}

/* Primary Button Hover */
.btn-primary,
.cta-button {
  background-color: var(--teal);
  transition: background-color 150ms cubic-bezier(.4, 0, .2, 1),
              box-shadow 150ms cubic-bezier(.4, 0, .2, 1),
              transform 150ms cubic-bezier(.4, 0, .2, 1);
}

.btn-primary:hover,
.cta-button:hover {
  background-color: #22a19f;
  box-shadow: 0 8px 24px rgba(44, 166, 164, .32);
  transform: translateY(-2px);
}

/* Secondary Button Hover */
.btn-secondary,
.btn-outline {
  transition: all 150ms cubic-bezier(.4, 0, .2, 1);
  border-color: currentColor;
}

.btn-secondary:hover,
.btn-outline:hover {
  background-color: rgba(44, 166, 164, .08);
  border-color: var(--teal);
  color: var(--teal);
}

/* ── LINK HOVER ANIMATIONS ───────────────────────────────────── */

a:not([class]),
.link {
  transition: color 150ms cubic-bezier(.4, 0, .2, 1),
              text-decoration 150ms cubic-bezier(.4, 0, .2, 1);
}

a:not([class]):hover,
.link:hover {
  color: var(--teal);
}

/* Link underline animation */
.link-underline {
  position: relative;
  text-decoration: none;
  transition: color 150ms cubic-bezier(.4, 0, .2, 1);
}

.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--teal);
  transition: width 150ms cubic-bezier(.4, 0, .2, 1);
}

.link-underline:hover::after {
  width: 100%;
}

/* ── SMOOTH SCROLLING ────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
}

/* ── NAVIGATION LINK ANIMATIONS ──────────────────────────────── */

.nav-link,
a[class*="nav"] {
  transition: color 200ms cubic-bezier(.4, 0, .2, 1),
              border-color 200ms cubic-bezier(.4, 0, .2, 1),
              background-color 200ms cubic-bezier(.4, 0, .2, 1);
}

.nav-link:hover,
a[class*="nav"]:hover {
  color: var(--teal);
}

/* ── TAB ANIMATIONS ──────────────────────────────────────────── */

.tab,
.svc-tab {
  transition: all 250ms cubic-bezier(.4, 0, .2, 1);
  position: relative;
}

.tab::after,
.svc-tab::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms cubic-bezier(.4, 0, .2, 1);
}

.tab.active::after,
.svc-tab.active::after {
  transform: scaleX(1);
}

.tab:hover,
.svc-tab:hover {
  color: var(--teal);
}

/* ── ICON ANIMATIONS ─────────────────────────────────────────── */

.icon {
  transition: transform 200ms cubic-bezier(.4, 0, .2, 1),
              color 200ms cubic-bezier(.4, 0, .2, 1);
}

.card:hover .icon,
.card-icon {
  transition: transform 200ms cubic-bezier(.4, 0, .2, 1);
}

/* Icon scale on hover */
.icon-hover-scale:hover {
  transform: scale(1.1);
}

/* Icon color transition on hover */
.icon-hover-color:hover {
  color: var(--teal);
}

/* ── INPUT ANIMATIONS ────────────────────────────────────────── */

input,
textarea,
select {
  transition: border-color 150ms cubic-bezier(.4, 0, .2, 1),
              box-shadow 150ms cubic-bezier(.4, 0, .2, 1),
              background-color 150ms cubic-bezier(.4, 0, .2, 1);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(44, 166, 164, .1);
}

/* ── SECTION TRANSITION SPACING ──────────────────────────────── */

section {
  transition: background-color 300ms cubic-bezier(.4, 0, .2, 1);
}

/* ── LOADER / SPINNER ANIMATION ──────────────────────────────── */

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

.loader,
.spinner {
  animation: spin 1s linear infinite;
}

/* ── PULSE ANIMATION (for badges/notifications) ──────────────── */

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

.pulse {
  animation: pulse 2.5s ease-in-out infinite;
}

/* ── BOUNCE ANIMATION ────────────────────────────────────────── */

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.bounce {
  animation: bounce 1s ease-in-out infinite;
}

/* ── FADE IN/OUT ANIMATIONS ──────────────────────────────────── */

.fade-in {
  animation: fadeIn 400ms cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.fade-out {
  animation: fadeOut 400ms cubic-bezier(.4, 0, .2, 1) forwards;
}

/* ── SLIDE IN ANIMATIONS ─────────────────────────────────────── */

.slide-in-left {
  animation: slideInLeft 400ms cubic-bezier(.4, 0, .2, 1) forwards;
}

.slide-in-right {
  animation: slideInRight 400ms cubic-bezier(.4, 0, .2, 1) forwards;
}

/* ── 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;
  }

  html {
    scroll-behavior: auto;
  }

  .fade-up,
  .fade-up.visible,
  .hero-heading,
  .hero-subheading,
  .hero-cta {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .card:hover {
    transform: none;
  }

  .svc-feature-card:hover {
    transform: none;
  }

  button:hover,
  .btn:hover {
    transform: none;
  }
}

/* ── MOBILE OPTIMIZATION (Subtle on smaller screens) ──────────── */

@media (max-width: 768px) {
  .fade-up {
    animation: fadeInUp 400ms cubic-bezier(.4, 0, .2, 1) forwards;
  }

  .card:hover {
    transform: translateY(-6px);
  }

  .svc-feature-card:hover {
    transform: translateY(-4px);
  }

  button:hover,
  .btn:hover {
    transform: scale(1.01);
  }

  .btn-primary:hover,
  .cta-button:hover {
    transform: translateY(-1px);
  }

  /* Reduce delays on mobile for faster feel */
  .fade-up:nth-child(1) { animation-delay: 0ms; }
  .fade-up:nth-child(2) { animation-delay: 50ms; }
  .fade-up:nth-child(3) { animation-delay: 100ms; }
  .fade-up:nth-child(4) { animation-delay: 150ms; }
  .fade-up:nth-child(n+5) { animation-delay: 200ms; }
}

/* ── TABLET OPTIMIZATION ─────────────────────────────────────── */

@media (max-width: 900px) {
  .fade-up {
    animation: fadeInUp 500ms cubic-bezier(.4, 0, .2, 1) forwards;
  }

  .card:hover {
    transform: translateY(-8px);
  }

  button:hover,
  .btn:hover {
    transform: scale(1.015);
  }
}