/* =====================================================
   BIOCURON ANIMATIONS
   Premium Healthcare UI Motion System
===================================================== */

/* =========================
   Global Transitions
========================= */

* {

    transition:
        color .3s ease,
        background-color .3s ease,
        border-color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

/* =========================
   Keyframes
========================= */

@keyframes fadeUp {

    from {

        opacity: 0;
        transform: translateY(40px);
    }

    to {

        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeDown {

    from {

        opacity: 0;
        transform: translateY(-40px);
    }

    to {

        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeLeft {

    from {

        opacity: 0;
        transform: translateX(-60px);
    }

    to {

        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeRight {

    from {

        opacity: 0;
        transform: translateX(60px);
    }

    to {

        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomIn {

    from {

        opacity: 0;
        transform: scale(.9);
    }

    to {

        opacity: 1;
        transform: scale(1);
    }
}

@keyframes float {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes pulseGlow {

    0% {

        box-shadow: 0 0 0 0 rgba(0, 200, 150, .4);
    }

    70% {

        box-shadow: 0 0 0 18px rgba(0, 200, 150, 0);
    }

    100% {

        box-shadow: 0 0 0 0 rgba(0, 200, 150, 0);
    }
}

@keyframes rotateSlow {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* =========================
   Hero Animations
========================= */

.hero-content {

    animation: fadeLeft 1s ease forwards;
}

.hero-image {

    animation: fadeRight 1s ease forwards;
}

.hero-image img {

    animation: float 6s ease-in-out infinite;
}

/* =========================
   Page Hero
========================= */

.page-hero h1 {

    animation: fadeUp .8s ease forwards;
}

.page-hero p {

    animation: fadeUp 1s ease forwards;
}

.page-hero .tagline {

    animation: fadeDown .8s ease forwards;
}

/* =========================
   Button Effects
========================= */

.btn {

    position: relative;

    overflow: hidden;
}

.btn::before {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.3),
            transparent
        );

    transition: .6s;
}

.btn:hover::before {

    left: 100%;
}

.btn-primary:hover {

    transform: translateY(-4px);
}

.btn-primary:active {

    transform: scale(.98);
}

/* =========================
   Card Hover Effects
========================= */

.card:hover,
.product-card:hover,
.team-card:hover,
.testimonial-card:hover,
.contact-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 50px rgba(0,0,0,.12);
}

.product-card img {

    transition: transform .5s ease;
}

.product-card:hover img {

    transform: scale(1.05);
}

.team-card img {

    transition: transform .4s ease;
}

.team-card:hover img {

    transform: scale(1.08);
}

/* =========================
   Statistics
========================= */

.stat {

    transition: transform .3s ease;
}

.stat:hover {

    transform: translateY(-8px);
}

/* =========================
   Timeline
========================= */

.timeline-item {

    transition: .35s ease;
}

.timeline-item:hover {

    transform: translateX(10px);
}

/* =========================
   FAQ Hover
========================= */

.faq-item:hover {

    transform: translateY(-5px);
}

/* =========================
   Contact Form
========================= */

.contact-form input:focus,
.contact-form textarea:focus {

    transform: translateY(-2px);

    box-shadow: 0 0 0 4px rgba(11,93,75,.08);
}

/* =========================
   Modal
========================= */

.modal-content {

    animation: zoomIn .3s ease;
}

/* =========================
   Logo Hover
========================= */

.logo {

    transition: .3s ease;
}

.logo:hover {

    transform: scale(1.05);
}

/* =========================
   Navigation Hover
========================= */

.nav-links a {

    position: relative;
}

.nav-links a::after {

    content: "";

    position: absolute;

    bottom: -6px;

    left: 0;

    width: 0;

    height: 2px;

    background: var(--primary);

    transition: .3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {

    width: 100%;
}

/* =========================
   CTA Section
========================= */

.cta .btn {

    animation: pulseGlow 2.5s infinite;
}

/* =========================
   Scroll Reveal Classes
========================= */

.reveal {

    opacity: 0;

    transform: translateY(40px);

    transition: all .8s ease;
}

.reveal.active {

    opacity: 1;

    transform: translateY(0);
}

.reveal-left {

    opacity: 0;

    transform: translateX(-60px);

    transition: all .8s ease;
}

.reveal-left.active {

    opacity: 1;

    transform: translateX(0);
}

.reveal-right {

    opacity: 0;

    transform: translateX(60px);

    transition: all .8s ease;
}

.reveal-right.active {

    opacity: 1;

    transform: translateX(0);
}

.zoom-reveal {

    opacity: 0;

    transform: scale(.9);

    transition: all .8s ease;
}

.zoom-reveal.active {

    opacity: 1;

    transform: scale(1);
}

/* =========================
   Loading State
========================= */

.loading-spinner {

    width: 50px;

    height: 50px;

    border: 4px solid rgba(0,0,0,.1);

    border-top: 4px solid var(--primary);

    border-radius: 50%;

    animation: rotateSlow 1s linear infinite;
}

/* =========================
   Image Hover Overlay
========================= */

.image-hover {

    overflow: hidden;

    border-radius: 14px;
}

.image-hover img {

    transition: transform .6s ease;
}

.image-hover:hover img {

    transform: scale(1.08);
}

/* =========================
   Accessibility
========================= */

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