html {
  scroll-behavior: smooth;
}

html,
body {
  overflow-x: clip;
}

.kln-reveal {
  opacity: 0;
  transform: translateY(60px);
  filter: blur(10px);
  transition:
    opacity 1.1s cubic-bezier(0.2, 0.65, 0.25, 1),
    transform 1.1s cubic-bezier(0.2, 0.65, 0.25, 1),
    filter 1.1s cubic-bezier(0.2, 0.65, 0.25, 1);
  transition-delay: var(--kln-delay, 0ms);
  will-change: opacity, transform, filter;
}

.kln-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.kln-reveal--fade {
  transform: none;
}
.kln-reveal--fade.is-visible {
  transform: none;
}

.kln-reveal--scale {
  transform: translateY(40px) scale(0.85);
}
.kln-reveal--scale.is-visible {
  transform: translateY(0) scale(1);
}

.kln-reveal--left {
  transform: translate(-70px, 0);
}
.kln-reveal--left.is-visible {
  transform: translate(0, 0);
}

.kln-reveal--right {
  transform: translate(70px, 0);
}
.kln-reveal--right.is-visible {
  transform: translate(0, 0);
}

.kln-reveal--zoom {
  transform: scale(0.75);
  filter: blur(14px);
}
.kln-reveal--zoom.is-visible {
  transform: scale(1);
  filter: blur(0);
}

.kln-reveal--clip {
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  transform: none;
  filter: none;
  opacity: 1;
  transition: clip-path 1.2s cubic-bezier(0.2, 0.65, 0.25, 1),
              -webkit-clip-path 1.2s cubic-bezier(0.2, 0.65, 0.25, 1);
  transition-delay: var(--kln-delay, 0ms);
}
.kln-reveal--clip.is-visible {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

.kln-reveal--rotate {
  transform: translateY(50px) rotate(-3deg);
}
.kln-reveal--rotate.is-visible {
  transform: translateY(0) rotate(0);
}

@keyframes kln-hero-in {
  0% {
    transform: translateY(40px) scale(1.02);
    filter: blur(10px);
  }
  100% {
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.kln-hero-reveal {
  animation: kln-hero-in 1.3s cubic-bezier(0.2, 0.65, 0.25, 1) both;
  animation-delay: var(--kln-hero-delay, 0ms);
}

.product-miniature,
.product-miniature-default {
  transition:
    transform 0.45s cubic-bezier(0.2, 0.65, 0.25, 1),
    box-shadow 0.45s cubic-bezier(0.2, 0.65, 0.25, 1);
}

.product-miniature:hover,
.product-miniature-default:hover {
  transform: translateY(-10px) rotate(-0.5deg);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);
}

.product-miniature .thumbnail-container,
.product-miniature .product-thumbnail,
.product-miniature a.thumbnail,
.product-miniature .product-miniature__thumbnail-wrapper {
  overflow: hidden;
}

.product-miniature img,
.product-miniature .thumbnail-container img {
  transition: transform 0.9s cubic-bezier(0.2, 0.65, 0.25, 1),
              filter 0.6s ease;
  will-change: transform;
}

.product-miniature:hover img {
  transform: scale(1.14);
  filter: saturate(1.1);
}

.btn,
.btn-primary,
.btn-secondary,
.btn-outline-primary,
.btn-tertiary {
  transition:
    transform 0.22s cubic-bezier(0.2, 0.65, 0.25, 1),
    box-shadow 0.35s ease,
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease !important;
}

.btn:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.btn-tertiary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}

.btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}


@keyframes kln-cta-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(80, 110, 80, 0);
  }
  30% {
    box-shadow: 0 0 0 16px rgba(80, 110, 80, 0);
  }
  40% {
    box-shadow: 0 0 0 16px rgba(80, 110, 80, 0.25);
  }
  70% {
    box-shadow: 0 0 0 24px rgba(80, 110, 80, 0);
  }
}

.kln-cta-glow.is-visible {
  animation: kln-cta-pulse 1.8s ease-out 0.3s 1 both;
}

.kln-link-underline {
  position: relative;
  display: inline-block;
}

.kln-link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s cubic-bezier(0.2, 0.65, 0.25, 1);
}

.kln-link-underline:hover::after,
.kln-link-underline:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.kln-reveal,
.kln-hero-reveal,
.product-miniature img {
  backface-visibility: hidden;
}

@media (max-width: 767.98px) {
  .kln-reveal {
    transform: translateY(28px);
    filter: blur(4px);
    transition-duration: 0.8s, 0.8s, 0.8s;
  }

  .kln-reveal--scale {
    transform: translateY(20px) scale(0.92);
  }

  .kln-reveal--left {
    transform: translate(-28px, 0);
  }

  .kln-reveal--right {
    transform: translate(28px, 0);
  }

  .kln-reveal--zoom {
    transform: scale(0.88);
    filter: blur(6px);
  }

  .kln-reveal--rotate {
    transform: translateY(24px) rotate(-1.5deg);
  }

  .kln-reveal--clip {
    transition-duration: 0.9s;
  }

  @keyframes kln-hero-in {
    0% {
      transform: translateY(24px) scale(1.01);
      filter: blur(5px);
    }
    100% {
      transform: translateY(0) scale(1);
      filter: blur(0);
    }
  }

  .kln-hero-reveal {
    animation-duration: 0.9s;
  }

  .product-miniature:hover,
  .product-miniature-default:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
  }

  .product-miniature:hover img {
    transform: scale(1.06);
  }

  .btn:hover:not(:disabled),
  .btn-primary:hover:not(:disabled),
  .btn-tertiary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  }

  @keyframes kln-cta-pulse {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(80, 110, 80, 0);
    }
    40% {
      box-shadow: 0 0 0 10px rgba(80, 110, 80, 0.22);
    }
    70% {
      box-shadow: 0 0 0 16px rgba(80, 110, 80, 0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .kln-reveal,
  .kln-reveal.is-visible,
  .kln-reveal--scale,
  .kln-reveal--left,
  .kln-reveal--right,
  .kln-reveal--zoom,
  .kln-reveal--clip,
  .kln-reveal--rotate,
  .kln-hero-reveal,
  .kln-cta-glow {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }

  .product-miniature,
  .product-miniature img,
  .btn {
    transition: none !important;
  }

  .product-miniature:hover,
  .product-miniature:hover img,
  .btn:hover {
    transform: none !important;
  }

}