/* Glazuz 格視 · Liquid Glass 共用層（landing page、私隱聲明、示範版）
 * 只定義玻璃用嘅色、光邊、陰影同背後流動色塊；各頁自己嘅 CSS 再用呢啲 token 套落元件度。
 * 用法：喺頁面 CSS 之前載入，body 第一個元素放 <div class="aurora" aria-hidden="true"><i></i><i></i><i></i></div>
 */
:root {
  --g-jade: #1d7d55; --g-jade-soft: #e3f1ea;
  --g-glass: rgba(255, 255, 255, .6); --g-glass-2: rgba(255, 255, 255, .36); --g-glass-3: rgba(255, 255, 255, .5);
  --g-solid: rgba(255, 255, 255, .86);
  --g-line: rgba(255, 255, 255, .7); --g-rim: rgba(255, 255, 255, .95); --g-rim-dim: rgba(255, 255, 255, .12);
  --g-shadow: 0 1px 1px rgba(20, 40, 30, .04), 0 18px 40px -16px rgba(20, 50, 40, .26), 0 40px 80px -30px rgba(20, 50, 40, .22);
  --g-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 14px -8px rgba(20, 50, 40, .25);
  --g-well: inset 0 1px 3px rgba(0, 0, 0, .08), inset 0 0 0 1px var(--g-line);
  --g-muted: #5c5c57;
  --g-blur: blur(26px) saturate(180%);
  --g-r-lg: 22px; --g-r: 16px; --g-r-sm: 12px;
  --blob-1: #7fd6ac; --blob-2: #93c5f2; --blob-3: #ffd29e; --blob-4: #74d8c9; --blob-5: #ffbfa6; --blob-a: .55;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --g-jade: #4fc28f; --g-jade-soft: #173328;
    --g-glass: rgba(34, 34, 32, .58); --g-glass-2: rgba(40, 40, 38, .36); --g-glass-3: rgba(255, 255, 255, .06);
    --g-solid: rgba(26, 26, 25, .9);
    --g-line: rgba(255, 255, 255, .12); --g-rim: rgba(255, 255, 255, .3); --g-rim-dim: rgba(255, 255, 255, .03);
    --g-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 18px 40px -16px rgba(0, 0, 0, .6), 0 40px 80px -30px rgba(0, 0, 0, .7);
    --g-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 14px -8px rgba(0, 0, 0, .6);
    --g-muted: #a4a49d;
    --blob-1: #1f8a5c; --blob-2: #24507e; --blob-3: #8a5a22; --blob-4: #1c6f68; --blob-5: #7d3f36; --blob-a: .5;
  }
}
:root[data-theme="dark"] {
  --g-jade: #4fc28f; --g-jade-soft: #173328;
  --g-glass: rgba(34, 34, 32, .58); --g-glass-2: rgba(40, 40, 38, .36); --g-glass-3: rgba(255, 255, 255, .06);
  --g-solid: rgba(26, 26, 25, .9);
  --g-line: rgba(255, 255, 255, .12); --g-rim: rgba(255, 255, 255, .3); --g-rim-dim: rgba(255, 255, 255, .03);
  --g-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 18px 40px -16px rgba(0, 0, 0, .6), 0 40px 80px -30px rgba(0, 0, 0, .7);
  --g-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 14px -8px rgba(0, 0, 0, .6);
  --g-muted: #a4a49d;
  --blob-1: #1f8a5c; --blob-2: #24507e; --blob-3: #8a5a22; --blob-4: #1c6f68; --blob-5: #7d3f36; --blob-a: .5;
}

/* 背景漸變：三團色塊沿弧線慢慢遊走，同時喺品牌色之間轉色，成個背景一直變化 */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(60px); opacity: var(--blob-a); will-change: transform; }
.aurora i:nth-child(1) { background: var(--blob-1); left: -25vmax; top: -20vmax; animation: g-drift1 18s ease-in-out infinite alternate, g-tint1 14s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { background: var(--blob-2); right: -30vmax; top: 10vmax; animation: g-drift2 22s ease-in-out infinite alternate, g-tint2 17s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { background: var(--blob-3); left: -10vmax; bottom: -35vmax; animation: g-drift3 26s ease-in-out infinite alternate, g-tint3 20s ease-in-out infinite alternate; }
@keyframes g-drift1 { 33% { transform: translate(22vmax, 10vmax) scale(1.15); } 66% { transform: translate(8vmax, 28vmax) scale(.95); } 100% { transform: translate(26vmax, 20vmax) scale(1.1); } }
@keyframes g-drift2 { 33% { transform: translate(-18vmax, 16vmax) scale(1.1); } 66% { transform: translate(-28vmax, -4vmax) scale(.9); } 100% { transform: translate(-10vmax, 24vmax) scale(1.05); } }
@keyframes g-drift3 { 33% { transform: translate(16vmax, -18vmax) scale(1.1); } 66% { transform: translate(-10vmax, -28vmax) scale(.95); } 100% { transform: translate(20vmax, -10vmax) scale(1.15); } }
@keyframes g-tint1 { 0% { background: var(--blob-1); } 50% { background: var(--blob-4); } 100% { background: var(--blob-2); } }
@keyframes g-tint2 { 0% { background: var(--blob-2); } 50% { background: var(--blob-4); } 100% { background: var(--blob-1); } }
@keyframes g-tint3 { 0% { background: var(--blob-3); } 50% { background: var(--blob-5); } 100% { background: var(--blob-1); } }

/* 玻璃面：頁面 CSS 用 .glass 或者自己套返同一組 token */
.glass { background: linear-gradient(160deg, var(--g-glass), var(--g-glass-2)); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); border: 1px solid var(--g-line); box-shadow: inset 0 1px 0 var(--g-rim), inset 0 -1px 0 var(--g-rim-dim), var(--g-shadow); }

@media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } }
@media (prefers-reduced-transparency: reduce) {
  .aurora { display: none; }
  :root { --g-glass: var(--g-solid); --g-glass-2: var(--g-solid); --g-glass-3: var(--g-solid); --g-blur: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --g-glass: var(--g-solid); --g-glass-2: var(--g-solid); }
}