/* ============================================================
   PREMIUM ANIMATIONS — Complete Medical Serv  (V2 - safe)
   RULES: purely additive — never touch layout, position,
   z-index, overflow, or opacity of EXISTING elements.
   ============================================================ */

/* ── WebGL / Orb canvas layers ─────────────────────────────── */
/* Must stay BEHIND everything – z-index: -1 is the key */
#pm-webgl-canvas,
#pm-orb-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;   /* never intercept mouse/touch */
    z-index: -1;            /* always behind even static content */
    opacity: 1;
}

/* ── Scroll progress bar ────────────────────────────────────── */
#pm-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #02A296, #68C625, #02A296);
    background-size: 200% 100%;
    animation: pm-grad-shift 3s linear infinite;
    z-index: 99999;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(2,162,150,.7);
    transition: width .1s linear;
}

@keyframes pm-grad-shift {
    to { background-position: -200% 0; }
}

/* ── Custom cursor ──────────────────────────────────────────── */
#pm-cursor-dot,
#pm-cursor-ring {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    border-radius: 50%;
    z-index: 99998;
    will-change: transform;
    transition: opacity .3s;
    /* hidden until JS activates */
    opacity: 0;
}

#pm-cursor-dot {
    width: 8px; height: 8px;
    background: #02A296;
    box-shadow: 0 0 10px rgba(2,162,150,.9);
}

#pm-cursor-ring {
    width: 38px; height: 38px;
    border: 1.5px solid rgba(2,162,150,.55);
    transition: transform .12s cubic-bezier(.23,1,.32,1),
                width .22s ease, height .22s ease,
                border-color .22s ease, opacity .3s;
}

#pm-cursor-ring.pm-hover {
    width: 60px; height: 60px;
    border-color: rgba(104,198,37,.7);
    background: rgba(104,198,37,.07);
}

#pm-cursor-ring.pm-click {
    width: 18px; height: 18px;
    background: rgba(2,162,150,.25);
}

/* Hide on mobile / touch */
@media (max-width: 1199px) {
    #pm-cursor-dot, #pm-cursor-ring { display: none; }
}

/* ── Scroll-progress bar ────────────────────────────────────── */

/* ── Button enhancements ─────────────────────────────────────
   Only add box-shadow & a shine sweep — no layout changes     */
.theme-btn {
    transition: box-shadow .3s ease, transform .3s cubic-bezier(.23,1,.32,1) !important;
    will-change: transform;
    overflow: hidden;   /* needed for the shine sweep */
}

.theme-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
    transform: translateX(-120%);
    transition: transform .42s ease;
    pointer-events: none;
}

.theme-btn:hover::before {
    transform: translateX(120%);
}

.theme-btn:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 10px 30px rgba(2,162,150,.45) !important;
}

/* ── Service item hover ──────────────────────────────────────── */
.service-item {
    transition: transform .4s cubic-bezier(.23,1,.32,1),
                box-shadow .4s ease !important;
    will-change: transform;
}

.service-item:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 50px rgba(2,162,150,.18) !important;
}

/* ── Team item hover overlay ─────────────────────────────────── */
.team-item {
    transition: transform .4s cubic-bezier(.23,1,.32,1) !important;
}

.team-item:hover {
    transform: translateY(-6px) !important;
}

/* ── Pricing / FAQ hover ─────────────────────────────────────── */
.pricing-item,
.price-box,
.faq-item-box {
    transition: box-shadow .35s ease, transform .35s cubic-bezier(.23,1,.32,1) !important;
}

.pricing-item:hover,
.price-box:hover {
    box-shadow: 0 20px 55px rgba(2,162,150,.18) !important;
    transform: translateY(-6px) !important;
}

.faq-item-box:hover {
    box-shadow: -4px 0 0 #02A296, 0 8px 30px rgba(2,162,150,.12) !important;
}

/* ── Hero feature icon hover ─────────────────────────────────── */
.hero-feature-icon {
    transition: transform .35s cubic-bezier(.23,1,.32,1),
                box-shadow .35s ease !important;
}

.hero-feature-icon:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 14px 40px rgba(2,162,150,.14) !important;
}

/* ── Nav underline draw ──────────────────────────────────────── */
.main-menu nav > ul > li > a {
    position: relative;
}

