@view-transition { navigation: auto; }
.c-header { view-transition-name: vt-header; }
.c-footer { view-transition-name: vt-footer; }
::view-transition-group(vt-header),
::view-transition-group(vt-footer) {
animation-duration: 0s;
}
::view-transition-old(root) {
animation: vt-page-out 180ms var(--ease-out) both;
}
::view-transition-new(root) {
animation: vt-page-in 240ms var(--ease-out) both;
}
@keyframes vt-page-out {
to { opacity: 0; transform: translateY(-8px); }
}
@keyframes vt-page-in {
from { opacity: 0; transform: translateY(12px); }
}
@supports not (view-transition-name: none) {
@media (prefers-reduced-motion: no-preference) {
.l-main {
animation: vt-doc-in 260ms var(--ease-out) both;
}
}
}
@keyframes vt-doc-in {
from { opacity: 0; transform: translateY(12px); }
}
[data-vt="product-metal"]  { view-transition-name: vt-product-metal; }
[data-vt="product-fabric"] { view-transition-name: vt-product-fabric; }
[data-vt="product-rubber"] { view-transition-name: vt-product-rubber; }
[data-vt="product-valves"] { view-transition-name: vt-product-valves; }
[data-vt="product-pumps"]  { view-transition-name: vt-product-pumps; }
::view-transition-group(vt-product-metal),
::view-transition-group(vt-product-fabric),
::view-transition-group(vt-product-rubber),
::view-transition-group(vt-product-valves),
::view-transition-group(vt-product-pumps) {
animation-duration: 420ms;
animation-timing-function: var(--ease-out);
}
::view-transition-old(vt-product-metal),
::view-transition-old(vt-product-fabric),
::view-transition-old(vt-product-rubber),
::view-transition-old(vt-product-valves),
::view-transition-old(vt-product-pumps),
::view-transition-new(vt-product-metal),
::view-transition-new(vt-product-fabric),
::view-transition-new(vt-product-rubber),
::view-transition-new(vt-product-valves),
::view-transition-new(vt-product-pumps) {
animation-duration: 420ms;
mix-blend-mode: normal;
}
.c-hero-int__title { view-transition-name: vt-page-title; }
::view-transition-group(vt-page-title) {
animation-duration: 300ms;
animation-timing-function: var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
@view-transition { navigation: none; }
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none !important;
}
}