/* ============================================================
RecallRadar — Sentinel Design System
Single source of truth for all pages.
============================================================ */
/* ─── Google Fonts ─────────────────────────────────────────── */
/* Fonts are loaded via an explicit in the HTML (see index.html).
Vite drops nested remote @import fonts during build, so the head is
the load-bearing one — the @import here is intentionally removed. */
/* ─── CSS Custom Properties (Tokens) ───────────────────────── */
/* @generated-tokens start — edit design/tokens.json, run `make tokens` */
:root {
/* Navy background layers */
--navy-500: #2a3f6f;
--navy-600: #1e2f55;
--navy-700: #162240;
--navy-800: #0f1c35;
--navy-900: #0a1628;
--navy-950: #050d1f;
/* Signal amber accent */
--amber-400: #fbbf24;
--amber-500: #f59e0b;
--amber-600: #d97706;
/* Text */
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-muted: #475569;
--text-amber: #fbbf24;
/* Severity scale (Class I→III + unknown) */
--sev-high-bg: rgba(220,38,38,0.15);
--sev-high-text: #f87171;
--sev-high-border: rgba(220,38,38,0.25);
--sev-med-bg: rgba(245,158,11,0.15);
--sev-med-text: #fcd34d;
--sev-med-border: rgba(245,158,11,0.25);
--sev-low-bg: rgba(14,165,233,0.15);
--sev-low-text: #7dd3fc;
--sev-low-border: rgba(14,165,233,0.25);
--sev-unknown-bg: rgba(100,116,139,0.15);
--sev-unknown-text: #94a3b8;
--sev-unknown-border: rgba(100,116,139,0.25);
/* Source badge palette */
--badge-fda-bg: rgba(45,212,191,0.15);
--badge-fda-text: #2dd4bf;
--badge-fda-border: rgba(45,212,191,0.30);
--badge-cpsc-bg: rgba(249,115,22,0.15);
--badge-cpsc-text: #fb923c;
--badge-cpsc-border: rgba(249,115,22,0.30);
--badge-nhtsa-bg: rgba(59,130,246,0.15);
--badge-nhtsa-text: #60a5fa;
--badge-nhtsa-border: rgba(59,130,246,0.30);
--badge-eu-bg: rgba(99,102,241,0.15);
--badge-eu-text: #a5b4fc;
--badge-eu-border: rgba(99,102,241,0.30);
--badge-fsis-bg: rgba(127,29,29,0.15);
--badge-fsis-text: #fca5a5;
--badge-fsis-border: rgba(127,29,29,0.40);
--badge-france-bg: rgba(56,189,248,0.15);
--badge-france-text: #38bdf8;
--badge-france-border: rgba(56,189,248,0.30);
--badge-canada-bg: rgba(220,38,38,0.15);
--badge-canada-text: #f87171;
--badge-canada-border: rgba(220,38,38,0.30);
--badge-uk-bg: rgba(167,139,250,0.15);
--badge-uk-text: #a78bfa;
--badge-uk-border: rgba(167,139,250,0.30);
/* Font stacks */
--font-display: 'Space Grotesk', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'Courier New', monospace;
/* Fluid type scale */
--text-xs: clamp(0.70rem, 0.68rem + 0.10vw, 0.75rem);
--text-sm: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
--text-base: clamp(0.938rem, 0.91rem + 0.14vw, 1rem);
--text-lg: clamp(1.063rem, 1.03rem + 0.17vw, 1.125rem);
--text-xl: clamp(1.188rem, 1.15rem + 0.19vw, 1.25rem);
--text-2xl: clamp(1.375rem, 1.30rem + 0.38vw, 1.5rem);
--text-3xl: clamp(1.750rem, 1.65rem + 0.50vw, 1.875rem);
--text-4xl: clamp(2.125rem, 1.95rem + 0.88vw, 2.25rem);
--text-5xl: clamp(2.750rem, 2.40rem + 1.75vw, 3rem);
--text-6xl: clamp(3.250rem, 2.75rem + 2.50vw, 3.75rem);
/* Spacing (4px base) */
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 0.75rem;
--sp-4: 1rem;
--sp-5: 1.25rem;
--sp-6: 1.5rem;
--sp-8: 2rem;
--sp-10: 2.5rem;
--sp-12: 3rem;
--sp-16: 4rem;
--sp-24: 6rem;
/* Radii */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 18px;
--radius-2xl: 24px;
--radius-pill: 9999px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
--shadow-md: 0 4px 16px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.3);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.35);
--shadow-xl: 0 16px 48px rgba(0,0,0,0.55), 0 8px 20px rgba(0,0,0,0.4);
--shadow-amber: 0 0 32px 4px rgba(251,191,36,0.12);
--shadow-teal: 0 0 24px 3px rgba(45,212,191,0.10);
/* Transitions */
--transition-fast: 0.15s ease;
--transition-normal: 0.25s ease;
--transition-slow: 0.40s ease;
/* Animation durations */
--dur-sweep: 3s;
--dur-pulse: 1.8s;
--dur-arc: 2.5s;
--dur-fade: 0.5s;
--dur-slide: 0.5s;
--dur-shimmer: 1.8s;
--dur-accordion: 0.3s;
}
/* @generated-tokens end */
/* ─── Base Reset ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
background: var(--navy-950);
color: var(--text-primary);
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.6;
background: var(--navy-950);
color: var(--text-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ─── Typography helpers ────────────────────────────────────── */
.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }
.font-mono { font-family: var(--font-mono); }
/* ─── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--navy-900); }
::-webkit-scrollbar-thumb { background: var(--navy-500); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--navy-600); }
/* ─── Focus ──────────────────────────────────────────────────── */
:focus-visible {
outline: 2px solid var(--amber-400);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* ─── Skip link ─────────────────────────────────────────────── */
.skip-link {
position: absolute;
top: -100%;
left: var(--sp-4);
background: var(--amber-500);
color: var(--navy-950);
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius-md);
font-weight: 600;
z-index: 9999;
transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--sp-4); }
/* ============================================================
COMPONENTS
============================================================ */
/* ─── Buttons ───────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-5);
border-radius: var(--radius-lg);
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 600;
line-height: 1;
text-decoration: none;
cursor: pointer;
border: none;
transition: background var(--transition-fast), color var(--transition-fast),
box-shadow var(--transition-fast), border-color var(--transition-fast),
transform var(--transition-fast);
white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
background: var(--amber-500);
color: var(--navy-950);
box-shadow: var(--shadow-amber);
}
.btn-primary:hover { background: var(--amber-400); }
.btn-secondary {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--navy-600);
}
.btn-secondary:hover { border-color: var(--navy-500); color: var(--text-primary); }
.btn-ghost {
background: transparent;
color: var(--text-secondary);
padding: var(--sp-2) var(--sp-3);
}
.btn-ghost:hover { color: var(--text-primary); background: var(--navy-800); }
.btn-danger {
background: rgba(220,38,38,0.15);
color: #f87171;
border: 1px solid rgba(220,38,38,0.25);
}
.btn-danger:hover { background: rgba(220,38,38,0.25); }
.btn-sm { padding: var(--sp-2) var(--sp-4); font-size: var(--text-xs); border-radius: var(--radius-md); }
.btn-lg { padding: var(--sp-4) var(--sp-8); font-size: var(--text-base); border-radius: var(--radius-xl); }
/* ─── Chip / pill ────────────────────────────────────────────── */
.chip {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
padding: 2px var(--sp-2);
border-radius: var(--radius-pill);
font-size: var(--text-xs);
font-weight: 500;
white-space: nowrap;
border: 1px solid transparent;
line-height: 1.4;
}
/* ─── Severity chips ─────────────────────────────────────────── */
.sev-high { background: var(--sev-high-bg); color: var(--sev-high-text); border-color: var(--sev-high-border); }
.sev-med { background: var(--sev-med-bg); color: var(--sev-med-text); border-color: var(--sev-med-border); }
.sev-low { background: var(--sev-low-bg); color: var(--sev-low-text); border-color: var(--sev-low-border); }
.sev-unknown { background: var(--sev-unknown-bg); color: var(--sev-unknown-text); border-color: var(--sev-unknown-border); }
/* ─── Source badges ──────────────────────────────────────────── */
.source-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
border: 1px solid transparent;
white-space: nowrap;
}
.badge-fda { background: var(--badge-fda-bg); color: var(--badge-fda-text); border-color: var(--badge-fda-border); }
.badge-cpsc { background: var(--badge-cpsc-bg); color: var(--badge-cpsc-text); border-color: var(--badge-cpsc-border); }
.badge-nhtsa { background: var(--badge-nhtsa-bg); color: var(--badge-nhtsa-text); border-color: var(--badge-nhtsa-border); }
.badge-eu { background: var(--badge-eu-bg); color: var(--badge-eu-text); border-color: var(--badge-eu-border); }
.badge-fsis { background: var(--badge-fsis-bg); color: var(--badge-fsis-text); border-color: var(--badge-fsis-border); opacity: 0.65; }
.badge-france { background: var(--badge-france-bg); color: var(--badge-france-text); border-color: var(--badge-france-border); }
.badge-canada { background: var(--badge-canada-bg); color: var(--badge-canada-text); border-color: var(--badge-canada-border); }
.badge-uk { background: var(--badge-uk-bg); color: var(--badge-uk-text); border-color: var(--badge-uk-border); }
/* ─── Card ───────────────────────────────────────────────────── */
.card {
background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
border: 1px solid var(--navy-600);
border-radius: var(--radius-xl);
padding: var(--sp-5);
transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}
.card:hover { border-color: var(--navy-500); box-shadow: var(--shadow-md); }
.card-featured { border-color: rgba(251,191,36,0.35); box-shadow: var(--shadow-amber); }
/* ─── Nav ────────────────────────────────────────────────────── */
.nav-blur {
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
background: rgba(5,13,31,0.88);
}
.nav-item {
font-size: var(--text-sm);
color: var(--text-secondary);
text-decoration: none;
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius-md);
transition: color var(--transition-fast), background var(--transition-fast);
}
.nav-item:hover { color: var(--text-primary); }
.nav-item.active {
color: var(--text-primary);
background: var(--navy-700);
}
/* App sidebar nav */
.sidebar-item {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius-md);
font-size: var(--text-sm);
color: var(--text-secondary);
text-decoration: none;
transition: color var(--transition-fast), background var(--transition-fast);
cursor: pointer;
border: none;
background: none;
width: 100%;
text-align: left;
}
.sidebar-item:hover { color: var(--text-primary); background: var(--navy-700); }
.sidebar-item.active {
color: var(--amber-400);
background: rgba(251,191,36,0.08);
}
/* ─── Inputs ─────────────────────────────────────────────────── */
.input {
width: 100%;
background: var(--navy-900);
border: 1px solid var(--navy-600);
border-radius: var(--radius-md);
padding: var(--sp-3) var(--sp-4);
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--text-primary);
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:focus { border-color: var(--amber-500); box-shadow: 0 0 0 3px rgba(251,191,36,0.12); }
.input::placeholder { color: var(--text-muted); }
.input-mono {
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: 0.02em;
}
.label {
display: block;
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-secondary);
margin-bottom: var(--sp-2);
}
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
/* ─── Skeleton ───────────────────────────────────────────────── */
.skeleton {
background: linear-gradient(90deg, var(--navy-800) 25%, var(--navy-700) 50%, var(--navy-800) 75%);
background-size: 200% 100%;
border-radius: var(--radius-md);
animation: skeleton-shimmer var(--dur-shimmer) ease-in-out infinite;
}
/* ─── Code block ─────────────────────────────────────────────── */
.code-block {
background: #070f20;
border: 1px solid var(--navy-600);
border-radius: var(--radius-lg);
padding: var(--sp-4);
font-family: var(--font-mono);
font-size: var(--text-xs);
overflow-x: auto;
}
.code-key { color: #7dd3fc; }
.code-str { color: #a5b4fc; }
.code-num { color: #fcd34d; }
.code-bool { color: #f97316; }
.code-null { color: var(--text-muted); }
.code-comment { color: var(--text-muted); font-style: italic; }
/* ─── Section helpers ────────────────────────────────────────── */
.section-rule {
border: none;
height: 1px;
background: linear-gradient(90deg, transparent, var(--navy-500) 30%, var(--navy-500) 70%, transparent);
margin: 0;
}
.section-label {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--amber-500);
letter-spacing: 0.15em;
text-transform: uppercase;
}
/* ─── Glow utilities ─────────────────────────────────────────── */
.glow-amber { box-shadow: var(--shadow-amber); }
.glow-teal { box-shadow: var(--shadow-teal); }
.text-glow { text-shadow: 0 0 40px rgba(251,191,36,0.25); }
/* ─── Fallback recall tiles ──────────────────────────────────── */
.recall-tile {
width: 44px; height: 44px;
border-radius: var(--radius-md);
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
}
.tile-fda { background: linear-gradient(135deg, #134e4a, #0d9488); }
.tile-cpsc { background: linear-gradient(135deg, #7c2d12, #c2410c); }
.tile-nhtsa { background: linear-gradient(135deg, #1e3a5f, #1d4ed8); }
.tile-eu { background: linear-gradient(135deg, #312e81, #4f46e5); }
/* ─── Pricing card ───────────────────────────────────────────── */
.pricing-card {
background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
border: 1px solid var(--navy-600);
border-radius: var(--radius-xl);
transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}
.pricing-card:hover { border-color: var(--navy-500); box-shadow: var(--shadow-lg); }
.pricing-card.featured {
border-color: rgba(251,191,36,0.35);
box-shadow: 0 0 40px rgba(251,191,36,0.08);
}
/* ─── Status / health dots ───────────────────────────────────── */
.status-dot {
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.status-ok { background: #4ade80; }
.status-warn { background: var(--amber-400); }
.status-error { background: #f87171; }
.status-unknown { background: var(--text-muted); }
/* ─── Alert / notification ───────────────────────────────────── */
.alert-banner {
display: flex; align-items: flex-start; gap: var(--sp-3);
padding: var(--sp-4);
border-radius: var(--radius-lg);
border: 1px solid;
font-size: var(--text-sm);
}
.alert-info { background: rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.25); color: #93c5fd; }
.alert-warning { background: var(--sev-med-bg); border-color: var(--sev-med-border); color: var(--sev-med-text); }
.alert-error { background: var(--sev-high-bg); border-color: var(--sev-high-border); color: var(--sev-high-text); }
.alert-success { background: rgba(74,222,128,0.10); border-color: rgba(74,222,128,0.25); color: #86efac; }
/* ─── Table ──────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table th {
text-align: left;
font-size: var(--text-xs);
font-weight: 500;
color: var(--text-muted);
letter-spacing: 0.05em;
text-transform: uppercase;
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--navy-700);
}
.data-table td {
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--navy-800);
color: var(--text-secondary);
vertical-align: middle;
}
.data-table tr:hover td { background: var(--navy-800); }
.data-table tr:last-child td { border-bottom: none; }
/* ─── FAQ / Accordion ────────────────────────────────────────── */
.accordion-item {
border: 1px solid var(--navy-700);
border-radius: var(--radius-lg);
overflow: hidden;
transition: border-color var(--transition-normal);
}
.accordion-item:hover { border-color: var(--navy-500); }
.accordion-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--sp-5) var(--sp-6);
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: 500;
color: var(--text-primary);
background: var(--navy-800);
border: none;
cursor: pointer;
text-align: left;
transition: background var(--transition-fast);
}
.accordion-trigger:hover { background: var(--navy-700); }
.accordion-chevron {
flex-shrink: 0;
transition: transform var(--dur-accordion) ease;
color: var(--text-muted);
}
.accordion-item[open] .accordion-chevron,
.accordion-item.open .accordion-chevron { transform: rotate(180deg); }
.accordion-body {
overflow: hidden;
max-height: 0;
animation: accordion-close var(--dur-accordion) ease forwards;
}
.accordion-item[open] .accordion-body,
.accordion-item.open .accordion-body {
max-height: 600px;
animation: accordion-open var(--dur-accordion) ease forwards;
}
.accordion-content {
padding: var(--sp-4) var(--sp-6) var(--sp-5);
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.7;
background: var(--navy-900);
}
/* ─── KPI / stat tile ────────────────────────────────────────── */
.kpi-tile {
background: var(--navy-800);
border: 1px solid var(--navy-700);
border-radius: var(--radius-xl);
padding: var(--sp-5) var(--sp-6);
}
.kpi-value {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: 700;
color: var(--text-primary);
line-height: 1.1;
}
.kpi-label {
font-size: var(--text-xs);
color: var(--text-muted);
margin-top: var(--sp-1);
}
/* ─── Modal backdrop ─────────────────────────────────────────── */
.modal-backdrop {
position: fixed; inset: 0;
background: rgba(5,13,31,0.85);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 100;
display: flex; align-items: center; justify-content: center;
padding: var(--sp-4);
}
.modal-box {
background: var(--navy-800);
border: 1px solid var(--navy-600);
border-radius: var(--radius-2xl);
padding: var(--sp-6);
width: 100%;
max-width: 480px;
box-shadow: var(--shadow-xl);
animation: slide-up var(--dur-slide) ease-out;
}
/* ─── Toast ──────────────────────────────────────────────────── */
.toast {
position: fixed; bottom: var(--sp-6); right: var(--sp-6);
background: var(--navy-700);
border: 1px solid var(--navy-500);
border-radius: var(--radius-lg);
padding: var(--sp-3) var(--sp-4);
font-size: var(--text-sm);
color: var(--text-primary);
box-shadow: var(--shadow-lg);
z-index: 200;
animation: slide-up var(--dur-slide) ease-out;
}
/* ─── Divider ────────────────────────────────────────────────── */
.divider {
height: 1px;
background: var(--navy-700);
border: none;
}
/* ─── Empty state ────────────────────────────────────────────── */
.empty-state {
text-align: center;
padding: var(--sp-12) var(--sp-6);
color: var(--text-muted);
}
.empty-state-icon {
font-size: 2.5rem;
margin-bottom: var(--sp-4);
opacity: 0.4;
}
/* ============================================================
GLOBAL ANIMATION KIT
All keyframes + utility classes.
ALL animations are disabled under prefers-reduced-motion.
============================================================ */
/* ─── Keyframes ──────────────────────────────────────────────── */
@keyframes radar-sweep {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes arc-pulse {
0% { stroke-dashoffset: 200; opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes beam-travel {
0% { stroke-dashoffset: 150; opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes ping-dot {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.8); opacity: 0.4; }
}
@keyframes ping-ring {
0% { transform: scale(1); opacity: 0.5; }
100% { transform: scale(2.5); opacity: 0; }
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slide-up {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes slide-down {
from { transform: translateY(-10px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes slide-in-right {
from { transform: translateX(20px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@keyframes count-up {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes step-fade {
0%, 100% { opacity: 0.35; transform: scale(0.97); }
50% { opacity: 1; transform: scale(1); }
}
@keyframes accordion-open {
from { max-height: 0; opacity: 0; }
to { max-height: 600px; opacity: 1; }
}
@keyframes accordion-close {
from { max-height: 600px; opacity: 1; }
to { max-height: 0; opacity: 0; }
}
@keyframes scroll-reveal {
from { opacity: 0; transform: translateY(32px); }
to { opacity: 1; transform: translateY(0); }
}
/* ─── Animation utility classes ─────────────────────────────── */
.anim-radar-sweep {
animation: radar-sweep var(--dur-sweep) linear infinite;
transform-origin: center;
}
.anim-arc { animation: arc-pulse var(--dur-arc) ease-in-out infinite; }
.anim-arc-d1 { animation-delay: 0.6s; }
.anim-arc-d2 { animation-delay: 1.2s; }
.anim-arc-d3 { animation-delay: 1.8s; }
.anim-arc-d4 { animation-delay: 0.3s; }
.anim-beam { animation: beam-travel 2.2s ease-in-out infinite; }
.anim-beam-d1 { animation-delay: 0.0s; }
.anim-beam-d2 { animation-delay: 0.7s; }
.anim-ping { animation: ping-dot var(--dur-pulse) ease-in-out infinite; }
.anim-ping-ring { animation: ping-ring 2s ease-out infinite; }
.anim-fade-in { animation: fade-in var(--dur-fade) ease-out forwards; }
.anim-slide-up { animation: slide-up var(--dur-slide) ease-out forwards; }
.anim-slide-down { animation: slide-down var(--dur-slide) ease-out forwards; }
.anim-count-up { animation: count-up 0.6s ease-out forwards; }
.anim-step { animation: step-fade 3s ease-in-out infinite; }
.anim-step-d1 { animation-delay: 0s; }
.anim-step-d2 { animation-delay: 0.75s; }
.anim-step-d3 { animation-delay: 1.5s; }
.anim-step-d4 { animation-delay: 2.25s; }
/* scroll-reveal: add .revealed via IntersectionObserver */
.reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.revealed {
opacity: 1;
transform: none;
}
/* staggered children */
.reveal-stagger > * {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-stagger.revealed > *:nth-child(1) { opacity:1; transform:none; transition-delay:0.0s; }
.reveal-stagger.revealed > *:nth-child(2) { opacity:1; transform:none; transition-delay:0.1s; }
.reveal-stagger.revealed > *:nth-child(3) { opacity:1; transform:none; transition-delay:0.2s; }
.reveal-stagger.revealed > *:nth-child(4) { opacity:1; transform:none; transition-delay:0.3s; }
.reveal-stagger.revealed > *:nth-child(5) { opacity:1; transform:none; transition-delay:0.4s; }
.reveal-stagger.revealed > *:nth-child(n+6) { opacity:1; transform:none; transition-delay:0.5s; }
/* feed card stagger */
.feed-card { opacity: 0; }
.feed-card.visible { animation: slide-up var(--dur-slide) ease-out forwards; }
.feed-card:nth-child(2) { animation-delay: 0.10s; }
.feed-card:nth-child(3) { animation-delay: 0.20s; }
.feed-card:nth-child(4) { animation-delay: 0.30s; }
.feed-card:nth-child(5) { animation-delay: 0.40s; }
/* ─── Reduced-motion: kill every animation ───────────────────── */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
/* Skeleton falls back to a flat color */
.skeleton {
background: var(--navy-800) !important;
animation: none !important;
}
/* Accordion still works (toggled by JS adding/removing .open) */
.accordion-body {
max-height: none !important;
overflow: visible !important;
animation: none !important;
}
.accordion-item .accordion-body { max-height: 0 !important; overflow: hidden !important; }
.accordion-item.open .accordion-body { max-height: 9999px !important; }
/* reveal: already visible */
.reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
.feed-card { opacity: 1 !important; animation: none !important; }
/* SVG poster swap handled per-page (show #hero-poster, hide #hero-canvas) */
}
/* ─── Scroll-reveal helper script (inline, tiny) ─────────────── */
/* Usage: add class="reveal" or class="reveal-stagger" to any section.
Include this once per page:
*/