/* Hareket katmanı. Son kare, js-motion yokken görünen tasarımla aynıdır. */

html.js-motion .m-line {
  display: block;
  overflow: hidden;
}

html.js-motion .m-line-inner {
  display: block;
  will-change: transform;
}

html.js-motion .m-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 280px;
  margin: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(242, 194, 0, 0.06), transparent 70%);
  opacity: 0;
  z-index: 1;
}

html.js-motion .m-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

html.js-motion a.card-lift {
  position: relative;
}

html.js-motion a.card-lift::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 0%), rgba(242, 194, 0, 0.1), transparent 65%);
  transition: opacity 0.2s;
}

html.js-motion a.card-lift:hover {
  transform: translateY(-4px);
  border-color: #f2c200;
}

html.js-motion a.card-lift:hover::after {
  opacity: 1;
}

html.js-motion .m-step.is-active {
  color: #f2c200;
}

@media (prefers-reduced-motion: reduce) {
  html.js-motion .m-glow,
  html.js-motion .m-particles {
    display: none;
  }
}