.main-menu nav > ul > li > a::after {
    content: "";
    position: absolute;
    left: 50%; bottom: -4px;
    width: 0; height: 2px;
    background: linear-gradient(90deg, #02A296, #68C625);
    border-radius: 2px;
    transition: width .32s cubic-bezier(.77,0,.175,1),
                left .32s cubic-bezier(.77,0,.175,1);
}

.main-menu nav > ul > li:hover > a::after {
    width: 100%;
    left: 0;
}

/* ── Section title underline draw ───────────────────────────── */
.pm-title-underline {
    position: relative;
    display: inline-block;
}

.pm-title-underline::after {
    content: "";
    position: absolute;
    left: 0; bottom: -5px;
    height: 3px;
    width: 0%;
    border-radius: 2px;
    background: linear-gradient(90deg, #02A296, #68C625);
    transition: width .85s cubic-bezier(.77,0,.175,1);
}

.pm-title-underline.pm-active::after {
    width: 100%;
}

/* ── Hero headline gradient ──────────────────────────────────── */
.hero-content h1 {
    background: linear-gradient(135deg, #28241F 0%, #02A296 55%, #68C625 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: pm-h1-grad 7s ease infinite;
}

@keyframes pm-h1-grad {
    0%,100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ── Floating shapes ─────────────────────────────────────────── */
.shape-1-img,
.shape-2-img,
.shape-3-img {
    animation: pm-shape-float 5s ease-in-out infinite;
}

.shape-2-img { animation-delay: 1.5s; animation-direction: alternate-reverse; }
.shape-3-img { animation-delay: 3s; }

@keyframes pm-shape-float {
    0%,100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-18px) rotate(4deg); }
}

/* float-bob helpers already animated by main.js; let them be */

/* ── About floating images: already handled by main.css float-bob ── */
/* (removed to avoid conflict) */

/* ── Preloader spinner glow ──────────────────────────────────── */
.preloader .spinner {
    box-shadow: 0 0 24px rgba(2,162,150,.45);
}

.letters-loading {
    transition: text-shadow .3s ease;
}

/* ── Back-to-top pulse ───────────────────────────────────────── */
#back-top {
    animation: pm-pulse 2.2s ease-in-out infinite;
}

@keyframes pm-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(2,162,150,.45); }
    50%      { box-shadow: 0 0 0 12px rgba(2,162,150,0); }
}

/* ── Header sticky glass ─────────────────────────────────────── */
#header-sticky {
    transition: box-shadow .35s ease, background .35s ease !important;
}

#header-sticky.sticky {
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: 0 6px 30px rgba(2,162,150,.14) !important;
}

/* ── Footer top accent line ──────────────────────────────────── */
footer.footer-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #02A296 35%, #68C625 65%, transparent);
    background-size: 200% 100%;
    animation: pm-grad-shift 5s linear infinite;
}

footer.footer-section {
    position: relative;
}

/* ── Counter numbers gradient text ──────────────────────────── */
.counter-num {
    background: linear-gradient(135deg, #02A296 0%, #68C625 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 6px rgba(2,162,150,.35));
}

/* ── Testimonial glass card ──────────────────────────────────── */
.testimonial-item,
.testimonials-box {
    transition: box-shadow .35s ease, transform .35s cubic-bezier(.23,1,.32,1) !important;
}

.testimonial-item:hover,
.testimonials-box:hover {
    box-shadow: 0 18px 50px rgba(2,162,150,.14) !important;
    transform: translateY(-5px) !important;
}

/* ── Icon image hover spin ───────────────────────────────────── */
.about-items .about-img img,
.service-item .icon img {
    transition: transform .55s cubic-bezier(.23,1,.32,1);
}

.about-items:hover .about-img img,
.service-item:hover .icon img {
    transform: rotate(15deg) scale(1.1);
}

/* ── Contact form focus glow ─────────────────────────────────── */
.contact-form-box input:focus,
.contact-form-box textarea:focus,
.single-select.open {
    border-color: #02A296 !important;
    box-shadow: 0 0 0 3px rgba(2,162,150,.18) !important;
    transition: all .28s ease;
}

/* ── Ripple keyframe ─────────────────────────────────────────── */
@keyframes pm-ripple {
    0%   { transform: scale(0); opacity: .5; }
    100% { transform: scale(1); opacity: 0; }
}

/* ── Featured pricing glow ───────────────────────────────────── */
.pricing-item.active {
    animation: pm-price-glow 3s ease-in-out infinite;
}

@keyframes pm-price-glow {
    0%,100% { box-shadow: 0 0 0 2px rgba(2,162,150,.5), 0 24px 60px rgba(2,162,150,.18); }
    50%      { box-shadow: 0 0 0 3px rgba(104,198,37,.5), 0 24px 60px rgba(104,198,37,.22); }
}

/* ── Breadcrumb / page-hero ambient orb ─────────────────────── */
.breadcrumb-section::after,
.breadcrumb-wrapper::after {
    content: "";
    position: absolute;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(2,162,150,.12) 0%, transparent 70%);
    top: -180px; right: -120px;
    pointer-events: none;
    animation: pm-orb-drift 8s ease-in-out infinite;
}

.breadcrumb-section,
.breadcrumb-wrapper {
    position: relative;
    overflow: hidden;
}

@keyframes pm-orb-drift {
    0%,100% { transform: translate(0,0) scale(1); }
    50%      { transform: translate(-30px, 20px) scale(1.08); }
}

/* ── Reduce motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }

    #pm-webgl-canvas, #pm-orb-canvas { display: none; }
}