/* =========================================================
   ClinixDaily — shared styles
   ========================================================= */

:root {
    --bg: #EFF4F6;
    --card: #F8FAFC;
    --header: #0F172A;
    --cta: #0D9488;
    --status: #059669;
    --text: #111827;
    --text-secondary: #64748B;
    --border: #CBD5E1;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
}

.font-display {
    font-family: "Fraunces", "Source Serif 4", Georgia, serif;
}

.font-mono {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
}

/* Focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--cta);
    outline-offset: 2px;
}

/* ---------- ECG pulse signature motif ---------- */
.pulse-line {
    width: 100%;
    height: auto;
    overflow: visible;
}

.pulse-line path {
    fill: none;
    stroke: var(--cta);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 6 10;
    animation: pulse-travel 5s linear infinite;
}

@keyframes pulse-travel {
    to {
        stroke-dashoffset: -400;
    }
}

.pulse-divider path {
    stroke: var(--border);
    stroke-dasharray: 0;
    opacity: .9;
}

.pulse-divider .pulse-beat {
    stroke: var(--cta);
    stroke-dasharray: 46 900;
    animation: pulse-sweep 4.5s ease-in-out infinite;
}

@keyframes pulse-sweep {
    0% {
        stroke-dashoffset: 946;
        opacity: 0;
    }

    4% {
        opacity: 1;
    }

    55% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    62% {
        opacity: 0;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .pulse-line path,
    .pulse-divider .pulse-beat,
    .hero-photo,
    .hero-pulse path {
        animation: none !important;
    }

    .hero-photo {
        transform: scale(1.04);
    }

    html {
        scroll-behavior: auto;
    }
}

/* ---------- Home hero ---------- */
.hero-stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    min-height: clamp(560px, 88vh, 820px);
    background: #0f2f2c;
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% center;
    transform: scale(1.06);
    animation: hero-drift 28s ease-in-out infinite alternate;
}

@keyframes hero-drift {
    from {
        transform: scale(1.06) translate3d(0, 0, 0);
    }

    to {
        transform: scale(1.12) translate3d(-1.4%, 0.8%, 0);
    }
}

.hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(100deg,
            rgba(8, 32, 30, 0.92) 0%,
            rgba(8, 32, 30, 0.82) 42%,
            rgba(8, 32, 30, 0.4) 72%,
            rgba(8, 32, 30, 0.2) 100%),
        linear-gradient(to top, rgba(8, 32, 30, 0.65) 0%, transparent 48%);
}

.hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding: 7rem 1.25rem 4.5rem;
}

@media (min-width: 1024px) {
    .hero-stage {
        align-items: center;
    }

    .hero-inner {
        padding: 6.5rem 2rem 5.5rem;
    }
}

.hero-copy {
    position: relative;
    z-index: 3;
    max-width: 36rem;
}

.hero-brand {
    margin: 0;
    font-size: clamp(2.85rem, 8vw, 5.5rem);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.035em;
    color: #f8fafc;
}

.hero-brand span {
    color: #5eead4;
}

.hero-headline {
    margin: 0;
    max-width: 22ch;
    font-size: clamp(1.45rem, 3vw, 2.15rem);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.02em;
    color: #f1faf7;
}

.hero-lede {
    margin: 1.15rem 0 0;
    max-width: 32rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: #c5ddd7;
}

.hero-pulse {
    display: block;
    width: min(240px, 65vw);
    height: auto;
    margin: 1rem 0 1.5rem;
}

.hero-pulse path {
    fill: none;
    stroke: #5eead4;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.btn-hero-ghost {
    border: 1px solid rgba(248, 250, 252, 0.45);
    color: #f8fafc;
    background: rgba(248, 250, 252, 0.12);
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.btn-hero-ghost:hover {
    border-color: #5eead4;
    color: #5eead4;
    background: rgba(94, 234, 212, 0.12);
}

@media (max-width: 640px) {
    .hero-stage {
        min-height: clamp(520px, 84vh, 720px);
        align-items: flex-start;
    }

    .hero-photo {
        object-position: 70% center;
    }

    .hero-veil {
        background:
            linear-gradient(180deg,
                rgba(8, 32, 30, 0.92) 0%,
                rgba(8, 32, 30, 0.78) 42%,
                rgba(8, 32, 30, 0.35) 100%);
    }

    .hero-inner {
        padding: 5.5rem 1.25rem 2.5rem;
    }
}

/* ---------- Reveal on scroll ---------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Sticky header ---------- */
.site-header {
    background-color: var(--header);
    border-bottom: 1px solid rgba(203, 213, 225, 0.15);
}

.nav-link {
    color: #CBD5E1;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color .2s ease;
    position: relative;
}

.nav-link:hover,
.nav-link.is-active {
    color: #F8FAFC;
}

.nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    background: var(--cta);
    border-radius: 2px;
}

/* Mobile menu */
#mobileMenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

#mobileMenu.is-open {
    max-height: 480px;
}

/* ---------- Buttons ---------- */
.btn-cta {
    background-color: var(--cta);
    color: #F8FAFC;
    font-weight: 600;
    transition: background-color .2s ease, transform .15s ease;
}

.btn-cta:hover {
    background-color: #0b7d73;
    transform: translateY(-1px);
}

.btn-outline {
    border: 1px solid var(--border);
    color: var(--text);
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.btn-outline:hover {
    border-color: var(--cta);
    color: var(--cta);
    background-color: rgba(13, 148, 136, 0.06);
}

/* ---------- Cards ---------- */
.report-card {
    background-color: var(--card);
    border: 1px solid var(--border);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.report-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -18px rgba(15, 23, 42, 0.22);
    border-color: #0D9488;
}

/* Status badge */
.badge-status {
    background-color: rgba(5, 150, 105, 0.12);
    color: var(--status);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
}

/* Save button */
[data-save-btn] {
    transition: all .2s ease;
}

[data-save-btn].is-saved {
    background-color: rgba(13, 148, 136, 0.1);
    border-color: var(--cta);
    color: var(--cta);
}

/* Back to top */
#backToTop {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
}

#backToTop.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Newsletter popup */
#newsletterPopup {
    transform: translateY(140%);
    transition: transform .4s ease;
}

#newsletterPopup.is-open {
    transform: translateY(0);
}

/* Reading progress bar */
#readingProgressBar {
    transition: width .1s linear;
}

/* Sparkline */
.sparkline path {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Category filter buttons */
.category-chip {
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: .8rem;
    font-weight: 600;
    transition: all .2s ease;
}

.category-chip.is-active,
.category-chip:hover {
    background-color: var(--header);
    color: #F8FAFC;
    border-color: var(--header);
}

/* Table-style biomarker rows */
.biomarker-row:nth-child(odd) {
    background-color: rgba(203, 213, 225, 0.15);
}

/* Scrollbar for horizontal ticker */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}