/* ChangeGuard — Design System (Light Theme) */
/* Elite motion overhaul — Hegel */

/* ── Spring physics easing tokens — Hegel ────────────────── */
:root {
    --spring-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
    --spring-stiff: cubic-bezier(0.16, 1, 0.3, 1);
    --spring-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Smooth scroll ─────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

/* ── Typography system ──────────────────────────────────── */
body {
    font-feature-settings: 'liga' 1, 'calt' 1, 'cv11' 1;
    text-rendering: optimizeLegibility;
    letter-spacing: 0.01em;
}

h1, h2, h3 { letter-spacing: -0.02em; }
h4, h5, h6 { letter-spacing: -0.01em; }

p, li, td { max-width: 72ch; }

/* All-caps labels / badges */
.tracking-widest, .tracking-wider {
    letter-spacing: 0.06em;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .animate-on-scroll { animation: none !important; opacity: 1 !important; transform: none !important; }
    .hero-animate { animation: none !important; opacity: 1 !important; }
    .hero-float { animation: none !important; }
}

/* ── Dropzone ────────────────────────────────────────────── */
.dropzone {
    border: 2px dashed #DDD9D3;
    border-radius: 0.625rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
    background: #FFFFFF;
}

.dropzone:hover {
    border-color: #2D7DD2;
    background: #FAFAFA;
}

.dropzone-active {
    border-color: #2D7DD2;
    background: rgba(45, 125, 210, 0.04);
    border-style: solid;
}

.dropzone .file-list:not(:empty) + .dropzone-content {
    display: none;
}

/* ── Form inputs ─────────────────────────────────────────── */
.form-input {
    background: #FFFFFF;
    border: 1px solid #DDD9D3;
    color: #1f2937;
    border-radius: 0.5rem;
    padding: 0.625rem 1rem;
    width: 100%;
    font-size: 0.875rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}

.form-input::placeholder {
    color: #9CA3AF;
}

/* Select dropdowns */
select.form-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239CA3AF' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
}

select.form-input option {
    background: #FFFFFF;
    color: #1f2937;
}

/* Allow Tailwind padding overrides on inputs with search icons */
.form-input.pl-9 { padding-left: 2.25rem; }
.form-input.pl-10 { padding-left: 2.5rem; }

.form-input:focus {
    border-color: #2D7DD2;
    box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.15);
}

/* ── Progress bar ────────────────────────────────────────── */
.progress-bar-fill {
    transition: width 0.5s ease-out;
}

/* ── Finding row hover ───────────────────────────────────── */
.finding-row:hover {
    background-color: #F7F5F2;
}

/* ── Animations ──────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.4s ease-out;
}

/* ── Scroll-triggered entrance animations ───────────────── */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.animate-on-scroll.delay-1 { transition-delay: 0.12s; }
.animate-on-scroll.delay-2 { transition-delay: 0.24s; }
.animate-on-scroll.delay-3 { transition-delay: 0.36s; }

