.js-motion [data-reveal],
.js-motion [data-reveal-group] > * {
opacity: 0;
transform: translateY(12px);
transition:
opacity var(--dur-reveal) var(--ease-out),
transform var(--dur-reveal) var(--ease-out);
}
.js-motion [data-reveal].is-revealed {
opacity: 1;
transform: none;
}
.js-motion [data-reveal-group].is-revealed > * { opacity: 1; transform: none; }
.js-motion [data-reveal-group].is-revealed > *:nth-child(1) { transition-delay: 0ms; }
.js-motion [data-reveal-group].is-revealed > *:nth-child(2) { transition-delay: 80ms; }
.js-motion [data-reveal-group].is-revealed > *:nth-child(3) { transition-delay: 160ms; }
.js-motion [data-reveal-group].is-revealed > *:nth-child(4) { transition-delay: 240ms; }
.js-motion [data-reveal-group].is-revealed > *:nth-child(5) { transition-delay: 320ms; }
.js-motion [data-reveal-group].is-revealed > *:nth-child(6) { transition-delay: 400ms; }
.js-motion [data-reveal-group].is-revealed > *:nth-child(n+7) { transition-delay: 480ms; }
.c-hero__img {
will-change: transform;
transform: translate3d(0, 0, 0);
transform-origin: center 40%;
}
.js-motion .c-hero__body > * {
opacity: 0;
transform: translateY(16px);
animation: vt-rise var(--dur-slow) var(--ease-out) forwards;
}
.js-motion .c-hero__body > *:nth-child(1) { animation-delay: 80ms; }
.js-motion .c-hero__body > *:nth-child(2) { animation-delay: 140ms; }
.js-motion .c-hero__body > *:nth-child(3) { animation-delay: 200ms; }
.js-motion .c-hero__body > *:nth-child(4) { animation-delay: 300ms; }
.js-motion .c-hero__body > *:nth-child(5) { animation-delay: 400ms; }
@keyframes vt-rise {
to { opacity: 1; transform: none; }
}
.js-motion .c-hero__rule,
.js-motion .c-section-header__rule {
transform-origin: left center;
animation: vt-rule-draw var(--dur-slow) var(--ease-out) both;
}
@keyframes vt-rule-draw {
from { transform: scaleX(0); }
to   { transform: scaleX(1); }
}
.js-motion .c-hero-strip__cell {
opacity: 0;
animation: vt-rise var(--dur-slow) var(--ease-out) forwards;
}
.js-motion .c-hero-strip__cell:nth-child(1) { animation-delay: 480ms; }
.js-motion .c-hero-strip__cell:nth-child(2) { animation-delay: 560ms; }
.js-motion .c-hero-strip__cell:nth-child(3) { animation-delay: 640ms; }
.js-motion .c-hero-strip__cell:nth-child(4) { animation-delay: 720ms; }
.c-diagram svg {
width: 100%;
height: auto;
overflow: visible;
}
.c-diagram svg g,
.c-diagram svg path,
.c-diagram svg circle {
fill: none;
stroke: var(--color-text-primary);
stroke-width: 1.5;
stroke-linecap: square;
vector-effect: non-scaling-stroke;
}
.c-diagram__axis {
stroke: var(--steel-300);
stroke-width: 1;
stroke-dasharray: 4 4;
}
.c-diagram__anchor { stroke: var(--steel-400); }
.c-diagram__arrows path { stroke: var(--color-signal); }
.c-diagram__pin {
fill: var(--color-signal);
stroke: var(--color-signal);
}
.c-diagram__bellows path { stroke-width: 1.5; }
.c-diagram__moving,
.c-diagram__bellows,
.c-diagram__arrows,
.c-diagram__fixed {
transform-box: view-box;
}
.c-diagram__moving,
.c-diagram__bellows,
.c-diagram__arrows {
animation-play-state: paused;
animation-duration: 3.2s;
animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
animation-iteration-count: infinite;
}
.c-diagram.is-playing .c-diagram__moving,
.c-diagram.is-playing .c-diagram__bellows,
.c-diagram.is-playing .c-diagram__arrows {
animation-play-state: running;
}
.c-diagram--axial .c-diagram__moving  { animation-name: vt-axial-leg; }
.c-diagram--axial .c-diagram__bellows { animation-name: vt-axial-bellows; transform-origin: 68px 62px; }
.c-diagram--axial .c-diagram__arrows  { animation-name: vt-pulse; }
@keyframes vt-axial-leg {
0%, 100% { transform: translateX(0); }
50%      { transform: translateX(-22px); }
}
@keyframes vt-axial-bellows {
0%, 100% { transform: scaleX(1); }
50%      { transform: scaleX(0.788); }   
}
.c-diagram--lateral .c-diagram__moving  { animation-name: vt-lateral-leg; }
.c-diagram--lateral .c-diagram__bellows { animation-name: vt-lateral-bellows; transform-origin: 68px 62px; }
.c-diagram--lateral .c-diagram__arrows  { animation-name: vt-pulse; }
@keyframes vt-lateral-leg {
0%, 100% { transform: translateY(0); }
25%      { transform: translateY(-16px); }
75%      { transform: translateY(16px); }
}
@keyframes vt-lateral-bellows {
0%, 100% { transform: skewY(0deg); }
25%      { transform: skewY(-4.4deg); }
75%      { transform: skewY(4.4deg); }
}
.c-diagram--angular .c-diagram__moving {
animation-name: vt-angular-leg;
transform-origin: 124px 62px;
}
.c-diagram--angular .c-diagram__arrows { animation-name: vt-pulse; }
@keyframes vt-angular-leg {
0%, 100% { transform: rotate(0deg); }
25%      { transform: rotate(-9deg); }
75%      { transform: rotate(9deg); }
}
@keyframes vt-pulse {
0%, 100% { opacity: 0.35; }
50%      { opacity: 1; }
}
.c-product-card { transition:
border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out); }
.c-product-card:hover { transform: translateY(-3px); }
.js-motion [data-reveal].is-revealed .c-section-header__eyebrow,
.js-motion [data-reveal].is-revealed > .c-section-header__eyebrow {
animation: vt-eyebrow-in var(--dur-base) var(--ease-out) both;
}
@keyframes vt-eyebrow-in {
from { letter-spacing: 0.24em; opacity: 0; }
to   { letter-spacing: var(--tracking-eyebrow); opacity: 1; }
}
.js-motion .c-note[data-reveal] { position: relative; }
.js-motion .c-note[data-reveal].is-revealed {
animation: vt-note-rule var(--dur-slow) var(--ease-out) both;
}
@keyframes vt-note-rule {
from { border-left-color: transparent; }
to   { border-left-color: var(--color-signal); }
}
.c-table tbody tr {
transition:
background var(--dur-fast) var(--ease-out),
opacity var(--dur-fast) var(--ease-out);
}
.c-table tbody tr:hover { background: var(--red-50); }
.c-chip { transition: transform var(--dur-fast) var(--ease-out); }
.c-table tbody tr:hover .c-chip { transform: scale(1.35); }
@media (hover: hover) and (min-width: 768px) {
.c-table tbody:hover tr:not(:hover) { opacity: 0.55; }
}
.js-motion .c-steps[data-reveal-group] { position: relative; }
.js-motion .c-steps[data-reveal-group]::before {
transform-origin: left center;
transform: scaleX(0);
transition: transform 900ms var(--ease-out);
}
.js-motion .c-steps[data-reveal-group].is-revealed::before { transform: scaleX(1); }
@media (max-width: 899px) {
.js-motion .c-steps[data-reveal-group]::before {
transform-origin: center top;
transform: scaleY(0);
}
.js-motion .c-steps[data-reveal-group].is-revealed::before { transform: scaleY(1); }
}
.c-cta__wave path {
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.c-cta__grid[data-drawn='true'] .c-cta__wave path {
animation: vt-grid-plot 620ms var(--ease-out) forwards;
}
@keyframes vt-grid-plot {
to { stroke-dashoffset: 0; }
}
.js-motion .c-header .c-logo__mark {
animation: vt-mark-in 520ms var(--ease-out) both;
}
@keyframes vt-mark-in {
from { opacity: 0; transform: rotate(-35deg) scale(0.85); }
to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.js-motion [data-reveal],
.js-motion [data-reveal-group] > *,
.js-motion .c-hero__body > *,
.js-motion .c-hero-strip__cell {
opacity: 1 !important;
transform: none !important;
animation: none !important;
transition: none !important;
}
.js-motion .c-hero__rule,
.js-motion .c-section-header__rule,
.js-motion .c-header .c-logo__mark {
animation: none !important;
transform: none !important;
}
.c-diagram__moving,
.c-diagram__bellows,
.c-diagram__arrows,
.c-diagram.is-playing .c-diagram__moving,
.c-diagram.is-playing .c-diagram__bellows,
.c-diagram.is-playing .c-diagram__arrows {
animation: none !important;
}
.c-diagram__arrows { opacity: 1; }
.c-cta__wave path {
stroke-dasharray: none;
stroke-dashoffset: 0;
animation: none !important;
}
.c-hero__img { transform: scale(1) !important; }
.c-product-card:hover { transform: none; }
.c-mobile-nav { transition: none !important; }
.c-mobile-nav[data-open='true'] .c-mobile-nav__link,
.c-mobile-nav[data-open='true'] .c-btn {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.c-totop { transition: none !important; }
.js-totop .c-totop { transform: none !important; }
.c-footer__credit a,
.c-footer__credit a::after { transition: none !important; }
.c-footer__credit a:hover::after,
.c-footer__credit a:focus-visible::after { transform: scaleX(1); }
.c-table tbody tr {
opacity: 1 !important;
transform: none !important;
animation: none !important;
transition: none !important;
}
.js-motion .c-steps[data-reveal-group]::before { transform: none !important; }
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
html.js-scroll-timeline .c-hero__img,
html.js-scroll-timeline .c-hero__scrim,
html.js-scroll-timeline .c-hero__body {
animation-duration: auto;
animation-timing-function: linear;
animation-fill-mode: both;
animation-timeline: scroll(root block);
animation-range: 0 700px;
}
html.js-scroll-timeline .c-hero__img { animation-name: vt-hero-img; }
@keyframes vt-hero-img {
to { transform: translate3d(0, 70px, 0); }
}
html.js-scroll-timeline .c-hero__scrim { animation-name: vt-hero-scrim; }
@keyframes vt-hero-scrim {
to { transform: translate3d(0, 80px, 0); }
}
html.js-scroll-timeline .c-hero__body { animation-name: vt-hero-copy; }
@keyframes vt-hero-copy {
to { transform: translate3d(0, -280px, 0); }
}
.c-hero-int__inner,
.c-hero-int__bg,
.c-hero-int__panel {
animation-duration: auto;
animation-timing-function: linear;
animation-fill-mode: both;
animation-timeline: scroll(root block);
animation-range: 0 480px;
}
.c-hero-int__inner { animation-name: vt-int-copy; }
@keyframes vt-int-copy {
to { transform: translate3d(0, -40px, 0); }
}
.c-hero-int__bg { animation-name: vt-int-bg; }
@keyframes vt-int-bg {
from { transform: translateY(-9%) scale(1.0); }
to   { transform: translateY(9%)  scale(1.06); }
}
.c-hero-int__panel { animation-name: vt-int-mark; }
@keyframes vt-int-mark {
from { transform: translateY(-30px); }
to   { transform: translateY(30px); }
}
.c-cta__grid {
animation: vt-cta-grid linear both;
animation-duration: auto;
animation-timeline: --vt-cta;
animation-range: entry 0% exit 100%;
}
@keyframes vt-cta-grid {
from { transform: translateY(-24px); }
to   { transform: translateY(24px); }
}
html.js-scroll-timeline .c-table tbody tr {
animation: vt-row-in linear both;
animation-duration: auto;
animation-timeline: view();
animation-range: entry 0% entry 45%;
}
@keyframes vt-row-in {
from { opacity: 0; transform: translateY(8px); }
to   { opacity: 1; transform: none; }
}
}
}
@media (prefers-reduced-motion: no-preference) {
.c-diagram svg path {
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.c-diagram.is-playing svg path {
animation: vt-draw 700ms var(--ease-out) forwards;
}
.c-diagram.is-playing .c-diagram__fixed path   { animation-delay: 0ms; }
.c-diagram.is-playing .c-diagram__bellows path { animation-delay: 180ms; }
.c-diagram.is-playing .c-diagram__moving path  { animation-delay: 360ms; }
.c-diagram.is-playing .c-diagram__arrows path  { animation-delay: 620ms; }
@keyframes vt-draw {
to { stroke-dashoffset: 0; }
}
.c-diagram.is-playing .c-diagram__moving,
.c-diagram.is-playing .c-diagram__bellows,
.c-diagram.is-playing .c-diagram__arrows {
animation-delay: 1100ms;
}
}
@media (prefers-reduced-motion: reduce) {
.c-diagram svg path { stroke-dasharray: none; stroke-dashoffset: 0; }
}