/* Procedural HTML/CSS scene backgrounds. No generated images, no remote assets. */
.slide[data-scene] {
  isolation: isolate;
  background-color: #0d1114;
  background-repeat: no-repeat;
  background-blend-mode: screen, screen, normal, normal, normal;
  animation: scene-pan 24s ease-in-out infinite alternate;
}

.slide[data-scene]::before {
  opacity: .72;
}

.slide[data-scene]::after {
  z-index: 4;
}

.slide[data-scene="terminal"] {
  background-image:
    radial-gradient(circle at 72% 44%, rgba(143,208,180,.22), transparent 24%),
    radial-gradient(circle at 18% 72%, rgba(240,179,106,.12), transparent 18%),
    linear-gradient(115deg, rgba(143,208,180,.08) 0 1px, transparent 1px 100%),
    repeating-linear-gradient(90deg, rgba(143,208,180,.045) 0 1px, transparent 1px 86px),
    linear-gradient(135deg, #151b21, #0d1114 72%);
  background-size: auto, auto, 140px 140px, 86px 86px, auto;
}

.slide[data-scene="signal"] {
  background-image:
    repeating-radial-gradient(circle at 50% 50%, rgba(143,208,180,.10) 0 1px, transparent 1px 86px),
    radial-gradient(circle at 50% 50%, rgba(143,208,180,.18), transparent 36%),
    radial-gradient(circle at 76% 24%, rgba(240,179,106,.10), transparent 22%),
    linear-gradient(135deg, #141a20, #0d1114 72%);
}

.slide[data-scene="harness"] {
  background-image:
    radial-gradient(circle at 52% 45%, rgba(143,208,180,.18), transparent 18%),
    linear-gradient(90deg, transparent 0 22%, rgba(143,208,180,.16) 22.2% 22.4%, transparent 22.6% 46%, rgba(143,208,180,.14) 46.2% 46.4%, transparent 46.6% 73%, rgba(240,179,106,.11) 73.2% 73.4%, transparent 73.6%),
    repeating-linear-gradient(0deg, rgba(143,208,180,.035) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(90deg, rgba(143,208,180,.032) 0 1px, transparent 1px 76px),
    linear-gradient(135deg, #151b21, #0d1114 74%);
}

.slide[data-scene="core"] {
  background-image:
    radial-gradient(circle at 72% 30%, rgba(143,208,180,.16), transparent 20%),
    linear-gradient(45deg, transparent 0 38%, rgba(143,208,180,.10) 38.2% 38.7%, transparent 39% 61%, rgba(240,179,106,.10) 61.2% 61.6%, transparent 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 22px),
    linear-gradient(135deg, #141a20, #0d1114 72%);
}

.slide[data-scene="modes"] {
  background-image:
    linear-gradient(90deg, transparent 49.8%, rgba(143,208,180,.12) 50%, transparent 50.2%),
    linear-gradient(0deg, transparent 49.8%, rgba(143,208,180,.10) 50%, transparent 50.2%),
    radial-gradient(circle at 24% 30%, rgba(143,208,180,.13), transparent 18%),
    radial-gradient(circle at 76% 72%, rgba(240,179,106,.10), transparent 20%),
    linear-gradient(135deg, #151b21, #0d1114 72%);
}

.slide[data-scene="loop"] {
  background-image:
    conic-gradient(from 30deg at 66% 48%, transparent 0 20%, rgba(143,208,180,.14) 21% 24%, transparent 25% 50%, rgba(240,179,106,.10) 51% 54%, transparent 55% 100%),
    radial-gradient(circle at 66% 48%, rgba(143,208,180,.13), transparent 24%),
    repeating-linear-gradient(90deg, rgba(143,208,180,.03) 0 1px, transparent 1px 72px),
    linear-gradient(135deg, #141a20, #0d1114 74%);
}

.slide[data-scene="files"] {
  background-image:
    linear-gradient(90deg, rgba(143,208,180,.09) 0 1px, transparent 1px 100%),
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(143,208,180,.055) 31px 32px, transparent 33px 64px),
    radial-gradient(circle at 72% 18%, rgba(143,208,180,.13), transparent 22%),
    linear-gradient(135deg, #151b21, #0d1114 72%);
  background-size: 220px 100%, 520px 520px, auto, auto;
  background-position: 76% 0, 72% 18%, center, center;
}

.slide[data-scene="skill-tree"] {
  background-image:
    linear-gradient(90deg, transparent 0 63%, rgba(143,208,180,.13) 63.2% 63.4%, transparent 63.6%),
    repeating-linear-gradient(0deg, transparent 0 54px, rgba(143,208,180,.09) 55px 56px, transparent 57px 108px),
    radial-gradient(circle at 74% 45%, rgba(143,208,180,.15), transparent 26%),
    linear-gradient(135deg, #141a20, #0d1114 72%);
  background-size: auto, 420px 420px, auto, auto;
  background-position: center, 71% 24%, center, center;
}

.slide[data-scene="event-bus"] {
  background-image:
    repeating-linear-gradient(0deg, transparent 0 92px, rgba(143,208,180,.10) 93px 95px, transparent 96px 184px),
    radial-gradient(circle at 78% 24%, rgba(143,208,180,.14), transparent 18%),
    radial-gradient(circle at 24% 76%, rgba(240,179,106,.10), transparent 22%),
    linear-gradient(135deg, #151b21, #0d1114 74%);
  background-size: 760px 760px, auto, auto, auto;
  background-position: 58% 17%, center, center, center;
}

.slide[data-scene="ecosystem"] {
  background-image:
    repeating-radial-gradient(circle at 61% 50%, rgba(143,208,180,.11) 0 1px, transparent 1px 78px),
    radial-gradient(circle at 61% 50%, rgba(143,208,180,.16), transparent 26%),
    radial-gradient(circle at 84% 26%, rgba(240,179,106,.12), transparent 18%),
    linear-gradient(135deg, #141a20, #0d1114 72%);
}

.slide[data-scene="pipeline"] {
  background-image:
    linear-gradient(110deg, transparent 0 18%, rgba(143,208,180,.10) 18.2% 18.6%, transparent 19% 37%, rgba(143,208,180,.12) 37.2% 37.6%, transparent 38% 57%, rgba(240,179,106,.10) 57.2% 57.6%, transparent 58% 78%, rgba(143,208,180,.10) 78.2% 78.6%, transparent 79%),
    repeating-linear-gradient(90deg, rgba(143,208,180,.035) 0 1px, transparent 1px 80px),
    radial-gradient(circle at 74% 18%, rgba(143,208,180,.14), transparent 22%),
    linear-gradient(135deg, #151b21, #0d1114 74%);
}

.slide[data-scene="takeaway"] {
  background-image:
    linear-gradient(120deg, transparent 0 28%, rgba(143,208,180,.12) 28.2% 28.8%, transparent 29% 52%, rgba(240,179,106,.10) 52.2% 52.7%, transparent 53%),
    radial-gradient(circle at 66% 46%, rgba(143,208,180,.18), transparent 26%),
    radial-gradient(circle at 22% 78%, rgba(240,179,106,.11), transparent 22%),
    linear-gradient(135deg, #151b21, #0d1114 72%);
}

@keyframes scene-pan {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 18px -12px, -14px 10px, 12px 8px, -10px -8px, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .slide[data-scene] { animation: none !important; }
}

@media print {
  .slide[data-scene] { animation: none !important; background-image: linear-gradient(135deg, var(--surface), var(--bg)) !important; }
}