/*
 * Homepage slider - lifted verbatim from the live site, where it was
 * injected inline. Loaded only on the front page.
 */

.shs-slider{
--shs-speed: 620ms;
--shs-ease: cubic-bezier(.32,.72,0,1);
--shs-resize: 420ms;
--shs-autoplay: 6000ms;
--shs-bg: #101418;
--shs-fill-height: clamp(190px, 40vw, 520px);position: relative;
width: 100%;
overflow: hidden;
background: var(--shs-bg);
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}.shs-viewport{
position: relative;
width: 100%;
aspect-ratio: 16 / 6;
transition: height var(--shs-resize) var(--shs-ease);
}.shs-slider .shs-slide{
position: absolute;
top: 0;
left: 0;
width: 100%;
display: block;
border: 0;
transform: translate3d(100%,0,0);
transition: transform var(--shs-speed) var(--shs-ease);
will-change: transform;
}
.shs-slider .shs-slide.is-left{ transform: translate3d(-100%,0,0); }
.shs-slider .shs-slide.is-active{ transform: translate3d(0,0,0); z-index: 2; }
.shs-slider .shs-slide.no-anim{ transition: none; }.shs-slider .shs-slide img{
display: block;
width: 100%;
height: auto;
max-width: none;
margin: 0;
padding: 0;
border: 0;
user-select: none;
-webkit-user-drag: none;
}.shs-slider[data-mode="fill"] .shs-viewport{ height: var(--shs-fill-height); aspect-ratio: auto; }
.shs-slider[data-mode="fill"] .shs-slide{ height: 100%; }
.shs-slider[data-mode="fill"] .shs-slide img{ height: 100%; object-fit: cover; object-position: center; }.shs-slider .shs-nav{
position: absolute;
top: 50%;
z-index: 4;
display: grid;
place-items: center;
width: 46px; height: 46px;
min-width: 0;
margin: 0; padding: 0;
border: 0;
border-radius: 999px;
background: rgba(16,20,24,.42);
color: #fff;
font: inherit;
cursor: pointer;
opacity: .85;
transform: translateY(-50%);
transition: background .2s ease, opacity .2s ease;
}
.shs-slider .shs-nav:hover{ background: rgba(16,20,24,.8); opacity: 1; }
.shs-slider .shs-prev{ left: 14px; }
.shs-slider .shs-next{ right: 14px; }
.shs-slider .shs-nav svg{
width: 22px; height: 22px;
fill: none; stroke: currentColor; stroke-width: 2.4;
stroke-linecap: round; stroke-linejoin: round;
}.shs-slider .shs-dots{
position: absolute;
left: 0; right: 0; bottom: 16px;
z-index: 4;
display: flex;
justify-content: center;
gap: 8px;
margin: 0; padding: 0;
}
.shs-slider .shs-dot{
width: 9px; height: 9px;
min-width: 0;
margin: 0; padding: 0;
border: 0;
border-radius: 999px;
background: rgba(255,255,255,.55);
box-shadow: 0 1px 4px rgba(0,0,0,.45);
cursor: pointer;
transition: width .3s var(--shs-ease), background .3s ease;
}
.shs-slider .shs-dot.is-on{ width: 28px; background: #fff; }.shs-slider .shs-progress{
position: absolute;
left: 0; right: 0; bottom: 0;
z-index: 4;
height: 3px;
background: rgba(255,255,255,.18);
}
.shs-slider .shs-progress i{
display: block;
height: 100%;
background: #fff;
transform-origin: left center;
transform: scaleX(0);
animation: shs-fill var(--shs-autoplay) linear forwards;
}
.shs-slider.is-paused .shs-progress i{ animation-play-state: paused; }
.shs-slider:not(.is-playing) .shs-progress{ display: none; }
@keyframes shs-fill{ from{ transform: scaleX(0) } to{ transform: scaleX(1) } }.shs-slider .shs-nav:focus-visible,
.shs-slider .shs-dot:focus-visible,
.shs-slider .shs-slide:focus-visible{
outline: 3px solid #fff;
outline-offset: 3px;
}@media (max-width: 640px){
.shs-slider .shs-nav{ width: 36px; height: 36px; }
.shs-slider .shs-nav svg{ width: 18px; height: 18px; }
.shs-slider .shs-prev{ left: 8px; }
.shs-slider .shs-next{ right: 8px; }
.shs-slider .shs-dots{ bottom: 12px; }
}@media (prefers-reduced-motion: reduce){
.shs-slider .shs-slide,
.shs-slider .shs-viewport{ transition: none !important; }
.shs-slider .shs-progress{ display: none !important; }
}