/* Wired effects (draft for owner review, Oct 2026). Loaded only on pages that include it.
   Flash safety: no strobing. The hero flicker stays under 3 flashes per second and the form zap flashes once. */
@property --fxa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---- button sparks: a bright point of current runs around the button edge on hover/focus ---- */
.btn, form.req button[type=submit] { position: relative; }
.btn::before, form.req button[type=submit]::before {
  content: ""; position: absolute; inset: -2px; padding: 2px; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: conic-gradient(from var(--fxa), transparent 0 78%, rgba(255,90,60,.0) 80%, #ff4a2e 88%, #fff 91%, #ff4a2e 94%, transparent 97%);
  -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);
  -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 0 4px #ff3b2f);
}
.btn:hover::before, .btn:focus-visible::before, form.req button[type=submit]:hover::before { opacity: 1; animation: fx-run 1.1s linear infinite; }
@keyframes fx-run { to { --fxa: 360deg; } }

/* ---- power line down the page ---- */
.fx-line { position: absolute; width: 2px; background: rgba(199,2,0,.14); pointer-events: none; z-index: 5; }
.fx-line i { position: absolute; left: 0; top: 0; width: 2px; height: 0; background: linear-gradient(#ff3b2f, #c70200); box-shadow: 0 0 8px #ff3b2f, 0 0 2px #fff; }
.fx-line i::after { content: ""; position: absolute; left: -3px; bottom: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px #ff3b2f; }
.fx-node { position: absolute; left: -5px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(199,2,0,.35); background: var(--paper, #f7f4ee); transition: background .3s, box-shadow .3s, border-color .3s; }
.fx-node.on { background: #ff3b2f; border-color: #fff; box-shadow: 0 0 12px 2px #ff3b2f; }

/* ---- cursor spark trail ---- */
.fx-trail { position: fixed; inset: 0; pointer-events: none; z-index: 9998; }

/* ---- form zap ---- */
.fx-zapwrap { position: relative; }
.fx-zap { position: absolute; inset: -12px; pointer-events: none; z-index: 20; overflow: visible; }
.fx-zap svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-zap path { fill: none; stroke: #fff; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 6px #ff3b2f) drop-shadow(0 0 14px #c70200); }
.fx-zap path.glow { stroke: #ff3b2f; stroke-width: 9; opacity: .55; }
.fx-flash { position: absolute; inset: 0; background: radial-gradient(circle at var(--x, 50%) var(--y, 30%), rgba(255,255,255,.75), rgba(255,59,47,.35) 35%, transparent 70%); opacity: 0; pointer-events: none; z-index: 19; }
.fx-thanks { display: grid; place-items: center; text-align: center; gap: .6rem; min-height: 260px; padding: 2rem 1.2rem; border: 2px solid #c70200; background: #0b0f14; color: #fff; box-shadow: 0 0 0 1px #ff3b2f, 0 0 28px rgba(255,59,47,.45); animation: fx-on .5s ease-out both; }
.fx-thanks svg { width: 46px; height: 46px; fill: #ff3b2f; filter: drop-shadow(0 0 8px #ff3b2f); }
.fx-thanks b { font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -.01em; }
.fx-thanks p { margin: 0; color: #e8e4db; }
@keyframes fx-on { 0% { opacity: 0; filter: brightness(2.2); } 60% { opacity: 1; } 100% { opacity: 1; filter: none; } }

/* ---- first-visit bolt over the logo ---- */
.fx-intro { position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: rgba(11,15,20,.0); animation: fx-introbg .7s ease-out forwards; }
.fx-intro svg { position: absolute; width: 90px; height: 150px; overflow: visible; }
.fx-intro path { fill: #ff3b2f; filter: drop-shadow(0 0 10px #ff3b2f) drop-shadow(0 0 22px #c70200); transform-origin: 50% 0; animation: fx-strike .55s cubic-bezier(.2,.9,.2,1) forwards; }
@keyframes fx-introbg { 0% { background: rgba(11,15,20,.55); } 35% { background: rgba(255,255,255,.18); } 100% { background: rgba(11,15,20,0); } }
@keyframes fx-strike { 0% { transform: scaleY(0); opacity: 1; } 35% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.fx-logo-hit { animation: fx-logo .7s ease-out; }
@keyframes fx-logo { 0%, 30% { filter: brightness(1); } 40% { filter: brightness(2.4) drop-shadow(0 0 10px #ff3b2f); } 100% { filter: brightness(1); } }

/* ---- hero: power outage, then the generator brings the lights back ---- */
.fx-outage { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: #05070a; animation: fx-out 2.6s ease-out forwards; }
.hero .wrap { z-index: 1; }
.fx-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(70% 60% at 70% 45%, rgba(255,170,90,.18), transparent 70%), radial-gradient(120% 80% at 50% 120%, rgba(199,2,0,.35), transparent 60%); opacity: 0; animation: fx-glowin 1.2s ease-out 2.2s forwards, fx-pulse 4s ease-in-out 3.4s infinite; }
@keyframes fx-out { 0% { opacity: .92; } 18% { opacity: .92; } 24% { opacity: .35; } 30% { opacity: .9; } 44% { opacity: .5; } 52% { opacity: .9; } 72% { opacity: .9; } 100% { opacity: 0; } }
@keyframes fx-glowin { to { opacity: 1; } }
@keyframes fx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
.fx-status { position: absolute; right: clamp(16px, 3vw, 40px); top: 1.2rem; z-index: 2; font: 700 .72rem/1 var(--sans, system-ui); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(11,15,20,.7); border: 1px solid rgba(255,255,255,.25); padding: .5rem .7rem; display: flex; align-items: center; gap: .5rem; }
.fx-status i { width: 8px; height: 8px; border-radius: 50%; background: #666; }
.fx-status.on i { background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }

/* ---- outage counter (generator pages) ---- */
.fx-outbox { background: #0b0f14; color: #fff; border: 2px solid #0b0f14; display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: center; padding: clamp(1.2rem, 3vw, 2rem); position: relative; overflow: hidden; }
.fx-outbox .house { width: clamp(90px, 14vw, 140px); }
.fx-outbox .house path { fill: #1c2330; transition: fill .6s; }
.fx-outbox .house rect { fill: #2a3240; transition: fill .6s, filter .6s; }
.fx-outbox.on .house rect { fill: #ffc76a; filter: drop-shadow(0 0 6px #ffb340); }
.fx-outbox .t { font: 800 clamp(2.4rem, 7vw, 4.2rem)/1 var(--sans, system-ui); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.fx-outbox .lab { font: 700 .78rem/1 var(--sans, system-ui); letter-spacing: .1em; text-transform: uppercase; color: #ff6a5a; margin-bottom: .5rem; }
.fx-outbox.on .lab { color: #3ddc84; }
.fx-outbox p { margin: .6rem 0 0; color: #c9c4ba; max-width: 52ch; }
@media (max-width: 560px) { .fx-outbox { grid-template-columns: 1fr; text-align: center; justify-items: center; } }

/* ---- units-left battery (specials) ---- */
.fx-batt { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.fx-batt .cell { position: relative; width: 170px; height: 44px; border: 3px solid #fff; border-radius: 6px; padding: 3px; }
.fx-batt .cell::after { content: ""; position: absolute; right: -10px; top: 12px; width: 6px; height: 14px; background: #fff; border-radius: 0 3px 3px 0; }
.fx-batt .lvl { height: 100%; width: var(--lvl, 100%); background: repeating-linear-gradient(90deg, #ff3b2f 0 18px, #c70200 18px 21px); box-shadow: 0 0 12px #ff3b2f; animation: fx-drain 2.2s ease-out both; }
@keyframes fx-drain { from { width: 100%; } }
.fx-batt b { font-size: 1.1rem; }

/* ---- draft badge ---- */
.fx-draft { position: fixed; left: 12px; bottom: 12px; z-index: 9997; background: #fff3b0; color: #0b0f14; border: 2px solid #c70200; font: 700 .75rem/1.2 var(--sans, system-ui); padding: .45rem .6rem; }