/* ==============================================================================================
   CoinScope Pro - the glass layer. (c) 2026 Jennifer K. Mellen.

   Loaded on EVERY page (Jen, 2026-09-18: "These effects should live on every page somehow").
   Four things live here and nowhere else, so the look is one decision rather than twenty:

     1. GLASSMORPHISM      .nl-glass - frosted, translucent, with a real specular edge.
     2. SVG AURORA BLOBS   a fixed layer behind the whole site, drifting.
     3. PARALLAX           those blobs move against the scroll (driven by nl-glass.js).
     4. KEN BURNS          .nl-kb - a slow drift into a picture instead of a dead thumbnail.

   MOTION IS OPTIONAL AND THAT IS NOT A DETAIL.
   Drifting blobs, parallax and creeping zooms are exactly what triggers vestibular symptoms in the
   people who have them. Every one is switched off under prefers-reduced-motion, and the site is
   built so it reads identically with all of it gone - the motion decorates the design, it never
   carries it.

   WHY GLASS NEEDS A BACKDROP.
   backdrop-filter blurs what is BEHIND an element, so glass over a flat colour looks like a grey
   box. The blob layer is what gives it something to refract; the two are one effect, which is why
   they are in one file.
   ============================================================================================== */

:root{
  --g-bd:rgba(255,255,255,.10);
  --g-bg:rgba(255,255,255,.045);
  --g-hi:rgba(255,255,255,.22);
  --nl-ink:#eef2f8;
  --nl-dim:#9fb0c6;
  --nl-acc:#7cc4ff;
  --nl-acc2:#c9a3ff;
  --nl-warn:#ffce6e;
}

/* ---------------------------------------------------------------- 2. the aurora */
.nl-blobs{
  position:fixed;inset:-12vh -10vw;z-index:-1;pointer-events:none;overflow:hidden;
  filter:blur(38px) saturate(135%);opacity:.55;
  /* contain:paint keeps this layer from forcing layout work on the rest of the page */
  contain:paint;
}
.nl-blobs svg{position:absolute;will-change:transform}
.nl-b1{top:-4vh;left:-6vw;width:62vw;animation:nl-drift1 34s ease-in-out infinite}
.nl-b2{top:36vh;right:-12vw;width:56vw;animation:nl-drift2 41s ease-in-out infinite}
.nl-b3{top:74vh;left:12vw;width:48vw;animation:nl-drift3 29s ease-in-out infinite}
@keyframes nl-drift1{0%,100%{rotate:0deg;scale:1}50%{rotate:8deg;scale:1.12}}
@keyframes nl-drift2{0%,100%{rotate:0deg;scale:1.05}50%{rotate:-10deg;scale:.93}}
@keyframes nl-drift3{0%,100%{rotate:0deg;scale:.96}50%{rotate:6deg;scale:1.14}}
/* NOTE: these animate `rotate`/`scale` rather than `transform`, deliberately. The parallax in
   nl-glass.js writes `translate`, and if both used `transform` the last one to write would wipe
   the other out. Separate properties compose instead of fighting. */

/* ---------------------------------------------------------------- 1. glass */
.nl-glass{
  background:var(--g-bg);
  border:1px solid var(--g-bd);
  border-radius:20px;
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 10px 40px rgba(0,0,0,.34), inset 0 1px 0 var(--g-hi);
  position:relative;
}
/* the sheen across the top-left edge - the thing that actually reads as glass rather than as a
   translucent rectangle */
.nl-glass::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,0) 42%);
}
.nl-glass>*{position:relative}
.nl-glass-soft{background:rgba(255,255,255,.028);backdrop-filter:blur(14px) saturate(130%);
               -webkit-backdrop-filter:blur(14px) saturate(130%)}

/* Fallback: Firefox without backdrop-filter enabled would render these nearly invisible, so the
   panel becomes a solid dark card instead of a ghost. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .nl-glass,.nl-glass-soft{background:rgba(12,18,28,.86)}
}

/* ---------------------------------------------------------------- 4. Ken Burns */
.nl-kb{overflow:hidden;position:relative}
.nl-kb img,.nl-kb>picture>img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);transition:transform 7s ease-out;
}
.nl-kb:hover img,.nl-kb:focus-visible img,.nl-kb:focus-within img{
  transform:scale(1.17) translate(-1.5%,-1.5%);
}
/* the slow, always-on version for hero imagery, where there is nothing to hover */
.nl-kb-auto img{animation:nl-ken 26s ease-in-out infinite alternate;transition:none}
@keyframes nl-ken{from{transform:scale(1.02) translate(0,0)}
                  to{transform:scale(1.16) translate(-2%,-2%)}}

/* ---------------------------------------------------------------- reveal on scroll */
.nl-rise{opacity:0;transform:translateY(26px);
         transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.3,1)}
.nl-rise.in{opacity:1;transform:none}

/* ---------------------------------------------------------------- shared bits */
.nl-grad{background:linear-gradient(100deg,var(--nl-acc),var(--nl-acc2) 62%,#ffb4d1);
         -webkit-background-clip:text;background-clip:text;color:transparent}
.nl-eye{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
        color:var(--nl-acc);font-weight:600}
.nl-pill{padding:9px 15px;border-radius:999px;border:1px solid var(--g-bd);
         background:rgba(255,255,255,.05);font-size:.84rem;color:var(--nl-ink)}
.nl-pill b{color:var(--nl-acc)}

/* Give the theme's own panels the glass treatment, so every page gains it without each template
   being rewritten. Deliberately NOT applied inside checkout or the account forms: a payment field
   that is hard to read costs a sale, and blur behind form controls is where that starts. */
body:not(.woocommerce-checkout):not(.woocommerce-account) .band,
body:not(.woocommerce-checkout):not(.woocommerce-account) .card{
  background:var(--g-bg);
  border:1px solid var(--g-bd);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}

@media (prefers-reduced-motion:reduce){
  .nl-blobs svg{animation:none!important;translate:none!important}
  .nl-kb img,.nl-kb-auto img{animation:none!important;transition:none!important;
                             transform:scale(1.02)!important}
  .nl-rise{opacity:1!important;transform:none!important;transition:none!important}
}