/* project3.css */
body { background:#1e1e1e; }

/* Drawer like others (rovnaký štýl ako project2) */
body.project .sidebar{
  transform: translateX(-240px);
  transition: transform 180ms ease;
  z-index: 20;
}
body.project.nav-open .sidebar{ transform: translateX(0); }

body.project .content{ margin-left:0; transition: filter 180ms ease; }
body.project.nav-open .content{ filter: blur(1px); }

.backdrop{
  position: fixed;
  inset: 0;
  z-index: 15;
  background: rgba(0,0,0,.35);
  display: none;
}
body.project.nav-open .backdrop{ display:block; }

.hamburger{
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 25;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color: #eef2ff;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  user-select:none;
  backdrop-filter: blur(10px);
}
.hamburger:hover{ background: rgba(0,0,0,.50); }

/* Page spacing */
body.project .page{
  max-width: 1400px;
  margin: 0 auto;
  padding: 8vh 18px 18px;
}

/* Stage = jedna plocha (žiadny rám) */
.stage{
  position: relative;
  overflow: hidden; /* nech nič netrčí mimo obrázka */
  border-radius: 0;
}

/* Celý dokument */
.stage img.bg{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

/* SVG overlay */
.stage .wire{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;

  /* nastaviteľná rýchlosť */
  --sparkDur: 10s;
}

/* kábel za objektom */
.wire-back{
  fill:none;
  stroke: rgba(255,255,255,0.12);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#wireSoft);
}

/* kábel pred objektom */
.wire-front{
  fill:none;
  stroke: rgba(255,255,255,0.22);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#wireSoft);
}

/* vodiaci path pre animateMotion (neviditeľný) */
.wire-guide{
  fill:none;
  stroke: transparent;
  stroke-width: 12;
}

/* iskra */
.spark-core{
  fill: rgba(255,230,120,0.95);
}

.spark-glow{
  fill: rgba(255,230,120,0.18);
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .spark-core, .spark-glow{ display:none; }
}