/* TreeTrace.dev - liquid-glass .lens component (reusable, sparingly: 1-2 / page)
   Real refraction via SVG displacement of the backdrop (chromium);
   @supports frosted fallback for Safari/Firefox.

   PERF: the SVG-displacement backdrop-filter repaints the backdrop on every
   scroll frame and is very expensive. So the CHEAP frosted blur is the BASE
   state here, and the expensive displacement is layered on ONLY when the lens
   is actually in the viewport (.lens--invp, toggled by perf.js) AND the page is
   not actively scrolling (body.is-scrolling drops it back to frost). */

.lens{
  position:relative;border-radius:24px;overflow:hidden;
  /* CHEAP frosted fallback is the default + the while-scrolling state */
  -webkit-backdrop-filter:blur(10px) saturate(130%);
  backdrop-filter:blur(10px) saturate(130%);
  background:linear-gradient(150deg, rgba(20,22,28,.46), rgba(18,19,22,.30) 46%, rgba(46,91,255,.06));
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    1.5px 1.5px 0 rgba(255,255,255,.22) inset,
    -1px -1px 0 rgba(46,91,255,.30) inset,
    0 0 0 1px rgba(255,255,255,.22),
    0 0 22px rgba(46,91,255,.18),
    0 34px 70px -18px rgba(0,0,0,.78),
    0 10px 26px -8px rgba(0,0,0,.55);
}
/* specular sheen sweep */
.lens::before{content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,0) 34%),
    radial-gradient(120% 80% at 18% 8%, rgba(255,255,255,.08), transparent 42%);
  mix-blend-mode:screen;opacity:.6}
/* chromatic-aberration hairline at the rim */
.lens::after{content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;
  box-shadow:
    inset 1px 0 0 rgba(120,160,255,.55),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset -1px 0 0 rgba(46,91,255,.45),
    inset 0 -1px 0 rgba(46,91,255,.30)}

/* anything that should float above the sheen/aberration layers */
.lens > *{position:relative;z-index:1}

/* draggable lens: grab affordance + "DRAG THE LENS" hint */
.lens.tt-draggable{cursor:grab;user-select:none;-webkit-user-select:none}
.lens.tt-draggable.is-grabbing{cursor:grabbing}
.lens-hint{
  position:absolute;left:0;right:0;bottom:8px;z-index:2;pointer-events:none;text-align:center;
  font-family:var(--tt-font-mono);font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--tt-ash);opacity:.78;transition:opacity .5s var(--tt-ease,ease);
}
.lens.lens--dragged .lens-hint{opacity:0}
@media (prefers-reduced-motion:reduce){
  .lens-hint{transition:none}
}

/* PREMIUM displacement - applied ONLY when the lens is in view and at rest.
   Gated behind no-preference so reduced-motion users never pay for it, and
   dropped back to frost while body.is-scrolling so scrolling stays smooth. */
@media (prefers-reduced-motion:no-preference){
  .lens.lens--invp{
    -webkit-backdrop-filter:url(#lensGlass) blur(2px) saturate(140%);
    backdrop-filter:url(#lensGlass) blur(2px) saturate(140%);
    background:linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 46%, rgba(46,91,255,.05));
  }
  body.is-scrolling .lens.lens--invp{
    -webkit-backdrop-filter:blur(10px) saturate(130%);
    backdrop-filter:blur(10px) saturate(130%);
    background:linear-gradient(150deg, rgba(20,22,28,.46), rgba(18,19,22,.30) 46%, rgba(46,91,255,.06));
  }
}

/* FALLBACK: frosted glass (no backdrop-filter:url support) - matches the base */
@supports not ((-webkit-backdrop-filter:url(#lensGlass)) or (backdrop-filter:url(#lensGlass))){
  .lens,.lens.lens--invp{
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    backdrop-filter:blur(18px) saturate(140%);
    background:linear-gradient(150deg, rgba(18,19,22,.66), rgba(18,19,22,.46));
  }
}
/* reduced-motion: never apply the displacement, stay on a calm frost */
@media (prefers-reduced-motion:reduce){
  .lens{
    -webkit-backdrop-filter:blur(16px) saturate(135%);
    backdrop-filter:blur(16px) saturate(135%);
  }
}

/* The off-screen SVG filter element this component depends on lives in markup:
   <svg class="lens-defs">…<filter id="lensGlass">…</svg> (see partials/glass-defs). */
.lens-defs{position:absolute;width:0;height:0;overflow:hidden}