/* Kacheln wie auf der Binary-Shield-Landing: sie heben sich, ein Lichtfleck
   folgt der Maus, der Rand leuchtet an der Stelle mit. Farben bleiben Valet. */
.vcard,
.lcard,
.fcard,
.step,
.pcard,
.demo-btn,
.faq-list details,
.feature-card,
.price-card,
.faq-item {
  position: relative;
  --mx: 50%;
  --my: 50%;
}

.fcard,
.step,
.pcard,
.demo-btn,
.feature-card,
.price-card,
.vcard,
.lcard {
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s, box-shadow 0.35s, background-color 0.35s;
}

.fcard:hover,
.step:hover,
.pcard:hover,
.demo-btn:hover,
.feature-card:hover,
.price-card:hover,
.vcard:hover,
.lcard:hover {
  transform: translateY(-4px);
}

.card-fx-spot,
.card-fx-edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}

.card-fx-spot {
  z-index: 2;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(125, 168, 255, 0.28), transparent 46%);
}

.card-fx-edge {
  z-index: 3;
  padding: 1px;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(214, 226, 255, 0.95), rgba(167, 139, 250, 0.55) 42%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.vcard:hover .card-fx-spot,

.lcard:hover .card-fx-spot,
.fcard:hover .card-fx-spot,
.step:hover .card-fx-spot,
.pcard:hover .card-fx-spot,
.demo-btn:hover .card-fx-spot,
.faq-list details:hover .card-fx-spot,
.feature-card:hover .card-fx-spot,
.price-card:hover .card-fx-spot,
.faq-item:hover .card-fx-spot,
.vcard:hover .card-fx-edge,
.lcard:hover .card-fx-edge,
.fcard:hover .card-fx-edge,
.step:hover .card-fx-edge,
.pcard:hover .card-fx-edge,
.demo-btn:hover .card-fx-edge,
.faq-list details:hover .card-fx-edge,
.feature-card:hover .card-fx-edge,
.price-card:hover .card-fx-edge,
.faq-item:hover .card-fx-edge {
  opacity: 1;
}

.fcard:hover .ficon,
.step:hover .step-num,
.feature-card:hover .feature-icon {
  transform: scale(1.06);
}

.card-fx-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card-fx-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .card-fx-reveal,
  .card-fx-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}