/* APSA ONE — nền "art": gradient xanh (lime · ngọc · xanh biển) trôi chậm + grain như phim.
   Dùng: <link rel="stylesheet" href="/brand/apsa-bg.css"> và thêm class "apsa-art" vào <html>.
   Nền nằm dưới mọi nội dung (z-index âm trên thẻ html), không cần sửa bố cục trang. */
html.apsa-art:not([data-theme="light"]) { background: #050807 !important; }
html.apsa-art:not([data-theme="light"]) body { background: transparent !important; }

html.apsa-art:not([data-theme="light"])::before,
html.apsa-art:not([data-theme="light"])::after {
  content: ""; position: fixed; pointer-events: none; z-index: -1;
}

/* Gradient: ba vùng màu lớn, mềm, trôi và xoay rất chậm */
html.apsa-art:not([data-theme="light"])::before {
  inset: auto; left: 50%; top: 50%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; opacity: 1;
  background:
    radial-gradient(28% 26% at 30% 34%, rgba(184, 245, 58, 0.20) 0%, rgba(184, 245, 58, 0) 70%),
    radial-gradient(30% 30% at 70% 30%, rgba(22, 190, 140, 0.24) 0%, rgba(22, 190, 140, 0) 70%),
    radial-gradient(34% 32% at 58% 70%, rgba(16, 120, 160, 0.30) 0%, rgba(16, 120, 160, 0) 70%),
    radial-gradient(26% 24% at 32% 72%, rgba(40, 210, 180, 0.12) 0%, rgba(40, 210, 180, 0) 70%);
  will-change: transform;
  animation: apsaFlow 36s ease-in-out infinite alternate;
}

/* Grain: nhiễu mịn phủ toàn màn hình, nhấp nháy nhẹ như hạt phim */
html.apsa-art:not([data-theme="light"])::after {
  inset: -50%; width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: 0.11;
  will-change: transform;
  animation: apsaGrain 1.2s steps(6) infinite;
}

/* Trang đã có lớp hạt riêng (Duyệt video): chỉ dùng gradient */
html.apsa-art.no-grain::after { display: none; }

@keyframes apsaFlow {
  0%   { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); }
  35%  { transform: translate3d(3%, -5%, 0) rotate(14deg) scale(1.08); }
  70%  { transform: translate3d(5%, 4%, 0) rotate(-8deg) scale(0.96); }
  100% { transform: translate3d(-3%, 5%, 0) rotate(20deg) scale(1.05); }
}
@keyframes apsaGrain {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-3%, 2%, 0); }
  40%  { transform: translate3d(2%, -4%, 0); }
  60%  { transform: translate3d(-4%, -1%, 0); }
  80%  { transform: translate3d(3%, 3%, 0); }
  100% { transform: translate3d(-1%, 4%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  html.apsa-art::before, html.apsa-art::after { animation: none !important; }
}