/* ── Hero entrance animations ───────────────────────────── */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-animate {
    opacity: 0;
    animation: heroFadeUp 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.hero-animate-d1 { animation-delay: 0s; }
.hero-animate-d2 { animation-delay: 0.05s; }
.hero-animate-d3 { animation-delay: 0.12s; }
.hero-animate-d4 { animation-delay: 0.2s; }

/* ── Hero mockup float ──────────────────────────────────── */
@keyframes gentleFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
.hero-float {
    animation: gentleFloat 5s ease-in-out infinite;
}

/* ── Stepper connector (How It Works) ───────────────────── */
.step-connector {
    position: absolute;
    top: 24px;
    left: calc(50% + 28px);
    width: calc(100% - 56px);
    height: 0;
    border-top: 2px dashed #cbd5e1;
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ── Print styles ────────────────────────────────────────── */
@media print {
    nav, footer, aside, .no-print,
    #back-to-top, #share-dropdown-container, #csv-btn,
    #share-toast, [data-feedback-vote], [data-toggle-comment],
    [data-save-comment], [data-cancel-job], [data-retry-job],
    .search, #toggle-all-findings, #mobile-menu,
    .print-hide { display: none !important; }

    main { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
    body { background: white !important; color: black !important; font-size: 11pt !important; }

    /* Force all finding details open when printing */
    details.finding-detail { break-inside: avoid; page-break-inside: avoid; }
    details.finding-detail[open] > summary ~ * { display: block !important; }
    details.finding-detail > summary { pointer-events: none; }
    details.finding-detail { display: block !important; }
    details.finding-detail > div { display: block !important; }

    /* Open all RFI details too */
    details:not(.finding-detail) > summary ~ * { display: block !important; }

    .sticky { position: static !important; }

    /* Clean up backgrounds for print */
    .bg-elevated, .bg-deep, .bg-surface { background: white !important; }
    .border-border { border-color: #e5e7eb !important; }

    /* Page break control */
    h1, h2, h3 { page-break-after: avoid; break-after: avoid; }
    .grid { page-break-inside: avoid; break-inside: avoid; }

    /* Ensure links show URL */
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #6b7280; }
    a[href^="/"]::after { content: none; } /* Don't show for internal links */

    /* Report header: keep Download PDF visible but style for print */
    a[href*="/download"] { border: 1px solid #000 !important; padding: 0.25rem 0.5rem !important; }
    a[href*="/download"]::after { content: none !important; }
}

/* ── Focus-visible (keyboard accessibility) ─────────────── */
:focus-visible {
    outline: 2px solid #2D7DD2;
    outline-offset: 2px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none; /* inputs use box-shadow focus via .form-input:focus */
}

/* ── Text selection ─────────────────────────────────────── */
::selection {
    background: rgba(45, 125, 210, 0.15);
    color: #1e293b;
}

/* ── Blueprint grid (hero only, warm-toned, subtle) — Hegel ── */
.blueprint-grid {
    background-image: linear-gradient(to right, #DDD9D3 1px, transparent 1px),
                      linear-gradient(to bottom, #DDD9D3 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.2;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ── Skeleton loading shimmer ───────────────────────────── */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.8s ease-in-out infinite;
    border-radius: 0.25rem;
}

/* ── Details/summary (FAQ accordions) ───────────────────── */
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }

/* ── Tippy.js light-border theme ─────────────────────────── */
.tippy-box[data-theme~='light-border'] {
    background: #FFFFFF;
    color: #374151;
    border: 1px solid #DDD9D3;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.tippy-box[data-theme~='light-border'] .tippy-arrow { color: #FFFFFF; }
.tippy-box[data-theme~='light-border'] .tippy-arrow::before {
    border-top-color: #DDD9D3 !important;
}

/* ── Sortable column headers ─────────────────────────────── */
th.sort { user-select: none; }
th.sort:hover .sort-indicator { color: #2D7DD2; }
th.sort.asc .sort-indicator::after { content: ' \2191'; }
th.sort.desc .sort-indicator::after { content: ' \2193'; }

/* ── CTA glow effect (2026 SaaS trend) — enhanced Hegel ──── */
/* NOTE: .btn-glow base styles consolidated below in section 2 (shimmer + arrow) — Hegel */

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #F7F5F2; }
::-webkit-scrollbar-thumb { background: #D1CFC9; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #B8B5AE; }


/* ── "The Gap Reveal" — enterprise signature animation — Hegel ──
 *  4-layer system: ambient glow → document outlines → gap highlights → scan line
 *  Timing: documents draw (0–2.8s) → gaps illuminate (2.8–3.6s) → scan begins (4s+)
 *  Easing: ease-out-expo for entrances, ease-in-out-quint for ambient loops
 *  Research: Linear grid-dots, Stripe WebGL mesh, Vercel globe, Arc layered SVG
 */

/* ── Layer 1: Ambient gradient pulse (CSS @property) ──────── */
@property --glow-opacity {
    syntax: "<number>";
    initial-value: 0.03;
    inherits: false;
}

.gap-reveal {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.gap-reveal__ambient {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(ellipse 50% 35% at 58% 42%, rgba(45, 125, 210, var(--glow-opacity)), transparent);
    animation: ambientPulse 16s cubic-bezier(0.83, 0, 0.17, 1) infinite;
}

@keyframes ambientPulse {
    0%, 100% { --glow-opacity: 0.03; }
    50%      { --glow-opacity: 0.07; }
}

/* ── Layer 2: Document outlines (SVG stroke-dasharray) ────── */
.gap-reveal svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Document rectangles — two overlapping outlines */
.gap-reveal .doc-outline {
    fill: none;
    stroke: #2D7DD2;
    stroke-width: 1.2;
    opacity: 0.5;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: drawPath 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.gap-reveal .doc-outline--second {
    stroke: #7BAED4;
    opacity: 0.35;
    animation-delay: 0.4s;
}

/* Section divider lines inside documents */
.gap-reveal .doc-section {
    fill: none;
    stroke: #2D7DD2;
    stroke-width: 0.6;
    opacity: 0;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: drawPath 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.gap-reveal .doc-section:nth-child(1) { animation-delay: 0.8s; }
.gap-reveal .doc-section:nth-child(2) { animation-delay: 1.0s; }
.gap-reveal .doc-section:nth-child(3) { animation-delay: 1.2s; }
.gap-reveal .doc-section:nth-child(4) { animation-delay: 1.4s; }
.gap-reveal .doc-section:nth-child(5) { animation-delay: 0.9s; }
.gap-reveal .doc-section:nth-child(6) { animation-delay: 1.1s; }
.gap-reveal .doc-section:nth-child(7) { animation-delay: 1.3s; }

@keyframes drawPath {
    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* Scope text lines (tiny dashes simulating text) */
.gap-reveal .scope-line {
    fill: none;
    stroke: #B8B5AE;
    stroke-width: 0.8;
    stroke-linecap: round;
    opacity: 0;
    animation: fadeInSubtle 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.gap-reveal .scope-line:nth-child(n+8)  { animation-delay: 1.2s; }
.gap-reveal .scope-line:nth-child(n+12) { animation-delay: 1.5s; }
.gap-reveal .scope-line:nth-child(n+16) { animation-delay: 1.8s; }

@keyframes fadeInSubtle {
    from { opacity: 0; }
    to   { opacity: 0.4; }
}

/* ── Layer 3: Gap highlights (blue accent regions + dashed lines) — Hegel ─ */
.gap-reveal .gap-region {
    fill: rgba(45, 125, 210, 0);
    stroke: none;
    animation: revealGap 0.8s cubic-bezier(0.16, 1, 0.3, 1) 2.8s forwards;
}

@keyframes revealGap {
    to { fill: rgba(45, 125, 210, 0.06); }
}

.gap-reveal .gap-line {
    fill: none;
    stroke: #1B5FA0;
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
    stroke-linecap: round;
    opacity: 0;
    animation: revealGapLine 0.6s cubic-bezier(0.16, 1, 0.3, 1) 3.2s forwards;
}

.gap-reveal .gap-line:nth-of-type(2) { animation-delay: 3.4s; }
.gap-reveal .gap-line:nth-of-type(3) { animation-delay: 3.6s; }

@keyframes revealGapLine {
    to { opacity: 0.65; }
}

/* Gap markers — small blue diamonds at gap locations — Hegel */
.gap-reveal .gap-marker {
    fill: #1B5FA0;
    opacity: 0;
    animation: markerPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards,
               markerBreath 4s cubic-bezier(0.83, 0, 0.17, 1) infinite;
    animation-delay: 3.4s, 4.2s;
}

.gap-reveal .gap-marker:nth-of-type(2) { animation-delay: 3.6s, 4.4s; }
.gap-reveal .gap-marker:nth-of-type(3) { animation-delay: 3.8s, 4.6s; }

@keyframes markerPop {
    0%   { opacity: 0; transform: scale(0.5); }
    100% { opacity: 0.7; transform: scale(1); }
}

@keyframes markerBreath {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 0.8; }
}

/* ── Layer 4: Scan line (continuous analysis metaphor) ─────── */
.gap-reveal .scan-line {
    fill: rgba(45, 125, 210, 0.06);
    animation: scanDown 5s cubic-bezier(0.25, 0.1, 0.25, 1) 4s 2;
    transform-origin: center;
}

@keyframes scanDown {
    0%   { transform: translateY(-100%); opacity: 0; }
    5%   { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(900px); opacity: 0; }
}

/* Connection lines between matching sections (blue, solid) */
.gap-reveal .match-line {
    fill: none;
    stroke: #2D7DD2;
    stroke-width: 0.8;
    opacity: 0;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: drawMatch 1.6s cubic-bezier(0.16, 1, 0.3, 1) 2.2s forwards;
}

.gap-reveal .match-line:nth-of-type(2) { animation-delay: 2.5s; }
.gap-reveal .match-line:nth-of-type(3) { animation-delay: 2.8s; }

@keyframes drawMatch {
    to {
        stroke-dashoffset: 0;
        opacity: 0.2;
    }
}

/* ── Additional entrance animations (Move 4) — Hegel ────── */
.animate-on-scroll.fade-left {
    opacity: 0;
    transform: translateX(-24px);
}
.animate-on-scroll.fade-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}
.animate-on-scroll.fade-right {
    opacity: 0;
    transform: translateX(24px);
}
.animate-on-scroll.fade-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}
.animate-on-scroll.scale-in {
    opacity: 0;
    transform: scale(0.9);
}
.animate-on-scroll.scale-in.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* ── Gradient text utility — Hegel ─────────────────────── */
.text-gradient-brand {
    background: linear-gradient(135deg, #2D7DD2 0%, #1B5FA0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Stat number accent — Hegel ──────────────────────────── */
.stat-number {
    background: linear-gradient(135deg, #2D7DD2 30%, #1B5FA0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Trust badge enhanced — Hegel ───────────────────────── */
.trust-badge {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid #ECEAE5;
    background: #FFFFFF;
    font-size: 0.8125rem;
    color: #6B6862;
    transition: all 0.2s ease;
}
.trust-badge:hover {
    border-color: #2D7DD2;
    box-shadow: 0 2px 8px rgba(45, 125, 210, 0.08);
}
.trust-badge svg { color: #2D7DD2; flex-shrink: 0; }

/* ── 1. Card hover micro-interactions — Hegel ──────────── */
.card-hover {
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.card-hover:hover {
    transform: translateY(-2px);
}
/* Accent glow variants */
.card-hover.glow-brand:hover {
    box-shadow: 0 4px 20px rgba(45, 125, 210, 0.12), 0 1px 3px rgba(0,0,0,0.04);
}
.card-hover.glow-success:hover {
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.12), 0 1px 3px rgba(0,0,0,0.04);
}
/* Icon scale on card hover (group-hover pattern) */
.card-hover .card-icon {
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.card-hover:hover .card-icon {
    transform: scale(1.05);
}

/* ── 2. CTA button shimmer + arrow animation — Hegel ───── */
@keyframes btnShimmer {
    0%   { transform: translateX(-100%) skewX(-15deg); }
    100% { transform: translateX(200%) skewX(-15deg); }
}
.btn-glow {
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(45, 125, 210, 0.3), 0 8px 32px rgba(45, 125, 210, 0.15);
    transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.btn-glow:hover {
    box-shadow: 0 6px 24px rgba(45, 125, 210, 0.45), 0 12px 48px rgba(45, 125, 210, 0.2);
    transform: translateY(-2px);
}
.btn-glow:active {
    transform: translateY(0) scale(0.99);
    box-shadow: 0 2px 8px rgba(45, 125, 210, 0.3);
}
.btn-glow::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
    transform: translateX(-100%) skewX(-15deg);
    pointer-events: none;
}
.btn-glow:hover::after {
    animation: btnShimmer 0.6s ease-out forwards;
}
/* Arrow slide on hover */
.btn-arrow {
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block;
}
.btn-glow:hover .btn-arrow,
a:hover > .btn-arrow {
    transform: translateX(4px);
}
/* Secondary button enhanced hover — Hegel */
.btn-secondary {
    transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease;
}
.btn-secondary:hover {
    border-color: #2D7DD2 !important;
    background-color: rgba(45, 125, 210, 0.04);
    color: #2D7DD2;
}

/* ── 3. Stats section enhancements — Hegel ─────────────── */
.stat-glow {
    text-shadow: 0 0 20px rgba(45, 125, 210, 0.3);
}
.stat-label {
    opacity: 0;
    transition: opacity 400ms ease 200ms;
}
.stat-label.is-visible {
    opacity: 1;
}
/* Stat dividers on desktop */
.stat-divider {
    display: none;
}
@media (min-width: 1024px) {
    .stat-divider {
        display: block;
        position: absolute;
        right: 0;
        top: 25%;
        height: 50%;
        width: 1px;
        background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.15), transparent);
        opacity: 0;
        transition: opacity 600ms ease 400ms;
    }
    .stat-divider.is-visible {
        opacity: 1;
    }
}

/* ── 4. How It Works stepper animations — Hegel ────────── */
@keyframes pulseRing {
    0%   { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}
.step-pulse-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #2D7DD2;
    opacity: 0;
    pointer-events: none;
}
.step-circle.is-active .step-pulse-ring {
    animation: pulseRing 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* Connector line draw animation */
.step-connector-animated {
    position: absolute;
    top: 24px;
    left: calc(50% + 28px);
    width: calc(100% - 56px);
    height: 0;
    border-top: 2px dashed #cbd5e1;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.step-connector-animated.is-drawn {
    transform: scaleX(1);
}

/* ── 5. Comparison table interactions — Hegel ──────────── */
.comparison-row {
    transition: background-color 200ms ease;
}
.comparison-row:hover .cg-col {
    background-color: rgba(45, 125, 210, 0.08);
}
/* Check/X entrance animations */
@keyframes checkPop {
    0%   { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes xFadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
.check-anim {
    opacity: 0;
}
.x-anim {
    opacity: 0;
}
.comparison-table.is-visible .check-anim {
    animation: checkPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}
.comparison-table.is-visible .x-anim {
    animation: xFadeIn 0.4s ease 0.3s forwards;
}
/* Gradient underline on CG header */
.cg-header-underline {
    position: relative;
}
.cg-header-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #2D7DD2, transparent);
    border-radius: 1px;
}

/* ── 6. Example Finding card effects — Hegel ───────────── */
/* Finding glow: static instead of pulsing — pulsing implies loading, static implies importance — Hegel */
.finding-glow {
    box-shadow: inset 4px 0 12px -4px rgba(220, 53, 69, 0.3);
}
/* Badge pulse removed: opacity flicker on severity text reduces readability — Hegel */
.badge-pulse.is-visible {
    /* static — no animation */
}

/* ── 7. Navbar scroll enhancement — Hegel ──────────────── */
.nav-scrolled {
    border-bottom-color: rgba(45, 125, 210, 0.15) !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

/* ── 8. Noise texture overlay (enterprise depth) — Hegel ─ */
.noise-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.025;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* ── 9. Scroll progress — removed: wrong pattern for landing pages — Hegel ── */
.scroll-progress {
    display: none;
}

/* ════════════════════════════════════════════════════════════
 *  ELITE MOTION SYSTEM — Hegel
 *  10-layer upgrade: parallax, choreography, spring physics,
 *  text reveals, ambient motion, cursor tilt, section transitions,
 *  loading state, table stagger, footer reveal
 * ════════════════════════════════════════════════════════════ */

/* ── 1. SCROLL-DRIVEN PARALLAX — Hegel ───────────────────── */
.parallax-slow {
    will-change: transform;
    transition: transform 0.05s linear;
}
.parallax-fast {
    will-change: transform;
    transition: transform 0.05s linear;
}

/* Blueprint grid drift: CSS animation removed, JS parallax handles transform — Hegel */

/* ── 2. STAGGERED ENTRANCE CHOREOGRAPHY — Hegel ─────────── */
/* Spring overshoot for stats */
@keyframes springScaleIn {
    0%   { opacity: 0; transform: scale(0.85); }
    70%  { opacity: 1; transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1); }
}
.animate-on-scroll.spring-scale {
    opacity: 0;
    transform: scale(0.85);
}
.animate-on-scroll.spring-scale.is-visible {
    animation: springScaleIn 0.5s var(--spring-stiff) forwards;
}
.animate-on-scroll.spring-scale.delay-1.is-visible { animation-delay: 0.12s; }
.animate-on-scroll.spring-scale.delay-2.is-visible { animation-delay: 0.24s; }
.animate-on-scroll.spring-scale.delay-3.is-visible { animation-delay: 0.36s; }

/* Cascade from top-right for stacked cards */
@keyframes cascadeDown {
    0%   { opacity: 0; transform: translate(16px, -16px); }
    100% { opacity: 1; transform: translate(0, 0); }
}
.animate-on-scroll.cascade-down {
    opacity: 0;
    transform: translate(16px, -16px);
}
.animate-on-scroll.cascade-down.is-visible {
    animation: cascadeDown 0.5s var(--spring-stiff) forwards;
}
.animate-on-scroll.cascade-down.delay-1.is-visible { animation-delay: 0.15s; }
.animate-on-scroll.cascade-down.delay-2.is-visible { animation-delay: 0.3s; }

/* Security badges ripple from center — Hegel */
@keyframes rippleIn {
    0%   { opacity: 0; transform: scale(0.8); }
    60%  { opacity: 1; transform: scale(1.04); }
    100% { opacity: 1; transform: scale(1); }
}
.animate-on-scroll.ripple-in {
    opacity: 0;
    transform: scale(0.8);
}
.animate-on-scroll.ripple-in.is-visible {
    animation: rippleIn 0.5s var(--spring-stiff) forwards;
}
/* Stagger from center out (items 0,1,2,3,4 → delays 0.2, 0.1, 0, 0.1, 0.2) */
.animate-on-scroll.ripple-in.ripple-d0.is-visible { animation-delay: 0.2s; }
.animate-on-scroll.ripple-in.ripple-d1.is-visible { animation-delay: 0.1s; }
.animate-on-scroll.ripple-in.ripple-d2.is-visible { animation-delay: 0s; }
.animate-on-scroll.ripple-in.ripple-d3.is-visible { animation-delay: 0.1s; }
.animate-on-scroll.ripple-in.ripple-d4.is-visible { animation-delay: 0.2s; }

/* ── 3. SPRING PHYSICS EASING (global upgrade) — Hegel ──── */
/* Override base entrance transition to use spring */
.animate-on-scroll {
    transition: opacity 0.5s var(--spring-stiff), transform 0.5s var(--spring-stiff);
}

/* ── 4. TEXT REVEAL — blur-to-sharp — Hegel ──────────────── */
@keyframes blurReveal {
    0%   { opacity: 0; filter: blur(4px); transform: translateY(8px); }
    100% { opacity: 1; filter: blur(0);   transform: translateY(0); }
}
.text-reveal {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(8px);
}
.text-reveal.is-visible {
    animation: blurReveal 0.6s var(--spring-stiff) forwards;
}
/* Stagger for word-split children */
.text-reveal-word {
    display: inline-block;
    opacity: 0;
    filter: blur(4px);
    transform: translateY(8px);
    transition: opacity 0.5s var(--spring-stiff),
                filter 0.5s var(--spring-stiff),
                transform 0.5s var(--spring-stiff);
}
.text-reveal-word.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* ── 5. AMBIENT MOTION — Hegel ───────────────────────────── */
/* Icon oscillation + stat glow pulse removed: jittery icons undermine enterprise trust,
   pulsing glow on numbers creates visual noise after count-up completes — Hegel */
.icon-ambient { /* no-op — class kept for markup compat */ }
.stat-glow-ambient { /* no-op — class kept for markup compat */ }

/* ── 6. CURSOR-REACTIVE TILT — Hegel ─────────────────────── */
.tilt-card {
    transform-style: preserve-3d;
    perspective: 800px;
    transition: transform 0.15s ease-out;
}
.tilt-card-inner {
    transition: transform 0.15s ease-out;
    will-change: transform;
}

/* ── 7. SECTION TRANSITIONS — Hegel ──────────────────────── */
/* Gradient dividers between sections */
.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(45, 125, 210, 0.12) 30%, rgba(45, 125, 210, 0.06) 70%, transparent 95%);
    border: none;
    margin: 0;
}

/* Stats section curved edges */
.stats-curve-top {
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 32px;
    overflow: hidden;
}
.stats-curve-top::before {
    content: '';
    display: block;
    width: 100%;
    height: 64px;
    background: linear-gradient(to bottom, #f8fafc, transparent);
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.stats-curve-bottom {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 32px;
    overflow: hidden;
}
.stats-curve-bottom::before {
    content: '';
    display: block;
    width: 100%;
    height: 64px;
    background: linear-gradient(to top, #f8fafc, transparent);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* ── 8. LOADING STATE — removed: hero skeleton flash felt like a render bug — Hegel ── */

/* ── 9. COMPARISON TABLE STAGGER — Hegel ─────────────────── */
/* Row-by-row reveal */
.comparison-row-reveal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s var(--spring-stiff), transform 0.4s var(--spring-stiff);
}
.comparison-row-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* CG column gradient fill removed: imperceptible delta on already-tinted cells — Hegel */
.cg-col-fill.is-visible { /* no-op */ }
/* SVG check draw animation */
@keyframes checkDraw {
    0%   { stroke-dashoffset: 24; opacity: 0; }
    30%  { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}
.check-draw {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    opacity: 0;
}
.comparison-table.is-visible .check-draw {
    animation: checkDraw 0.5s var(--spring-stiff) forwards;
}

/* Zap flash removed: imperceptible on 14px icon inside a table cell — Hegel */
.zap-flash.is-visible { /* no-op */ }

/* ── 10. FOOTER REVEAL — Hegel ───────────────────────────── */
.footer-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s var(--spring-stiff), transform 0.6s var(--spring-stiff);
}
.footer-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Trust badge wave entrance */
.trust-badge-reveal {
    opacity: 0;
    transform: scale(0.9) translateY(8px);
    transition: opacity 0.4s var(--spring-elastic), transform 0.4s var(--spring-elastic);
}
.trust-badge-reveal.is-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Testimonial choreography — Hegel */
.quote-mark-reveal {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.4s var(--spring-elastic), transform 0.4s var(--spring-elastic);
}
.quote-mark-reveal.is-visible {
    opacity: 1;
    transform: scale(1);
}
.quote-text-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s var(--spring-stiff) 0.15s, transform 0.5s var(--spring-stiff) 0.15s;
}
.quote-text-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.quote-attr-reveal {
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.4s var(--spring-stiff) 0.3s, transform 0.4s var(--spring-stiff) 0.3s;
}
.quote-attr-reveal.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ── Reduced motion — respect preferences — Hegel ──────── */
@media (prefers-reduced-motion: reduce) {
    /* Gap Reveal: snap all layers to final state, kill looping animations */
    .gap-reveal__ambient {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        --glow-opacity: 0.05;
    }
    .gap-reveal .doc-outline,
    .gap-reveal .doc-outline--second,
    .gap-reveal .doc-section {
        animation-duration: 0.001ms !important;
        stroke-dashoffset: 0 !important;
        opacity: 0.4 !important;
    }
    .gap-reveal .scope-line {
        animation-duration: 0.001ms !important;
        opacity: 0.3 !important;
    }
    .gap-reveal .gap-region {
        animation-duration: 0.001ms !important;
        fill: rgba(45, 125, 210, 0.06) !important;
    }
    .gap-reveal .gap-line {
        animation-duration: 0.001ms !important;
        opacity: 0.5 !important;
    }
    .gap-reveal .gap-marker {
        animation: none !important;
        opacity: 0.5 !important;
    }
    .gap-reveal .scan-line { animation: none !important; opacity: 0 !important; }
    .gap-reveal .match-line {
        animation-duration: 0.001ms !important;
        stroke-dashoffset: 0 !important;
        opacity: 0.15 !important;
    }
    .animate-on-scroll.fade-left,
    .animate-on-scroll.fade-right,
    .animate-on-scroll.scale-in { animation: none !important; opacity: 1 !important; transform: none !important; }
    .stat-number, .text-gradient-brand { -webkit-text-fill-color: #2D7DD2; }

    /* Micro-interactions: disable all new animations — Hegel */
    .card-hover { transition: none !important; }
    .card-hover:hover { transform: none !important; }
    .card-hover .card-icon { transition: none !important; }
    .card-hover:hover .card-icon { transform: none !important; }
    .btn-glow::after { animation: none !important; display: none; }
    .btn-arrow { transition: none !important; }
    .finding-glow { animation: none !important; }
    .badge-pulse.is-visible { animation: none !important; }
    .step-circle.is-active .step-pulse-ring { animation: none !important; opacity: 0 !important; }
    .step-connector-animated { transition: none !important; transform: scaleX(1) !important; }
    .stat-label { opacity: 1 !important; transition: none !important; }
    .stat-divider { opacity: 1 !important; transition: none !important; }
    .check-anim, .x-anim { animation: none !important; opacity: 1 !important; }
    .scroll-progress { display: none !important; }
    .noise-overlay { display: none !important; }

    /* Elite motion system: disable all — Hegel */
    .parallax-slow, .parallax-fast { transition: none !important; transform: none !important; }
    .blueprint-grid { animation: none !important; }
    .animate-on-scroll.spring-scale { animation: none !important; opacity: 1 !important; transform: none !important; }
    .animate-on-scroll.cascade-down { animation: none !important; opacity: 1 !important; transform: none !important; }
    .animate-on-scroll.ripple-in { animation: none !important; opacity: 1 !important; transform: none !important; }
    .text-reveal { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
    .text-reveal-word { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
    .icon-ambient { animation: none !important; }
    .stat-glow-ambient { animation: none !important; }
    .tilt-card, .tilt-card-inner { transform: none !important; transition: none !important; }
    .hero-skeleton { animation: none !important; opacity: 0 !important; display: none !important; }
    .comparison-row-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .cg-col-fill { animation: none !important; }
    .check-draw { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
    .zap-flash { animation: none !important; opacity: 1 !important; }
    .footer-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .trust-badge-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .quote-mark-reveal, .quote-text-reveal, .quote-attr-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}