/* ============================================================
   WOYLD — global page effects (noise + gradual blur)
   ============================================================ */
/* Kolor blura i siła ziarna idą za skórką (data-skin na <html>), nie za
   osobną klasą motywu na <body> — jeden atrybut przestawia i stronę,
   i efekt, więc nie ma drugiego, równoległego mechanizmu motywu.
   Arkusz jest niezależny od style.css (ładuje się po nim, ale nie
   korzysta z jego tokenów), stąd własne bloki skórek. */
:root[data-skin="light"] {
  --effects-blur-rgb: 255, 255, 255;
  --effects-noise-opacity: 0.14;
}

:root[data-skin="dark"] {
  --effects-blur-rgb: 10, 10, 10;
  --effects-noise-opacity: 0.09;
}

#page-noise {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: var(--effects-noise-opacity);
}

/* ---- Gradual Blur (bottom edge) ---- */
.gradual-blur {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(3rem, 10vh, 6rem);
  z-index: 90;
  pointer-events: none;
  isolation: isolate;
  transition: opacity .3s ease;
}

.gradual-blur-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.gradual-blur-inner > div {
  position: absolute;
  inset: 0;
}

body.modal-open .gradual-blur {
  opacity: 0;
  transition: opacity .3s;
}

@supports not (backdrop-filter: blur(1px)) {
  .gradual-blur-inner > div {
    background: rgba(var(--effects-blur-rgb), .3);
    opacity: .5;
  }
}

@media (prefers-reduced-motion: reduce) {
  #page-noise { opacity: calc(var(--effects-noise-opacity) * .6); }
}