/* Puik Motion: reveal states. Everything here is zero-specificity (:where), so theme and Bricks classes always win on transition timing and hover transforms. Elements that also transition on their own (buttons, cards) should use transition longhands and include var(--reveal-delay) in transition-delay, so the stagger survives. */ /* Hidden start state before motion.js runs. html.puik-motion is set by an inline script in (only when motion is allowed). */ :where(html.puik-motion) :where([data-reveal], [data-reveal-group] > *) { opacity: 0; transform: translateY(28px); } :where(.reveal) { opacity: 0; transform: translateY(28px); transition-property: opacity, transform; transition-duration: 0.4s, 0.4s; transition-timing-function: var(--ease-out, cubic-bezier(.22, .61, .36, 1)), var(--ease-out, cubic-bezier(.22, .61, .36, 1)); transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms); } :where(.reveal.is-visible) { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { :where(.reveal) { transition: none; opacity: 1; transform: none; } }