:root {
  --electric-border-color: #f8ff2a;
  --electric-light-color: oklch(from var(--electric-border-color) l c h);
  --gradient-color: oklch(from var(--electric-border-color) 0.3 calc(c / 2) h / 0.4);
  --color-neutral-900: oklch(0.185 0 0);
}

.hero-electric-filter {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

.hero-stage-inner {
  position: relative;
  z-index: 2;
}

.hero-electric-border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.hero-electric-border .border-outer {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(248, 255, 42, 0.45);
  border-radius: inherit;
  padding: 0;
}

.hero-electric-border .main-card {
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--electric-border-color);
  filter: url(#heroElectricDisplace);
  background: linear-gradient(180deg, rgba(255, 247, 218, 0.1), rgba(255, 247, 218, 0));
}

.hero-electric-border .glow-layer-1,
.hero-electric-border .glow-layer-2,
.hero-electric-border .overlay-1,
.hero-electric-border .overlay-2,
.hero-electric-border .background-glow {
  position: absolute;
  inset: -6px;
  border-radius: inherit;
}

.hero-electric-border .glow-layer-1 {
  border: 2px solid rgba(248, 255, 42, 0.55);
  filter: blur(1px);
}

.hero-electric-border .glow-layer-2 {
  border: 2px solid var(--electric-light-color);
  filter: blur(4px);
}

.hero-electric-border .overlay-1,
.hero-electric-border .overlay-2 {
  mix-blend-mode: overlay;
  transform: scale(1.04);
  filter: blur(18px);
  background: linear-gradient(
    -30deg,
    rgba(255, 255, 255, 0.8),
    transparent 30%,
    transparent 70%,
    rgba(255, 255, 255, 0.8)
  );
}

.hero-electric-border .overlay-1 {
  opacity: 0.9;
}

.hero-electric-border .overlay-2 {
  opacity: 0.45;
}

.hero-electric-border .background-glow {
  filter: blur(28px);
  transform: scale(1.04);
  opacity: 0.4;
  background: linear-gradient(
    -30deg,
    var(--electric-light-color),
    transparent,
    var(--electric-border-color)
  );
}

.hero-stage {
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .hero-electric-border .glow-layer-1,
  .hero-electric-border .glow-layer-2,
  .hero-electric-border .overlay-1,
  .hero-electric-border .overlay-2,
  .hero-electric-border .background-glow {
    inset: -4px;
  }
}