/* nowaChat — paylaşılan temel
   Tüm ekranlar: tokens.css → base.css → (ekrana özel).
   Arka plan orbs + grain, reveal yardımcıları, reduced-motion resetleri. */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---------- Arka plan: orbs + grain ---------- */

.bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  will-change: transform;
}

.orb-1 {
  width: 55vmax; height: 55vmax;
  top: -20vmax; left: -15vmax;
  background: radial-gradient(circle at 35% 35%, var(--violet), transparent 70%);
  animation: drift-1 70s var(--ease-out) infinite alternate;
}

.orb-2 {
  width: 45vmax; height: 45vmax;
  bottom: -18vmax; right: -12vmax;
  background: radial-gradient(circle at 60% 40%, var(--cyan), transparent 70%);
  opacity: 0.35;
  animation: drift-2 85s var(--ease-out) infinite alternate;
}

.orb-3 {
  width: 35vmax; height: 35vmax;
  top: 45%; left: 55%;
  background: radial-gradient(circle at 50% 50%, var(--fuchsia), transparent 70%);
  opacity: 0.28;
  animation: drift-3 60s var(--ease-out) infinite alternate;
}

@keyframes drift-1 { to { transform: translate(8vmax, 6vmax) scale(1.12); } }
@keyframes drift-2 { to { transform: translate(-7vmax, -5vmax) scale(1.08); } }
@keyframes drift-3 { to { transform: translate(-10vmax, 4vmax) scale(0.9); } }

/* İnce grain — data-URI SVG turbulence, harici istek yok */
.noise {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Reveal: skeleton → canlı (IntersectionObserver + CSS) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Kademeli gecikme yardımcıları (JS gerektirmez) */
[data-reveal-delay="1"] { --reveal-delay: 80ms; }
[data-reveal-delay="2"] { --reveal-delay: 160ms; }
[data-reveal-delay="3"] { --reveal-delay: 240ms; }
[data-reveal-delay="4"] { --reveal-delay: 320ms; }

/* ---------- Erişilebilirlik: hareket azaltma ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .orb { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}