/* Electric hover border for Fortnix
   - Light by default.
   - Only animates on hover on desktop (pointer: fine).
   - Respects card border-radius.
*/

/* Base: subtle border + soft shadow (all devices) */
.electric {
  --electric-color: #7df9ff;
  --electric-thickness: 2px;

  position: relative;
  border-radius: 18px; /* tweak if your cards use a different radius */
  border: 1px solid rgba(125, 249, 255, 0.16);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

/* Keep content above pseudo layers */
.electric > * {
  position: relative;
  z-index: 1;
}

/* Desktop / hover devices: enable electric hover effect */
@media (hover: hover) and (pointer: fine) {
  .electric::before,
  .electric::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 0;
  }

  /* Electric border ring (follows rounded edges) */
  .electric::before {
    padding: var(--electric-thickness);
    box-sizing: border-box;

    background:
      conic-gradient(
        from 0deg,
        rgba(125, 249, 255, 0.0) 0%,
        rgba(125, 249, 255, 1.0) 10%,
        rgba(125, 249, 255, 0.0) 20%,
        rgba(125, 249, 255, 0.85) 35%,
        rgba(125, 249, 255, 0.0) 50%,
        rgba(125, 249, 255, 1.0) 65%,
        rgba(125, 249, 255, 0.0) 80%,
        rgba(125, 249, 255, 1.0) 100%
      );

    background-size: 300% 300%;
    mix-blend-mode: screen;

    /* Punch out the center so only a border shows */
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
  }

  /* Outer glow */
  .electric::after {
    inset: -14px;
    background:
      radial-gradient(
        circle at 50% 50%,
        rgba(125, 249, 255, 0.36),
        transparent 70%
      );
    filter: blur(22px);
  }

  .electric:hover {
    border-color: rgba(125, 249, 255, 0.95);
    box-shadow:
      0 0 26px rgba(125, 249, 255, 0.35),
      0 14px 40px rgba(0, 0, 0, 0.9);
    transform: translateY(-2px);
  }

  .electric:hover::before,
  .electric:hover::after {
    opacity: 1;
  }

  /* Animate only the gradient, not the geometry → corners stay round */
  .electric:hover::before {
    animation: eb-flow 1.8s linear infinite;
  }
}

/* Move the conic gradient around the edges */
@keyframes eb-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .electric::before,
  .electric::after {
    animation: none !important;
  }
}