/* ==========================================================================
   Legichain — DENEYSEL arka plan katmanı: bölüme özgü ikon kompozisyonları
   Kapatmak için: alt bilgideki “Sade” seçeneği, ?backdrop=off, veya
   head.html içinden backdrops.css + backdrop.js satırlarını silin.
   Renkler yalnızca semantik token'lardan türetilir.
   ========================================================================== */

:root {
  --bd-grid: var(--border-strong);
  --bd-grid-opacity: .32;
  --bd-line: var(--border-strong);
  --bd-line-opacity: .8;
  --bd-icon: var(--border-control);
  --bd-icon-opacity: .75;
  --bd-accent: var(--accent-fg);
  --bd-field-a: var(--accent-subtle);
  --bd-field-b: var(--surface-hover);
  --bd-field-opacity: .9;
}
[data-theme='dark'] {
  --bd-grid: var(--border-subtle);
  --bd-grid-opacity: .9;
  --bd-line: var(--border-strong);
  --bd-icon: var(--border-control);
  --bd-icon-opacity: .8;
  --bd-accent: var(--brand-lime);
  --bd-field-a: var(--surface-raised);
  --bd-field-b: var(--accent-subtle);
  --bd-field-opacity: .75;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bd-grid: var(--border-subtle); --bd-grid-opacity: .9;
    --bd-accent: var(--brand-lime);
    --bd-field-a: var(--surface-raised); --bd-field-b: var(--accent-subtle); --bd-field-opacity: .75;
  }
}

/* Bölüm: katman altta, içerik üstte */
[data-backdrop] { position: relative; isolation: isolate; overflow: clip; }
[data-backdrop] > .container { position: relative; z-index: 1; }

.backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; }

/* --- Tonal alan: iki yumuşak, çok yavaş kayan ton --- */
.backdrop__field { position: absolute; inset: 0; opacity: var(--bd-field-opacity); }
.backdrop__field::before,
.backdrop__field::after {
  content: ''; position: absolute;
  width: 58vw; height: 58vw; max-width: 880px; max-height: 880px; min-width: 360px; min-height: 360px;
  border-radius: 50%; will-change: transform;
}
.backdrop__field::before {
  right: -12vw; top: -28vw;
  background: radial-gradient(closest-side, var(--bd-field-a) 0%, color-mix(in srgb, var(--bd-field-a) 55%, transparent) 40%, transparent 100%);
  animation: bd-drift-a 26s var(--ease-standard) infinite alternate;
}
.backdrop__field::after {
  left: -18vw; bottom: -30vw;
  background: radial-gradient(closest-side, var(--bd-field-b) 0%, color-mix(in srgb, var(--bd-field-b) 55%, transparent) 40%, transparent 100%);
  animation: bd-drift-b 32s var(--ease-standard) infinite alternate;
}
@keyframes bd-drift-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-6vw, 5vw, 0); } }
@keyframes bd-drift-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(7vw, -4vw, 0); } }

/* --- Teknik ızgara (yalnız hero, sağ tarafta soluk) --- */
.backdrop__grid {
  position: absolute; inset: 0; opacity: var(--bd-grid-opacity);
  background-image: linear-gradient(to right, var(--bd-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--bd-grid) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 78% 50%, #000 15%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 80% at 78% 50%, #000 15%, transparent 70%);
}
@media (max-width: 1023px) { .backdrop__grid { display: none; } }

/* --- İkon kompozisyonu --- */
.backdrop__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bd-ico__anim { opacity: 0; animation: bd-rise .7s var(--ease-standard) forwards; animation-delay: var(--stagger, 0s); }
@keyframes bd-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.bd-ico__ring { fill: none; stroke: var(--bd-line); stroke-width: 1.5; opacity: .55; transition: stroke var(--motion-base) var(--ease-standard), opacity var(--motion-base) var(--ease-standard); }
.bd-ico__glyph { fill: none; stroke: var(--bd-icon); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: var(--bd-icon-opacity); transition: stroke var(--motion-base) var(--ease-standard), opacity var(--motion-base) var(--ease-standard); }
.bd-ico.is-on .bd-ico__ring { stroke: var(--bd-accent); opacity: 1; }
.bd-ico.is-on .bd-ico__glyph { stroke: var(--bd-accent); opacity: 1; }
.bd-link { stroke: var(--bd-line); stroke-width: 1.5; stroke-linecap: round; opacity: var(--bd-line-opacity); }
.bd-mark { fill: var(--bd-line); opacity: var(--bd-line-opacity); }

/* Görünür değilken hareket durur */
.backdrop:not(.is-inview) .backdrop__field::before,
.backdrop:not(.is-inview) .backdrop__field::after { animation-play-state: paused; }

/* Reduced motion: hareketsiz, ikonlar görünür */
@media (prefers-reduced-motion: reduce) {
  .backdrop__field::before, .backdrop__field::after { animation: none !important; }
  .bd-ico__anim { animation: none !important; opacity: 1; }
}