/* ============================================================
   ROOSTER ELECTRIC BORDER  (house_style component, Aug 21 2026)
   Animated turbulence-displaced neon stroke + layered glow.
   Usage:  <div class="eb" data-eb-color="#F6D97B"> …content… </div>
   JS (electric_border.js) injects the layer + filter markup.
   Everything degrades to a clean static glow with no JS / reduced
   motion / small screens.
   ============================================================ */

/* NOTE: .eb never sets its own border-radius — the host element keeps the
   radius it already had and every layer inherits it. */
.eb {
  position: relative;
  isolation: isolate;
  --eb-color: #F6D97B;
  --eb-thickness: 2px;
}

/* the four painted layers, injected by JS */
.eb__layers {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  overflow: visible;
}
.eb__layers > div {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-sizing: border-box;
}

/* 1. the crackling stroke (displaced by the SVG turbulence filter) */
.eb__stroke {
  border: var(--eb-thickness) solid var(--eb-color);
}
.eb--live .eb__stroke {
  filter: url(#eb-turbulence);
}

/* 2. tight hot core so the line reads as light, not paint */
.eb__glow-1 {
  border: var(--eb-thickness) solid
    color-mix(in oklab, var(--eb-color) 88%, #ffffff);
  opacity: 0.62;
  filter: blur(0.6px);
}

/* 3. soft bloom */
.eb__glow-2 {
  border: var(--eb-thickness) solid var(--eb-color);
  opacity: 0.55;
  filter: blur(5px);
}

/* 4. ambient light spilling behind the card */
.eb__ambient {
  z-index: -1;
  transform: scale(1.06);
  filter: blur(34px);
  opacity: 0.32;
  background: linear-gradient(
    -30deg,
    var(--eb-color),
    transparent 42%,
    var(--eb-color)
  );
}

/* inner wash so the card interior glows toward the lit edge */
.eb__wash {
  z-index: -1;
  opacity: 0.26;
  background: radial-gradient(
    120% 90% at 50% 0%,
    color-mix(in oklab, var(--eb-color) 22%, transparent),
    transparent 66%
  );
}

.eb > *:not(.eb__layers) {
  position: relative;
  z-index: 1;
}

/* hover mode: dark and quiet until the visitor shows intent */
.eb--hover .eb__layers > div {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.eb--hover:hover .eb__stroke,
.eb--hover:focus-within .eb__stroke { opacity: 1; }
.eb--hover:hover .eb__glow-1,
.eb--hover:focus-within .eb__glow-1 { opacity: 0.62; }
.eb--hover:hover .eb__glow-2,
.eb--hover:focus-within .eb__glow-2 { opacity: 0.55; }
.eb--hover:hover .eb__ambient,
.eb--hover:focus-within .eb__ambient { opacity: 0.3; }
.eb--hover:hover .eb__wash,
.eb--hover:focus-within .eb__wash { opacity: 0.14; }

/* ---- graceful degradation -------------------------------- */
/* no-JS / not-live: still a premium static neon edge */
.eb:not(.eb--live) {
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--eb-color) 55%, transparent),
    0 0 26px -6px color-mix(in oklab, var(--eb-color) 70%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .eb--live .eb__stroke { filter: none !important; }
}

/* the shared, hidden filter host */
.eb-filter-host {
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}