/* =====================================================
   LYNUXIS — CINEMATIC SCENE BACKGROUND  (homepage)
   Eén doorlopende, subtiele achtergrondwereld achter de content.
   Statische basis werkt zonder JS; beweging is enhancement.
   Alle lagen zijn decoratief, pointer-events:none, aria-hidden.
   ===================================================== */

/* Registreer custom properties zodat accent-/gloedwissels vloeiend morphen.
   (Zonder @property-support vallen ze terug op directe wissels — nog steeds ok.) */
@property --scene-accent      { syntax: '<color>';  inherits: true; initial-value: #C8A45D; }
@property --scene-accent-2    { syntax: '<color>';  inherits: true; initial-value: #3E5F8A; }
@property --scene-glow        { syntax: '<number>'; inherits: true; initial-value: 0.12; }
@property --scene-glow-2      { syntax: '<number>'; inherits: true; initial-value: 0.10; }
@property --scene-grid        { syntax: '<number>'; inherits: true; initial-value: 0.05; }
@property --scene-light-x     { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --scene-light-y     { syntax: '<percentage>'; inherits: true; initial-value: 30%; }

/* ---------- container ---------- */
#lyx-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: layout style paint;
  /* deep blue-black basis i.p.v. zuiver zwart */
  background:
    radial-gradient(140% 100% at 50% 120%, #070A0F 0%, transparent 55%),
    linear-gradient(180deg, #05070C 0%, #04050A 42%, #05070C 100%);
  /* defaults (worden per sectie overschreven) */
  --scene-accent: #C8A45D;
  --scene-accent-2: #3E5F8A;
  --scene-glow: 0.12;
  --scene-glow-2: 0.10;
  --scene-grid: 0.05;
  --scene-light-x: 50%;
  --scene-light-y: 30%;
  --scene-parallax: 0px;
  /* Vloeiende accent-/gloedovergangen worden door backgrounds.js ge-lerpt
     (rAF), niet via CSS-transitions op custom properties — die zijn in
     sommige engines onbetrouwbaar met @property. */
}
#lyx-scene > * {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---------- Laag 1 — atmosferische basis-gloed ---------- */
.scene-atmos-base {
  background:
    radial-gradient(90% 60% at 78% 12%, rgba(62, 95, 138, 0.055), transparent 60%),
    radial-gradient(80% 55% at 18% 82%, rgba(62, 95, 138, 0.045), transparent 62%);
}

/* ---------- Laag 2 — architectuur (SVG in HTML) ---------- */
#lyx-scene .scene-arch {
  top: auto; bottom: 0; height: 82vh;
  opacity: 0.5;
  transform: translate3d(0, var(--scene-parallax), 0);
  will-change: transform;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 100%);
}
#lyx-scene .scene-arch svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* verre stad/horizon bovenlaag, trager */
#lyx-scene .scene-arch--far {
  top: auto; bottom: 0; height: 60vh;
  opacity: 0.42;
  transform: translate3d(0, calc(var(--scene-parallax) * 0.45), 0);
}

/* ---------- Laag 3 — atmosfeer: mist + trage lichtbundel ---------- */
.scene-atmos {
  background:
    radial-gradient(50% 40% at 20% 30%, rgba(88, 120, 160, 0.05), transparent 70%),
    radial-gradient(55% 45% at 82% 70%, rgba(120, 100, 60, 0.04), transparent 72%);
  animation: sceneDrift 34s ease-in-out infinite alternate;
}
#lyx-scene .scene-beam {
  top: -20%; bottom: auto; height: 140%;
  background: linear-gradient(105deg, transparent 42%, rgba(229, 199, 122, 0.05) 50%, transparent 58%);
  mix-blend-mode: screen;
  transform-origin: 50% 40%;
  animation: sceneBeam 18s ease-in-out infinite alternate;
}
#lyx-scene .scene-fog {
  top: auto; bottom: 0; height: 46vh;
  background: linear-gradient(180deg, transparent, rgba(10, 14, 21, 0.55) 70%, rgba(7, 10, 15, 0.7));
}

/* ---------- Laag 4 — technisch grid / meetlijnen ---------- */
.scene-grid {
  opacity: var(--scene-grid);
  background-image:
    linear-gradient(rgba(200, 208, 224, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 208, 224, 0.5) 1px, transparent 1px);
  background-size: 78px 78px, 78px 78px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 20%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 90% at 50% 20%, #000 0%, transparent 72%);
}
/* perspectief-vloer onderaan (blueprint/route-gevoel) */
#lyx-scene .scene-floor {
  top: auto; bottom: 0; height: 40vh;
  opacity: calc(var(--scene-grid) * 1.6);
  background-image:
    linear-gradient(90deg, rgba(120, 150, 190, 0.5) 1px, transparent 1px),
    linear-gradient(rgba(120, 150, 190, 0.45) 1px, transparent 1px);
  background-size: 8% 100%, 100% 26%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 55%, transparent 100%);
  transform: perspective(420px) rotateX(58deg) scale(1.6);
  transform-origin: 50% 100%;
}

