/* TVFP polish layer — scroll reveals + micro-interactions. Only active when JS adds .tvfp-motion to (gated, reduced-motion aware). Opacity/transform only: no layout shift, CLS-safe. */ @media (prefers-reduced-motion: no-preference) { html.tvfp-motion { scroll-behavior: smooth; } /* Reveal-on-scroll (class applied by JS only to below-the-fold elements) */ html.tvfp-motion .tvfp-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); } html.tvfp-motion .tvfp-in { opacity: 1; transform: none; } /* Button micro-interaction: gentle lift */ html.tvfp-motion .x-anchor-button { transition: all 0.25s ease; } html.tvfp-motion .x-anchor-button:hover, html.tvfp-motion .x-anchor-button:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14); } html.tvfp-motion .x-anchor-button:active { transform: translateY(0); transition-duration: 0.1s; } /* Insight cards on the blog archive */ html.tvfp-motion article.hentry { transition: transform 0.3s ease, box-shadow 0.3s ease; } html.tvfp-motion .x-main article.hentry:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1); } }