/* ═══════════════════════════════════════════════
   SoftMRI — Animations CSS
   ═══════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(10px); }
}

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

@keyframes pulse-ring {
    0%   { transform: scale(.85); box-shadow: 0 0 0 0 rgba(79,70,229,.6); }
    70%  { transform: scale(1);   box-shadow: 0 0 0 14px rgba(79,70,229,0); }
    100% { transform: scale(.85); box-shadow: 0 0 0 0 rgba(79,70,229,0); }
}

@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes scaleIn {
    from { opacity: 0; transform: scale(.8); }
    to   { opacity: 1; transform: scale(1); }
}

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

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

@keyframes typewriterCursor {
    0%, 100% { border-right-color: var(--primary-light); }
    50%       { border-right-color: transparent; }
}

/* ── Applied Animations ── */
.hero-card { animation: float 4s ease-in-out infinite; }
.card-1 { animation-delay: 0s; }
.card-2 { animation-delay: .8s; }
.card-3 { animation-delay: 1.6s; }

.service-icon-wrap { animation: pulse-ring 2.5s infinite; }
.service-card:hover .service-icon-wrap { animation-play-state: paused; }

/* Hero animated gradient background */
.hero {
    background: linear-gradient(-45deg, #0f172a, #1e1b4b, #0c1445, #0f172a);
    background-size: 400% 400%;
    animation: gradientShift 12s ease infinite;
}

/* Stat counter animation */
.stat-item { animation: fadeInUp .6s both; }

/* Navbar brand hover */
.navbar-brand:hover .navbar-logo { transform: scale(1.05); }
.navbar-logo { transition: transform .3s ease; }

/* Button ripple effect */
.btn { position: relative; overflow: hidden; }
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.2);
    border-radius: inherit;
    transform: scale(0);
    transition: transform .4s ease;
}
.btn:active::after { transform: scale(2); opacity: 0; transition: transform .4s ease, opacity .4s ease; }

/* Typewriter cursor */
#typewriter {
    border-right: 3px solid var(--primary-light);
    padding-right: 4px;
    animation: typewriterCursor .8s infinite;
}

/* Skeleton loading */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 1000px 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius);
}

/* Page transition */
main {
    animation: fadeInUp .5s ease both;
}

/* Swiper custom styles */
.swiper-button-next, .swiper-button-prev {
    color: var(--primary) !important;
    background: rgba(255,255,255,.9);
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    box-shadow: var(--shadow);
}
.swiper-button-next::after, .swiper-button-prev::after { font-size: .9rem !important; font-weight: 700; }
.swiper-pagination-bullet-active { background: var(--primary) !important; }

/* Scroll progress bar */
#scrollProgress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    z-index: 9999;
    transition: width .1s linear;
}

/* Hover underline animation */
.hover-underline {
    position: relative;
    display: inline-block;
}
.hover-underline::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 2px;
    background: var(--primary);
    transition: width .3s ease;
}
.hover-underline:hover::after { width: 100%; }