/* ---------- Laag 5 — licht (accent-gloed per sectie) ---------- */
.scene-light {
  background: radial-gradient(56% 42% at var(--scene-light-x) var(--scene-light-y),
    var(--scene-accent), transparent 62%);
  opacity: var(--scene-glow);
  mix-blend-mode: screen;
}
.scene-light-2 {
  background: radial-gradient(60% 50% at 82% 74%,
    var(--scene-accent-2), transparent 64%);
  opacity: var(--scene-glow-2);
  mix-blend-mode: screen;
}

/* ---------- vignette + grain ---------- */
.scene-vignette {
  background: radial-gradient(130% 100% at 50% 45%, transparent 52%, rgba(3, 4, 6, 0.72) 100%);
}
.scene-grain {
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* =====================================================
   Per-sectie karakter  (accent, gloed, gridsterkte, lichtpositie)
   Eén wereld — alleen de sfeer verschuift subtiel.
   ===================================================== */
#lyx-scene.scene--hero        { --scene-accent:#C8A45D; --scene-accent-2:#3E5F8A; --scene-glow:.17; --scene-glow-2:.10; --scene-grid:.05; --scene-light-x:50%; --scene-light-y:24%; }
#lyx-scene.scene--trust       { --scene-accent:#B79A63; --scene-accent-2:#3A5578; --scene-glow:.08; --scene-glow-2:.07; --scene-grid:.04; --scene-light-x:50%; --scene-light-y:16%; }
#lyx-scene.scene--system      { --scene-accent:#C8A45D; --scene-accent-2:#3E5F8A; --scene-glow:.10; --scene-glow-2:.08; --scene-grid:.05; --scene-light-x:50%; --scene-light-y:30%; }
#lyx-scene.scene--projects    { --scene-accent:#7E8EA2; --scene-accent-2:#4A6488; --scene-glow:.09; --scene-glow-2:.08; --scene-grid:.04; --scene-light-x:50%; --scene-light-y:40%; }
#lyx-scene.scene--capabilities{ --scene-accent:#5A7CA8; --scene-accent-2:#B79A63; --scene-glow:.11; --scene-glow-2:.09; --scene-grid:.16; --scene-light-x:32%; --scene-light-y:34%; }
#lyx-scene.scene--brain       { --scene-accent:#C8A45D; --scene-accent-2:#4E77A8; --scene-glow:.18; --scene-glow-2:.13; --scene-grid:.07; --scene-light-x:50%; --scene-light-y:38%; }
#lyx-scene.scene--process     { --scene-accent:#C8A45D; --scene-accent-2:#4A6488; --scene-glow:.12; --scene-glow-2:.09; --scene-grid:.10; --scene-light-x:26%; --scene-light-y:52%; }
#lyx-scene.scene--impact      { --scene-accent:#C8A45D; --scene-accent-2:#3E5F8A; --scene-glow:.12; --scene-glow-2:.08; --scene-grid:.05; --scene-light-x:50%; --scene-light-y:40%; }
#lyx-scene.scene--contact     { --scene-accent:#E5C77A; --scene-accent-2:#3E5F8A; --scene-glow:.2;  --scene-glow-2:.11; --scene-grid:.05; --scene-light-x:50%; --scene-light-y:58%; }
#lyx-scene.scene--footer      { --scene-accent:#8A7648; --scene-accent-2:#33465F; --scene-glow:.06; --scene-glow-2:.05; --scene-grid:.03; --scene-light-x:50%; --scene-light-y:70%; }

/* brain: architectuur mag iets sterker (engine-omgeving) */
#lyx-scene.scene--brain .scene-arch  { opacity: .62; }
#lyx-scene.scene--contact .scene-arch{ opacity: .6; }
/* diensten = blueprint: floor-grid iets prominenter */
#lyx-scene.scene--capabilities .scene-floor,
#lyx-scene.scene--process .scene-floor { opacity: calc(var(--scene-grid) * 1.9); }

/* ---------- animaties ---------- */
@keyframes sceneDrift {
  0%   { transform: translate3d(-1.5%, 0, 0) scale(1.04); }
  100% { transform: translate3d(1.5%, -1.2%, 0) scale(1.08); }
}
@keyframes sceneBeam {
  0%   { transform: translateX(-8%) rotate(-1.5deg); opacity: .5; }
  100% { transform: translateX(8%) rotate(1.5deg); opacity: 1; }
}

/* =====================================================
   MOBIEL — eigen, eenvoudiger achtergrond (niet enkel verkleind)
   ===================================================== */
@media (max-width: 768px) {
  .scene-grid,
  .scene-floor,
  .scene-beam,
  .scene-arch--far { display: none; }
  .scene-arch { opacity: .42; height: 60vh; }
  .scene-grain { opacity: .025; }
  .scene-atmos { animation-duration: 46s; }
  /* zachtere, grotere lichtvelden i.p.v. kleine details */
  #lyx-scene { --scene-glow: calc(var(--scene-glow) * 0.9); }
}

/* zeer kleine schermen: nog rustiger */
@media (max-width: 420px) {
  .scene-grain { display: none; }
}

/* =====================================================
   REDUCED MOTION — sterke statische sfeer, geen beweging
   (globale *{animation:none} vangt de rest; hier expliciet de basis borgen)
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  .scene-arch, .scene-arch--far { transform: none !important; }
  .scene-atmos, .scene-beam { animation: none !important; }
  #lyx-scene { transition: none !important; }
}