/* Cyprob fon — B3K3 statik plexus + organik kayan-yildiz gokyuzu v2.
   16 iz: 8 disa + 8 ICE akan (ice-akanlar olu-alan kenarinda soner, yol-sinirli);
   16 farkli aci, asal-farkli dongu (17-29sn) -> kombinasyon surekli degisir.
   Aci isareti yon belirler: l=sola-asagi (tx-), r=saga-asagi (tx+). */
.fon {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  background-image: url("../img/fon-plexus-b3k3.png?v=2");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.85;
  -webkit-mask-image: radial-gradient(ellipse 46% 62% at 52% 53%, transparent 56%, #000 80%);
  mask-image: radial-gradient(ellipse 46% 62% at 52% 53%, transparent 56%, #000 80%);
}

.iz { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; }
.iz span {
  position: absolute; top: var(--iy); left: var(--ix);
  height: 2px; border-radius: 999px;
  opacity: 0;
  box-shadow: 0 0 6px rgba(160,210,240,0.30);
  animation-name: iz-ak; animation-timing-function: linear; animation-iteration-count: infinite;
}
.iz span.l { background: linear-gradient(90deg,  rgba(235,247,255,0.85), rgba(180,220,245,0.35) 30%, rgba(180,220,245,0)); }
.iz span.r { background: linear-gradient(270deg, rgba(235,247,255,0.85), rgba(180,220,245,0.35) 30%, rgba(180,220,245,0)); }
.iz span:nth-child(1) { --ix:4%; --iy:7%; --ang:-19deg; --op:0.62; --tx:-58vh; width:200px; animation-duration:17s; animation-delay:0.0s; }
.iz span:nth-child(2) { --ix:19%; --iy:52%; --ang:31deg; --op:0.5; --tx:38vh; width:150px; animation-duration:23s; animation-delay:2.7s; }
.iz span:nth-child(3) { --ix:9%; --iy:31%; --ang:24deg; --op:0.68; --tx:40vh; width:180px; animation-duration:19s; animation-delay:5.9s; }
.iz span:nth-child(4) { --ix:22%; --iy:12%; --ang:-44deg; --op:0.46; --tx:-40vh; width:130px; animation-duration:29s; animation-delay:8.3s; }
.iz span:nth-child(5) { --ix:2%; --iy:64%; --ang:36deg; --op:0.55; --tx:34vh; width:170px; animation-duration:21s; animation-delay:11.1s; }
.iz span:nth-child(6) { --ix:13%; --iy:3%; --ang:-31deg; --op:0.6; --tx:-54vh; width:190px; animation-duration:25s; animation-delay:14.2s; }
.iz span:nth-child(7) { --ix:6%; --iy:44%; --ang:27deg; --op:0.5; --tx:42vh; width:140px; animation-duration:18s; animation-delay:16.8s; }
.iz span:nth-child(8) { --ix:17%; --iy:22%; --ang:-21deg; --op:0.65; --tx:-56vh; width:210px; animation-duration:27s; animation-delay:19.4s; }
.iz span:nth-child(9) { --ix:78%; --iy:9%; --ang:26deg; --op:0.6; --tx:52vh; width:185px; animation-duration:20s; animation-delay:1.3s; }
.iz span:nth-child(10) { --ix:91%; --iy:41%; --ang:-33deg; --op:0.48; --tx:-38vh; width:145px; animation-duration:24s; animation-delay:4.1s; }
.iz span:nth-child(11) { --ix:84%; --iy:18%; --ang:-25deg; --op:0.66; --tx:-40vh; width:205px; animation-duration:18s; animation-delay:7.2s; }
.iz span:nth-child(12) { --ix:95%; --iy:57%; --ang:33deg; --op:0.52; --tx:46vh; width:160px; animation-duration:26s; animation-delay:9.7s; }
.iz span:nth-child(13) { --ix:80%; --iy:33%; --ang:-38deg; --op:0.58; --tx:-34vh; width:135px; animation-duration:22s; animation-delay:12.6s; }
.iz span:nth-child(14) { --ix:88%; --iy:5%; --ang:28deg; --op:0.62; --tx:54vh; width:195px; animation-duration:28s; animation-delay:15.3s; }
.iz span:nth-child(15) { --ix:76%; --iy:49%; --ang:-22deg; --op:0.49; --tx:-42vh; width:155px; animation-duration:19s; animation-delay:18.1s; }
.iz span:nth-child(16) { --ix:93%; --iy:26%; --ang:35deg; --op:0.64; --tx:50vh; width:175px; animation-duration:21s; animation-delay:20.9s; }
@keyframes iz-ak {
  0%   { transform: rotate(var(--ang)) translateX(0);         opacity: 0; }
  2%   { opacity: var(--op); }
  12%  { opacity: calc(var(--op) * 0.7); }
  15%  { transform: rotate(var(--ang)) translateX(var(--tx)); opacity: 0; }
  100% { transform: rotate(var(--ang)) translateX(var(--tx)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .iz { display: none; } }