/* ===== DYNAMIC TRANSFORM EFFECTS PER SECTION ===== */
    /* All transforms start hidden and are revealed by Intersection Observer */

    /* Base: all transform elements start in hidden state */
    .fx-item {
      opacity: 0;
      transition: opacity 0.8s cubic-bezier(0.25,0.46,0.45,0.94),
                  transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
      will-change: transform, opacity;
    }
    .fx-item.fx-visible {
      opacity: 1;
      transform: none !important;
    }

    /* 1. HERO: Cinematic zoom-out entrance + parallax scroll
       Video is wrapped in .hero-video-wrapper which handles all transforms.
       The <video> element itself stays at 100% width/height with object-fit: cover
       for perfect full-frame coverage. Never transform the video directly. */
    .hero-video-wrapper {
      transform: scale(1.12);
      opacity: 0.7;
      transition: transform 1.6s cubic-bezier(0.25,0.46,0.45,0.94),
                  opacity 1.2s ease;
    }
    .hero-video-wrapper.fx-ready {
      transform: scale(1);
      opacity: 1;
    }
    /* Parallax: wrapper moves at 30% scroll speed */
    .hero-video-wrapper.fx-parallax {
      will-change: transform;
    }

    .fx-hero-text {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.9s ease, transform 0.9s ease;
    }
    .fx-hero-text.fx-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* 2. SERVICES: Slide-up + scale from below */
    .fx-service-card {
      transform: translateY(60px) scale(0.92);
    }

    /* 3. WHY CHOOSE US: Alternating slide from left/right */
    .fx-trust-left  { transform: translateX(-80px); }
    .fx-trust-right { transform: translateX(80px); }

    /* 4. CARE PACKAGES: 3D tilt reveal from below */
    .fx-package-card {
      transform: perspective(800px) rotateX(15deg) translateY(50px);
      transform-origin: center bottom;
    }

    /* 5. DOCTORS: RotateY flip-in */
    .fx-doctor-card {
      transform: perspective(1000px) rotateY(-25deg) translateX(-40px);
      transform-origin: left center;
    }

    /* 6. HOW BOOKING WORKS: Horizontal cascade from left */
    .fx-step-item {
      transform: translateX(-60px);
    }

    /* 7. WA BOOKING: Phone slides from right, text from left */
    .fx-slide-left  { transform: translateX(-100px); }
    .fx-slide-right { transform: translateX(100px); }

    /* 8. WA CS ASSISTANT: Phone slides from left, text from right (mirrored) */
    .fx-cs-left  { transform: translateX(-100px); }
    .fx-cs-right { transform: translateX(100px); }

    /* 9. CLINIC LOCATION: Split reveal */
    .fx-location-left { transform: translateX(-70px); }
    .fx-location-right { transform: translateX(70px) scale(0.95); }

    /* 10. TESTIMONIALS: Slide-up with rotation */
    .fx-testimonial-card {
      transform: translateY(50px) rotate(-2deg);
    }

    /* 11. HEALTH ARTICLES: Rise with slight rotate */
    .fx-article-card {
      transform: translateY(60px) rotate(1.5deg);
    }

    /* 12. FAQ: Cascade slide from left with stagger delay */
    .fx-faq-item {
      transform: translateX(-40px);
    }

    /* 13. FINAL CTA: Scale up from center */
    .fx-cta-final {
      transform: scale(0.85);
    }
    .fx-cta-final.fx-visible {
      opacity: 1;
      transform: scale(1) !important;
    }

    /* 14. FOOTER: Fade-up gentle */
    .fx-footer {
      transform: translateY(30px);
    }

    /* Section titles: special reveal effect */
    .fx-section-title {
      opacity: 0;
      transform: translateY(30px) scale(0.97);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .fx-section-title.fx-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* Stagger delay utility classes */
    .fx-delay-1 { transition-delay: 0.10s; }
    .fx-delay-2 { transition-delay: 0.20s; }
    .fx-delay-3 { transition-delay: 0.30s; }
    .fx-delay-4 { transition-delay: 0.40s; }
    .fx-delay-5 { transition-delay: 0.50s; }
    .fx-delay-6 { transition-delay: 0.60s; }
    .fx-delay-7 { transition-delay: 0.70s; }
    .fx-delay-8 { transition-delay: 0.80s; }

    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
      .fx-item, .fx-hero-text, .fx-section-title, .hero-video-wrapper {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
      }
    }

    /* Custom scrollbar */
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: var(--bg-primary); }
    ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-body); }