/*
  newcommerce logo — standalone CSS
  Depends on tokens.css for --nc-ink, --nc-lime.

  Concept: BULLSEYE / ON POINT / NO FLUFF
    LOAD  — scope reticle zooms in from outside, narrows onto dead-centre,
            locks; dot snaps in on impact; confirmation ring ripples out.
    HOVER — dot tightens to a focus point (laser-lock); single crisp ring
            ripples outward; returns to rest, perfectly centred.

  Required markup:
    <span class="nc-logo">
      <span class="nc-mark">
        <span class="nc-mark-align">
          <span class="nc-reticle"></span>
          <span class="nc-pulse"></span>
          <span class="nc-dot"></span>
        </span>
      </span>
      <span class="nc-word">newcommerce</span>
    </span>

  Sizing: override the four custom properties on .nc-logo. Defaults are
  the "lg" size from the showcase. See logo.html for the size system.
*/

.nc-logo {
  --nc-logo-size: 64px;   /* circle diameter */
  --nc-logo-dot:  22px;   /* inner dot diameter */
  --nc-logo-text: 38px;   /* wordmark font-size */
  --nc-logo-gap:  18px;   /* circle ↔ text gap */

  display: inline-flex;
  align-items: center;
  gap: var(--nc-logo-gap);
  cursor: pointer;
  user-select: none;
  padding: 8px 10px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
}

.nc-logo,
.nc-logo:link,
.nc-logo:visited,
.nc-logo:hover,
.nc-logo:active,
.nc-logo * {
  text-decoration: none !important;
}

.nc-mark {
  position: relative;
  flex: 0 0 auto;
  width: var(--nc-logo-size);
  height: var(--nc-logo-size);
  border-radius: 50%;
  background: var(--nc-lime);
  overflow: hidden;
  isolation: isolate;
  /* x-height optical alignment: shift mark down ~6% of text size so the
     circle's centre lands on the visual midline of lowercase letters. */
  margin-top: calc(var(--nc-logo-text) * 0.06);
}

.nc-mark-align {
  position: absolute;
  inset: 0;
}

.nc-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--nc-logo-dot);
  height: var(--nc-logo-dot);
  background: var(--nc-ink);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  will-change: transform;
}

.nc-word {
  font-family: var(--nc-font-sans, "Inter", system-ui, sans-serif);
  font-weight: 700;
  font-size: var(--nc-logo-text);
  letter-spacing: -0.025em;
  color: var(--nc-ink);
  line-height: 1;
}

.nc-reticle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--nc-logo-size) - 10px);
  height: calc(var(--nc-logo-size) - 10px);
  border: 2px solid var(--nc-ink);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.nc-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--nc-logo-dot);
  height: var(--nc-logo-dot);
  border: 2px solid var(--nc-ink);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* LOAD animations */
@keyframes nc-dot-load {
  0%, 35% { transform: translate(-50%, -50%) scale(0);    opacity: 0; }
  45%     { transform: translate(-50%, -50%) scale(1.35); opacity: 1; }
  60%     { transform: translate(-50%, -50%) scale(0.88); opacity: 1; }
  100%    { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
}

@keyframes nc-reticle-load {
  0%   { transform: translate(-50%, -50%) scale(2.4);  opacity: 0; }
  18%  { transform: translate(-50%, -50%) scale(1.6);  opacity: 0.85; }
  36%  { transform: translate(-50%, -50%) scale(1);    opacity: 0.85; }
  44%  { transform: translate(-50%, -50%) scale(0.55); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(0.55); opacity: 0; }
}

@keyframes nc-pulse-load {
  0%, 50% { transform: translate(-50%, -50%) scale(1);   opacity: 0; }
  60%     { transform: translate(-50%, -50%) scale(1.2); opacity: 0.7; }
  100%    { transform: translate(-50%, -50%) scale(3);   opacity: 0; }
}

.nc-dot     { animation: nc-dot-load     1300ms cubic-bezier(0.2, 0.7, 0.2, 1)   both; }
.nc-reticle { animation: nc-reticle-load 1300ms cubic-bezier(0.4, 0.05, 0.2, 1)  both; }
.nc-pulse   { animation: nc-pulse-load   1300ms cubic-bezier(0.2, 0.6, 0.25, 1)  both; }

/* HOVER animations */
@keyframes nc-dot-hover {
  0%   { transform: translate(-50%, -50%) scale(1);    }
  30%  { transform: translate(-50%, -50%) scale(0.55); }
  55%  { transform: translate(-50%, -50%) scale(0.55); }
  80%  { transform: translate(-50%, -50%) scale(1.08); }
  100% { transform: translate(-50%, -50%) scale(1);    }
}

@keyframes nc-pulse-hover {
  0%   { transform: translate(-50%, -50%) scale(0.55); opacity: 0; }
  25%  { transform: translate(-50%, -50%) scale(0.7);  opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(2.8);  opacity: 0; }
}

.nc-logo:hover .nc-dot   { animation: nc-dot-hover   700ms cubic-bezier(0.3, 0, 0.2, 1) 1; }
.nc-logo:hover .nc-pulse { animation: nc-pulse-hover 700ms cubic-bezier(0.2, 0.6, 0.25, 1) 1; }

/* Color variants — apply by adding a modifier class on .nc-logo */

/* Inverted: lime mark on dark surface */
.nc-logo--inverted .nc-word    { color: #fff; }
.nc-logo--inverted .nc-mark    { background: var(--nc-lime); }
.nc-logo--inverted .nc-dot     { background: var(--nc-ink); }
.nc-logo--inverted .nc-reticle,
.nc-logo--inverted .nc-pulse   { border-color: var(--nc-ink); }

/* Mono-lime: ink mark on lime surface (circle becomes ink, dot becomes lime) */
.nc-logo--mono-lime .nc-mark    { background: var(--nc-ink); }
.nc-logo--mono-lime .nc-dot     { background: var(--nc-lime); }
.nc-logo--mono-lime .nc-reticle,
.nc-logo--mono-lime .nc-pulse   { border-color: var(--nc-lime); }

/* Size system — opt-in modifier classes */
.nc-logo--xl { --nc-logo-size: 120px; --nc-logo-dot: 42px; --nc-logo-text: 72px; --nc-logo-gap: 30px; }
.nc-logo--lg { --nc-logo-size:  64px; --nc-logo-dot: 22px; --nc-logo-text: 38px; --nc-logo-gap: 18px; }
.nc-logo--md { --nc-logo-size:  44px; --nc-logo-dot: 15px; --nc-logo-text: 26px; --nc-logo-gap: 13px; }
.nc-logo--sm { --nc-logo-size:  28px; --nc-logo-dot: 10px; --nc-logo-text: 17px; --nc-logo-gap:  9px; }
.nc-logo--xs { --nc-logo-size:  20px; --nc-logo-dot:  7px; --nc-logo-text: 12px; --nc-logo-gap:  7px; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nc-dot, .nc-reticle, .nc-pulse {
    animation: none !important;
    transform: translate(-50%, -50%) !important;
  }
  .nc-dot     { opacity: 1; }
  .nc-reticle { opacity: 0; }
  .nc-pulse   { opacity: 0; }
}