/** * CHP Anim Full – site-wide scroll reveal, progressive reveal, micro-interactions. * Headings, dividers, loop cards, ACF modules. No CLS: initial state only when .chp-anim-ready on . * Only opacity/transform/filter/clip-path. prefers-reduced-motion supported. */ /* ------------------------------------------------------------------------- Scope: hide only after JS adds .chp-anim-ready (avoids FOUC/CLS) ------------------------------------------------------------------------- */ html.chp-anim-ready .chp-anim.chp-anim--heading:not(.is-inview), html.chp-anim-ready .chp-anim.chp-anim--divider:not(.is-inview), html.chp-anim-ready .chp-anim.chp-anim--card:not(.is-inview), html.chp-anim-ready .chp-anim.chp-anim--media:not(.is-inview), html.chp-anim-ready .chp-anim.chp-anim--tag:not(.is-inview), html.chp-anim-ready .chp-anim.chp-anim--title:not(.is-inview), html.chp-anim-ready .chp-anim.chp-anim--date:not(.is-inview), html.chp-anim-ready .chp-anim.chp-anim--text:not(.is-inview), html.chp-anim-ready .chp-anim.chp-anim--button:not(.is-inview), html.chp-anim-ready .chp-anim.chp-anim--video:not(.is-inview), html.chp-anim-ready .chp-anim.chp-anim--module:not(.is-inview) { opacity: 0; } /* ------------------------------------------------------------------------- Base: durations/delays via CSS vars ------------------------------------------------------------------------- */ .chp-anim { --chp-dur: 0.55s; --chp-delay: 0ms; transition-property: opacity, transform, filter, clip-path; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); transition-duration: var(--chp-dur); transition-delay: var(--chp-delay); } .chp-anim.is-inview { opacity: 1; transform: none; filter: none; clip-path: none; } /* ------------------------------------------------------------------------- Headings (h1/h2/h3) – mask reveal + slide ------------------------------------------------------------------------- */ .chp-anim-heading-wrap { position: relative; overflow: hidden; } .chp-anim.chp-anim--heading { --chp-dur: 0.6s; transform: translateY(14px); } .chp-anim.chp-anim--heading.is-inview { transform: translateY(0); } .chp-anim-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-heading-wrap.is-inview::before { transform: translateX(100%); } /* .chp-heading-gradient – sheen sweep once on enter */ .chp-anim-heading-wrap.chp-heading-gradient::after { content: ""; position: absolute; inset: -50% 0; width: 55%; background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.14) 45%, rgba(255, 255, 255, 0.2) 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.12s); pointer-events: none; } .chp-anim-heading-wrap.chp-heading-gradient.is-inview::after { transform: translateX(200%) skewX(-12deg); } /* ------------------------------------------------------------------------- Gradient divider – scaleX reveal (no layout change) ------------------------------------------------------------------------- */ .chp-anim.chp-anim--divider { --chp-dur: 0.4s; transform: scaleX(0); transform-origin: left center; } .chp-anim.chp-anim--divider.is-inview { transform: scaleX(1); } /* ------------------------------------------------------------------------- Video/hero widget ------------------------------------------------------------------------- */ .chp-anim.chp-anim--video { --chp-dur: 0.6s; transform: translateY(12px); } .chp-anim.chp-anim--video.is-inview { transform: translateY(0); } /* ------------------------------------------------------------------------- Card (e-loop-item) – lift + fade + subtle 3D ------------------------------------------------------------------------- */ .chp-anim.chp-anim--card { --chp-dur: 0.58s; transform: translateY(20px) perspective(900px) rotateX(5deg); filter: blur(2px); } .chp-anim.chp-anim--card.is-inview { transform: translateY(0) perspective(900px) rotateX(0); filter: blur(0); } /* ------------------------------------------------------------------------- Media (image/cover) – clip-path from bottom + zoom-out ------------------------------------------------------------------------- */ .chp-anim-media-wrap { overflow: hidden; } .chp-anim.chp-anim--media { --chp-dur: 0.55s; transform: scale(1.05); clip-path: inset(100% 0 0 0); } .chp-anim-media-wrap .chp-anim.chp-anim--media { transition-property: opacity, transform, clip-path; } .chp-anim-media-wrap.is-inview .chp-anim.chp-anim--media, .chp-anim.chp-anim--media.is-inview { clip-path: inset(0 0 0 0); transform: scale(1); opacity: 1; } /* Cover with background (chp-loop-hover) – zoom-out */ .chp-anim-bg-wrap { position: relative; overflow: hidden; } .chp-anim-bg-wrap.chp-anim.chp-anim--media { transform: scale(1.05); } .chp-anim-bg-wrap.chp-anim.chp-anim--media.is-inview { transform: scale(1); opacity: 1; } .chp-anim-bg-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.18) 0%, transparent 50%); opacity: 0; transition: opacity 0.45s ease; transition-delay: var(--chp-delay); pointer-events: none; } .chp-anim-bg-wrap.is-inview::after { opacity: 1; } /* ------------------------------------------------------------------------- Card inner: tag, title, date, text, button (stagger) ------------------------------------------------------------------------- */ .chp-anim.chp-anim--tag, .chp-anim.chp-anim--title, .chp-anim.chp-anim--date, .chp-anim.chp-anim--text { --chp-dur: 0.42s; transform: translateY(10px); } .chp-anim.chp-anim--tag.is-inview, .chp-anim.chp-anim--title.is-inview, .chp-anim.chp-anim--date.is-inview, .chp-anim.chp-anim--text.is-inview { transform: translateY(0); } .chp-anim.chp-anim--button { --chp-dur: 0.4s; transform: scale(0.95); } .chp-anim.chp-anim--button.is-inview { transform: scale(1); } /* ------------------------------------------------------------------------- ACF modules ------------------------------------------------------------------------- */ .chp-anim.chp-anim--module { --chp-dur: 0.5s; transform: translateY(12px); } .chp-anim.chp-anim--module.is-inview { transform: translateY(0); } .chp-anim.chp-anim--module .chp-module__body>* { --chp-dur: 0.4s; } /* ------------------------------------------------------------------------- Hover / focus (desktop + a11y) ------------------------------------------------------------------------- */ @media (hover: hover) { .chp-anim-card-hover { transition: transform 0.25s ease, box-shadow 0.25s ease; } .chp-anim-card-hover:hover, .chp-anim-card-hover:focus-within { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1); } .chp-anim-card-hover .chp-anim-hover-zoom { transition: transform 0.35s ease; } .chp-anim-card-hover:hover .chp-anim-hover-zoom, .chp-anim-card-hover:focus-within .chp-anim-hover-zoom { transform: scale(1.03); } .chp-anim-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-card-hover:hover .chp-anim-title-link, .chp-anim-card-hover:focus-within .chp-anim-title-link, .chp-anim-title-link:hover { background-size: 100% 1px; } .chp-anim.chp-anim--button .elementor-button:hover { transform: scale(1.02); } } /* ------------------------------------------------------------------------- prefers-reduced-motion ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.chp-anim-ready .chp-anim, .chp-anim, .chp-anim.is-inview { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; transition-delay: 0ms !important; clip-path: none !important; } .chp-anim-heading-wrap::before, .chp-anim-heading-wrap.chp-heading-gradient::after { display: none !important; } } /* ------------------------------------------------------------------------- Global off ------------------------------------------------------------------------- */ body.chp-anim-off .chp-anim, body.chp-anim-off .chp-anim.is-inview { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } body.chp-anim-off .chp-anim-heading-wrap::before, body.chp-anim-off .chp-anim-heading-wrap::after { display: none !important; }