/* =========================================
   ANIMATION SYSTEM
   Direct-selector pattern with .js parent guard
   - Inline <script> in HTML head adds .js class to <html>
   - CSS only hides elements when .js is present
   - JS observer adds .in-view when element scrolls into view
   - Pure transition, no keyframe race conditions
   ========================================= */

/* --- Keyframe (only for hero + page header on load) --- */

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

/* --- Hero (page-load) — relaxed, deliberate --- */

.anim-hero-subtitle {
  opacity: 0;
  animation: fadeInUp 1000ms cubic-bezier(0.16, 1, 0.3, 1) 600ms forwards;
}

.anim-hero-cta {
  opacity: 0;
  animation: fadeInUp 1000ms cubic-bezier(0.16, 1, 0.3, 1) 900ms forwards;
}

.anim-hero-cta .btn:first-child {
  opacity: 0;
  animation: fadeInUp 800ms cubic-bezier(0.16, 1, 0.3, 1) 900ms forwards;
}

.anim-hero-cta .btn:last-child {
  opacity: 0;
  animation: fadeInUp 800ms cubic-bezier(0.16, 1, 0.3, 1) 1100ms forwards;
}

/* --- Page Header (page-load) — slower, more graceful --- */

.page-header h1 {
  opacity: 0;
  animation: fadeInUp 900ms cubic-bezier(0.16, 1, 0.3, 1) 300ms forwards !important;
}

.page-header p {
  opacity: 0;
  animation: fadeInUp 800ms cubic-bezier(0.16, 1, 0.3, 1) 550ms forwards !important;
}

/* --- Scroll-triggered Animations (only when JS is enabled) --- */

/* Containers + cards */
.js .service-card,
.js .serve-card,
.js .agent-card,
.js .section-title,
.js .cta-section,
.js .contact-info,
.js .contact-form-wrapper,
.js .content-section,
.js .trust-content,
.js .info-block,
.js .footer-logo-wrapper,
.js .footer-content,
.js .stats-grid,
.js .stat-item {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Text & images inside content sections (about page) — exclude cards */
.js .content-section .content-text,
.js .content-section .image-placeholder,
.js .content-section > .section-container > h2,
.js .content-section > .section-container > p,
.js .content-section > .section-container > .mission-list li,
.js .cta-section h2,
.js .cta-section > p,
.js .cta-section .btn {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 800ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.js .in-view {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Re-enable hover transforms after reveal */
.js .service-card.in-view:hover {
  transform: translateY(-6px) !important;
}
.js .serve-card.in-view:hover {
  transform: translateY(-6px) !important;
}
.js .agent-card.in-view:hover {
  transform: translateY(-8px) !important;
}

/* Mobile: smaller travel */
@media (max-width: 768px) {
  .js .service-card,
  .js .serve-card,
  .js .agent-card,
  .js .section-title,
  .js .cta-section,
  .js .contact-info,
  .js .contact-form-wrapper,
  .js .content-section,
  .js .trust-content,
  .js .info-block,
  .js .footer-logo-wrapper,
  .js .footer-content,
  .js .stats-grid,
  .js .stat-item {
    transform: translateY(32px);
    transition-duration: 750ms;
  }

  .js .content-section .content-text,
  .js .content-section .image-placeholder,
  .js .content-section > .section-container > h2,
  .js .content-section > .section-container > p,
  .js .content-section > .section-container > .mission-list li,
  .js .cta-section h2,
  .js .cta-section > p,
  .js .cta-section .btn {
    transform: translateY(18px);
    transition-duration: 650ms;
  }
}

/* --- Reduced Motion --- */
/* Only disable our explicit reveal/entry animations.
   Leave hover transitions, navbar, etc. alone. */

@media (prefers-reduced-motion: reduce) {
  .anim-hero-cta,
  .anim-hero-cta .btn,
  .anim-hero-subtitle,
  .page-header h1,
  .page-header p,
  .js .service-card,
  .js .serve-card,
  .js .agent-card,
  .js .section-title,
  .js .cta-section,
  .js .contact-info,
  .js .contact-form-wrapper,
  .js .content-section,
  .js .trust-content,
  .js .info-block,
  .js .footer-logo-wrapper,
  .js .footer-content,
  .js .stats-grid,
  .js .stat-item {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition-property: none !important;
  }
}