/* Liquid Lens core: site-agnostic "liquid glass" layer shared by the MG
   library and the deletedinchina main-site mockups. Loads after each site's
   own style.css and only adds rules. Site-specific class mappings live in
   adapter-*.css (loaded after this file); this file only touches generic
   hooks (header, footer, main) and opt-in hooks (.lq-glass, [data-lq-glass],
   .lq-reveal, [data-lq-reveal], .lq-spring). */

:root{
  --lq-glass-bg:rgba(255,255,255,.82);
  --lq-glass-bg-strong:rgba(255,255,255,.93);
  --lq-glass-blur:18px;
  --lq-glass-blur-sm:8px;
  --lq-glass-radius:14px;
  --lq-glass-border:linear-gradient(135deg,rgba(59,78,143,.4),rgba(31,122,108,.35),rgba(200,16,46,.3));
  --lq-glass-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 8px 26px rgba(30,30,25,.07);
  --lq-dark-glass-bg:rgba(17,17,17,.88);
  --lq-spring-ease:cubic-bezier(.34,1.66,.64,1);
}

/* ---- sticky footer: footer sits at the viewport bottom on short pages,
   never leaves background showing beneath it; unaffected on long pages ---- */
html{height:100%}
body{min-height:100vh;display:flex;flex-direction:column}
@supports (height:100dvh){ body{min-height:100dvh} }
main{flex:1 0 auto}
footer{margin-top:auto}

/* ---- background blob layer (decorative only, aria-hidden, never text) ---- */
.lq-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;will-change:transform;transition:transform .2s ease-out}
.lq-blob{position:absolute;border-radius:50%;will-change:transform;transform:translate3d(0,0,0);filter:url(#lqDistort) blur(50px)}
.lq-blob.b1{width:58vmax;height:58vmax;left:-16vmax;top:-18vmax;opacity:.2;background:radial-gradient(circle,#3b4e8f,transparent 70%);animation:lqDriftA 75s ease-in-out infinite alternate}
.lq-blob.b2{width:48vmax;height:48vmax;right:-14vmax;top:14vmax;opacity:.18;background:radial-gradient(circle,#1f7a6c,transparent 70%);animation:lqDriftB 90s ease-in-out infinite alternate}
.lq-blob.b3{width:44vmax;height:44vmax;left:22vmax;bottom:-24vmax;opacity:.16;background:radial-gradient(circle,#c8102e,transparent 70%);animation:lqDriftC 100s ease-in-out infinite alternate}
@keyframes lqDriftA{from{transform:translate3d(0,0,0)}to{transform:translate3d(6vmax,7vmax,0)}}
@keyframes lqDriftB{from{transform:translate3d(0,0,0)}to{transform:translate3d(-6vmax,6vmax,0)}}
@keyframes lqDriftC{from{transform:translate3d(0,0,0)}to{transform:translate3d(5vmax,-5vmax,0)}}
body.lq-paused .lq-blob{animation-play-state:paused}
@media (max-width:720px){.lq-blob{filter:blur(40px)}}

/* ---- glass chrome: light glass for header + opt-in hooks, dark glass for
   footer (keeps footer's light-on-dark contrast instead of white glass) ---- */
header,.lq-glass,[data-lq-glass]{
  position:relative;border:1px solid transparent;border-radius:var(--lq-glass-radius);
  background:var(--lq-glass-bg) padding-box,var(--lq-glass-border) border-box;
  backdrop-filter:blur(var(--lq-glass-blur));-webkit-backdrop-filter:blur(var(--lq-glass-blur));
  box-shadow:var(--lq-glass-shadow);
}
footer{background:var(--lq-dark-glass-bg);backdrop-filter:blur(var(--lq-glass-blur-sm));-webkit-backdrop-filter:blur(var(--lq-glass-blur-sm))}
@media (max-width:720px){
  header,.lq-glass,[data-lq-glass]{backdrop-filter:blur(var(--lq-glass-blur-sm));-webkit-backdrop-filter:blur(var(--lq-glass-blur-sm))}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header,.lq-glass,[data-lq-glass]{background:rgba(255,255,255,.97)}
  footer{background:#111}
}

/* ---- springy hover (opt-in) ---- */
.lq-spring{transition:transform .3s var(--lq-spring-ease),box-shadow .3s ease}
.lq-spring:hover,.lq-spring:focus-visible{transform:translateY(-4px) scale(1.03);box-shadow:0 12px 26px rgba(30,30,25,.14)}

/* ---- reveal-on-scroll (opt-in; class only ever added by JS, so pages are
   fully visible with no-JS) ---- */
.lq-reveal{opacity:0;transform:translateY(18px) scale(.96);transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}
.lq-reveal.lq-in{opacity:1;transform:translateY(0) scale(1)}

/* ---- reduced motion: stop all animation/transition, content stays visible ---- */
@media (prefers-reduced-motion:reduce){
  .lq-blob{animation:none!important}
  .lq-bg{transition:none!important}
  .lq-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .lq-spring{transition:none!important}
  .lq-spring:hover,.lq-spring:focus-visible{transform:none!important}
}