/* * Kintsugi motion. Front end only (not loaded in the editor). * * Load animations are scoped to html.kintsugi-motion, a class set in * only when the visitor has not asked for reduced motion. Scroll reveals only * hide elements that motion.js has marked, so without the script nothing is * ever hidden. */ :root { --kintsugi-ease: cubic-bezier(0.22, 1, 0.36, 1); --kintsugi-reveal-duration: 0.9s; --kintsugi-reveal-distance: 24px; } /* ---------- Between pages ---------- */ /* * Cross-document view transitions: the old page fades out and the new one * fades in, while the header stays put. Browsers without support simply * navigate as usual. */ @view-transition { navigation: auto; } @keyframes kintsugi-page-out { to { opacity: 0; } } @keyframes kintsugi-page-in { from { opacity: 0; } } ::view-transition-old(root) { animation: kintsugi-page-out 0.28s ease-in both; } ::view-transition-new(root) { animation: kintsugi-page-in 0.5s var(--kintsugi-ease) 0.08s both; } .wp-site-blocks > header.wp-block-template-part { view-transition-name: kintsugi-header; } ::view-transition-group(kintsugi-header), ::view-transition-old(kintsugi-header), ::view-transition-new(kintsugi-header) { animation: none; } ::view-transition-old(kintsugi-header) { display: none; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } /* ---------- Page load ---------- */ @keyframes kintsugi-rise { from { opacity: 0; transform: translate3d(0, var(--kintsugi-reveal-distance), 0); } to { opacity: 1; transform: none; } } @keyframes kintsugi-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes kintsugi-settle { from { transform: scale(1.08); } to { transform: scale(1); } } /* A gold seam draws across the header, then gives way to the cream hairline. */ @keyframes kintsugi-seam { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } } .kintsugi-motion.kintsugi-first-view .wp-site-blocks > header.wp-block-template-part::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--wp--preset--color--gold); transform-origin: left center; opacity: 0; animation: kintsugi-seam 2.2s var(--kintsugi-ease) 0.15s both; pointer-events: none; } .kintsugi-motion .kintsugi-header > .alignwide { animation: kintsugi-fade 0.9s ease-out both; } /* Home intro: texture settles, copy rises in sequence. */ .kintsugi-motion .kintsugi-intro .wp-block-cover__image-background { animation: kintsugi-settle 2.4s var(--kintsugi-ease) both; } .kintsugi-motion .kintsugi-intro__copy > * { animation: kintsugi-rise 1.1s var(--kintsugi-ease) both; } .kintsugi-motion .kintsugi-intro__copy > :nth-child(1) { animation-delay: 0.25s; } .kintsugi-motion .kintsugi-intro__copy > :nth-child(2) { animation-delay: 0.45s; } .kintsugi-motion .kintsugi-intro__copy > :nth-child(3) { animation-delay: 0.65s; } .kintsugi-motion .kintsugi-intro__copy > :nth-child(n + 4) { animation-delay: 0.85s; } /* Page titles and the product summary rise on arrival. */ .kintsugi-motion main > .wp-block-post-title, .kintsugi-motion main > .wp-block-query-title, .kintsugi-motion .wp-block-woocommerce-breadcrumbs { animation: kintsugi-rise 1s var(--kintsugi-ease) 0.1s both; } .kintsugi-motion .kintsugi-product > .wp-block-column:first-child { animation: kintsugi-fade 1.1s ease-out 0.1s both; } .kintsugi-motion .kintsugi-product__summary > * { animation: kintsugi-rise 1s var(--kintsugi-ease) both; } .kintsugi-motion .kintsugi-product__summary > :nth-child(1) { animation-delay: 0.15s; } .kintsugi-motion .kintsugi-product__summary > :nth-child(2) { animation-delay: 0.25s; } .kintsugi-motion .kintsugi-product__summary > :nth-child(3) { animation-delay: 0.35s; } .kintsugi-motion .kintsugi-product__summary > :nth-child(n + 4) { animation-delay: 0.45s; } /* ---------- On scroll ---------- */ .kintsugi-motion [data-reveal] { opacity: 0; transform: translate3d(0, var(--kintsugi-reveal-distance), 0); transition: opacity var(--kintsugi-reveal-duration) var(--kintsugi-ease), transform var(--kintsugi-reveal-duration) var(--kintsugi-ease); transition-delay: var(--kintsugi-delay, 0s); } .kintsugi-motion [data-reveal].is-revealed { opacity: 1; transform: none; } /* Images uncover from the bottom, like lifting a cloth. */ .kintsugi-motion [data-reveal="image"] { transform: none; clip-path: inset(100% 0 0 0); transition: opacity 0.6s ease-out, clip-path 1.3s var(--kintsugi-ease); transition-delay: var(--kintsugi-delay, 0s); } .kintsugi-motion [data-reveal="image"].is-revealed { clip-path: inset(0 0 0 0); } /* ---------- Hover ---------- */ /* Buttons: colour eases, and the rounded end stretches a little. */ .wp-element-button, .wp-block-button__link, .wpcf7-submit, .wc-block-components-button:not(.is-link) { transition: background-color 0.35s var(--kintsugi-ease), color 0.35s var(--kintsugi-ease), padding 0.45s var(--kintsugi-ease), box-shadow 0.35s var(--kintsugi-ease); } .wp-block-button__link:hover, .wpcf7-submit:hover, .wp-block-add-to-cart-form .single_add_to_cart_button:hover { padding-right: 2.7em; } .wp-block-button__link:active, .wpcf7-submit:active, .wp-element-button:active { transform: translateY(1px); } /* Navigation and footer links: a gold line draws in from the left. */ .wp-block-navigation .wp-block-navigation-item__content, .kintsugi-footer .wp-block-navigation-item__content { background-image: linear-gradient(var(--wp--preset--color--gold), var(--wp--preset--color--gold)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: background-size 0.45s var(--kintsugi-ease), color 0.3s ease; } .wp-block-navigation .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation-item__content:focus-visible, .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content, .kintsugi-footer .wp-block-navigation-item__content:hover { background-size: 100% 1px; text-decoration: none !important; } /* Product cards: slow zoom on the image, the title underlines itself. */ .kintsugi-products .wc-block-components-product-image img { transition: transform 1.2s var(--kintsugi-ease); } .kintsugi-products .wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.05); } .kintsugi-products .wp-block-post-title a { background-image: linear-gradient(var(--wp--preset--color--gold), var(--wp--preset--color--gold)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: background-size 0.5s var(--kintsugi-ease); } .kintsugi-products .wc-block-product:hover .wp-block-post-title a, .kintsugi-products .wp-block-post-title a:focus-visible { background-size: 100% 1px; text-decoration: none; } /* Header icons and social links. */ .kintsugi-header .wc-block-mini-cart__button, .kintsugi-header .wc-block-customer-account a, .kintsugi-footer .wp-social-link { transition: color 0.3s ease, transform 0.35s var(--kintsugi-ease); } .kintsugi-header .wc-block-mini-cart__button:hover, .kintsugi-header .wc-block-customer-account a:hover { color: var(--wp--preset--color--bronze); } .kintsugi-footer .wp-social-link:hover { transform: translateY(-3px); } /* Accordion: answers ease in when opened. */ .wp-block-accordion-item.is-open > .wp-block-accordion-panel { animation: kintsugi-rise 0.5s var(--kintsugi-ease) both; --kintsugi-reveal-distance: 8px; } .wp-block-accordion-heading__toggle-icon { transition: transform 0.4s var(--kintsugi-ease) !important; } /* Gallery thumbnails. */ .kintsugi-product .woocommerce-product-gallery .flex-control-thumbs img { transition: opacity 0.35s ease, transform 0.6s var(--kintsugi-ease); } /* ---------- Respect reduced motion everywhere ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; } .kintsugi-products .wc-block-product:hover .wc-block-components-product-image img, .kintsugi-footer .wp-social-link:hover { transform: none; } }