/* ==========================================================
   REVIZE MIKLOVIČ – elektrické efekty (návrh)
   Proud ve vodičích, jiskry, probliknutí. Vypnuto při prefers-reduced-motion.
   ========================================================== */

@property --fx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* --- 1) Úvod: vodiče s pulzy proudu --------------------------------- */
.fx-traces { position: absolute; inset: 0; z-index: 2; pointer-events: none; width: 100%; height: 100%; }
.fx-traces path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fx-traces .w { stroke: rgba(255,255,255,.10); stroke-width: 1.5; }
.fx-traces .p { stroke: #ffd29a; stroke-width: 2.4; stroke-dasharray: 0 1; opacity: 0;
  filter: drop-shadow(0 0 4px #ff9a4d) drop-shadow(0 0 10px rgba(243,122,43,.9)); }
.fx-traces .n { fill: var(--d-bg, #011e28); stroke: rgba(255,255,255,.22); stroke-width: 1.5; transition: fill .3s, stroke .3s; }
.fx-traces .n.hot { fill: #ffb86b; stroke: #fff3e0; filter: drop-shadow(0 0 6px #ff9a4d); }

/* --- 2) Oranžová tlačítka: proud oběhne obrys ----------------------- */
.btn-orange { position: relative; isolation: isolate; }
.btn-orange::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; pointer-events: none; z-index: -1;
  background: conic-gradient(from var(--fx-a), transparent 0 70%, #fff6d8 82%, #ffb35c 88%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .25s;
}
.btn-orange:hover::after, .btn-orange:focus-visible::after { opacity: 1; animation: fx-orbit 1.1s linear infinite; }
@keyframes fx-orbit { to { --fx-a: 360deg; } }

/* --- 3) Čísla: naskočí jako zářivka ---------------------------------- */
.fx-neon { opacity: .12; }
.fx-neon.on { animation: fx-flicker 1.1s steps(1, end) both; }
.fx-neon.on i { text-shadow: 0 0 12px rgba(243,122,43,.75), 0 0 28px rgba(243,122,43,.35); }
@keyframes fx-flicker {
  0% { opacity: .12; } 8% { opacity: 1; } 12% { opacity: .2; } 20% { opacity: .9; } 24% { opacity: .3; }
  34% { opacity: 1; } 40% { opacity: .55; } 48%, 100% { opacity: 1; }
}

/* --- 4) Vodič mezi sekcemi ------------------------------------------- */
.fx-wire { position: relative; height: 1px; background: rgba(255,255,255,.08); overflow: visible; pointer-events: none; }
.fx-wire::after { content: ""; position: absolute; top: -1px; left: 0; width: 160px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, #ffb35c 70%, #fff3df);
  filter: drop-shadow(0 0 6px rgba(243,122,43,.9)); transform: translateX(-200px); opacity: 0; }
.fx-wire.run::after { animation: fx-wire 2.4s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes fx-wire { 0% { transform: translateX(-200px); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(calc(100vw + 40px)); opacity: 0; } }
.fx-wire.light { background: var(--line, #dbe5e7); }

/* --- 5) Plátno pro jiskry -------------------------------------------- */
.fx-sparks { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; }

@media (prefers-reduced-motion: reduce) {
  .fx-traces, .fx-sparks, .fx-wire::after { display: none !important; }
  .btn-orange::after { animation: none !important; opacity: 0 !important; }
  .fx-neon, .fx-neon.on { opacity: 1 !important; animation: none !important; }
}

/* Oprava: pulz ve vodiči nesmí rozšiřovat stránku (mobil se pak oddaluje) */
.fx-wire { overflow-x: clip; overflow-y: visible; }
@supports not (overflow: clip) { .fx-wire { overflow: hidden; } }