/** * CHP Anim Pro – richer scroll reveal + stagger + hover for headings & cards. * Additive to chp-animations.css. No CLS: initial hide only when .chp-anim-ready on . * Only opacity/transform/filter/clip-path. prefers-reduced-motion supported. */ /* ------------------------------------------------------------------------- Scope: only when JS has run (avoids FOUC / CLS) ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- Scope: only when JS has run (avoids FOUC / CLS) ------------------------------------------------------------------------- */ html.chp-anim-ready .chp-anim-pro:not(.is-inview) { opacity: 0 !important; /* Force hide only when ready and not checked */ visibility: hidden; } html.chp-anim-ready .chp-anim-pro.is-inview { opacity: 1 !important; visibility: visible; } /* ------------------------------------------------------------------------- Base durations/delays (CSS vars set by JS where needed) ------------------------------------------------------------------------- */ .chp-anim-pro { --chp-dur: 0.52s; --chp-delay: 0ms; transition-property: opacity, transform, filter; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); transition-duration: var(--chp-dur, 0.52s); transition-delay: var(--chp-delay, 0ms); } .chp-anim-pro.is-inview { opacity: 1; transform: none; filter: none; } /* ------------------------------------------------------------------------- Headings – split reveal (overlay mask) + slide-up + fade ------------------------------------------------------------------------- */ .chp-anim-pro--heading { --chp-dur: 0.56s; transform: translateY(16px); } .chp-anim-pro--heading.is-inview { transform: translateY(0); } /* Curtain overlay: pseudo on wrapper, slides right on reveal */ .chp-anim-pro-heading-wrap { position: relative; overflow: hidden; } .chp-anim-pro-heading-wrap::before { content: ""; position: absolute; inset: 0; background: currentColor; transform: translateX(0); transform-origin: left center; transition: transform var(--chp-dur) cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--chp-delay); pointer-events: none; } .chp-anim-pro-heading-wrap.is-inview::before { transform: translateX(100%); } /* Gradient heading: sheen sweep once on enter */ .chp-anim-pro-heading-wrap.chp-heading-gradient::after { content: ""; position: absolute; inset: -50% 0; width: 60%; background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.12) 45%, rgba(255, 255, 255, 0.18) 50%, transparent 55%); transform: translateX(-100%) skewX(-12deg); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--chp-delay) + 0.15s); pointer-events: none; } html.chp-anim-ready .chp-anim-pro-heading-wrap.chp-heading-gradient::after { transform: translateX(-100%) skewX(-12deg); } .chp-anim-pro-heading-wrap.chp-heading-gradient.is-inview::after { transform: translateX(180%) skewX(-12deg); } /* ------------------------------------------------------------------------- Cards (loop-item root) – lift + slight rotateX 3D ------------------------------------------------------------------------- */ .chp-anim-pro--card { --chp-dur: 0.58s; transform: translateY(24px) perspective(800px) rotateX(6deg); opacity: 0; } html.chp-anim-ready .chp-anim-pro--card { opacity: 0; } .chp-anim-pro--card.is-inview { transform: translateY(0) perspective(800px) rotateX(0); opacity: 1; } /* ------------------------------------------------------------------------- Card inner stagger items ------------------------------------------------------------------------- */ .chp-anim-pro--stagger { --chp-dur: 0.42s; transform: translateY(10px); opacity: 0; } .chp-anim-pro--stagger.is-inview { transform: translateY(0); opacity: 1; } /* Button "pop" */ .chp-anim-pro--stagger.chp-anim-pro--pop { transform: scale(0.98); } .chp-anim-pro--stagger.chp-anim-pro--pop.is-inview { transform: scale(1); } /* ------------------------------------------------------------------------- Media – image reveal (clip-path inset) + scale down ------------------------------------------------------------------------- */ .chp-anim-pro--media { --chp-dur: 0.6s; transform: scale(1.03); opacity: 0; } .chp-anim-pro-media-wrap { overflow: hidden; } .chp-anim-pro-media-wrap .chp-anim-pro--media { clip-path: inset(0 0 100% 0); transition-property: opacity, transform, clip-path; } html.chp-anim-ready .chp-anim-pro-media-wrap .chp-anim-pro--media { clip-path: inset(0 0 100% 0); } .chp-anim-pro-media-wrap.is-inview .chp-anim-pro--media, .chp-anim-pro--media.is-inview { clip-path: inset(0 0 0 0); transform: scale(1); opacity: 1; } /* Background-image cover (e.g. .chp-loop-hover): zoom-out + overlay */ .chp-anim-pro-bg-wrap { overflow: hidden; position: relative; } .chp-anim-pro-bg-wrap.chp-anim-pro--media { transform: scale(1.08); opacity: 0; transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; transition-delay: var(--chp-delay); } html.chp-anim-ready .chp-anim-pro-bg-wrap.chp-anim-pro--media { opacity: 0; } .chp-anim-pro-bg-wrap.is-inview.chp-anim-pro--media { transform: scale(1); opacity: 1; } .chp-anim-pro-bg-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, transparent 45%); opacity: 0; transition: opacity 0.5s ease; transition-delay: var(--chp-delay); pointer-events: none; } .chp-anim-pro-bg-wrap.is-inview::after { opacity: 1; } /* ------------------------------------------------------------------------- Hover / focus (desktop + a11y) ------------------------------------------------------------------------- */ @media (hover: hover) { .chp-anim-pro-card-hover { transition: transform 0.25s ease, box-shadow 0.25s ease; } .chp-anim-pro-card-hover:hover, .chp-anim-pro-card-hover:focus-within { /* transform: translateY(-4px); -- User disliked this */ /* box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); -- User disliked this look without padding */ opacity: 0.96; /* Subtle feedback instead */ } .chp-anim-pro-card-hover .chp-anim-pro-hover-zoom { transition: transform 0.35s ease; } .chp-anim-pro-card-hover:hover .chp-anim-pro-hover-zoom, .chp-anim-pro-card-hover:focus-within .chp-anim-pro-hover-zoom { transform: scale(1.03); } .chp-anim-pro-title-link { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: background-size 0.2s ease; } .chp-anim-pro-card-hover:hover .chp-anim-pro-title-link, .chp-anim-pro-card-hover:focus-within .chp-anim-pro-title-link, .chp-anim-pro-title-link:hover { background-size: 100% 1px; } } /* ------------------------------------------------------------------------- ACF modules (premium reveal – enhance existing) ------------------------------------------------------------------------- */ .chp-anim-pro-module .chp-module__title.chp-anim-pro--heading { --chp-dur: 0.5s; } .chp-anim-pro-module .chp-module__body>* { --chp-dur: 0.4s; } /* ------------------------------------------------------------------------- prefers-reduced-motion ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.chp-anim-ready .chp-anim-pro, .chp-anim-pro, .chp-anim-pro.is-inview { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; transition-delay: 0ms !important; clip-path: none !important; } .chp-anim-pro-heading-wrap::before, .chp-anim-pro-heading-wrap.chp-heading-gradient::after { display: none !important; } } /* ------------------------------------------------------------------------- Global off (same flag as base animations) ------------------------------------------------------------------------- */ body.chp-anim-off .chp-anim-pro, body.chp-anim-off .chp-anim-pro.is-inview { opacity: 1 !important; transform: none !important; transition: none !important; } body.chp-anim-off .chp-anim-pro-heading-wrap::before, body.chp-anim-off .chp-anim-pro-heading-wrap::after { display: none !important; }