:root {
  --ktc-motion-fast: 220ms;
  --ktc-motion-enter: 480ms;
  --ktc-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ktc-pointer-x: 0;
  --ktc-pointer-y: 0;
}

/* Signal Current is one coherent motion system: moving ocean paths,
   signal reveals, sequential nodes, and one warm endpoint. */
.ktc-caustic-field {
  isolation: isolate;
}

.ktc-caustic-field::before {
  background-image:
    radial-gradient(
      ellipse at 58% 18%,
      rgba(87, 231, 255, 0.09),
      transparent 46%
    ),
    radial-gradient(
      ellipse at 86% 58%,
      rgba(76, 111, 255, 0.13),
      transparent 44%
    );
  animation: ktc-water-breathe 6.5s ease-in-out infinite alternate;
}

.ktc-lava-undercurrent::after {
  inset: auto -18% -17%;
  width: auto;
  height: 38%;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  clip-path: none;
  filter: blur(34px);
  background:
    radial-gradient(
      ellipse at 50% 112%,
      rgba(255, 101, 74, 0.22) 0,
      rgba(255, 101, 74, 0.075) 23%,
      transparent 59%
    ),
    radial-gradient(
      ellipse at 72% 108%,
      rgba(255, 138, 76, 0.1),
      transparent 42%
    );
  animation: ktc-lava-breathe 7.5s ease-in-out infinite alternate;
}

.ktc-current-map {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ktc-current-line {
  fill: none;
  stroke: url("#current-map-cool");
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-dasharray: 18 13;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 7px rgba(87, 231, 255, 0.34));
  animation: ktc-current-travel 7.5s linear infinite;
}

.ktc-current-line.line-2 {
  animation-duration: 9.5s;
  animation-direction: reverse;
}

.ktc-current-line.line-3 {
  animation-duration: 8.5s;
  animation-delay: -4s;
}

.ktc-current-line.line-4 {
  animation-duration: 11s;
  animation-direction: reverse;
}

.ktc-current-line.line-5 {
  animation-duration: 8.75s;
  animation-delay: -7s;
}

.ktc-current-line.line-6 {
  animation-duration: 12s;
  animation-direction: reverse;
}

.ktc-current-line-warm {
  stroke: url("#current-map-warm");
  stroke-width: 1.75;
  stroke-dasharray: 8 18;
  filter: drop-shadow(0 0 9px rgba(255, 101, 74, 0.4));
  animation-duration: 7s;
}

.ktc-current-nodes circle {
  fill: #eafbff;
  filter: drop-shadow(0 0 10px rgba(87, 231, 255, 0.85));
  transform-box: fill-box;
  transform-origin: center;
  animation: ktc-current-node 4.2s ease-in-out infinite;
}

.ktc-current-nodes circle:nth-child(2) {
  animation-delay: -1.4s;
}

.ktc-current-nodes .ktc-current-node-warm {
  fill: #ff654a;
  filter: drop-shadow(0 0 14px rgba(255, 101, 74, 0.9));
  animation-delay: -2.8s;
}

.ktc-current-k {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: #eafbff;
  clip-path: inset(0 100% 0 0);
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 18px rgba(87, 231, 255, 0.18));
  -webkit-mask: url("/brand/ktc-mark-black.png") center/contain no-repeat;
  mask: url("/brand/ktc-mark-black.png") center/contain no-repeat;
  animation: ktc-mark-reveal 920ms var(--ktc-motion-ease) 120ms forwards;
}

.hero h1 em {
  color: transparent;
  background: linear-gradient(
    102deg,
    #a8c2ce 0%,
    #eafbff 31%,
    #78ebff 48%,
    #eafbff 64%,
    #a8c2ce 100%
  );
  background-size: 220% 100%;
  background-position: 100% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: ktc-type-current 5.5s ease-in-out infinite alternate;
}

.ktc-motion-ready [data-ktc-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--ktc-motion-enter) var(--ktc-motion-ease),
    transform var(--ktc-motion-enter) var(--ktc-motion-ease);
  transition-delay: var(--ktc-delay, 0ms);
}

