/* ============================================================================ ANTIGRAVITY.CSS - PDFTeq Site-Wide Animation System ============================================================================ Progressive-enhancement architecture: - Content is visible by default. - JS adds `.ag-js-enabled` to . - Only then are animation-ready elements hidden for reveal. ============================================================================ */ /* ========================================================================== 1. CUSTOM PROPERTIES (ANIMATION TOKENS) ========================================================================== */ :root { --ag-duration: 600ms; --ag-easing: cubic-bezier(0.22, 1, 0.36, 1); --ag-translate-y: 40px; --ag-delay: 0ms; --ag-bob-distance: -8px; --ag-bob-duration: 3s; } /* ========================================================================== 2. REVEAL - INITIAL HIDDEN STATE Only active when JavaScript has initialized (.ag-js-enabled on ). ========================================================================== */ .ag-js-enabled .ag-reveal { opacity: 0; transform: translateY(var(--ag-translate-y)); will-change: opacity, transform; transition: opacity var(--ag-duration) var(--ag-easing) var(--ag-delay), transform var(--ag-duration) var(--ag-easing) var(--ag-delay); } /* ========================================================================== 3. REVEAL - VISIBLE STATE ========================================================================== */ .ag-js-enabled .ag-reveal.ag-visible { opacity: 1; transform: translateY(0); } /* ========================================================================== 4. HERO BOB KEYFRAMES Applied only to designated hero children after entry animation completes. ========================================================================== */ @keyframes ag-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--ag-bob-distance)); } } .ag-js-enabled .ag-bob-active { animation: ag-bob var(--ag-bob-duration) ease-in-out infinite; /* Ensure the entry transform transition is overridden so bob takes over */ transition: none; } /* ========================================================================== 5. COUNTER HELPER STYLES ========================================================================== */ .ag-counter { /* Ensure tabular numerals for stable layout during count-up */ font-variant-numeric: tabular-nums; } /* ========================================================================== 6. REDUCED MOTION Respects user OS-level preference for reduced motion. ========================================================================== */ @media (prefers-reduced-motion: reduce) { /* Disable translateY movement; keep opacity fade only */ .ag-js-enabled .ag-reveal { transform: none !important; transition: opacity 250ms ease var(--ag-delay) !important; } .ag-js-enabled .ag-reveal.ag-visible { transform: none !important; } /* Disable continuous hero floating */ .ag-js-enabled .ag-bob-active { animation: none !important; } } /* ========================================================================== 7. BOOTSTRAP COMPATIBILITY - DO NOT OVERRIDE Ensure animation system never interferes with Bootstrap components. ========================================================================== */ .ag-js-enabled .collapse.ag-reveal, .ag-js-enabled .collapsing.ag-reveal, .ag-js-enabled .accordion-collapse.ag-reveal, .ag-js-enabled .modal.ag-reveal, .ag-js-enabled .dropdown-menu.ag-reveal, .ag-js-enabled .navbar-collapse.ag-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } /* ========================================================================== 8. PRINT - SHOW EVERYTHING ========================================================================== */ @media print { .ag-js-enabled .ag-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .ag-js-enabled .ag-bob-active { animation: none !important; } }