/* Inspired by the supplied HTML ZIP: Power3-like layer masks + rising service overlays.
   Implemented in CSS, without Revolution Slider, jQuery plugins or tracking scripts. */
:root{--source-reveal-duration:1.05s}

/* Original ZIP: slider layers entered from the left through a horizontal mask,
   and appeared in sequence (kicker, title, text, buttons). */
body.kml-slider-source-motion .hero-v4 .hero-slide.is-active .hero-copy>*{
  animation-name:kmlSourceMaskIn!important;
  animation-duration:var(--source-reveal-duration)!important;
  animation-timing-function:cubic-bezier(.16,.83,.28,1)!important;
  animation-fill-mode:both!important;
  will-change:transform,clip-path,opacity;
}
body.kml-slider-source-motion .hero-v4 .hero-slide.is-active .hero-copy>*:nth-child(1){animation-delay:.16s!important}
body.kml-slider-source-motion .hero-v4 .hero-slide.is-active .hero-copy>*:nth-child(2){animation-delay:.49s!important}
body.kml-slider-source-motion .hero-v4 .hero-slide.is-active .hero-copy>*:nth-child(3){animation-delay:.82s!important}
body.kml-slider-source-motion .hero-v4 .hero-slide.is-active .hero-copy>*:nth-child(4){animation-delay:1.1s!important}
body.kml-slider-source-motion .hero-v4 .hero-slide.is-active .hero-copy>*:nth-child(5){animation-delay:1.26s!important}
body.kml-slider-source-motion .hero-v4 h1::after{animation:kmlSourceLineDraw .95s .7s ease both;transform-origin:left}

@keyframes kmlSourceMaskIn{
  0%{opacity:0;transform:translate3d(-110px,0,0);clip-path:inset(0 100% 0 0);filter:blur(2px)}
  58%{opacity:1}
  100%{opacity:1;transform:translate3d(0,0,0);clip-path:inset(0 0 0 0);filter:blur(0)}
}
@keyframes kmlSourceLineDraw{0%{transform:scaleX(0);opacity:0}100%{transform:scaleX(1);opacity:1}}

/* Original ZIP: service image fades away and a tinted second image + details
   travel upwards from roughly 200px below the card. */
.kml-service-source-motion .kml-source-service-card .card-media{
  aspect-ratio:1 / 1.04;
  isolation:isolate;
  background:#15293b;
}
.kml-service-source-motion .kml-source-service-card .card-media>img:first-child{
  width:100%;height:100%;object-fit:cover;
  transition:opacity .46s ease,transform .55s ease;
}
.kml-service-source-motion .kml-source-service-card .card-media::after{z-index:0}
.kml-service-source-motion .kml-source-service-card .service-hover-backdrop{
  position:absolute;inset:0;z-index:2;display:block;
  transform:translate3d(0,200px,0);opacity:0;
  transition:transform .52s cubic-bezier(.23,.75,.29,1),opacity .45s ease;
  pointer-events:none;
}
.kml-service-source-motion .kml-source-service-card .service-hover-backdrop img{
  width:100%;height:100%;object-fit:cover;transform:scale(1.08);
  transition:transform .85s ease;
}
.kml-service-source-motion .kml-source-service-card .service-hover-backdrop::after{
  position:absolute;inset:0;content:"";
  background:linear-gradient(180deg,rgba(176,116,13,.72) 0%,rgba(18,34,49,.86) 100%);
}
.kml-service-source-motion .kml-source-service-card .service-hover-panel{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;gap:12px;padding:25px 25px 29px;
  color:#fff;opacity:0;transform:translate3d(0,200px,0);
  transition:transform .55s cubic-bezier(.23,.75,.29,1),opacity .47s ease;
  pointer-events:none;text-align:left;
}
.kml-service-source-motion .service-hover-symbol{width:49px;height:49px;border:1px solid rgba(255,255,255,.5);border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.15);backdrop-filter:blur(6px)}
.kml-service-source-motion .service-hover-symbol svg{width:25px;height:25px}
.kml-service-source-motion .service-hover-panel strong{font-size:clamp(17px,2vw,23px);line-height:1.25;font-weight:850;letter-spacing:-.02em;text-transform:uppercase;text-shadow:0 2px 8px rgba(0,0,0,.12)}
.kml-service-source-motion .service-hover-description{font-size:13px;line-height:1.65;color:#fff;opacity:.96}
.kml-service-source-motion .service-hover-more{display:inline-flex;align-items:center;gap:9px;border-bottom:2px solid rgba(255,255,255,.65);padding-bottom:4px;font-size:11px;font-weight:900;letter-spacing:.08em}
.kml-service-source-motion .service-hover-more svg{width:16px;height:16px}
.kml-service-source-motion .kml-source-service-card .card-media-icon{transition:opacity .3s ease,transform .4s ease}
.kml-service-source-motion .kml-source-service-card:hover .card-media>img:first-child,
.kml-service-source-motion .kml-source-service-card:focus-within .card-media>img:first-child{opacity:.1;transform:scale(1.04)}
.kml-service-source-motion .kml-source-service-card:hover .service-hover-backdrop,
.kml-service-source-motion .kml-source-service-card:focus-within .service-hover-backdrop,
.kml-service-source-motion .kml-source-service-card:hover .service-hover-panel,
.kml-service-source-motion .kml-source-service-card:focus-within .service-hover-panel{transform:translate3d(0,0,0);opacity:1}
.kml-service-source-motion .kml-source-service-card:hover .service-hover-backdrop img,
.kml-service-source-motion .kml-source-service-card:focus-within .service-hover-backdrop img{transform:scale(1)}
.kml-service-source-motion .kml-source-service-card:hover .card-media-icon,
.kml-service-source-motion .kml-source-service-card:focus-within .card-media-icon{opacity:0;transform:translateY(-20px)}

/* Touch devices still expose the ordinary title, description and article link.
   Source overlay is hover-only to avoid a permanently obscured touch target. */
@media(hover:none){
  .kml-service-source-motion .kml-source-service-card .service-hover-panel,
  .kml-service-source-motion .kml-source-service-card .service-hover-backdrop{display:none}
  .kml-service-source-motion .kml-source-service-card .card-media{aspect-ratio:1.4}
}
@media(max-width:980px){.kml-service-source-motion .service-hover-panel{padding:18px;gap:8px}.kml-service-source-motion .service-hover-description{font-size:12px}}
@media(prefers-reduced-motion:reduce){
  body.kml-slider-source-motion .hero-v4 .hero-slide.is-active .hero-copy>*,
  body.kml-slider-source-motion .hero-v4 h1::after{animation:none!important;opacity:1!important;filter:none!important;transform:none!important;clip-path:none!important}
  .kml-service-source-motion .kml-source-service-card .card-media *,
  .kml-service-source-motion .kml-source-service-card .card-media>img{transition:none!important}
}
body.kml-animations-disabled.kml-slider-source-motion .hero-v4 .hero-slide.is-active .hero-copy>*,
body.kml-animations-disabled.kml-slider-source-motion .hero-v4 h1::after{animation:none!important;opacity:1!important;filter:none!important;transform:none!important;clip-path:none!important}
body.kml-animations-disabled.kml-service-source-motion .kml-source-service-card .card-media *{transition:none!important}
