/* ── Scroll-reveal + hover micro-interactions ──────────────────────────────── Progressive enhancement: the hidden state activates only after anim.js adds the .js-anim flag to , so visitors without JS always see full content. Uses the `translate` property for the reveal so it never clobbers existing `transform` rules; hover uses `transform` so the two compose cleanly. */ .js-anim [data-reveal] { opacity: 0; translate: 0 16px; transition: opacity .5s ease, translate .5s cubic-bezier(.22, .61, .36, 1); } .js-anim [data-reveal].anim-hover { transition: opacity .5s ease, translate .5s cubic-bezier(.22, .61, .36, 1), transform .22s ease, box-shadow .22s ease; } .js-anim [data-reveal].is-visible { opacity: 1; translate: 0 0; } /* Subtle lift for cards on hover */ .js-anim .anim-hover { transition: transform .22s ease, box-shadow .22s ease; } .js-anim .anim-hover:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(20, 45, 80, .13); } /* Image tiles: gentle zoom inside a clipped frame on hover */ .js-anim .anim-zoom { overflow: hidden; } .js-anim .anim-zoom img { transition: transform .4s ease; will-change: transform; } .js-anim .anim-zoom:hover img { transform: scale(1.05); } /* Respect users who prefer reduced motion: no movement, content shown as-is. */ @media (prefers-reduced-motion: reduce) { .js-anim [data-reveal] { opacity: 1; translate: none; transition: none; } .js-anim .anim-hover { transition: none; } .js-anim .anim-hover:hover { transform: none; box-shadow: none; } .js-anim .anim-zoom img { transition: none; } .js-anim .anim-zoom:hover img { transform: none; } }