/* ── SZEGÉLY-FÉNY EFFEKT (hoverre körbefutó fénycsík) ────────────
   Ötlet forrása: volgard.hu (conic-gradient "üstökös" a keret mentén,
   csak a saját, letisztult stílusunkra – piros helyett a kék hangsúly-
   színnel). Kizárólag az index.html panel-kártyáira van bekötve.

   TECHNIKA:
   1. A kártya ::before pszeudo-eleme pontosan a keret helyét tölti ki
      (`inset: -1px`, `padding: 2px`).
   2. A háttere egy forgó `conic-gradient` – nagyrészt átlátszó, a végén
      egy rövid, fényes szakasszal (ez az "üstökös").
   3. A `mask` kimaszkolja a kártya BELSEJÉT (`content-box exclude`),
      így a conic-gradientből csak a 2px-es keret-gyűrű látszik.
   4. A `@property --glow-angle` regisztrálja a szöget animálható
      <angle> típusként – enélkül a forgás ugrásszerű lenne még a
      támogatott böngészőkben is (a fokozatos átmenethez kell).
   5. Csak hoverre/fókuszra fut – nyugalmi állapotban nem animál
      (nem versenyez a tartalom figyelmével, és tiszteletben tartja a
      mozgáscsökkentést kérő beállítást).

   ÚJ KÁRTYÁRA BEKÖTÉS: vedd fel az osztálynevét az alábbi szelektor-
   listákba (mindkét helyre: a ::before blokkhoz és a :hover/:focus-
   within blokkhoz). */

@property --glow-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.build-card,
.process-step,
.reference-card,
.order-card,
.assistant-card {
  position: relative;
}

.build-card::before,
.process-step::before,
.reference-card::before,
.order-card::before,
.assistant-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--glow-angle),
    transparent 0deg,
    transparent 300deg,
    var(--accent-border) 330deg,
    var(--accent) 345deg,
    var(--accent-hover) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.build-card:hover::before,
.build-card:focus-within::before,
.process-step:hover::before,
.process-step:focus-within::before,
.reference-card:hover::before,
.reference-card:focus-within::before,
.order-card:hover::before,
.order-card:focus-within::before,
.assistant-card:hover::before,
.assistant-card:focus-within::before {
  opacity: 1;
  animation: glow-sweep 2.6s linear infinite;
}

@keyframes glow-sweep {
  to { --glow-angle: 360deg; }
}

/* Mozgáscsökkentést kérő beállításnál: a fény látszódjon, de ne forogjon */
@media (prefers-reduced-motion: reduce) {
  .build-card:hover::before, .build-card:focus-within::before,
  .process-step:hover::before, .process-step:focus-within::before,
  .reference-card:hover::before, .reference-card:focus-within::before,
  .order-card:hover::before, .order-card:focus-within::before,
  .assistant-card:hover::before, .assistant-card:focus-within::before {
    animation: none;
  }
}