/* ============================================================
   SHEHJAR HOSPITAL — MODERN 3D POLISH LAYER v1.0
   Gradient headings, glass cards, 3D tilt, floating hero,
   shine buttons, scroll reveals, scroll progress bar.
   ============================================================ */

:root {
    --sh-primary: #0d3ae1;
    --sh-primary-dark: #0928a8;
    --sh-accent: #00bde0;
    --sh-glow: rgba(13, 58, 225, 0.35);
    --sh-radius: 20px;
}

/* ---------- 1. SCROLL PROGRESS BAR ---------- */
#shScrollProgress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--sh-primary), var(--sh-accent));
    z-index: 99999;
    pointer-events: none;
    transition: width 0.08s linear;
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 8px var(--sh-glow);
}

/* ---------- 2. GRADIENT & ANIMATED HEADINGS ---------- */
.section-head .title {
    background: linear-gradient(120deg, #0b1c3f 0%, #0d3ae1 55%, #00bde0 110%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hero: solid dark H1, gradient on highlight span only (max readability) */
.hero-content h1.title {
    color: #0b1c3f;
}

.hero-content h1.title .text-primary {
    background: linear-gradient(120deg, var(--sh-primary) 0%, var(--sh-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Gold underline accent bar with shimmer sweep */
.section-head .title::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin: 14px auto 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--sh-primary), var(--sh-accent));
    position: relative;
    overflow: hidden;
    animation: shUnderlinePulse 3s ease-in-out infinite;
}

.section-head.style-1 .title::after,
.section-head.text-center .title::after,
.section-head.style-3 .title::after {
    margin-left: auto;
    margin-right: auto;
}

@keyframes shUnderlinePulse {
    0%, 100% { width: 56px; opacity: 0.85; }
    50% { width: 84px; opacity: 1; }
}

/* ---------- 3. GLASS CARD LIFT (theme cards) ---------- */
.dz-box,
.testimonial-3,
.widget-rating1,
.widget-rating2,
.info-widget,
.appointment-bx,
.team-box,
.blog-card,
.icon-bx-wraper {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.dz-box:hover,
.testimonial-3:hover,
.icon-bx-wraper:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px -18px var(--sh-glow), 0 8px 24px rgba(11, 28, 63, 0.08);
}

/* Glass effect on light sections */
.bg-light .dz-box,
.bg-light .icon-bx-wraper {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.9);
}

/* ---------- 4. 3D TILT CARDS (paired with modern.js) ---------- */
[data-tilt] {
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out;
    will-change: transform;
}

[data-tilt] .tilt-glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    background: radial-gradient(
        600px circle at var(--glare-x, 50%) var(--glare-y, 50%),
        rgba(255, 255, 255, 0.35),
        transparent 45%
    );
    z-index: 2;
}

[data-tilt]:hover .tilt-glare {
    opacity: 1;
}

[data-tilt] > * {
    transform: translateZ(30px);
    transform-style: preserve-3d;
}

.dz-box[data-tilt] > * {
    transform: translateZ(18px);
}

/* ---------- 5. FLOATING HERO ANIMATION ---------- */
.hero-thumbnail {
    animation: shFloat 6s ease-in-out infinite;
}

.hero-thumbnail .item5 {
    animation: shFloat 5s ease-in-out 0.8s infinite;
}

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

/* Hero shapes drift */
.banner-shape4,
.banner-shape5,
.banner-shape6,
.shape1,
.shape2 {
    animation: shDrift 9s ease-in-out infinite;
}

.shape2 {
    animation-delay: 1.2s;
}

@keyframes shDrift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(8px, -12px) rotate(8deg); }
    66% { transform: translate(-6px, 8px) rotate(-6deg); }
}

/* Emergency pulse ring on hero phone icon */
.emergency-pulse {
    position: relative;
}

.emergency-pulse::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 2px solid var(--sh-accent);
    opacity: 0;
    animation: shPulseRing 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes shPulseRing {
    0% { transform: scale(1); opacity: 0.7; }
    70% { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}

/* ---------- 6. SHINE / RIPPLE BUTTONS ---------- */
.btn {
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent,
        rgba(255, 255, 255, 0.45),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

.btn:hover::after {
    left: 130%;
}

.btn-primary {
    box-shadow: 0 10px 24px -8px var(--sh-glow);
}

.btn-primary:hover {
    box-shadow: 0 16px 32px -8px var(--sh-glow);
}

.ripple-ink {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    transform: scale(0);
    animation: shRipple 0.6s ease-out forwards;
    pointer-events: none;
}

@keyframes shRipple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ---------- 7. SCROLL REVEAL (paired with modern.js) ---------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(36px) scale(0.985);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0s);
}

[data-reveal].revealed {
    opacity: 1;
    transform: none;
}

[data-reveal="left"] {
    transform: translateX(-44px);
}

[data-reveal="right"] {
    transform: translateX(44px);
}

[data-reveal="zoom"] {
    transform: scale(0.9);
}

/* ---------- 8. SECTION DIVIDER GLOW LINE ---------- */
.dz-separator {
    position: relative;
}

/* ---------- 9. IMAGE POLISH ---------- */
.dz-media img,
.team-box img,
.blog-card img {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}

.dz-box:hover .dz-media img,
.team-box:hover img {
    transform: scale(1.06);
}

/* ---------- 10. SWIPER NAV POLISH ---------- */
.swiper-button-next,
.swiper-button-prev {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    transform: scale(1.12);
}

/* ---------- 11. COUNTER NUMBERS GLOW ---------- */
.counter {
    font-variant-numeric: tabular-nums;
}

/* ---------- 12. HEADER SCROLL STATE ---------- */
.sticky-header.is-fixed {
    box-shadow: 0 10px 30px rgba(11, 28, 63, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ---------- 13. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
    }
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}