/* Page motion. Anything that hides, blurs, offsets or animates is under html.fx-page. */

@property --kl-beam {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes kl-beam {
  to { --kl-beam: 360deg; }
}

@keyframes kl-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes kl-glint {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 30;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
  background: linear-gradient(90deg, rgba(246, 246, 244, 0) 0%, rgba(246, 246, 244, .55) 60%, #fff 100%);
  box-shadow: 0 0 8px rgba(255, 255, 255, .35);
}

@supports (animation-timeline: scroll()) {
  html.fx-page .scroll-progress {
    animation: kl-progress linear both;
    animation-duration: auto;
    animation-timeline: scroll(root block);
  }
}

html.fx-page .kl-veil {
  opacity: 0;
}

html.fx-page .why-motion .why-row:not(.why-head) {
  filter: blur(8px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1), filter .9s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i, 0) * 60ms);
}

html.fx-page .why-motion .why-row.is-in {
  filter: none;
}

html.fx-page .why-motion .why-row:not(.why-head) .why-kova .why-icon {
  stroke-dasharray: 21;
  stroke-dashoffset: 21;
  transition: stroke-dashoffset .7s cubic-bezier(.65, 0, .35, 1);
  transition-delay: calc(var(--i, 0) * 60ms + 380ms);
}

html.fx-page .why-motion .why-row.is-in .why-kova .why-icon {
  stroke-dashoffset: 0;
}

html.fx-page .btn {
  transition: opacity .18s ease, background .18s ease, scale .14s ease;
}

html.fx-page .btn:active {
  scale: .985;
}

html.fx-page .promo-code.kl-glint {
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, 0) 60%);
  background-repeat: no-repeat;
  background-size: 250% 100%;
  background-clip: padding-box;
  animation: kl-glint 900ms cubic-bezier(.22, 1, .36, 1) both;
}

@media (min-width: 821px) {
  html.fx-page .why-table::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    left: calc(200px + (100% - 200px) / 2);
    right: 0;
    top: 0;
    bottom: 0;
    padding: 1px;
    border-radius: 22px;
    pointer-events: none;
    z-index: 1;
    opacity: .75;
    background: conic-gradient(from var(--kl-beam), transparent 0 72%, rgba(246, 246, 244, .25) 82%, #fff 92%, rgba(246, 246, 244, .25) 97%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, .55));
  }

  html.fx-page .why-table.kl-beam-on::after {
    animation: kl-beam 9s linear infinite;
  }
}

@media (hover: hover) and (pointer: fine) {
  html.fx-page .btn.btn-outline {
    position: relative;
  }

  html.fx-page .btn.btn-outline::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
    background: conic-gradient(from var(--kl-beam), transparent 0 72%, rgba(246, 246, 244, .25) 82%, #fff 92%, rgba(246, 246, 244, .25) 97%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, .55));
  }

  html.fx-page .btn.btn-outline.kl-hot:hover::before,
  html.fx-page .btn.btn-outline.kl-hot:focus-visible::before {
    opacity: 1;
    animation: kl-beam 2.8s linear infinite;
  }

  html.fx-page .btn .icon {
    transition: translate .35s cubic-bezier(.34, 1.56, .64, 1);
  }

  html.fx-page .btn:hover .icon {
    translate: 0 -1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress,
  .why-table::after,
  .btn.btn-outline::before,
  .promo-code::after {
    animation: none !important;
  }

  .promo-code::after {
    content: none !important;
  }
}