:root {
    color-scheme: light;
    scroll-behavior: smooth;
}

body {
    opacity: 1;
    transition: opacity 180ms ease;
}

body.site-navigating main {
    opacity: 0;
    transform: translateY(8px);
}

main {
    transition: opacity 240ms ease, transform 240ms ease;
}

body.site-ready main {
    animation: page-enter 240ms ease;
}

/* Content stays visible when optional scripts are unavailable. */
html:not(.motion-ready) .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
}

.header-enter {
    animation: header-enter 450ms ease both;
}

.site-loading-indicator {
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 1000;
    width: 100%;
    height: 3px;
    overflow: hidden;
    background: rgba(0, 51, 102, .12);
    pointer-events: none;
}

.site-loading-indicator::after {
    content: "";
    display: block;
    width: 40%;
    height: 100%;
    background: #00a7c2;
    transform-origin: left;
    animation: site-progress 900ms cubic-bezier(.22, 1, .36, 1) infinite;
}

.site-loading-indicator.is-complete::after {
    width: 100%;
    animation: none;
    transition: width 180ms ease;
}

.animate-on-scroll {
    opacity: 0;
    transition: opacity 600ms ease, transform 600ms cubic-bezier(.2, .7, .2, 1);
    will-change: opacity, transform;
}

.animate-fade-up { transform: translateY(22px); }
.animate-fade-down { transform: translateY(-16px); }
.animate-fade-in { transform: scale(.985); }
.animate-slide-right { transform: translateX(-20px); }
.animate-slide-left { transform: translateX(20px); }
.animate-zoom-in { transform: scale(.96); }
.animate-on-scroll.is-visible { opacity: 1; transform: none; }

.delay-100 { transition-delay: 80ms; }
.delay-200 { transition-delay: 140ms; }
.delay-300 { transition-delay: 200ms; }
.delay-400 { transition-delay: 260ms; }
.delay-500 { transition-delay: 320ms; }
.delay-600 { transition-delay: 380ms; }

a, button, input, textarea, select, summary {
    -webkit-tap-highlight-color: transparent;
}

button, [role="button"], a.hover-glow {
    transition: transform 160ms ease, box-shadow 180ms ease, color 180ms ease, background-color 180ms ease;
}

button:active, [role="button"]:active, a.hover-glow:active {
    transform: scale(.97);
}

a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid #00a7c2;
    outline-offset: 3px;
}

#main-header nav a,
#main-header button {
    transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

#products-submenu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

#products-submenu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#mobile-menu {
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 200ms ease;
}

#mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
}

body.menu-open { overflow: hidden; }

#mobile-menu nav > * {
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity 240ms ease, transform 240ms ease;
}

#mobile-menu.is-open nav > * {
    opacity: 1;
    transform: translateX(0);
}

#mobile-menu.is-open nav > *:nth-child(2) { transition-delay: 35ms; }
#mobile-menu.is-open nav > *:nth-child(3) { transition-delay: 70ms; }
#mobile-menu.is-open nav > *:nth-child(4) { transition-delay: 105ms; }
#mobile-menu.is-open nav > *:nth-child(5) { transition-delay: 140ms; }

.hover-lift {
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 33, 64, .12);
}

.hover-zoom-img img {
    transition: transform 320ms ease;
}

.hover-zoom-img:hover img {
    transform: scale(1.035);
}

@keyframes site-progress {
    0% { transform: translateX(-100%) scaleX(.35); }
    55% { transform: translateX(105%) scaleX(1); }
    100% { transform: translateX(280%) scaleX(.5); }
}

@keyframes page-enter {
    from { opacity: .3; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@keyframes header-enter {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    :root { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }
    .animate-on-scroll { opacity: 1; transform: none; }
}