/* ANIMATION — Subtle reveals only Progressive enhancement: content visible by default. Only hide when JS adds .kbm-js to . */ /* Default: fully visible (no JS / failed JS = content still shows) */ .reveal, .reveal-right { opacity: 1; transform: none; } /* JS-enabled: animate in */ html.kbm-js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } html.kbm-js .reveal.active { opacity: 1; transform: translateY(0); } html.kbm-js .reveal-right { opacity: 0; transform: translateX(28px); transition: opacity 0.6s ease, transform 0.6s ease; } html.kbm-js .reveal-right.active { opacity: 1; transform: translateX(0); } /* CRITICAL: article body must never stay hidden */ .single-content, .entry-content, .single-content.reveal, .entry-content.reveal { opacity: 1 !important; transform: none !important; visibility: visible !important; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-right, html.kbm-js .reveal, html.kbm-js .reveal-right { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Performance: content-visibility for long lists */ @media (min-width: 768px) { .card-grid > .card:nth-child(n+7), .kbm-feature-grid > *:nth-child(n+4) { content-visibility: auto; contain-intrinsic-size: 280px; } } img { max-width: 100%; height: auto; }