/* ============================================================
   Ağrı ve Omurga - Premium Animations
   ============================================================
   Smooth, subtle, and sophisticated animations for a
   high-end medical practice website.

   CSS Variables (from main.css):
   --color-secondary:       #0ea5e9
   --color-accent:          #38bdf8
   --color-secondary-light: #60a5fa
   --color-whatsapp:        #25d366
   --transition:            0.3s cubic-bezier(0.4, 0, 0.2, 1)
   ============================================================ */


/* ==========================================================
   1. Scroll Reveal Animations (data-animate)
   ========================================================== */

/* Base state: hidden and shifted down */
[data-animate] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Fade Up (default) */
[data-animate="fade-up"].animated {
    opacity: 1;
    transform: translateY(0);
}

/* Fade Right (enters from the left) */
[data-animate="fade-right"] {
    transform: translateX(-30px);
}

[data-animate="fade-right"].animated {
    opacity: 1;
    transform: translateX(0);
}

/* Fade Left (enters from the right) */
[data-animate="fade-left"] {
    transform: translateX(30px);
}

[data-animate="fade-left"].animated {
    opacity: 1;
    transform: translateX(0);
}

/* Fade In (no directional movement) */
[data-animate="fade-in"] {
    transform: none;
}

[data-animate="fade-in"].animated {
    opacity: 1;
}

/* Scale Up */
[data-animate="scale-up"] {
    transform: scale(0.95);
}

[data-animate="scale-up"].animated {
    opacity: 1;
    transform: scale(1);
}


/* ==========================================================
   2. Stagger Delays (Grid Items)
   ========================================================== */

/* --- Services Grid (standard) --- */
.services-grid [data-animate]:nth-child(2) { transition-delay: 0.1s; }
.services-grid [data-animate]:nth-child(3) { transition-delay: 0.2s; }
.services-grid [data-animate]:nth-child(4) { transition-delay: 0.3s; }
.services-grid [data-animate]:nth-child(5) { transition-delay: 0.4s; }
.services-grid [data-animate]:nth-child(6) { transition-delay: 0.5s; }

/* --- Services Grid 6-column --- */
.services-grid-6 [data-animate]:nth-child(2) { transition-delay: 0.08s; }
.services-grid-6 [data-animate]:nth-child(3) { transition-delay: 0.16s; }
.services-grid-6 [data-animate]:nth-child(4) { transition-delay: 0.24s; }
.services-grid-6 [data-animate]:nth-child(5) { transition-delay: 0.32s; }
.services-grid-6 [data-animate]:nth-child(6) { transition-delay: 0.40s; }
.services-grid-6 [data-animate]:nth-child(7) { transition-delay: 0.48s; }
.services-grid-6 [data-animate]:nth-child(8) { transition-delay: 0.56s; }

/* --- Why Choose Us Grid --- */
.why-grid .why-item:nth-child(2) { transition-delay: 0.1s; }
.why-grid .why-item:nth-child(3) { transition-delay: 0.2s; }
.why-grid .why-item:nth-child(4) { transition-delay: 0.3s; }
.why-grid .why-item:nth-child(5) { transition-delay: 0.4s; }
.why-grid .why-item:nth-child(6) { transition-delay: 0.5s; }

/* --- Stats Grid --- */
.stats-grid .stat-item:nth-child(2) { transition-delay: 0.15s; }
.stats-grid .stat-item:nth-child(3) { transition-delay: 0.30s; }
.stats-grid .stat-item:nth-child(4) { transition-delay: 0.45s; }

/* --- Footer Grid --- */
.footer-grid .footer-col:nth-child(2) { transition-delay: 0.1s; }
.footer-grid .footer-col:nth-child(3) { transition-delay: 0.2s; }
.footer-grid .footer-col:nth-child(4) { transition-delay: 0.3s; }


/* ==========================================================
   3. WhatsApp Pulse Animation
   ========================================================== */

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.whatsapp-float {
    animation: pulse 2s infinite;
}


/* ==========================================================
   4. Hamburger Menu Animation
   ========================================================== */

.hamburger-line {
    transition: transform var(--transition), opacity var(--transition);
}

.menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}


/* ==========================================================
   5. Counter Animation
   ========================================================== */

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


/* ==========================================================
   6. Hero Badge Slide In
   ========================================================== */

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-badge {
    animation: slideInDown 0.6s ease-out forwards;
}


/* ==========================================================
   7. Service Card Premium Hover (Gradient Top Line)
   ========================================================== */

.service-card {
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0ea5e9, #38bdf8, #0ea5e9);
    background-size: 200% 100%;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover::before {
    transform: scaleX(1);
}


/* ==========================================================
   8. Icon Glow Effect (Service Card Hover)
   ========================================================== */

.service-card-icon {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.service-card:hover .service-card-icon {
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
    transform: scale(1.05);
}


/* ==========================================================
   9. Footer Heading Underline Grow
   ========================================================== */

.footer-heading::after {
    transition: width 0.3s ease;
}

.footer-col:hover .footer-heading::after {
    width: 50px;
}


/* ==========================================================
   10. Testimonial Card Hover Glow
   ========================================================== */

.testimonial-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
    box-shadow: 0 8px 30px rgba(14, 165, 233, 0.12);
}


/* ==========================================================
   11. Subtle Float Animation (Experience Badge)
   ========================================================== */

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

.about-experience-badge {
    animation: float 3s ease-in-out infinite;
}


/* ==========================================================
   12. Gradient Shimmer (Loading / Skeleton)
   ========================================================== */

@keyframes shimmer {
    0% {
        background-position: -600px 0;
    }
    100% {
        background-position: 600px 0;
    }
}

.skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 600px 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: var(--radius-sm);
}


/* ==========================================================
   13. FAQ Accordion (Smooth Icon Rotation)
   ========================================================== */

.faq-question i {
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);
}

.faq-answer {
    transition: max-height 0.35s ease;
}


/* ==========================================================
   14. Link Arrow Slide (Service Card Links)
   ========================================================== */

.service-card-link i {
    transition: transform 0.3s ease;
}

.service-card-link:hover i {
    transform: translateX(4px);
}


/* ==========================================================
   15. Button Hover Lift
   ========================================================== */

.btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:active {
    transform: translateY(0) scale(0.98);
}


/* ==========================================================
   16. Reduced Motion (Accessibility)
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-animate] {
        opacity: 1;
        transform: none;
    }

    .whatsapp-float {
        animation: none;
    }

    .about-experience-badge {
        animation: none;
    }

    html {
        scroll-behavior: auto;
    }
}