/* =========================================================
   Ana sayfa hero arka planı — "yaşayan teknoloji atmosferi"
   /hero-lab deneme sayfasında test edilip onaylanan efektlerin
   BİREBİR aynısı; yalnızca ana sayfaya taşındı.

   Mimari: SVG (organik fiber eğrileri + native <animateMotion> ile hat
   üzerinde hareket eden enerji noktaları) + CSS transform/opacity
   animasyonları (GPU compositor). Three.js / Canvas2D / WebGL YOK.

   Ana sayfada (hero-lab'daki sayfa-geneli denemenin aksine) katman
   BİLİNÇLİ OLARAK yalnızca .hero'nun kendisine (.hero'nun DOM içindeki ilk
   çocuğu, position:absolute + inset:0, .hero'nun overflow:hidden'ı ile
   sınırlı) hapsedilir - "sadece hero arka planı değişecek" kuralı gereği
   diğer bölümlerin (intro, ürünler, vb.) arka planı/metin kontrastı
   ETKİLENMEZ. pointer-events:none olduğu için hiçbir tıklama/dokunmayı
   engellemez. Başlık/açıklama/butonlar/istatistik kutusu bu değişiklikten
   ETKİLENMEDİ.
   ========================================================= */

.hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(1400px 900px at 78% 8%, rgba(20,35,70,0.55), transparent 62%),
              var(--navy-950);
}

.hero-atmosphere .atm-parallax {
  position: absolute;
  inset: -6%;
  will-change: transform;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Volumetrik sis (çok hafif, geniş, yumuşak) ---- */
.hero-atmosphere .atm-mist {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  background: radial-gradient(circle, rgba(91,147,255,0.9), transparent 70%);
  animation: atmMistDrift 58s ease-in-out infinite alternate;
}
.hero-atmosphere .atm-mist--a { width: 46vw; height: 46vw; top: -12%; right: -8%; opacity: 0.1; animation-duration: 58s; }
.hero-atmosphere .atm-mist--b {
  width: 40vw; height: 40vw; bottom: -14%; left: -8%; opacity: 0.07;
  background: radial-gradient(circle, rgba(60,90,180,0.9), transparent 70%);
  animation-duration: 66s; animation-delay: -20s;
}
.hero-atmosphere .atm-mist--c { width: 30vw; height: 30vw; top: 32%; left: 42%; opacity: 0.05; animation-duration: 74s; animation-delay: -35s; }

@keyframes atmMistDrift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(3%, -4%) scale(1.08); }
}

/* ---- Yıldız / çok düşük opaklıkta parçacıklar ---- */
.hero-atmosphere .atm-star {
  position: absolute;
  border-radius: 50%;
  background: #cfe0ff;
  opacity: var(--min-opacity, 0.03);
  animation-name: atmStarTwinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: var(--dur, 6s);
  animation-delay: var(--delay, 0s);
}
@keyframes atmStarTwinkle {
  from { opacity: var(--min-opacity, 0.03); }
  to { opacity: var(--peak-opacity, 0.28); }
}

/* ---- Fiber optik SVG katmanı ---- */
.hero-atmosphere svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hero-atmosphere .atm-fiber-path {
  fill: none;
  stroke: #6ea3ff;
}
.hero-atmosphere .atm-fiber-glow {
  fill: none;
  stroke: #4d84f2;
}
.hero-atmosphere .atm-fiber-node {
  fill: #d8e6ff;
}

/* ---- Ara sıra geçen kuyruklu ışık izleri ---- */
.hero-atmosphere .atm-comet {
  position: absolute;
  width: 110px;
  height: 1.4px;
  left: var(--x, 10%);
  top: var(--y, 10%);
  background: linear-gradient(90deg, transparent, rgba(205,224,255,0.9));
  border-radius: 2px;
  opacity: 0;
  transform: rotate(var(--angle, 20deg)) scaleX(0.4);
  animation-name: atmCometFly;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-duration: var(--dur, 20s);
  animation-delay: var(--delay, 0s);
}
/* Aktif pencere (96%->99%) kasten dar tutuldu: --dur (~34-54s) ile
   çarpıldığında görünür geçiş süresi ~1-1.6s aralığında kalır. */
@keyframes atmCometFly {
  0%, 96% { opacity: 0; transform: rotate(var(--angle, 20deg)) translateX(0) scaleX(0.4); }
  97% { opacity: var(--peak, 0.5); }
  99% { opacity: 0; transform: rotate(var(--angle, 20deg)) translateX(var(--dist, 220px)) scaleX(1); }
  100% { opacity: 0; transform: rotate(var(--angle, 20deg)) translateX(var(--dist, 220px)) scaleX(1); }
}

/* Sekme gizliyken tüm katmanları duraklat */
.hero-atmosphere.is-paused .atm-mist,
.hero-atmosphere.is-paused .atm-star,
.hero-atmosphere.is-paused .atm-comet {
  animation-play-state: paused;
}
.hero-atmosphere.is-paused svg [class*="atm-fiber"] {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .hero-atmosphere .atm-parallax { transition: none; }
  .hero-atmosphere .atm-mist,
  .hero-atmosphere .atm-star,
  .hero-atmosphere .atm-comet { animation-play-state: paused; }
  .hero-atmosphere .atm-comet { opacity: 0 !important; }
  .hero-atmosphere svg animateMotion,
  .hero-atmosphere svg animate { animation-play-state: paused; }
}