/* ===== HBC — site-wide animations (assets/animations.css) ===== Paired with assets/animations.js (auto-tags elements with .anim, IntersectionObserver adds .in-view). Opacity + transform only. */ /* ---------- Reveal states ---------- .anim (hidden) has NO transition — it is applied by JS after load and must snap instantly (no visible fade-out). Transitions are enabled a frame later via .anim-ready on , so only the REVEAL animates. */ .anim{ opacity: 0; transform: translateY(24px); } .anim-ready .anim{ transition: opacity 0.5s ease-out, transform 0.5s ease-out; } .anim.in-view{ opacity: 1; transform: none; } img.anim{ transform: translateY(0) scale(0.98); } img.anim.in-view{ transform: scale(1); } /* ---------- Hero media slow zoom-out on load ---------- */ @keyframes anim-hero-zoom{ from{ transform: scale(1.05); } to{ transform: scale(1); } } .anim-zoom{ animation: anim-hero-zoom 1.5s cubic-bezier(.22,.61,.36,1) both; } /* ---------- Micro-interactions ---------- */ @media (prefers-reduced-motion: no-preference){ /* Buttons: smooth color/background transition */ .anim-ready .btn, .anim-ready .nav__cta, .anim-ready .page-hero__cta, .anim-ready .card__btn, .anim-ready .tp-link, .anim-ready .card__cta-chip, .anim-ready .nav__drawer-cta{ transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, opacity 0.5s ease-out, transform 0.5s ease-out; } /* Arrow slides 4px right on hover */ .btn .arrow, .nav__cta .arrow, .page-hero__cta .arrow, .card__btn .arrow, .tp-link .arrow, .card__cta-chip .arrow, .nav__drawer-cta .arrow{ display: inline-block; transition: transform .35s cubic-bezier(.22,.61,.36,1); } .btn:hover .arrow, .nav__cta:hover .arrow, .page-hero__cta:hover .arrow, .card__btn:hover .arrow, .tp-link:hover .arrow, .card:hover .card__cta-chip .arrow, .card__cta-chip:hover .arrow, .nav__drawer-cta:hover .arrow{ transform: translateX(4px); } /* Cards: gentle lift + soft shadow (transition includes reveal props) */ .anim-ready .card, .anim-ready .rv-card{ transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease, opacity 0.5s ease-out; } .card:hover{ transform: translateY(-6px); box-shadow: 0 22px 44px rgba(20,18,16,.16); } .rv-card:hover{ transform: translateY(-6px); box-shadow: 0 16px 36px rgba(20,18,16,.10); } /* Images: very subtle zoom inside their frame */ .anim-ready .card__front img, .anim-ready .om-portrait img{ transition: transform .8s cubic-bezier(.22,.61,.36,1), opacity 0.5s ease-out; } .card:hover .card__front img{ transform: scale(1.045); } .om-portrait:hover img{ transform: scale(1.03); } .om-portrait{ overflow: hidden; } } /* ---------- Reduced motion: everything visible, nothing moves ---------- */ @media (prefers-reduced-motion: reduce){ .anim{ opacity: 1; transform: none; transition: none; } .anim-zoom{ animation: none; } }