/* kit125o MOTION SYSTEM — V1.3.1 ----------------------------------------------------------------------
*
* ONE coherent motion system: subtle LIFT + soft SHADOW, applied BY ROLE (not by element name). Native
* CSS only — no JS, no IntersectionObserver, no scroll listeners. Delegate motion to the browser.
*
* Platform-first techniques used:
* - INDIVIDUAL transform props (translate / scale) NOT monolithic `transform`, so a card's hover-lift and
* its inner image-zoom compose without clobbering each other.
* - prefers-reduced-motion: reduce = HARD GATE at the bottom — collapses ALL movement to opacity/instant.
* - :focus-visible rings on every interactive role (keyboard a11y), brand-tinted.
* - Scroll reveal via NATIVE CSS scroll-driven animations (animation-timeline: view()); the no-JS / no-
* support fallback is simply "content visible" (we NEVER hide-without-JS — opacity starts at 1 and is
* only animated-from-0 inside the @supports block).
*
* THE TOKENS (define once, drive everything — changing the feel = editing these). Amplitude is deliberately
* LOW: 3px lift, 1.03 zoom, .98 press. The test is "quiet quality", not a demo reel. */
:root {
--motion-fast: 150ms;
--motion-base: 200ms;
--motion-slow: 400ms;
--ease-out: cubic-bezier(.2, .6, .2, 1); /* soft, slightly-overshooting decel — reads elegant */
--lift: -3px; /* the house "subtle lift" */
--zoom: 1.03; /* contained image zoom */
--press: .98; /* :active settle */
/* soft, low-spread, brand-tinted (green #537D5D) shadows — same shadow language everywhere */
--shadow-rest: 0 1px 3px rgba(83, 125, 93, .08), 0 1px 2px rgba(20, 30, 20, .04);
--shadow-hover: 0 10px 28px rgba(83, 125, 93, .16), 0 4px 10px rgba(20, 30, 20, .08);
--ring: 0 0 0 3px rgba(83, 125, 93, .45); /* brand focus-visible ring */
}
/* === ROLE 1 — ELEVATED SURFACES (product / category / blog / testimonial cards) =====================
* hover → translate 0 var(--lift) + shadow rest→hover. Inner image frame → scale var(--zoom), contained
* by overflow:hidden on the frame. translate/scale are SEPARATE props so the two compose. */
.kit125o-card,
.kit125o-catcard,
.kit125o-blog .k125o-blog-card,
.kit125o-testimonials .k125o-tm-rating {
box-shadow: var(--shadow-rest);
translate: 0 0;
transition: translate var(--motion-base) var(--ease-out),
box-shadow var(--motion-base) var(--ease-out);
}
.kit125o-card:hover,
.kit125o-catcard:hover,
.kit125o-blog .k125o-blog-card:hover,
.kit125o-testimonials .k125o-tm-rating:hover {
translate: 0 var(--lift);
box-shadow: var(--shadow-hover);
}
/* contained image zoom — the frame clips, the ![]()
scales. */
.kit125o-card .k125o-imgwrap, /* product image frame () */
.kit125o-catcard .k125o-cat-img, /* category image frame (already overflow:hidden) */
.kit125o-blog .k125o-blog-imglink { /* blog image frame () */
overflow: hidden;
}
.kit125o-blog .k125o-blog-imglink { border-radius: 12px; } /* move the radius onto the clipping frame */
.kit125o-card .k125o-imgwrap img,
.kit125o-catcard .k125o-cat-img img,
.kit125o-blog .k125o-blog-imglink .k125o-blog-img {
scale: 1;
transition: scale var(--motion-slow) var(--ease-out);
}
.kit125o-card:hover .k125o-imgwrap img,
.kit125o-catcard:hover .k125o-cat-img img,
.kit125o-blog .k125o-blog-card:hover .k125o-blog-imglink .k125o-blog-img {
scale: var(--zoom);
}
/* === ROLE 2 — ACTIONS (ADD TO CART / SELECT OPTIONS / CTAs / show-all / circle buttons) ==============
* hover → soft shadow (bg-darken keeps its own per-button :hover rule); press (:active) → scale .98. */
.kit125o-card .k125o-cart,
.kit125o-sale-band .k125o-btn-primary,
.kit125o-sale-band .k125o-btn-outline-white,
.k125o-show-all {
scale: 1;
transition: background var(--motion-base) var(--ease-out),
color var(--motion-base) var(--ease-out),
box-shadow var(--motion-base) var(--ease-out),
scale var(--motion-fast) var(--ease-out);
}
.kit125o-card .k125o-cart:hover,
.kit125o-sale-band .k125o-btn-primary:hover,
.kit125o-sale-band .k125o-btn-outline-white:hover,
.k125o-show-all:hover {
box-shadow: var(--shadow-hover);
}
.kit125o-card .k125o-cart:active,
.kit125o-sale-band .k125o-btn-primary:active,
.kit125o-sale-band .k125o-btn-outline-white:active,
.k125o-show-all:active {
scale: var(--press);
}
/* placeholder cart isn't a real action — no press settle */
.kit125o-card .k125o-cart--ph:active { scale: 1; }
/* === ROLE 3 — TEXT LINKS / SHOW-ALL ARROW ===========================================================
* hover → color shift + the arrow nudges translate 2px 0. Restrained. */
.kit125o-blog .k125o-read-more,
.k125o-show-all {
--nudge: 0;
}
/* the arrow element (circle-btn / arrow-circle) nudges right on hover of its link/section header */
.k125o-show-all .k125o-circle-btn,
.kit125o-blog .k125o-read-more .k125o-arrow-circle {
translate: 0 0;
transition: translate var(--motion-fast) var(--ease-out),
background var(--motion-base) var(--ease-out),
border-color var(--motion-base) var(--ease-out),
color var(--motion-base) var(--ease-out);
}
.k125o-show-all:hover .k125o-circle-btn,
.kit125o-blog .k125o-read-more:hover .k125o-arrow-circle {
translate: 2px 0;
}
/* category CTA — text-only link, color shift + tiny nudge */
.kit125o-catcard .k125o-cat-cta {
translate: 0 0;
transition: color var(--motion-base) var(--ease-out), translate var(--motion-fast) var(--ease-out);
}
.kit125o-catcard:hover .k125o-cat-cta {
color: #3d5e45;
translate: 2px 0;
}
/* === FOCUS-VISIBLE — every interactive role, brand-tinted ring (keyboard a11y) ======================
* :focus-visible only (mouse clicks don't get a ring). Applies to links, buttons, the card anchors. */
.kit125o-card a:focus-visible,
.kit125o-card .k125o-cart:focus-visible,
.kit125o-catcard a:focus-visible,
.kit125o-catcard .k125o-cat-cta:focus-visible,
.kit125o-blog a:focus-visible,
.kit125o-testimonials a:focus-visible,
.kit125o-sale-band a:focus-visible,
.k125o-show-all:focus-visible {
outline: none;
box-shadow: var(--ring);
border-radius: 6px;
}
/* === ROLE 4 — SECTION ENTRANCE (scroll reveal) ======================================================
* LITE fade + ~12px rise, ONCE, --motion-slow, via NATIVE CSS scroll-driven animation. No JS.
* Fallback (no @supports / no JS) = content is simply visible (opacity:1, no translate) — these bands are
* NEVER hidden outside the @supports block, so a browser without scroll-driven animations shows everything. */
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.k125o-pq-section,
.k125o-cat-section,
.kit125o-testimonials,
.kit125o-blog,
.kit125o-sale-band {
animation: k125o-reveal linear both;
animation-timeline: view();
animation-range: entry 0% cover 18%;
}
}
}
@keyframes k125o-reveal {
from { opacity: 0; translate: 0 12px; }
to { opacity: 1; translate: 0 0; }
}
/* === REDUCED-MOTION HARD GATE =======================================================================
* Collapse ALL movement to instant/opacity-only. Page stays fully usable; hover still gives a shadow cue
* (a non-moving affordance) but NO translate/scale, and reveals are instant & fully visible. */
@media (prefers-reduced-motion: reduce) {
.kit125o-card,
.kit125o-catcard,
.kit125o-blog .k125o-blog-card,
.kit125o-testimonials .k125o-tm-rating,
.kit125o-card .k125o-cart,
.kit125o-sale-band .k125o-btn-primary,
.kit125o-sale-band .k125o-btn-outline-white,
.k125o-show-all,
.k125o-show-all .k125o-circle-btn,
.kit125o-blog .k125o-read-more .k125o-arrow-circle,
.kit125o-catcard .k125o-cat-cta,
.kit125o-card .k125o-imgwrap img,
.kit125o-catcard .k125o-cat-img img,
.kit125o-blog .k125o-blog-imglink .k125o-blog-img {
transition: none !important;
}
/* zero every movement token; hover keeps only the (static) shadow change */
.kit125o-card:hover,
.kit125o-catcard:hover,
.kit125o-blog .k125o-blog-card:hover,
.kit125o-testimonials .k125o-tm-rating:hover { translate: 0 0 !important; }
.kit125o-card:hover .k125o-imgwrap img,
.kit125o-catcard:hover .k125o-cat-img img,
.kit125o-blog .k125o-blog-card:hover .k125o-blog-imglink .k125o-blog-img { scale: 1 !important; }
.kit125o-card .k125o-cart:active,
.kit125o-sale-band .k125o-btn-primary:active,
.kit125o-sale-band .k125o-btn-outline-white:active,
.k125o-show-all:active { scale: 1 !important; }
.k125o-show-all:hover .k125o-circle-btn,
.kit125o-blog .k125o-read-more:hover .k125o-arrow-circle,
.kit125o-catcard:hover .k125o-cat-cta { translate: 0 0 !important; }
/* reveals: no animation, content fully visible (the @media no-preference guard already excludes this,
* but assert it explicitly so reduced-motion is provably static) */
.k125o-pq-section,
.k125o-cat-section,
.kit125o-testimonials,
.kit125o-blog,
.kit125o-sale-band { animation: none !important; opacity: 1 !important; translate: 0 0 !important; }
}