.ktc-motion-ready [data-ktc-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

[data-ktc-depth] {
  transform: perspective(1000px) rotateX(calc(var(--ktc-pointer-y) * -0.75deg))
    rotateY(calc(var(--ktc-pointer-x) * 0.75deg)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform 240ms var(--ktc-motion-ease);
  will-change: transform;
}

.ktc-scan {
  position: relative;
  isolation: isolate;
}

.ktc-scan::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  width: auto;
  height: auto;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(
    110deg,
    transparent 0 34%,
    rgba(87, 231, 255, 0.72) 46%,
    rgba(234, 251, 255, 0.9) 50%,
    transparent 62% 100%
  );
  background-size: 240% 100%;
  background-position: 190% 0;
  border-radius: inherit;
  opacity: 0;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity var(--ktc-motion-fast) ease;
}

.ktc-scan:hover::after,
.ktc-scan:focus-visible::after {
  opacity: 1;
  animation: ktc-scan-pass 1.15s var(--ktc-motion-ease) both;
}

.ktc-signal-rail > i {
  animation: ktc-node-pulse 3.8s ease-in-out infinite;
  animation-delay: calc(var(--ktc-index, 0) * 420ms);
}

@keyframes ktc-water-breathe {
  from {
    opacity: 0.68;
    transform: translate3d(-1%, -0.5%, 0) scale(1.02);
  }
  to {
    opacity: 1;
    transform: translate3d(1%, 0.75%, 0) scale(1.08);
  }
}

@keyframes ktc-current-travel {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -310;
  }
}

@keyframes ktc-current-node {
  0%,
  72%,
  100% {
    opacity: 0.34;
    transform: scale(0.7);
  }
  12%,
  24% {
    opacity: 1;
    transform: scale(1.3);
  }
}

@keyframes ktc-mark-reveal {
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes ktc-type-current {
  from {
    background-position: 100% 50%;
  }
  to {
    background-position: 0% 50%;
  }
}

@keyframes ktc-lava-breathe {
  from {
    opacity: 0.65;
    transform: translate3d(0, 2%, 0) scaleX(0.94);
  }
  to {
    opacity: 1;
    transform: translate3d(0, -1%, 0) scaleX(1.06);
  }
}

@keyframes ktc-scan-pass {
  from {
    background-position: 190% 0;
  }
  to {
    background-position: -80% 0;
  }
}

@keyframes ktc-node-pulse {
  0%,
  72%,
  100% {
    opacity: 0.46;
    transform: scale(0.82);
    box-shadow: 0 0 0 rgba(87, 231, 255, 0);
  }
  8%,
  18% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 18px rgba(87, 231, 255, 0.7);
  }
}

@media (pointer: coarse), (max-width: 700px) {
  [data-ktc-depth] {
    transform: none;
  }

  .ktc-current-line {
    stroke-width: 1.25;
  }
}

html[data-motion="off"] .ktc-caustic-field::before,
html[data-motion="off"] .ktc-lava-undercurrent::after,
html[data-motion="off"] .ktc-current-line,
html[data-motion="off"] .ktc-current-nodes circle,
html[data-motion="off"] .ktc-current-k,
html[data-motion="off"] .hero h1 em,
html[data-motion="off"] .ktc-signal-rail > i,
html[data-motion="off"] .ktc-scan:hover::after,
html[data-motion="off"] .ktc-scan:focus-visible::after {
  animation: none !important;
}

html[data-motion="off"] .hero h1 em {
  background-position: 50% 50%;
}

html[data-motion="off"] .ktc-current-k {
  opacity: 1;
  clip-path: none;
}

html[data-motion="off"].ktc-motion-ready [data-ktc-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

html[data-motion="off"] [data-ktc-depth] {
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion]) .ktc-caustic-field::before,
  html:not([data-motion]) .ktc-lava-undercurrent::after,
  html:not([data-motion]) .ktc-current-line,
  html:not([data-motion]) .ktc-current-nodes circle,
  html:not([data-motion]) .ktc-current-k,
  html:not([data-motion]) .hero h1 em,
  html:not([data-motion]) .ktc-signal-rail > i,
  html:not([data-motion]) .ktc-scan:hover::after,
  html:not([data-motion]) .ktc-scan:focus-visible::after {
    animation: none !important;
  }

  html:not([data-motion]) .hero h1 em {
    background-position: 50% 50%;
  }

  html:not([data-motion]) .ktc-current-k {
    opacity: 1;
    clip-path: none;
  }

  html:not([data-motion]).ktc-motion-ready [data-ktc-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html:not([data-motion]) [data-ktc-depth] {
    transform: none;
    transition: none;
  }
}