/* ==================== ADVANCED EXPERIENCE LAYER ==================== */

:root {
    --primary: #0f766e;
    --secondary: #14b8a6;
    --danger: #f97316;
    --success: #0ea5a3;
    --text-dark: #0f172a;
    --text-light: #475569;
    --text-lighter: #94a3b8;
    --bg-light: #e2e8f0;
    --bg-lighter: #f8fafc;
    --white: #ffffff;
    --border-color: #dbe7ef;
    --shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 30px 70px rgba(15, 23, 42, 0.14);
}

html {
    scroll-padding-top: 105px;
}

body {
    font-family: 'Manrope', 'Segoe UI', Tahoma, sans-serif;
    background:
        radial-gradient(circle at 8% 6%, rgba(20, 184, 166, 0.1), transparent 34%),
        radial-gradient(circle at 90% 90%, rgba(249, 115, 22, 0.12), transparent 38%),
        var(--white);
}

h1,
h2,
h3,
h4,
.logo,
.footer-logo {
    font-family: 'Sora', 'Manrope', sans-serif;
}

.navbar {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.98);
}

.nav-links a.active {
    color: var(--primary);
}

.nav-links a.active::before {
    width: 100%;
}

.hero {
    background:
        radial-gradient(circle at 14% 14%, rgba(20, 184, 166, 0.15), transparent 42%),
        radial-gradient(circle at 85% 85%, rgba(249, 115, 22, 0.14), transparent 46%),
        linear-gradient(140deg, #f8fafc 0%, #eef7f6 54%, #fffbf5 100%);
}

.section-header h2 {
    color: #0b5f5f;
}

.about-feature-card,
.service-item,
.package-card,
.doctor-card,
.faq-item,
.contact-info-box,
.map-placeholder {
    border: 1px solid rgba(148, 163, 184, 0.26);
    box-shadow: var(--shadow);
}

.about-feature-card,
.service-item,
.package-card,
.doctor-card,
.faq-item {
    background: rgba(255, 255, 255, 0.92);
}

.about-feature-card:hover,
.service-item:hover,
.package-card:hover,
.doctor-card:hover,
.faq-item.active {
    box-shadow: var(--shadow-lg);
}

.btn {
    border-radius: 10px;
}

.btn-primary,
.search-box button {
    background: linear-gradient(140deg, #0f766e, #14b8a6);
}

.btn-danger {
    background: linear-gradient(140deg, #f97316, #ea580c);
}

.find-test-section,
.about-section,
.packages-section,
.booking-section {
    background-attachment: scroll;
}

[data-reveal] {
    opacity: 0;
    transform: translate3d(0, 36px, 0) scale(0.98);
    transition:
        opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal='left'] {
    transform: translate3d(-34px, 0, 0);
}

[data-reveal='right'] {
    transform: translate3d(34px, 0, 0);
}

[data-reveal='zoom'] {
    transform: scale(0.92);
}

[data-reveal].in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.center-origin-item {
    opacity: 0;
    transform: translate3d(var(--center-from-x, 0), var(--center-from-y, 0), 0) scale(0.9);
    transition:
        opacity 1.05s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 1.6s cubic-bezier(0.16, 0.84, 0.24, 1);
    transition-delay: var(--center-delay, 0ms);
}

.center-origin-item.in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.section-highlight {
    animation: sectionPulse 0.9s ease;
}

@keyframes sectionPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.4);
    }
    100% {
        box-shadow: 0 0 0 44px rgba(20, 184, 166, 0);
    }
}

.scroll-progress-circle {
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.scroll-progress-svg circle.progress-fill {
    stroke: url(#progressGradient);
}

.scroll-percentage {
    color: #0f766e;
}

.back-to-top {
    background: linear-gradient(140deg, #0f766e, #14b8a6);
}

body.low-power [data-reveal],
body.low-power .center-origin-item,
body.low-power .section-highlight,
body.low-power .btn,
body.low-power .nav-links a,
body.low-power .about-feature-card,
body.low-power .service-item,
body.low-power .package-card,
body.low-power .doctor-card,
body.low-power .faq-item,
body.low-power .experience-badge {
    animation: none !important;
    transition: none !important;
    transform: none !important;
}

body.low-power .about-feature-card,
body.low-power .service-item,
body.low-power .package-card,
body.low-power .doctor-card,
body.low-power .faq-item,
body.low-power .navbar {
    box-shadow: var(--shadow) !important;
}

@media (max-width: 968px) {
    .nav-buttons {
        display: none;
    }
}

@media (max-width: 768px) {
    .find-test-section,
    .about-section,
    .packages-section,
    .booking-section {
        background-attachment: scroll;
    }

    [data-reveal],
    .center-origin-item {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

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

    .center-origin-item {
        opacity: 1;
        transform: none;
    }
}

@media (update: slow) {
    .navbar,
    .about-feature-card,
    .service-item,
    .package-card,
    .doctor-card,
    .faq-item {
        backdrop-filter: none;
    }
}