/**
 * Lavren — tam sayfa ilk yükleme göstergesi (index, login, chat, profil, dosyalarım)
 * Çizgi: compositor-only transform; logo girişi bittikten sonra başlar (jank önleme).
 */

.loader {
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 9999;
  overflow: hidden;
  transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  /* body visibility:hidden (chat) iken de görünür kalsın */
  visibility: visible;
}

.loader.done {
  opacity: 0;
  pointer-events: none;
}

.lv-loader {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lv-loader-scene {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  min-height: 120px;
}

.lv-loader-ambient {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(340px, 88vw);
  height: 220px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.lv-loader-bloom {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  filter: blur(48px);
  will-change: transform, opacity;
}

.lv-loader-bloom--a {
  background: radial-gradient(ellipse 58% 48% at 46% 44%,
    rgba(91, 95, 122, 0.2) 0%,
    rgba(91, 95, 122, 0.06) 42%,
    transparent 72%);
  opacity: 0.4;
  animation: lv-bloom-breathe 5.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* Negatif delay ilk karede sıçrama yapıyordu — kaldırıldı */
.lv-loader-bloom--b {
  background: radial-gradient(ellipse 52% 44% at 56% 56%,
    rgba(132, 161, 181, 0.14) 0%,
    rgba(91, 95, 122, 0.05) 45%,
    transparent 70%);
  opacity: 0.35;
  animation: lv-bloom-breathe 7.2s cubic-bezier(0.45, 0, 0.55, 1) infinite reverse;
}

@keyframes lv-bloom-breathe {
  0%, 100% {
    transform: scale(0.97);
    opacity: 0.34;
  }
  50% {
    transform: scale(1.03);
    opacity: 0.46;
  }
}

.lv-loader-logo-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lv-loader-logo-in {
  opacity: 0;
  animation: lv-logo-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.06s forwards;
}

.lv-loader-logo {
  height: 48px;
  width: auto;
  display: block;
}

.lv-loader-accent-line {
  width: min(200px, 52vw);
  height: 3px;
  margin-top: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(91, 95, 122, 0.18) 14%,
    rgba(132, 161, 181, 0.42) 32%,
    rgba(91, 95, 122, 0.55) 50%,
    rgba(132, 161, 181, 0.42) 68%,
    rgba(91, 95, 122, 0.18) 86%,
    transparent 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 2px 14px rgba(91, 95, 122, 0.14),
    0 1px 4px rgba(132, 161, 181, 0.12);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  transform: translateZ(0);
}

/* Şerit: translateX ile süpürme; % translate kendi genişliğine göre (parça %44 track) */
.lv-loader-accent-line-glow {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 44%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(91, 95, 122, 0.15) 18%,
    rgba(160, 188, 206, 0.55) 38%,
    rgba(248, 252, 255, 0.95) 50%,
    rgba(132, 161, 181, 0.6) 62%,
    rgba(91, 95, 122, 0.2) 82%,
    transparent 100%);
  will-change: transform;
  transform: translate3d(-100%, 0, 0);
  animation: lv-line-flow 1.9s ease-in-out infinite alternate;
}

/* Sol kenar track’te 0→W: translateX = W / (0.44W) × 100% ≈ 227.27% (kendi genişliğine göre %) */
@keyframes lv-line-flow {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(227.27%, 0, 0);
  }
}

@keyframes lv-logo-in {
  from {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lv-loader-bloom {
    animation: none;
    opacity: 0.36;
    transform: none;
  }

  .lv-loader-accent-line-glow {
    animation: none;
    opacity: 0.75;
    left: 28%;
    transform: none;
    will-change: auto;
  }

  .lv-loader-logo-in {
    animation: lv-logo-in-static 0.5s ease forwards;
  }

  @keyframes lv-logo-in-static {
    to {
      opacity: 1;
      transform: none;
    }
  }
}
