:root {
--motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--motion-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
--motion-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
--motion-shadow-hover: 0 18px 36px rgba(15, 23, 42, 0.14);
}
@keyframes motion-fade-up {
from {
opacity: 0;
transform: translate3d(0, 22px, 0);
filter: blur(6px);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
filter: blur(0);
}
}
@keyframes motion-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes motion-float {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -10px, 0);
}
}
@keyframes motion-sheen {
0% {
transform: translate3d(-18%, 0, 0);
opacity: 0;
}
18% {
opacity: 0.55;
}
50% {
opacity: 0.22;
}
100% {
transform: translate3d(18%, 0, 0);
opacity: 0;
}
}
@keyframes motion-scale-x {
from {
opacity: 0;
transform: scaleX(0);
}
to {
opacity: 1;
transform: scaleX(1);
}
}
html.motion-enhanced .motion-reveal {
opacity: 0;
transform: translate3d(0, 20px, 0);
}
html.motion-instant .motion-reveal {
opacity: 1;
transform: none;
}
html.motion-enhanced .motion-reveal.is-visible {
animation: motion-fade-up 720ms var(--motion-ease-out) both;
animation-delay: var(--motion-delay, 0ms);
}
html.motion-enhanced .motion-reveal.motion-fade {
transform: none;
}
html.motion-enhanced .motion-reveal.motion-fade.is-visible {
animation-name: motion-fade-in;
}
.truck-loading-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
background: transparent;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 180ms var(--motion-ease-soft), visibility 0s linear 180ms;
}
.truck-loading-overlay.is-visible {
display: flex;
opacity: 1;
visibility: visible;
pointer-events: auto;
transition-delay: 0s;
}
.truck-loading-overlay__spinner {
display: flex;
align-items: center;
justify-content: center;
padding: 18px 22px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(26, 26, 46, 0.12);
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
}
.spinner-container {
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
}
.spinner {
width: 48px;
height: 48px;
border-radius: 50%;
border: 4px solid rgba(194, 23, 30, 0.18);
border-top-color: #c2171e;
animation: truck-loading-spin 1s linear infinite;
}
@keyframes truck-loading-spin {
to {
transform: rotate(360deg);
}
}
.homepage-hero {
isolation: isolate;
}
.homepage-hero::before,
.homepage-hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.homepage-hero::before {
left: auto;
top: -12%;
right: -6%;
width: 42%;
height: 70%;
background:
radial-gradient(circle at 35% 35%, rgba(237, 28, 36, 0.18), transparent 48%),
radial-gradient(circle at 65% 65%, rgba(245, 217, 10, 0.08), transparent 52%);
filter: blur(8px);
animation: motion-float 14s ease-in-out infinite;
}
.homepage-hero::after {
background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.08) 44%, transparent 58%);
animation: motion-sheen 12s linear infinite;
}
.homepage-hero-overlay {
overflow: hidden;
}
.homepage-hero-overlay::before {
content: "";
position: absolute;
inset: auto -15% -16% auto;
width: 320px;
height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(194, 23, 30, 0.26), transparent 68%);
filter: blur(12px);
animation: motion-float 16s ease-in-out infinite;
}
.homepage-hero-content {
will-change: transform;
}
.homepage-hero-content > *,
.homepage-section-head,
.homepage-intro-panel,
.homepage-intro-support,
.homepage-support-panel,
.homepage-stat-card,
.homepage-feature-card,
.homepage-location,
.homepage-category-card,
.homepage-actions > *,
.homepage-hero-stats > * {
position: relative;
z-index: 1;
}
.homepage-hero-content > *.is-visible {
animation: motion-fade-up 720ms var(--motion-ease-out) both;
animation-delay: var(--motion-delay, 0ms);
}
.homepage-section-head {
padding-bottom: 14px;
}
.homepage-section-head::after {
content: "";
display: block;
width: 72px;
height: 2px;
margin-top: 14px;
background: linear-gradient(90deg, #c2171e 0%, rgba(194, 23, 30, 0.28) 100%);
transform-origin: left center;
transform: scaleX(0);
}
.homepage-section-head.is-visible::after {
animation: motion-scale-x 540ms var(--motion-ease-out) both;
}
.homepage-kicker,
.homepage-description,
.homepage-heading {
text-wrap: balance;
}
.homepage-actions > *,
.homepage-hero-stats > *,
.homepage-category-card,
.homepage-support-panel,
.homepage-stat-card,
.homepage-feature-card,
.homepage-location {
transition:
transform 240ms var(--motion-ease-soft),
box-shadow 240ms var(--motion-ease-soft),
border-color 240ms var(--motion-ease-soft),
background-color 240ms var(--motion-ease-soft);
box-shadow: var(--motion-shadow);
}
.homepage-actions > *:hover,
.homepage-actions > *:focus-visible,
.homepage-hero-stats > *:hover,
.homepage-hero-stats > *:focus-visible,
.homepage-support-panel:hover,
.homepage-support-panel:focus-within,
.homepage-stat-card:hover,
.homepage-feature-card:hover,
.homepage-location:hover,
.homepage-location:focus-within,
.homepage-category-card:hover,
.homepage-category-card:focus-visible {
transform: translateY(-6px);
box-shadow: var(--motion-shadow-hover);
}
.homepage-stat strong {
transition: transform 220ms var(--motion-ease-soft), color 220ms var(--motion-ease-soft);
}
.homepage-stat:hover strong {
color: #f5d90a;
transform: translateY(-1px);
}
.homepage-button,
.content-button {
position: relative;
overflow: hidden;
transition:
transform 220ms var(--motion-ease-soft),
box-shadow 220ms var(--motion-ease-soft),
color 220ms var(--motion-ease-soft),
border-color 220ms var(--motion-ease-soft);
}
.homepage-button::after,
.content-button::after,
.pricing-download-button::after,
.specifications-download-button::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.24) 50%, transparent 70%);
transform: translateX(-140%);
opacity: 0;
transition: transform 520ms var(--motion-ease-soft), opacity 220ms var(--motion-ease-soft);
pointer-events: none;
}
.homepage-button:hover,
.homepage-button:focus-visible,
.content-button:hover,
.content-button:focus-visible,
.pricing-download-button:hover,
.pricing-download-button:focus-visible,
.specifications-download-button:hover,
.specifications-download-button:focus-visible {
transform: translateY(-2px);
}
.homepage-button:hover::after,
.homepage-button:focus-visible::after,
.content-button:hover::after,
.content-button:focus-visible::after,
.pricing-download-button:hover::after,
.pricing-download-button:focus-visible::after,
.specifications-download-button:hover::after,
.specifications-download-button:focus-visible::after {
transform: translateX(140%);
opacity: 1;
}
.tilt-card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateY(0) scale(1);
will-change: transform;
}
.tilt-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 45%);
opacity: 0;
transition: opacity 240ms var(--motion-ease-soft);
pointer-events: none;
z-index: 1;
}
.tilt-card:hover::before,
.tilt-card:focus-visible::before {
opacity: 1;
}
.tilt-card img {
transform: translateZ(0);
transition: transform 420ms var(--motion-ease-soft), filter 420ms var(--motion-ease-soft);
}
.tilt-card:hover img,
.tilt-card:focus-visible img {
transform: scale(1.04);
filter: saturate(1.04) contrast(1.02);
}
.homepage-category-card-body {
position: relative;
z-index: 2;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
}
.homepage-category-card-body strong {
transition: color 220ms var(--motion-ease-soft);
}
.homepage-category-card img {
display: block;
width: 100%;
height: 180px;
padding: 10px 0 10px 0;
object-fit: contain;
object-position: center center;
background: #f8fafc;
}
.homepage-category-card:hover .homepage-category-card-body strong,
.homepage-category-card:focus-visible .homepage-category-card-body strong {
color: #c2171e;
}
.homepage-category-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(194, 23, 30, 0.12), transparent 36%);
opacity: 0;
transition: opacity 260ms var(--motion-ease-soft);
pointer-events: none;
z-index: 1;
}
.homepage-category-card:hover::after,
.homepage-category-card:focus-visible::after {
opacity: 1;
}
.homepage-intro-panel,
.homepage-support-panel,
.homepage-stat-card,
.homepage-feature-card,
.homepage-location,
.homepage-category-card {
position: relative;
}
.homepage-intro-panel::after,
.homepage-support-panel::after,
.homepage-stat-card::after,
.homepage-feature-card::after,
.homepage-location::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 3px;
background: linear-gradient(90deg, rgba(194, 23, 30, 0.78), rgba(245, 217, 10, 0.5), transparent 85%);
opacity: 0;
transform: scaleX(0);
transform-origin: left center;
transition: transform 300ms var(--motion-ease-soft), opacity 300ms var(--motion-ease-soft);
z-index: 1;
}
.homepage-intro-panel:hover::after,
.homepage-support-panel:hover::after,
.homepage-stat-card:hover::after,
.homepage-feature-card:hover::after,
.homepage-location:hover::after,
.homepage-intro-panel:focus-within::after,
.homepage-support-panel:focus-within::after,
.homepage-stat-card:focus-within::after,
.homepage-feature-card:focus-within::after,
.homepage-location:focus-within::after,
.homepage-category-card:hover::after,
.homepage-category-card:focus-visible::after {
opacity: 1;
transform: scaleX(1);
}
.homepage-support-panel--secondary iframe,
.homepage-location-map iframe,
.homepage-hero video {
backface-visibility: hidden;
}
.homepage-support-video {
display: flex;
min-height: 314px;
}
.homepage-support-video__trigger {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 314px;
margin: 0;
padding: 28px;
border: 0;
border-radius: 12px;
background:
radial-gradient(circle at center, rgba(237, 28, 36, 0.16), transparent 44%),
linear-gradient(145deg, rgba(10, 10, 10, 0.98), rgba(26, 26, 26, 0.94));
cursor: pointer;
overflow: hidden;
}
.homepage-support-video__trigger:focus-visible {
outline: 2px solid #f5d90a;
outline-offset: 3px;
}
.homepage-support-video__logo {
width: min(72%, 250px);
max-height: 120px;
object-fit: contain;
filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.28));
position: relative;
z-index: 1;
}
.homepage-support-video__play {
position: absolute;
inset: 50% auto auto 50%;
width: 88px;
height: 88px;
transform: translate(-50%, -50%);
filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.34));
z-index: 2;
}
.homepage-support-video .fb-video,
.homepage-support-video .fb-video span,
.homepage-support-video iframe {
display: block;
width: 100% !important;
min-height: 314px;
}
.homepage-hero video {
animation: motion-fade-in 900ms ease-out both;
}
.homepage-section-head.is-visible,
.homepage-intro-panel.is-visible,
.homepage-intro-support.is-visible,
.homepage-support-panel.is-visible,
.homepage-stat-card.is-visible,
.homepage-feature-card.is-visible,
.homepage-location.is-visible,
.homepage-category-card.is-visible {
animation: motion-fade-up 720ms var(--motion-ease-out) both;
animation-delay: var(--motion-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
.homepage-hero::before,
.homepage-hero::after,
.homepage-hero-overlay::before {
animation: none;
}
html.motion-enhanced .motion-reveal,
html.motion-enhanced .motion-reveal.is-visible,
.homepage-hero video,
.homepage-actions > *,
.homepage-hero-stats > *,
.homepage-category-card,
.homepage-support-panel,
.homepage-stat-card,
.homepage-feature-card,
.homepage-location,
.homepage-button,
.content-button,
.pricing-download-button,
.specifications-download-button,
.tilt-card,
.tilt-card img,
.tilt-card::before,
.homepage-category-card::after {
animation: none !important;
transition: none !important;
transform: none !important;
filter: none !important;
}
}