/* ==========================================================================
   UnyKorn LIQUID GLASS layer — shared by the main site and the Settlement Lab.
   Frosted panels, a slow liquid background, and real 3D depth.
   Text stays dark on light: every panel is mostly-opaque frosted white.
   ========================================================================== */
:root{
  --lg-blur: 18px;
  --lg-radius: 18px;
  --lg-panel: rgba(255,255,255,.66);
  --lg-panel-strong: rgba(255,255,255,.82);
  --lg-edge: rgba(255,255,255,.9);
  --lg-line: rgba(120,140,170,.28);
  --lg-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -1px 0 rgba(140,160,190,.18) inset,
               0 2px 4px rgba(20,40,80,.05), 0 12px 28px -8px rgba(20,40,80,.16), 0 32px 60px -30px rgba(20,50,110,.22);
  --lg-shadow-hover: 0 1px 0 rgba(255,255,255,1) inset, 0 -1px 0 rgba(140,160,190,.2) inset,
               0 4px 8px rgba(20,40,80,.06), 0 24px 44px -12px rgba(20,50,110,.26), 0 50px 80px -40px rgba(20,60,140,.32);
  --lg-blue: #1d5fd0; --lg-blue-2: #5aa2ff; --lg-ice: #dcebff; --lg-silver: #e9eef5;
}
.lg-dark{
  --lg-panel: rgba(22,32,50,.62); --lg-panel-strong: rgba(22,32,50,.82);
  --lg-edge: rgba(255,255,255,.14); --lg-line: rgba(160,185,225,.2);
  --lg-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 12px 28px -8px rgba(0,0,0,.5), 0 32px 60px -30px rgba(0,0,0,.6);
  --lg-shadow-hover: 0 1px 0 rgba(255,255,255,.18) inset, 0 24px 44px -12px rgba(0,0,0,.6), 0 50px 80px -40px rgba(30,90,200,.4);
}

