/* Lab uses the same TOP slide motion as Life; brand colors/layout remain Lab's. */
@property --wipe {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -32%;
}
.k-hero-media .k-slide {
  z-index: 0;
  --wipe: -32%;
  transition: none;
  will-change: opacity, filter, -webkit-mask-image, mask-image;
}
.k-hero-media .k-slide.is-current,
.k-hero-media .k-slide.is-entering,
.k-hero-media .k-slide.is-exiting { visibility: visible; }
.k-hero-media .k-slide.is-current {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.k-hero-media .k-slide.is-exiting {
  opacity: 1;
  z-index: 3;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom right,
    transparent 0%, transparent calc(var(--wipe) - 28%),
    rgba(0,0,0,.05) calc(var(--wipe) - 20%),
    rgba(0,0,0,.14) calc(var(--wipe) - 12%),
    rgba(0,0,0,.28) calc(var(--wipe) - 4%),
    rgba(0,0,0,.46) calc(var(--wipe) + 6%),
    rgba(0,0,0,.66) calc(var(--wipe) + 16%),
    rgba(0,0,0,.84) calc(var(--wipe) + 26%),
    #000 calc(var(--wipe) + 36%), #000 100%);
  mask-image: linear-gradient(to bottom right,
    transparent 0%, transparent calc(var(--wipe) - 28%),
    rgba(0,0,0,.05) calc(var(--wipe) - 20%),
    rgba(0,0,0,.14) calc(var(--wipe) - 12%),
    rgba(0,0,0,.28) calc(var(--wipe) - 4%),
    rgba(0,0,0,.46) calc(var(--wipe) + 6%),
    rgba(0,0,0,.66) calc(var(--wipe) + 16%),
    rgba(0,0,0,.84) calc(var(--wipe) + 26%),
    #000 calc(var(--wipe) + 36%), #000 100%);
  animation: kHeroDiagonalFadeOut 6.5s cubic-bezier(.28,.02,.10,1) both;
}
.k-hero-media .k-slide.is-entering {
  opacity: 1;
  z-index: 2;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom right,
    #000 0%, #000 calc(var(--wipe) - 36%),
    rgba(0,0,0,.84) calc(var(--wipe) - 26%),
    rgba(0,0,0,.66) calc(var(--wipe) - 16%),
    rgba(0,0,0,.46) calc(var(--wipe) - 6%),
    rgba(0,0,0,.28) calc(var(--wipe) + 4%),
    rgba(0,0,0,.14) calc(var(--wipe) + 12%),
    rgba(0,0,0,.05) calc(var(--wipe) + 20%),
    transparent calc(var(--wipe) + 28%), transparent 100%);
  mask-image: linear-gradient(to bottom right,
    #000 0%, #000 calc(var(--wipe) - 36%),
    rgba(0,0,0,.84) calc(var(--wipe) - 26%),
    rgba(0,0,0,.66) calc(var(--wipe) - 16%),
    rgba(0,0,0,.46) calc(var(--wipe) - 6%),
    rgba(0,0,0,.28) calc(var(--wipe) + 4%),
    rgba(0,0,0,.14) calc(var(--wipe) + 12%),
    rgba(0,0,0,.05) calc(var(--wipe) + 20%),
    transparent calc(var(--wipe) + 28%), transparent 100%);
  animation: kHeroDiagonalResolveIn 6.5s cubic-bezier(.24,.02,.10,1) both;
}
@keyframes kHeroDiagonalFadeOut {
  0% { --wipe:-32%; opacity:1; filter:blur(0); }
  38% { opacity:.985; filter:blur(.25px); }
  68% { opacity:.94; filter:blur(.85px); }
  100% { --wipe:132%; opacity:.78; filter:blur(2px); }
}
@keyframes kHeroDiagonalResolveIn {
  0% { --wipe:-32%; opacity:.50; filter:blur(8px); }
  16% { opacity:.70; filter:blur(5.8px); }
  36% { opacity:.86; filter:blur(3.2px); }
  58% { opacity:.95; filter:blur(1.4px); }
  78% { opacity:.985; filter:blur(.45px); }
  100% { --wipe:132%; opacity:1; filter:blur(0); }
}
@media (max-width:640px) {
  .k-hero-media .k-slide,
  .k-hero-media .k-slide.is-entering,
  .k-hero-media .k-slide.is-exiting {
    -webkit-mask-image:none !important;
    mask-image:none !important;
    filter:none !important;
  }
  .k-hero-media .k-slide.is-entering {
    z-index:3;
    animation:kHeroMobileFadeIn 1.35s ease both !important;
  }
  .k-hero-media .k-slide.is-exiting {
    z-index:2;
    animation:kHeroMobileFadeOut 1.35s ease both !important;
  }
  @keyframes kHeroMobileFadeIn { from { opacity:0; } to { opacity:1; } }
  @keyframes kHeroMobileFadeOut { from { opacity:1; } to { opacity:0; } }
}
@media (prefers-reduced-motion:reduce) {
  .k-hero-media .k-slide,
  .k-hero-media .k-slide.is-entering,
  .k-hero-media .k-slide.is-exiting {
    animation:none !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
    filter:none !important;
  }
}
