/* Progressive vector enhancement. The original artwork always remains visible. */
.hero.k2-hero-motion {
  isolation: isolate;
}

.k2-hero-motion .thread--hero {
  display: none;
}

.k2-hero-motion .hero-media {
  animation: k2-hero-perspective 8s cubic-bezier(.2,.65,.3,1) both;
  transform-origin: 72% 50%;
}

.k2-hero-vector {
  position: absolute;
  inset: 0;
  width: 100%;
  height: calc(100% + 80px);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  transform: translate3d(0, calc(var(--scroll-y, 0px) * .12), 0) scale(1.04);
}

.k2-hero-vector svg {
  position: absolute;
  display: block;
  width: var(--k2-art-size);
  height: var(--k2-art-size);
  left: var(--k2-art-left);
  top: var(--k2-art-top);
  overflow: visible;
}

.k2-hero-trace {
  fill: none;
  stroke: #cf4239;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

.is-playing .k2-hero-trace {
  animation: k2-hero-thread 5.5s cubic-bezier(.3,.1,.25,1) var(--k2-trace-delay) both;
}

.is-playing .k2-hero-trace--fingerprint {
  animation: k2-hero-weave 16s cubic-bezier(.45,0,.25,1) var(--k2-trace-delay) infinite both;
}

.is-playing .k2-hero-trace--thread {
  animation-name: k2-hero-thread;
  stroke-width: 1.8;
}

.is-complete .k2-hero-trace--fingerprint {
  opacity: .85;
  stroke-dashoffset: 0;
}

.k2-hero-light {
  opacity: 0;
  transform: translateX(-650px);
}

.is-playing .k2-hero-light {
  animation: k2-hero-light 7.8s cubic-bezier(.3,.1,.3,1) both;
}

.k2-hero-motion.is-motion-paused .hero-media,
.k2-hero-vector.is-paused * {
  animation-play-state: paused !important;
}

.k2-hero-motion.is-motion-settled .hero-media {
  animation: none;
}

/* Draw → hold → rewind → rest. Matching endpoints prevent a loop seam. */
@keyframes k2-hero-weave {
  0% { opacity: 0; stroke-dashoffset: 1; }
  6% { opacity: .95; stroke-dashoffset: 1; }
  38% { opacity: .95; stroke-dashoffset: 0; }
  54% { opacity: .9; stroke-dashoffset: 0; }
  86% { opacity: .8; stroke-dashoffset: 1; }
  92%, 100% { opacity: 0; stroke-dashoffset: 1; }
}

@keyframes k2-hero-thread {
  0% { opacity: 0; stroke-dashoffset: 1; }
  8% { opacity: .85; }
  66% { opacity: .8; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}

@keyframes k2-hero-light {
  0% { opacity: 0; transform: translateX(-650px); }
  22% { opacity: .2; }
  65% { opacity: .13; }
  100% { opacity: 0; transform: translateX(1254px); }
}

@keyframes k2-hero-perspective {
  0% { transform: perspective(1800px) rotateY(-1.25deg) scale(1.025); }
  100% { transform: perspective(1800px) rotateY(0) scale(1); }
}

@media (width <= 760px) {
  .k2-hero-motion .hero-media {
    animation: none;
  }

  .k2-hero-vector {
    transform: none;
  }

  .k2-hero-trace--thread,
  .k2-hero-light {
    display: none;
  }

  .k2-hero-trace {
    stroke-width: 2.6;
  }

}

@media (prefers-reduced-motion: reduce) {
  .k2-hero-motion .hero-media,
  .k2-hero-motion .hero-media > img,
  .k2-hero-vector,
  .k2-hero-vector * {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  .k2-hero-vector {
    display: block;
  }

  .k2-hero-trace--fingerprint {
    opacity: .85;
    stroke-dashoffset: 0;
  }
}