/* ==========================================================================
   NEMO STAMP — the credit block for client sites.
   One namespace (.nemo-stamp), six markup variants. No JS, no build step.

   Everything scales from one custom property: --ns.
   Surface is set by a class: .on-light (default) or .on-dark, on the stamp
   itself OR on any ancestor, so a dark footer can declare it once.

   Assets (hosted, ~11KB, cached by the client's own browser):
     https://www.madebynemo.com/stamp/nemo-wordmark.webp   4.2KB
     https://www.madebynemo.com/stamp/aeonik-credit.woff2  6.9KB
   ========================================================================== */

@font-face{
  font-family:'NemoCredit';
  src:url('https://www.madebynemo.com/stamp/aeonik-credit.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

.nemo-stamp{
  --ns:12.5px;                              /* the one sizing knob */
  --ns-e:cubic-bezier(.625,.05,0,1);        /* the site's signature easing */
  --ns-fg:#666;
  --ns-fg-h:#111;
  --ns-label:#a0a0a0;
  display:inline-block; width:fit-content; max-width:100%;
  font-family:'NemoCredit',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:var(--ns); font-weight:400; line-height:1.4; letter-spacing:.005em;
}
.nemo-stamp.on-light,.on-light .nemo-stamp{--ns-fg:#666;--ns-fg-h:#111;--ns-label:#a0a0a0}
.nemo-stamp.on-dark,.on-dark .nemo-stamp{
  --ns-fg:rgba(255,255,255,.62); --ns-fg-h:#fff; --ns-label:rgba(255,255,255,.34);
}

/* ── the link ── */
.nemo-stamp a{
  display:inline-flex; align-items:center; flex-wrap:wrap;
  gap:calc(var(--ns)*.5) calc(var(--ns)*.72);
  color:var(--ns-fg); text-decoration:none;
  transition:color .35s var(--ns-e);
}
.nemo-stamp:hover a{color:var(--ns-fg-h)}
.nemo-stamp a:focus-visible{outline:2px solid #35D687;outline-offset:6px;border-radius:2px}

/* ── the wordmark ── */
.nemo-stamp img{
  display:block; height:calc(var(--ns)*1.45); width:auto; flex:none;
  opacity:.72; transition:opacity .35s var(--ns-e);
}
.nemo-stamp:hover img{opacity:1}
.nemo-stamp.on-dark img,.on-dark .nemo-stamp img{filter:brightness(0) invert(1)}

/* ── eyebrow label ── */
.nemo-stamp .ns-eyebrow{
  display:block; font-size:max(10px,calc(var(--ns)*.68));
  letter-spacing:.11em; text-transform:uppercase; color:var(--ns-label);
  line-height:1; margin:0 0 calc(var(--ns)*.8);
  transition:color .35s var(--ns-e);
}

/* ── the standing glow line (block variant) ────────────────────────────────
   width:100% against a fit-content wrap is what sizes the line to the credit
   underneath it rather than the full width of the client's footer. */
.nemo-stamp .ns-line{
  position:relative; height:1px; width:100%; overflow:hidden;
  background:linear-gradient(90deg,transparent 0%,rgba(53,214,135,.28) 12%,rgba(53,214,135,.85) 50%,rgba(53,214,135,.28) 88%,transparent 100%);
  box-shadow:0 0 3px rgba(53,214,135,.55),0 0 10px rgba(53,214,135,.30),0 0 26px rgba(53,214,135,.12);
}
.nemo-stamp .ns-line::after{
  content:""; position:absolute; left:0; top:-1px; height:3px; width:100%;
  background:linear-gradient(90deg,transparent,rgba(180,255,220,.75),transparent);
  background-size:34% 100%; background-repeat:no-repeat; filter:blur(1px);
  animation:nemo-stamp-flow 7s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes nemo-stamp-flow{0%{background-position:-38% 0}100%{background-position:138% 0}}
.nemo-stamp:hover .ns-line::after{animation-duration:2.6s}

/* ── hover glow underline, text (wrap-safe) ────────────────────────────────
   background-size animation rather than an absolutely-positioned ::after, so
   the underline survives the sentence wrapping onto a second line in a narrow
   footer. box-decoration-break:clone draws it under every wrapped fragment. */
.nemo-stamp .ns-u{
  display:inline; padding-bottom:.18em;
  background-image:linear-gradient(90deg,rgba(53,214,135,.30),rgba(53,214,135,.95),rgba(53,214,135,.30));
  background-repeat:no-repeat; background-position:0 100%; background-size:0% 1px;
  transition:background-size .5s var(--ns-e);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.nemo-stamp:hover .ns-u{background-size:100% 1px}

/* ── hover glow underline, block (wraps the wordmark) ── */
.nemo-stamp .ns-ub{display:inline-block;position:relative;padding-bottom:calc(var(--ns)*.42)}
.nemo-stamp .ns-ub::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,rgba(53,214,135,.30),rgba(53,214,135,.95),rgba(53,214,135,.30));
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ns-e);
}
.nemo-stamp:hover .ns-ub::after{transform:scaleX(1)}

/* ── the arrow ── */
.nemo-stamp .ns-ar{
  display:inline-block; opacity:0; transform:translateX(-4px);
  transition:opacity .35s var(--ns-e),transform .35s var(--ns-e);
}
.nemo-stamp:hover .ns-ar{opacity:1;transform:translateX(0)}

/* ── layout modifiers ── */
.nemo-stamp.ns-block a{margin-top:calc(var(--ns)*1.55)}
.nemo-stamp.ns-stack a{flex-direction:column;align-items:flex-start;gap:calc(var(--ns)*.62)}

@media (prefers-reduced-motion:reduce){
  .nemo-stamp *,.nemo-stamp .ns-line::after{transition:none!important;animation:none!important}
}