/* ═══════════════════════════════════════════════════════ CSM Animations — shared across all pages Fluid entrance animations using IntersectionObserver. Elements start hidden (opacity:0, translated) and reveal via the .anim-in class added by JS. Disable via [data-animations="off"] on . ═══════════════════════════════════════════════════════ */ /* ── Base: hidden state ── */ .anim-fade-up { opacity: 0; transform: translateY(28px); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .anim-fade-up.anim-in { opacity: 1; transform: none; } /* Slide from left */ .anim-fade-left { opacity: 0; transform: translateX(-32px); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .anim-fade-left.anim-in { opacity: 1; transform: none; } /* Slide from right */ .anim-fade-right { opacity: 0; transform: translateX(32px); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .anim-fade-right.anim-in { opacity: 1; transform: none; } /* Scale pop */ .anim-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .anim-scale.anim-in { opacity: 1; transform: none; } /* ── Stagger delays for children ── */ .anim-stagger > *:nth-child(1) { transition-delay: 0ms; } .anim-stagger > *:nth-child(2) { transition-delay: 60ms; } .anim-stagger > *:nth-child(3) { transition-delay: 120ms; } .anim-stagger > *:nth-child(4) { transition-delay: 180ms; } .anim-stagger > *:nth-child(5) { transition-delay: 240ms; } .anim-stagger > *:nth-child(6) { transition-delay: 300ms; } .anim-stagger > *:nth-child(7) { transition-delay: 360ms; } .anim-stagger > *:nth-child(8) { transition-delay: 420ms; } .anim-stagger > *:nth-child(9) { transition-delay: 480ms; } .anim-stagger > *:nth-child(10) { transition-delay: 540ms; } .anim-stagger > *:nth-child(11) { transition-delay: 600ms; } .anim-stagger > *:nth-child(12) { transition-delay: 660ms; } /* ── Section-level stagger ── */ [data-anim-delay="1"] { transition-delay: 80ms !important; } [data-anim-delay="2"] { transition-delay: 160ms !important; } [data-anim-delay="3"] { transition-delay: 240ms !important; } [data-anim-delay="4"] { transition-delay: 320ms !important; } [data-anim-delay="5"] { transition-delay: 400ms !important; } /* ── Hover effects (subtle glow, no translate) ── */ .stat-card { transition: box-shadow 0.25s ease; } .stat-card:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10); } .alert-card { transition: box-shadow 0.25s ease !important; } .alert-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important; } .card-panel { transition: box-shadow 0.25s ease; } .card-panel:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); } .gen-card { transition: box-shadow 0.25s ease; } .gen-card:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10); } /* ── Table row entrance ── */ .anim-table tbody tr { opacity: 0; transform: translateY(10px); animation: row-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; } .anim-table tbody tr:nth-child(1) { animation-delay: 0.02s; } .anim-table tbody tr:nth-child(2) { animation-delay: 0.04s; } .anim-table tbody tr:nth-child(3) { animation-delay: 0.06s; } .anim-table tbody tr:nth-child(4) { animation-delay: 0.08s; } .anim-table tbody tr:nth-child(5) { animation-delay: 0.10s; } .anim-table tbody tr:nth-child(6) { animation-delay: 0.12s; } .anim-table tbody tr:nth-child(7) { animation-delay: 0.14s; } .anim-table tbody tr:nth-child(8) { animation-delay: 0.16s; } .anim-table tbody tr:nth-child(9) { animation-delay: 0.18s; } .anim-table tbody tr:nth-child(10) { animation-delay: 0.20s; } @keyframes row-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ── Bar chart bars: grow from bottom ── */ .bar-chart .bar { transform-origin: bottom center; animation: bar-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; } .bar-chart .bar:nth-child(1) { animation-delay: 0.05s; } .bar-chart .bar:nth-child(2) { animation-delay: 0.12s; } .bar-chart .bar:nth-child(3) { animation-delay: 0.19s; } .bar-chart .bar:nth-child(4) { animation-delay: 0.26s; } .bar-chart .bar:nth-child(5) { animation-delay: 0.33s; } .bar-chart .bar:nth-child(6) { animation-delay: 0.40s; } @keyframes bar-grow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } } /* ── Progress bar fill animation ── */ .progress .determinate { animation: progress-fill 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes progress-fill { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } } /* ── Aging row stagger ── */ .aging-row { opacity: 0; transform: translateX(-16px); animation: aging-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; } .aging-row:nth-child(1) { animation-delay: 0.05s; } .aging-row:nth-child(2) { animation-delay: 0.12s; } .aging-row:nth-child(3) { animation-delay: 0.19s; } .aging-row:nth-child(4) { animation-delay: 0.26s; } @keyframes aging-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } } /* ── Logo panel (static, no float) ── */ /* ── Number counter animation ── */ .counter-up { display: inline-block; } /* ── Dropzone pulse on drag ── */ .dropzone.drag-over { animation: dropzone-pulse 0.6s ease infinite alternate; } @keyframes dropzone-pulse { from { box-shadow: 0 0 0 0 rgba(58, 91, 64, 0.2); } to { box-shadow: 0 0 0 12px rgba(58, 91, 64, 0); } } /* ═══════════════════════════════════════════════════════ DISABLE ALL ANIMATIONS — user setting ═══════════════════════════════════════════════════════ */ [data-animations="off"] .anim-fade-up, [data-animations="off"] .anim-fade-left, [data-animations="off"] .anim-fade-right, [data-animations="off"] .anim-scale { opacity: 1 !important; transform: none !important; transition: none !important; } [data-animations="off"] .anim-table tbody tr, [data-animations="off"] .aging-row { opacity: 1 !important; transform: none !important; animation: none !important; } [data-animations="off"] .bar-chart .bar { animation: none !important; opacity: 1 !important; transform: none !important; } [data-animations="off"] .progress .determinate { animation: none !important; } [data-animations="off"] .stat-card:hover, [data-animations="off"] .alert-card:hover, [data-animations="off"] .card-panel:hover, [data-animations="off"] .gen-card:hover { box-shadow: var(--csm-shadow) !important; } /* ── Respect OS reduced-motion preference ── */ @media (prefers-reduced-motion: reduce) { .anim-fade-up, .anim-fade-left, .anim-fade-right, .anim-scale { opacity: 1; transform: none; transition: none; } .anim-table tbody tr, .aging-row { opacity: 1; transform: none; animation: none; } .bar-chart .bar, .progress .determinate { animation: none; opacity: 1; transform: none; } .stat-card:hover, .alert-card:hover, .card-panel:hover, .gen-card:hover { box-shadow: var(--csm-shadow); } }