/* ---------- liquid background ---------- */
.lg-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:linear-gradient(160deg,#f4f7fb 0%,#e8eff8 45%,#eef2f7 100%)}
.lg-dark .lg-bg{background:linear-gradient(160deg,#0a111c 0%,#0d1830 55%,#0a111c 100%)}
.lg-bg i{position:absolute;display:block;border-radius:50%;filter:blur(70px);opacity:.95;will-change:transform}
.lg-bg i:nth-child(1){width:46vw;height:46vw;left:-10vw;top:-14vw;background:radial-gradient(circle at 35% 35%,#a4c8ff,#cfe2ff 55%,transparent 72%);animation:lg-drift-a 26s ease-in-out infinite alternate}
.lg-bg i:nth-child(2){width:40vw;height:40vw;right:-8vw;top:8vh;background:radial-gradient(circle at 60% 40%,#c3d3ea,#dde7f4 55%,transparent 72%);animation:lg-drift-b 32s ease-in-out infinite alternate}
.lg-bg i:nth-child(3){width:38vw;height:38vw;left:28vw;bottom:-18vw;background:radial-gradient(circle at 50% 50%,#aadcf2,#d6eef8 55%,transparent 72%);animation:lg-drift-c 38s ease-in-out infinite alternate}
.lg-dark .lg-bg i{opacity:.35}
.lg-dark .lg-bg i:nth-child(1){background:radial-gradient(circle,#2a62c8,transparent 70%)}
.lg-dark .lg-bg i:nth-child(2){background:radial-gradient(circle,#3c5a86,transparent 70%)}
.lg-dark .lg-bg i:nth-child(3){background:radial-gradient(circle,#1f7f9a,transparent 70%)}
.lg-bg:after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(90,120,170,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(90,120,170,.07) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 75%)}
@keyframes lg-drift-a{to{transform:translate3d(14vw,10vh,0) scale(1.15)}}
@keyframes lg-drift-b{to{transform:translate3d(-12vw,16vh,0) scale(.9)}}
@keyframes lg-drift-c{to{transform:translate3d(8vw,-14vh,0) scale(1.2)}}

/* ---------- frosted panel ---------- */
.lg-panel{position:relative;background:var(--lg-panel);border:1px solid var(--lg-edge);border-radius:var(--lg-radius);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(170%);backdrop-filter:blur(var(--lg-blur)) saturate(170%);
  box-shadow:var(--lg-shadow)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.lg-panel{background:var(--lg-panel-strong)}}

/* ---------- 3D tilt (driven by glass.js) ---------- */
.lg-tilt{transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.lg-tilt.lg-live{transition:transform .08s linear,box-shadow .35s}
.lg-tilt:hover{box-shadow:var(--lg-shadow-hover)}
.lg-tilt:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.75),transparent 45%);mix-blend-mode:soft-light}
.lg-tilt:hover:before{opacity:1}
.lg-dark .lg-tilt:before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(140,190,255,.35),transparent 45%);mix-blend-mode:screen}

/* ---------- glossy button ---------- */
.lg-btn{position:relative;border-radius:999px!important;border:1px solid rgba(255,255,255,.55)!important;color:#fff!important;
  background:linear-gradient(180deg,#4f93f5 0%,#1d5fd0 55%,#184fb3 100%)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -2px 6px rgba(10,40,110,.35) inset,0 10px 22px -8px rgba(29,95,208,.6)!important;
  text-shadow:0 1px 1px rgba(10,40,110,.35);transition:transform .2s,box-shadow .2s,filter .2s}
.lg-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.lg-btn:active{transform:translateY(0)}
.lg-btn-ghost{border-radius:999px!important;background:var(--lg-panel)!important;border:1px solid var(--lg-edge)!important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--lg-shadow);transition:transform .2s}
.lg-btn-ghost:hover{transform:translateY(-2px)}

/* ---------- 3D hero stack ---------- */
.lg-stage{perspective:1400px;display:flex;align-items:center;justify-content:center;min-height:380px}
.lg-stack{position:relative;width:min(400px,86vw);height:330px;transform-style:preserve-3d;
  transform:rotateX(calc(56deg + var(--sx,0deg))) rotateZ(calc(-34deg + var(--sz,0deg)));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.lg-plate{position:absolute;left:0;right:0;top:40px;height:230px;border-radius:26px;padding:20px 22px;
  background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(225,238,255,.5));border:1px solid rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);
  box-shadow:0 1px 0 #fff inset,0 30px 50px -20px rgba(20,60,140,.35);
  display:flex;flex-direction:column;justify-content:flex-end;gap:6px;animation:lg-float 7s ease-in-out infinite}
.lg-plate:nth-child(1){transform:translateZ(0);animation-delay:0s}
.lg-plate:nth-child(2){transform:translateZ(105px);animation-delay:-2.3s}
.lg-plate:nth-child(3){transform:translateZ(210px);animation-delay:-4.6s;background:linear-gradient(135deg,rgba(90,162,255,.55),rgba(255,255,255,.75))}
.lg-plate b{font:700 12px/1 var(--mono,ui-monospace,monospace);letter-spacing:.12em;text-transform:uppercase;color:#0b1b33}
.lg-plate span{font:700 19px/1.15 var(--sans,system-ui,sans-serif);color:#0b1b33}
.lg-plate em{font:500 12.5px/1.3 var(--mono,ui-monospace,monospace);font-style:normal;color:#22385c}
.lg-plate:after{content:"";position:absolute;right:20px;top:18px;width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff,#9cc6ff 45%,#1d5fd0 100%);box-shadow:0 6px 14px rgba(29,95,208,.45)}
@keyframes lg-float{0%,100%{margin-top:0}50%{margin-top:-10px}}

/* ---------- reveal on scroll ---------- */
.lg-reveal{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.lg-reveal.lg-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .lg-bg i,.lg-plate{animation:none!important}
  .lg-tilt,.lg-tilt.lg-live{transform:none!important;transition:none}
  .lg-reveal{opacity:1;transform:none;transition:none}
}