/* Norwest Blog  -  Liquid Glass Loupe styles (prototype)
   The refraction is done in JS/SVG (feDisplacementMap on .nwl-glass); this sheet
   paints the GLASS FINISH on top: specular highlight, chromatic-aberration rim,
   glass edge ring, depth shadows, and the lightbox. */

/* --- Armed images: hide the native OS zoom-in cursor so the liquid-glass peek is
   the SOLE magnifier indicator (no redundant system magnifier stacked under it). --- */
img.nwl-armed { cursor: none; }

/* --- The loupe (small liquid-glass peek that rides just off the cursor) --- */
.nwl-loupe{
  position:fixed; left:0; top:0; z-index:2147483000;
  width:96px; height:96px; border-radius:50%;
  pointer-events:none; opacity:0; will-change:left,top,transform;
  transform-origin:center center;
  /* outer depth: a soft cast shadow + a crisp contact ring */
  box-shadow:
     0 14px 30px -8px rgba(13,18,20,.50),
     0 5px 12px -4px rgba(13,18,20,.38),
     0 0 0 1px rgba(255,255,255,.16);
}
.nwl-loupe.is-on{ opacity:1; }

/* the magnified image (refraction filter applied). Chain a touch of contrast +
   saturation onto the SVG refraction so the peek reads CRISPER than the base
   image, not milky. */
.nwl-glass{
  position:absolute; inset:0; border-radius:50%;
  background-repeat:no-repeat; background-color:#0D1214;
  filter:url(#nwlGlass) contrast(1.12) saturate(1.14);
  /* CONTAIN the refraction to the disc: an SVG filter (feDisplacementMap) renders a
     fresh raster that border-radius does NOT clip, so the bent rim content used to
     spill outside the circle (the "misaligned" look). clip-path clips the filtered
     output to a true circle so all magnified content stays inside the lens. */
  clip-path:circle(50% at 50% 50%);
}

/* chromatic aberration ring: subtle + symmetric, only a thin band at the very rim */
.nwl-chroma{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  mix-blend-mode:screen; opacity:.32;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,70,58,0) 84%, rgba(255,70,58,.34) 93%, rgba(255,70,58,0) 100%),
    radial-gradient(circle at 50% 50%, rgba(90,180,255,0) 86%, rgba(90,180,255,.30) 95%, rgba(90,180,255,0) 100%);
  background-position: 1px 0, -1px 0;
  filter:blur(.5px);
}

/* specular: a TIGHT bright glint near the top-left rim + a thin crescent sweep.
   Sized for the small (96px) lens so the interior stays clear (no milky veil). */
.nwl-spec{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  will-change:transform; mix-blend-mode:screen;
  background:
    /* tight hot glint */
    radial-gradient(9px 7px at 34% 24%, rgba(255,255,255,.95), rgba(255,255,255,0) 74%),
    /* thin diagonal edge sheen, top-left arc only */
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 82%, rgba(255,255,255,.20) 92%, rgba(255,255,255,0) 100%);
}

/* the glass edge ring: a CRISP thin bevel hugging the rim (no wide inner glow that
   would fog the small lens). A tight bright top bevel + a soft dark bottom = thickness. */
.nwl-rim{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow:
     inset 0 0 0 1px rgba(255,255,255,.62),          /* hairline glass edge */
     inset 0 1.5px 1.5px rgba(255,255,255,.55),        /* bright top bevel, tight */
     inset 0 -3px 5px rgba(13,18,20,.30),              /* soft dark bottom = depth */
     inset 0 0 0 2px rgba(13,18,20,.14);               /* faint 2nd line = wall thickness */
  border:1px solid rgba(255,255,255,.28);
}

/* faint sample-point reticle at the centre so you know the exact focus point */
.nwl-reticle{
  position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px;
  border-radius:50%; pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.7), 0 0 6px rgba(13,18,20,.4);
}

/* ===================== LIGHTBOX ===================== */
.nwl-lightbox{
  position:fixed; inset:0; z-index:2147483600; display:flex; align-items:center; justify-content:center;
  padding:5vmin; background:rgba(9,12,14,0); backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px); transition:background .26s ease, backdrop-filter .26s ease; cursor:zoom-out;
}
.nwl-lightbox.is-open{ background:rgba(9,12,14,.82); backdrop-filter:blur(10px) saturate(1.15); -webkit-backdrop-filter:blur(10px) saturate(1.15); }
.nwl-lb-fig{ margin:0; max-width:min(1200px,92vw); max-height:88vh; display:flex; flex-direction:column; gap:14px;
  transform:scale(.96); opacity:0; transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
.nwl-lightbox.is-open .nwl-lb-fig{ transform:scale(1); opacity:1; }
.nwl-lb-fig img{ max-width:100%; max-height:82vh; object-fit:contain; display:block; margin:0 auto;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7); cursor:zoom-in; transition:transform .3s ease; }
.nwl-lb-fig img.is-zoomed{ transform:scale(1.8); cursor:zoom-out; }
.nwl-lb-fig figcaption{ text-align:center; color:#E6E6DB; font:600 11px/1.5 Poppins,sans-serif; letter-spacing:.16em; text-transform:uppercase; opacity:.8; }
/* Lightbox close (X): the lightbox is appended to <body>, OUTSIDE the
   .nw-blog-modern wrapper, so it inherits the active theme's global button base
   (hello-elementor .elementor-kit-5 button + Bootstrap [type=button]) which forces
   a 1px border, square corners, uppercase, padding and an "all" transition. Use a
   tag+class selector with !important to fully neutralize that theme base and keep
   the borderless coral-glyph circle with NO border and NO hover motion (Adam:
   "remove the border and hover effect from the x button"). */
button.nwl-lb-close{ position:fixed !important; top:20px; right:24px;
  width:44px !important; height:44px !important; border-radius:50% !important;
  border:none !important; padding:0 !important; box-shadow:none !important;
  background:rgba(13,18,20,.5) !important; color:#E6E6DB !important;
  font-size:26px; font-weight:400 !important; line-height:1;
  text-transform:none !important; letter-spacing:normal !important;
  cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  -webkit-appearance:none !important; appearance:none !important;
  transition:none !important; transform:none !important; }
button.nwl-lb-close:hover{ background:rgba(13,18,20,.5) !important; transform:none !important; }

@media (hover:none){ /* touch: no loupe, tapping an armed image opens the lightbox instead (wired in JS-touch, future) */
  img.nwl-armed, img.nwl-armed:hover{ cursor:default; }
}