/**
 * V3 premium arkaplan atmosferi — yalnızca arka plan katmanları.
 * filter: blur / backdrop-filter / canvas / ağır gölge yok.
 * Animasyon: yalnızca transform + (çok hafif) opacity, uzun süre.
 */

/* Scroll kenarı / yükleme anı titreşimi: tema ile uyumlu kök dolgu */
html {
  background-color: #eff3f9;
}
html.theme-dark {
  background-color: #0e1626;
}

/* ---- Temel: gövde rengi tabana taşınır; UI katmanları değişmez ---- */
body.ms-has-atmosphere {
  background-color: transparent !important;
}

html.theme-dark body.ms-has-atmosphere,
body.ms-has-atmosphere.dark {
  background-color: transparent !important;
}

.ms-bg-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  isolation: isolate;
}

/* İçerik: backdrop/modal stacking ile çakışma olmasın (düşük z-index stacking context oluşturma).
   Gövdede DOM sırası atmosfer → üst şerit → layout; bileşik katman doğal kalır. */
body.ms-has-atmosphere #layoutSidenav {
  position: relative;
}

/* Katman 1: marka ile uyumlu düz taban */
.ms-bg-atmosphere__base {
  position: absolute;
  inset: 0;
  background-color: #eff3f9;
}

html.theme-dark .ms-bg-atmosphere__base,
body.dark .ms-bg-atmosphere__base {
  background-color: #0e1626;
}

/* Katman 2: hafif derinlik (statik, repaint yok) */
.ms-bg-atmosphere__depth {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    165deg,
    rgba(0, 97, 242, 0.055) 0%,
    transparent 38%,
    rgba(105, 0, 199, 0.045) 72%,
    transparent 100%
  );
  opacity: 0.85;
}

html.theme-dark .ms-bg-atmosphere__depth,
body.dark .ms-bg-atmosphere__depth {
  background: linear-gradient(
    168deg,
    rgba(0, 97, 242, 0.09) 0%,
    transparent 35%,
    rgba(105, 0, 199, 0.08) 65%,
    transparent 100%
  );
  opacity: 0.5;
}

/* Katman 3: ince ızgara (çok düşük kontrast) */
.ms-bg-atmosphere__grid {
  position: absolute;
  inset: 0;
  opacity: 0.028;
  background-image:
    linear-gradient(rgba(31, 45, 82, 0.7) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 45, 82, 0.7) 1px, transparent 1px);
  background-size: 56px 56px;
}

html.theme-dark .ms-bg-atmosphere__grid,
body.dark .ms-bg-atmosphere__grid {
  opacity: 0.04;
  background-image:
    linear-gradient(rgba(200, 215, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 215, 255, 0.14) 1px, transparent 1px);
}

/* GPU dostu “orb”: yalnızca radial-gradient, hareket = transform */
.ms-bg-atmosphere__orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  contain: strict;
}

/* Ağır filtresiz yumuşak dairesel parıltı */
.ms-bg-atmosphere__orb--1 {
  width: 125vmin;
  height: 125vmin;
  left: -32vmin;
  top: -38vmin;
  background: radial-gradient(
    closest-side at 42% 48%,
    rgba(0, 97, 242, 0.14) 0%,
    rgba(105, 0, 199, 0.05) 38%,
    transparent 72%
  );
  animation: ms-atm-move-1 36s ease-in-out infinite alternate;
}

.ms-bg-atmosphere__orb--2 {
  width: 110vmin;
  height: 110vmin;
  right: -38vmin;
  bottom: -30vmin;
  background: radial-gradient(
    closest-side at 54% 44%,
    rgba(105, 0, 199, 0.11) 0%,
    rgba(0, 97, 242, 0.06) 40%,
    transparent 74%
  );
  animation: ms-atm-move-2 42s ease-in-out infinite alternate;
}

.ms-bg-atmosphere__orb--3 {
  width: 90vmin;
  height: 90vmin;
  left: 22%;
  top: 28%;
  background: radial-gradient(
    closest-side at 50% 50%,
    rgba(0, 97, 242, 0.07) 0%,
    transparent 62%
  );
  animation: ms-atm-move-3 48s ease-in-out infinite alternate;
  opacity: 0.75;
}

html.theme-dark .ms-bg-atmosphere__orb--1,
body.dark .ms-bg-atmosphere__orb--1 {
  background: radial-gradient(
    closest-side at 42% 48%,
    rgba(110, 167, 255, 0.09) 0%,
    rgba(105, 0, 199, 0.05) 40%,
    transparent 74%
  );
}

html.theme-dark .ms-bg-atmosphere__orb--2,
body.dark .ms-bg-atmosphere__orb--2 {
  background: radial-gradient(
    closest-side at 54% 44%,
    rgba(105, 0, 199, 0.1) 0%,
    rgba(0, 97, 242, 0.05) 42%,
    transparent 74%
  );
}

html.theme-dark .ms-bg-atmosphere__orb--3,
body.dark .ms-bg-atmosphere__orb--3 {
  background: radial-gradient(
    closest-side at 50% 50%,
    rgba(110, 167, 255, 0.06) 0%,
    transparent 64%
  );
  opacity: 0.55;
}

@keyframes ms-atm-move-1 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(3vmin, 2.25vmin, 0);
  }
}

@keyframes ms-atm-move-2 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-2.75vmin, -2vmin, 0);
  }
}

@keyframes ms-atm-move-3 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(1.5vmin, -2.25vmin, 0);
  }
}

/* Mobil: daha az geometri ve daha yumuşak hareket süresi */
@media (max-width: 991.98px) {
  .ms-bg-atmosphere__orb--1,
  .ms-bg-atmosphere__orb--2,
  .ms-bg-atmosphere__orb--3 {
    animation-duration: 52s !important;
  }

  .ms-bg-atmosphere__orb--3 {
    display: none;
  }

  .ms-bg-atmosphere__orb--1,
  .ms-bg-atmosphere__orb--2 {
    opacity: 0.92;
  }

  .ms-bg-atmosphere__grid {
    opacity: 0.02;
    background-size: 64px 64px;
  }
}

@media (max-width: 575.98px) {
  .ms-bg-atmosphere__depth {
    opacity: 0.65;
  }

  html.theme-dark .ms-bg-atmosphere__depth,
  body.dark .ms-bg-atmosphere__depth {
    opacity: 0.42;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ms-bg-atmosphere__orb--1,
  .ms-bg-atmosphere__orb--2,
  .ms-bg-atmosphere__orb--3 {
    animation: none !important;
  }
}