/* ───────────────────────────────────────────────────────────
   НЕЧТО — Atmospheric Textures
   Procedural alternatives to the chladni / cloud / noise PNGs
   from the source. SVG turbulence + radial gradients reproduce
   the hazy, organic, slightly-broken-photocopy mood.
   ─────────────────────────────────────────────────────────── */

/* Reusable SVG noise patterns — embedded as data: URIs */
:root {
  /* Coarse grain — the "paper" of every dark surface */
  --tex-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.65 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  /* Soft cloudy haze — the "smoke" PNG replacement */
  --tex-haze:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='800'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23c)' opacity='0.55'/></svg>");

  /* Chladni-style concentric ring pattern */
  --tex-rings: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200' viewBox='0 0 1200 1200'><defs><radialGradient id='g' cx='50%25' cy='50%25' r='50%25'><stop offset='0%25' stop-color='white' stop-opacity='0'/><stop offset='62%25' stop-color='white' stop-opacity='0.10'/><stop offset='75%25' stop-color='white' stop-opacity='0'/><stop offset='86%25' stop-color='white' stop-opacity='0.18'/><stop offset='98%25' stop-color='white' stop-opacity='0'/></radialGradient></defs><rect width='100%25' height='100%25' fill='url(%23g)'/></svg>");
}

/* ── Grain overlay — drop into any dark surface ─────────── */
.tex-grain {
  position: relative;
  isolation: isolate;
}
.tex-grain::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--tex-grain);
  background-size: 240px 240px;
  mix-blend-mode: overlay;
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}

.tex-grain-soft::after { opacity: 0.28; }

/* ── Haze halo — atmospheric smoke for full-bleed slides ── */
.tex-haze {
  position: relative;
}
.tex-haze::before {
  content: "";
  position: absolute; inset: -20%;
  background-image: var(--tex-haze);
  background-size: cover;
  mix-blend-mode: screen;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}

/* ── Chladni rings — meditative pattern for hero panels ─── */
.tex-rings {
  background-image: var(--tex-rings);
  background-size: cover;
  background-position: center;
}

/* ── Vignette — pulls focus inward ─────────────────────── */
.tex-vignette {
  position: relative;
}
.tex-vignette::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 110%);
  pointer-events: none;
}

/* ── Glass surface — frosted card over textured background ─ */
.glass {
  background: var(--glass-paper);
  backdrop-filter: blur(19px) saturate(110%);
  -webkit-backdrop-filter: blur(19px) saturate(110%);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-lg);
}

.glass-dark {
  background: var(--glass-light);
  backdrop-filter: blur(40px) saturate(120%);
  -webkit-backdrop-filter: blur(40px) saturate(120%);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-lg);
}

.glass-pill {
  background: linear-gradient(rgba(61,61,61,0.85), rgba(251,251,251,0.03));
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-stroke-2);
}

/* ── Aurora — radiant background for cover slides ────────── */
.aurora-ink {
  background:
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(104,111,77,0.45), transparent 60%),
    radial-gradient(circle at 80% 0%, rgba(99,197,127,0.10), transparent 50%),
    radial-gradient(circle at 0% 50%, rgba(238,243,255,0.05), transparent 50%),
    var(--n-ink);
}

.aurora-paper {
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(213,217,194,0.65), transparent 65%),
    radial-gradient(circle at 100% 100%, rgba(104,111,77,0.18), transparent 50%),
    var(--n-paper-soft);
}

.aurora-moss {
  background:
    radial-gradient(circle at 30% 20%, rgba(213,217,194,0.35), transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(0,0,0,0.35), transparent 55%),
    var(--o-moss);
}

/* ── Spotlight — radial shine through a dark ground ─────── */
.spotlight-ink {
  background:
    radial-gradient(ellipse 70% 65% at 50% 60%, rgba(238,243,255,0.10), transparent 60%),
    var(--n-ink);
}
</content>