/* ===== Liquid background container ===== */
.bg{
  position: fixed !important;
  inset: 0;
  z-index: -1;                /* aiz satura */
  overflow: hidden;
  pointer-events: none;
}
.noise{
  position: fixed!important;
 inset: 0;
  pointer-events: none;
  z-index: -1; /* zem satura, virs blobiem (ja .bg arī ir -1, .noise nāk HTML pēc .bg) */

  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'>\
  <filter id='n'>\
    <feTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='2' stitchTiles='stitch'/>\
  </filter>\
  <rect width='100%' height='100%' filter='url(%23n)'/>\
</svg>");
  background-repeat: repeat;
  background-size: 160px 160px; /* lielāks grauds = vizuāli maigāks */

  opacity: 0.38;              /* bija ~0.05 – trīsreiz zemāk */
  mix-blend-mode: soft-light;  /* maigs miksējums, nebojā krāsas */
}

@media (max-width: 768px){
  .noise{
    opacity: 0.22;
    background-size: 200px 200px;
  }
}
/* ===== Theme label stūrī ===== */
.bg-theme-label{
  position: absolute;
  right: 4vw;
  bottom: 3vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(10px, 1.9vw, 18px);
  text-transform: uppercase;
  font-weight:900;
  opacity: 0.62;
  pointer-events: none;
  white-space: nowrap;
  color: #192029;
  z-index:3;
}

/* mazāk agresīvi uz mobile */
@media (max-width: 768px){
  .bg-theme-label{
    right: 5vw;
    bottom: 4vh;
    font-size: clamp(9px, 2.4vw, 15px);
    opacity: 0.36;
  }
}

/* ===== Base blob ===== */
.blob{
  position: absolute;
  left: 50%; top: 50%;
  width: var(--sz, 60vmax);
  height: var(--sz, 60vmax);

  /* transform-only animācija caur CSS mainīgajiem */
  --tx: 0px; --ty: 0px; --sc: 1; --rot: 0deg;
  transform:
    translate(-50%, -50%)
    translate3d(var(--tx), var(--ty), 0)
    scale(var(--sc))
    rotate(var(--rot));
  transform-origin: center;
  will-change: transform, opacity;
  backface-visibility: hidden;

  /* pildījums — JS ieliks --bg; pretējā gadījumā redzams zilgans disks */
  background: var(--bg, radial-gradient(circle at 50% 50%, hsl(210 90% 60%/.85) 0%, transparent 70%));

  /* maska — tikai, ja JS iedod --mask; citādi forma = radial disks */
  -webkit-mask-image: var(--mask, none);
          mask-image: var(--mask, none);
  -webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
  -webkit-mask-size: contain;       mask-size: contain;
  -webkit-mask-position: center;    mask-position: center;

  filter: blur(var(--blur, 28px));  /* statisks */
  opacity: 0;                       /* sāk ar 0, aktivizē JS ar fade-in */
  border-radius: 50%;
  mix-blend-mode: normal;

  /* gluds parādīšanās fades */
  transition: opacity .9s ease-out;
}

/* PNG “front” slānim parasti labāk “screen” uz tumšiem foniem */
.blob[data-depth="front"]{
  mix-blend-mode: screen;
}

@supports (-webkit-touch-callout:none){
  .blob{
    filter: blur(calc(var(--blur,28px) * .92));
  }
}