/**
 * linaa-liquid-bg.css — Liquid Blob v2
 * Canvas mesh, sin/cos lệch pha, nhẹ hơn v1 (~25% ít repaints hơn).
 * Thay thế hoàn toàn 3 CSS div blob + keyframe cũ.
 * Depends on: lynk-tokens.css (enqueued priority 4)
 */

/* ── Kill Elementor kit background sớm nhất có thể ──────────────
   html được paint trước body → set màu tại đây để tránh flash trắng
   ngay cả trước khi body.linaa-liquid-bg-active được apply.       */
html {
  background-color: #000;
}

/* ── Wrapper body ─────────────────────────────────────────────── */
body.linaa-liquid-bg-active {
  background-color: var(--lynk-bg, #000);
  /* Override gradient kem của Elementor Kit (.elementor-kit-6):
     kit set background-image: radial-gradient(#F6EFE6...) lên body
     → cần reset về none để không flash trắng lúc load            */
  background-image: none !important;
  color: var(--lynk-text, #f7e7ce);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  isolation: isolate;
}

/* ── Root container ───────────────────────────────────────────── */
.linaa-liquid-bg-root {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

/* ── Canvas (v2) ──────────────────────────────────────────────── */
.linaa-liquid-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ── Noise overlay ────────────────────────────────────────────── */
.linaa-liquid-bg-noise {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22/%3E%3C/svg%3E");
}

/* ── Fallback: nếu canvas không support (CSS-only) ──────────────
   Blob divs bị ẩn khi canvas active, chỉ show nếu JS fail.    */
.linaa-liquid-bg-blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  display: none; /* JS sẽ xoá canvas nếu không hỗ trợ, và show blob */
}
.linaa-liquid-bg-root.linaa-no-canvas .linaa-liquid-bg-blob {
  display: block;
  filter: blur(var(--lynk-blur-md, 90px));
  animation: linaa-liquid-blob-css 10s infinite ease-in-out;
}
.linaa-liquid-bg-root.linaa-no-canvas .linaa-liquid-bg-blob--1 {
  top: 25%; left: 25%; width: 40vw; height: 40vw;
  background: rgba(var(--lynk-blob-1-color, 5, 150, 105), 0.4);
  opacity: 0.7;
}
.linaa-liquid-bg-root.linaa-no-canvas .linaa-liquid-bg-blob--2 {
  bottom: 25%; right: 25%; width: 45vw; height: 45vw;
  background: rgba(var(--lynk-blob-2-color, 13, 148, 136), 0.4);
  opacity: 0.6; animation-delay: 2s;
}
.linaa-liquid-bg-root.linaa-no-canvas .linaa-liquid-bg-blob--3 {
  top: 50%; left: 50%; width: 35vw; height: 35vw;
  margin: -17.5vw 0 0 -17.5vw;
  background: rgba(var(--lynk-blob-3-color, 52, 211, 153), 0.3);
  opacity: 0.5; animation-delay: 4s;
}

@keyframes linaa-liquid-blob-css {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.1); }
}