@view-transition {
navigation: auto;
}
@media (prefers-reduced-motion: no-preference) {
::view-transition-old(root) {
animation: mds-vt-out .28s var(--ease) both;
}
::view-transition-new(root) {
animation: mds-vt-in .34s var(--ease) both;
}
@keyframes mds-vt-out {
to { opacity: 0; transform: translateY(-8px); }
}
@keyframes mds-vt-in {
from { opacity: 0; transform: translateY(14px); }
}
}
.site-header { view-transition-name: mds-header; }
::view-transition-group(mds-header) { animation-duration: .01s; }
@media (prefers-reduced-motion: no-preference) {
.js-reveal .reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity .6s var(--ease), transform .6s var(--ease);
will-change: opacity, transform;
}
.js-reveal .reveal.is-visible {
opacity: 1;
transform: none;
}

.js-reveal .reveal[style*="--reveal-delay"] {
transition-delay: var(--reveal-delay);
}
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
.category-grid,
.woocommerce ul.products,
ul.products {
perspective: 1000px;
}
.category-card.mds-tilt,
.woocommerce ul.products li.product.mds-tilt,
ul.products li.product.mds-tilt {
transform:
perspective(900px)
rotateX(var(--rx, 0deg))
rotateY(var(--ry, 0deg))
translateY(-6px);
transition: transform .18s var(--ease), box-shadow .25s;
transform-style: preserve-3d;
}

.woocommerce ul.products li.product.mds-tilt a img,
ul.products li.product.mds-tilt a img {
transform: translateZ(28px) scale(1.03);
transition: transform .18s var(--ease);
}

.category-card.mds-tilt::before,
.woocommerce ul.products li.product.mds-tilt::before,
ul.products li.product.mds-tilt::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 4;
background: radial-gradient(
420px circle at var(--mx, 50%) var(--my, 0%),
rgba(255, 255, 255, .28),
transparent 45%
);
opacity: 0;
transition: opacity .25s;
}
.category-card.mds-tilt.is-hover::before,
.woocommerce ul.products li.product.mds-tilt.is-hover::before,
ul.products li.product.mds-tilt.is-hover::before {
opacity: 1;
}
}
.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.alt,
.woocommerce #place_order,
.woocommerce ul.products li.product .button {
position: relative;
overflow: hidden;
isolation: isolate;
}
.btn::after,
.woocommerce a.button::after,
.woocommerce button.button::after,
.woocommerce .button.alt::after,
.woocommerce #place_order::after,
.woocommerce ul.products li.product .button::after {
content: "";
position: absolute;
top: 0;
left: -130%;
width: 60%;
height: 100%;
z-index: -1;
background: linear-gradient(
100deg,
transparent,
rgba(255, 255, 255, .35),
transparent
);
transform: skewX(-18deg);
transition: left .55s var(--ease);
}
@media (prefers-reduced-motion: no-preference) {
.btn:hover::after,
.woocommerce a.button:hover::after,
.woocommerce button.button:hover::after,
.woocommerce .button.alt:hover::after,
.woocommerce #place_order:hover::after,
.woocommerce ul.products li.product .button:hover::after {
left: 130%;
}

.btn:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce ul.products li.product .button:active {
transform: scale(.96);
}
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
.site-header::after {
content: "";
position: absolute;
inset: 0;

z-index: -1;
pointer-events: none;
background: color-mix(in oklab, var(--paper-2) 72%, transparent);
-webkit-backdrop-filter: saturate(160%) blur(14px);
backdrop-filter: saturate(160%) blur(14px);
opacity: 0;
transition: opacity .25s var(--ease);
}
.site-header.is-stuck::after { opacity: 1; }

.site-header.is-stuck {
background: transparent;
border-bottom-color: color-mix(in oklab, var(--line) 60%, transparent);
}
}
@supports not (background: color-mix(in oklab, white 50%, transparent)) {
.site-header.is-stuck {
background: var(--paper-2);
}
}