/* ============================================================
   Cinematic Layer — Atmosphere, depth, drama
   ============================================================ */

/* ============================================================
   Animated aurora orbs behind content
   ============================================================ */
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(120px);
    opacity: 0;
    z-index: -1;
}

.hero::before {
    width: clamp(500px, 60vw, 1100px);
    height: clamp(500px, 60vw, 1100px);
    top: -15%;
    left: -20%;
    background: radial-gradient(circle,
            rgba(94, 231, 223, 0.12) 0%,
            rgba(180, 144, 202, 0.08) 40%,
            transparent 70%);
}

.hero::after {
    width: clamp(400px, 50vw, 900px);
    height: clamp(400px, 50vw, 900px);
    bottom: -10%;
    right: -15%;
    background: radial-gradient(circle,
            rgba(180, 144, 202, 0.1) 0%,
            rgba(0, 255, 157, 0.06) 45%,
            transparent 70%);
}

@keyframes orbFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.6) translateY(60px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Orbs fade in and breathe once hero-enter triggers */
.hero.hero-enter::before {
    animation: orbFadeIn 2.5s var(--ease-out) 0.3s forwards,
        orbBreathe 10s ease-in-out 2.8s infinite alternate;
}

.hero.hero-enter::after {
    animation: orbFadeIn 2.5s var(--ease-out) 0.7s forwards,
        orbBreathe 12s ease-in-out 3.2s infinite alternate-reverse;
}

@keyframes orbBreathe {
    0% {
        transform: scale(1) translate(0, 0);
    }

    50% {
        transform: scale(1.1) translate(16px, -12px);
    }

    100% {
        transform: scale(0.95) translate(-12px, 8px);
    }
}

/* Hero position relative for orbs */
.hero {
    position: relative;
    overflow: visible;
}

/* ============================================================
   Enhanced hero entrance — deeper, cinematic stagger
   ============================================================ */
.hero-stagger {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
    transition: opacity 1.0s var(--ease-out),
        transform 1.2s var(--ease-out);
}

.hero-enter .hero-stagger {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* d0: background image — fades in first, slow + cinematic */
.hero-stagger.d0 {
    transition-delay: 0s;
    transition: opacity 2.5s var(--ease-out);
    transform: none;
}
.hero-enter .hero-stagger.d0 {
    opacity: 0.6;
    transform: none;
}

/* d1: eyebrow — first thing the reader sees */
.hero-stagger.d1 {
    transition-delay: 0.25s;
}

/* d2: title — the hero moment, heavier + slower */
.hero-stagger.d2 {
    transition-delay: 0.7s;
    transform: translateY(60px) scale(0.95);
    transition: opacity 1.4s var(--ease-out),
        transform 1.6s var(--ease-out);
}

/* d2b: byline */
.hero-stagger.d2b {
    transition-delay: 1.15s;
}

/* d3: lede paragraph */
.hero-stagger.d3 {
    transition-delay: 1.6s;
}

/* d3b: fast-track skip links */
.hero-stagger.d3b {
    transition-delay: 1.85s;
}

/* d4: how-to-read card — last hero element */
.hero-stagger.d4 {
    transition-delay: 2.1s;
}

/* ============================================================
   Topbar — floats down AFTER hero stagger completes
   ============================================================ */
.topbar-hidden {
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.9s var(--ease-out),
        transform 1.0s var(--ease-out);
}

body.hero-enter .topbar-hidden {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 2.7s;
}

/* Title glow + enhanced gradient */
.hero h1 {
    text-shadow:
        0 0 80px rgba(94, 231, 223, 0.1),
        0 0 160px rgba(94, 231, 223, 0.05);
}

.grad {
    background: linear-gradient(90deg,
            var(--accent) 0%,
            var(--accent2) 28%,
            var(--accent3) 56%,
            var(--accent) 100%);
    background-size: 400% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradFlow 10s ease-in-out infinite;
}

@keyframes gradFlow {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

[data-theme="light"] .hero h1 {
    text-shadow: 0 0 60px rgba(8, 145, 178, 0.08);
}

/* Enhanced border on hero card */
.hero-card {
    position: relative;
    overflow: hidden;
    border: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    box-shadow: var(--shadow2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 100px rgba(94, 231, 223, 0.05);
}

.hero-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from 0deg,
            rgba(94, 231, 223, 0.5),
            rgba(180, 144, 202, 0.4),
            rgba(0, 255, 157, 0.4),
            rgba(255, 201, 61, 0.2),
            rgba(94, 231, 223, 0.5));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: borderRotate 8s linear infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes borderRotate {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

[data-theme="light"] .hero-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
    box-shadow: var(--shadow2),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 80px rgba(8, 145, 178, 0.04);
}

[data-theme="light"] .hero-card::after {
    background: conic-gradient(from 0deg,
            rgba(8, 145, 178, 0.3),
            rgba(124, 58, 237, 0.25),
            rgba(5, 150, 105, 0.25),
            rgba(217, 119, 6, 0.15),
            rgba(8, 145, 178, 0.3));
}

/* ============================================================
   Cinematic chapter numbers
   ============================================================ */
.chap-num {
    position: relative;
}

.chapter-head {
    position: relative;
}

.chapter-head::before {
    content: attr(data-num);
    position: absolute;
    top: -0.4em;
    left: -0.2em;
    font-size: clamp(120px, 14vw, 220px);
    font-weight: 900;
    font-family: var(--serif);
    line-height: 1;
    opacity: 0;
    background: linear-gradient(180deg, rgba(94, 231, 223, 0.06), transparent 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    pointer-events: none;
    z-index: 0;
    transition: opacity 1.5s var(--ease-out);
}

section.chapter.in-view .chapter-head::before {
    opacity: 1;
}

[data-theme="light"] .chapter-head::before {
    background: linear-gradient(180deg, rgba(8, 145, 178, 0.05), transparent 80%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* ============================================================
   Enhanced chapter entrance — cinematic reveal
   ============================================================ */
section.chapter {
    transform: translateY(80px);
    opacity: 0;
    transition: transform 1.6s var(--ease-out),
        opacity 1.4s var(--ease-out);
}

section.chapter.in-view {
    transform: translateY(0);
    opacity: 1;
}

/* Heading glow on enter */
section.chapter h2 {
    transition: text-shadow 1.2s ease;
    text-shadow: none;
}

section.chapter.in-view h2 {
    text-shadow: 0 0 50px rgba(94, 231, 223, 0.08);
}

[data-theme="light"] section.chapter.in-view h2 {
    text-shadow: 0 0 40px rgba(8, 145, 178, 0.05);
}

/* Callout depth + glow */
.callout {
    transition: box-shadow 0.7s var(--ease),
        border-color 0.7s var(--ease),
        transform 0.5s var(--ease);
}

.callout.danger {
    box-shadow: 0 10px 50px rgba(255, 95, 109, 0.08),
        inset 0 1px 0 rgba(255, 95, 109, 0.1);
}

.callout.warn {
    box-shadow: 0 10px 50px rgba(255, 201, 61, 0.06),
        inset 0 1px 0 rgba(255, 201, 61, 0.08);
}

.callout.ok {
    box-shadow: 0 10px 50px rgba(0, 255, 157, 0.06),
        inset 0 1px 0 rgba(0, 255, 157, 0.08);
}

/* Lab glass morphism upgrade */
.lab {
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: box-shadow 0.6s var(--ease),
        border-color 0.6s var(--ease),
        transform 0.5s var(--ease);
}

.lab:hover {
    box-shadow: var(--shadow2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 80px rgba(94, 231, 223, 0.04);
}

[data-theme="light"] .lab {
    box-shadow: var(--shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .lab:hover {
    box-shadow: var(--shadow2),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 60px rgba(8, 145, 178, 0.04);
}

/* Animated progress bar glow */
.progress>i {
    box-shadow:
        0 0 30px rgba(94, 231, 223, 0.35),
        0 0 80px rgba(94, 231, 223, 0.15);
    position: relative;
}

.progress>i::after {
    content: "";
    position: absolute;
    right: 0;
    top: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow:
        0 0 20px var(--accent),
        0 0 50px rgba(94, 231, 223, 0.5);
    opacity: 0.95;
}

/* Enhanced cursor glow */
.cursor-glow {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle,
            rgba(94, 231, 223, 0.02) 0%,
            rgba(180, 144, 202, 0.01) 40%,
            transparent 70%);
}

[data-theme="light"] .cursor-glow {
    background: radial-gradient(circle,
            rgba(8, 145, 178, 0.015) 0%,
            rgba(124, 58, 237, 0.01) 40%,
            transparent 70%);
}

/* Button hover glow */
.btn.primary {
    position: relative;
    overflow: hidden;
    border-color: rgba(94, 231, 223, 0.5);
    background: linear-gradient(135deg, rgba(94, 231, 223, 0.22), rgba(180, 144, 202, 0.18));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 50px rgba(94, 231, 223, 0.1);
}

.btn.primary::before {
    content: "";
    position: absolute;
    inset: -3px;
    background: linear-gradient(135deg,
            rgba(94, 231, 223, 0.4),
            rgba(180, 144, 202, 0.25),
            rgba(0, 255, 157, 0.2));
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
    filter: blur(16px);
}

.btn.primary:hover::before {
    opacity: 1;
}

.btn.primary:hover {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 80px rgba(94, 231, 223, 0.2);
    border-color: rgba(94, 231, 223, 0.7);
}

/* Topbar cinematic glass */
.topbar {
    backdrop-filter: blur(24px) saturate(160%);
    background: linear-gradient(180deg,
            rgba(5, 5, 8, 0.82) 0%,
            rgba(8, 10, 16, 0.45) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .topbar {
    backdrop-filter: blur(24px) saturate(140%);
    background: linear-gradient(180deg,
            rgba(250, 248, 245, 0.92) 0%,
            rgba(245, 243, 239, 0.7) 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.08);
}

/* Brand sig pulsing glow */
.sig {
    animation: sigPulse 5s ease-in-out infinite alternate;
}

@keyframes sigPulse {
    0% {
        box-shadow: 0 0 16px rgba(94, 231, 223, 0.2), 0 8px 24px rgba(0, 0, 0, 0.3);
    }

    100% {
        box-shadow: 0 0 28px rgba(180, 144, 202, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
    }
}

/* Enhanced chip glow */
.chip .dot {
    animation: dotPulse 4s ease-in-out infinite alternate;
}

@keyframes dotPulse {
    0% {
        box-shadow: 0 0 16px rgba(94, 231, 223, 0.3);
    }

    50% {
        box-shadow: 0 0 28px rgba(94, 231, 223, 0.5), 0 0 56px rgba(94, 231, 223, 0.2);
    }

    100% {
        box-shadow: 0 0 16px rgba(180, 144, 202, 0.3);
    }
}

/* Section dividers — animated sweep */
.hr::after {
    background: linear-gradient(90deg,
            transparent,
            rgba(94, 231, 223, 0.6),
            rgba(180, 144, 202, 0.6),
            rgba(0, 255, 157, 0.5),
            transparent);
}

/* Stat cards shimmer */
.stat {
    position: relative;
    overflow: hidden;
}

.stat::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
            transparent 30%,
            rgba(94, 231, 223, 0.05) 45%,
            transparent 60%);
    background-size: 250% 100%;
    animation: statShimmer 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes statShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -50% 0;
    }
}

[data-theme="light"] .stat::before {
    background: linear-gradient(110deg,
            transparent 30%,
            rgba(8, 145, 178, 0.04) 45%,
            transparent 60%);
    background-size: 250% 100%;
}

/* Enhanced atmospheric layer */
#atmo {
    opacity: 0.8;
    filter: blur(40px) saturate(160%);
    background:
        radial-gradient(900px 700px at var(--px, 55%) var(--py, 30%),
            rgba(94, 231, 223, 0.15), transparent 60%),
        radial-gradient(1000px 700px at calc(var(--px, 55%) + 22%) calc(var(--py, 30%) + 12%),
            rgba(180, 144, 202, 0.13), transparent 62%),
        radial-gradient(1100px 800px at calc(var(--px, 55%) - 22%) calc(var(--py, 30%) + 22%),
            rgba(0, 255, 157, 0.1), transparent 64%),
        radial-gradient(600px 600px at 80% 80%,
            rgba(255, 95, 109, 0.06), transparent 60%);
    transition: opacity 1s ease;
}

/* TOC active link glow */
#tocNav a.active {
    text-shadow: 0 0 25px rgba(94, 231, 223, 0.2);
}

[data-theme="light"] #tocNav a.active {
    text-shadow: 0 0 20px rgba(8, 145, 178, 0.1);
}

/* Canvas vignette upgrade */
canvas {
    border-radius: var(--radius);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] canvas {
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Modal cinematic backdrop */
.modal {
    backdrop-filter: blur(16px) saturate(140%);
}

.modal.open .modal-card {
    box-shadow:
        0 30px 120px rgba(0, 0, 0, 0.5),
        0 0 100px rgba(94, 231, 223, 0.05);
}

/* Permalink toast glass */
.permalink-toast {
    backdrop-filter: blur(20px) saturate(150%);
}

/* Failure-first mode — dramatic red atmosphere */
body.failure-first #atmo {
    background:
        radial-gradient(800px 600px at 50% 30%,
            rgba(255, 95, 109, 0.12), transparent 60%),
        radial-gradient(700px 500px at 30% 60%,
            rgba(255, 201, 61, 0.06), transparent 60%);
}

/* Footer fade-in */
footer {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s var(--ease-out),
        transform 1.2s var(--ease-out);
}

footer.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* TOC glass depth */
.toc {
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: var(--shadow),
        0 0 80px rgba(0, 0, 0, 0.12);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .toc {
    backdrop-filter: blur(16px) saturate(120%);
    border-color: rgba(0, 0, 0, 0.08);
}

.toc a.active {
    box-shadow: 0 0 25px rgba(94, 231, 223, 0.08);
}

/* Enhanced glow-card spotlight */
.glow-card::before {
    background: radial-gradient(800px circle at var(--gx) var(--gy),
            rgba(94, 231, 223, 0.18),
            rgba(180, 144, 202, 0.08) 30%,
            transparent 50%);
}

[data-theme="light"] .glow-card::before {
    background: radial-gradient(800px circle at var(--gx) var(--gy),
            rgba(8, 145, 178, 0.12),
            rgba(124, 58, 237, 0.05) 30%,
            transparent 50%);
}

/* Schema block subtle glow */
.schema-block {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 10px 50px rgba(0, 0, 0, 0.2);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.schema-block:hover {
    border-color: rgba(94, 231, 223, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 16px 60px rgba(0, 0, 0, 0.25),
        0 0 40px rgba(94, 231, 223, 0.04);
}

/* Callout hover lift */
.callout:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Threat card cinematic hover */
.threat-card {
    transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s var(--ease);
}

.threat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(255, 95, 109, 0.1),
        0 0 40px rgba(255, 95, 109, 0.05);
}

/* Keyboard shortcuts glow */
kbd {
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

kbd:hover {
    border-color: rgba(94, 231, 223, 0.3);
    box-shadow: 0 0 20px rgba(94, 231, 223, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

/* Eyebrow tracking animation */
.eyebrow {
    letter-spacing: 0.3em;
    transition: letter-spacing 1.2s var(--ease-out);
}

.hero-enter .eyebrow {
    letter-spacing: 0.4em;
}

/* Lab head cinematic hover */
.lab-head {
    transition: background 0.4s ease, border-color 0.4s ease;
}

.lab-head:hover {
    background: rgba(94, 231, 223, 0.03);
}

[data-theme="light"] .lab-head:hover {
    background: rgba(8, 145, 178, 0.03);
}

/* Enhanced equation block */
.eq-block {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 10px 40px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.5s ease;
}

.eq-block:hover {
    box-shadow: inset 0 1px 0 rgba(94, 231, 223, 0.08),
        0 16px 50px rgba(0, 0, 0, 0.2);
}

/* Comparison table row glow */
.cmp-table tbody tr {
    transition: background 0.4s ease;
}

/* Hero particles canvas */
.hero-particles {
    border-radius: 0;
    box-shadow: none;
}

/* Reduced motion: disable cinematic extras */
@media (prefers-reduced-motion: reduce) {

    .hero::before,
    .hero::after {
        animation: none;
        opacity: 0.6;
        transform: none;
    }

    .hero-card::after {
        animation: none;
    }

    .sig {
        animation: none;
    }

    .chip .dot {
        animation: none;
    }

    .stat::before {
        animation: none;
        display: none;
    }

    .grad {
        animation: none;
        background-size: 100% 100%;
    }

    .progress>i::after {
        display: none;
    }

    footer {
        opacity: 1;
        transform: none;
    }

    .hero-stagger {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================================
   Overhaul normalization layer
   ============================================================ */
.hero::before,
.hero::after {
    filter: blur(96px);
    animation: none !important;
    transform: none !important;
    opacity: 0.22;
}

.hero.hero-enter::before,
.hero.hero-enter::after {
    animation: none !important;
    opacity: 0.22;
}

.hero h1 {
    text-shadow: none !important;
}

.grad {
    animation: none !important;
    background-size: 100% 100% !important;
}

.hero-card {
    border: 1px solid var(--stroke2) !important;
    background: var(--card2) !important;
    box-shadow: var(--shadow) !important;
}

.hero-card::after {
    display: none !important;
}

.hero-stagger:not(.d0) {
    transition-duration: 0.55s !important;
}
.hero-stagger.d0 {
    transition-duration: 2.5s !important;
}

section.chapter {
    transform: translateY(24px) !important;
    opacity: 0;
    transition: transform 0.7s var(--ease-out), opacity 0.65s var(--ease-out) !important;
}

section.chapter.in-view {
    transform: translateY(0) !important;
    opacity: 1;
}

section.chapter.in-view h2 {
    text-shadow: none !important;
}

.callout,
.lab,
.threat-card,
.schema-block,
.eq-block {
    box-shadow: none !important;
}

.callout:hover,
.lab:hover,
.threat-card:hover,
.schema-block:hover,
.eq-block:hover {
    transform: none !important;
    box-shadow: none !important;
}

.progress>i {
    box-shadow: none !important;
}

.progress>i::after {
    display: none !important;
}

.topbar {
    backdrop-filter: blur(12px) saturate(130%) !important;
    box-shadow: 0 6px 20px rgba(2, 8, 14, 0.24) !important;
}

.sig,
.chip .dot,
.stat::before,
.tokchip,
.ragcard {
    animation: none !important;
}

.cursor-glow {
    opacity: 0 !important;
}

#atmo {
    opacity: 0.52 !important;
    filter: blur(54px) saturate(118%) !important;
}

footer {
    opacity: 1 !important;
    transform: none !important;
}