/*! liquid-glass.css — companion styles for liquid-glass.js */

/* ===== Mode A layout: the source <img>/<video> and the canvas both fill the hero; content sits above them ===== */
.lg-hero{position:relative;overflow:hidden}
.lg-hero > .lg-source,.lg-hero > .lg-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lg-hero > .lg-canvas{pointer-events:none}

/* ===== Mode A: elements carry only content; the canvas underneath paints the glass ===== */
[data-glass]{background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.38)}
.lg-fallback [data-glass]{background:rgba(8,14,12,.22);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.lg-fallback .lg-canvas{display:none}
/* optional press feedback; call glass.keepDrawing(500) on pointerdown/pointerup so the glass follows the transform */
[data-glass][data-press]{transition:transform .3s cubic-bezier(.3,1.7,.5,1)}
[data-glass][data-press]:active{transform:scale(1.045)}
@media (prefers-reduced-motion:reduce){[data-glass][data-press]{transition:none}}

/* ===== Mode B: refraction comes from backdrop-filter (set by JS); rim, glow and tint are CSS ===== */
[data-glass-b]{position:relative;isolation:isolate;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.38);background:rgba(8,14,12,.14);
  box-shadow:0 10px 32px -8px rgba(0,0,0,.45),inset 0 0 22px 2px rgba(255,255,255,.13),
    inset 1.5px 1.5px 1.5px -.5px rgba(255,255,255,.5),inset -1.5px -1.5px 1.5px -.5px rgba(255,255,255,.3)}
[data-glass-b]::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.95),rgba(255,255,255,.14) 32%,rgba(255,255,255,.1) 66%,rgba(255,255,255,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
[data-glass-b].lg-fallback{-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5)}
/* Mode B over a LIGHT page: dark text, light tint (CSS cannot sense the backdrop, so the tone is set by hand or per section) */
[data-glass-b][data-tone="light"]{color:#0e1512;text-shadow:none;background:rgba(255,255,255,.1);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.28),inset 0 0 20px 1px rgba(255,255,255,.22),
    inset 1.5px 1.5px 1.5px -.5px rgba(255,255,255,.95),inset -1.5px -1.5px 1.5px -.5px rgba(255,255,255,.6)}