/* ============================================================
   Sansoif site: what the design system (sansoif/components.css)
   does not carry. Buttons, pills and the mascot panel are its
   sf-btn, sf-pill and sf-mascot now.
   ============================================================ */

/* A store's mark beside the button text (site/shared/_store_icon). */
.store-icon { flex: none; width: 1.1em; height: 1.1em; }

/* ============================================================
   SXN Labs credit — footer attribution
   The mark and its missile/explosion animation are lifted from CAPA
   (app/views/shared/_sxnlabs_logo + assets/tailwind/application.css) so every
   SXN Labs project carries the same signature. CAPA fires it from Tailwind's
   .group; this site has no Tailwind, so the trigger is the .sxn-credit link.
   ============================================================ */
.sxn-credit {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px; font-size: 13px; font-weight: 600;
  color: var(--ink-inverse-muted); opacity: 0.75;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.sxn-credit:hover { opacity: 1; color: var(--ink-inverse); }
.sxn-logo { height: 15px; width: auto; display: block; }

.sxn-logo-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.sxn-logo-wrapper svg {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.sxn-credit:hover .sxn-logo-wrapper svg {
  animation: sxn-missile 1.2s ease-in forwards;
}

.sxn-logo-wrapper .sxn-explosion {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}

.sxn-credit:hover .sxn-logo-wrapper .sxn-explosion {
  animation: sxn-explosion 0.7s 0.45s ease-out forwards;
}

@keyframes sxn-missile {
  0% {
    transform: rotate(0) translateX(0) scale(1);
    opacity: 1;
    filter: brightness(1);
    text-shadow: none;
  }
  8% {
    transform: rotate(-15deg) translateX(-3px) scale(1.15);
    opacity: 1;
    filter: brightness(1.2);
  }
  15% {
    transform: rotate(-25deg) translateX(0) scale(1.1);
    opacity: 1;
    filter: brightness(1.5) drop-shadow(0 0 4px #f97316);
  }
  20% {
    transform: rotate(-30deg) translateX(5px) scale(1.05);
    opacity: 1;
    filter: brightness(1.8) drop-shadow(0 0 6px #f97316) drop-shadow(-4px 2px 3px #ef4444);
  }
  30% {
    transform: rotate(-30deg) translateX(30px) scale(0.95);
    opacity: 1;
    filter: brightness(2) drop-shadow(0 0 8px #fbbf24) drop-shadow(-8px 3px 6px #f97316) drop-shadow(-14px 5px 4px rgba(239, 68, 68, 0.7));
  }
  50% {
    transform: rotate(-30deg) translateX(150px) scale(0.6);
    opacity: 0.85;
    filter: brightness(2.5) drop-shadow(0 0 10px #fbbf24) drop-shadow(-12px 4px 8px #f97316) drop-shadow(-20px 6px 6px rgba(239, 68, 68, 0.6));
  }
  70% {
    transform: rotate(-30deg) translateX(250px) scale(0.3);
    opacity: 0.4;
    filter: brightness(2) drop-shadow(0 0 6px #f97316) drop-shadow(-10px 3px 5px rgba(239, 68, 68, 0.4));
  }
  85% {
    transform: rotate(-30deg) translateX(300px) scale(0.15);
    opacity: 0;
    filter: brightness(1) drop-shadow(0 0 0 transparent);
  }
  100% {
    transform: rotate(-30deg) translateX(300px) scale(0);
    opacity: 0;
  }
}

@keyframes sxn-explosion {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    box-shadow: none;
    background: transparent;
  }
  25% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    background: #fbbf24;
    box-shadow:
      0 0 10px 5px rgba(251, 191, 36, 0.7),
      -7px -5px 0 2px #f97316,
      8px -3px 0 2px #ef4444,
      -3px 7px 0 2px #f97316,
      5px 6px 0 2px #ef4444,
      -9px 2px 0 1px #fbbf24,
      9px -7px 0 1px #ef4444;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0.7;
    background: #f97316;
    box-shadow:
      0 0 15px 8px rgba(249, 115, 22, 0.4),
      -14px -10px 0 2px #fbbf24,
      16px -6px 0 1px #ef4444,
      -6px 14px 0 1px #fbbf24,
      10px 12px 0 2px #ef4444,
      -18px 4px 0 1px #f97316,
      18px -14px 0 1px #fbbf24;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
    background: transparent;
    box-shadow:
      0 0 0 0 transparent,
      -22px -16px 0 0 transparent,
      24px -10px 0 0 transparent,
      -10px 22px 0 0 transparent,
      16px 18px 0 0 transparent,
      -28px 6px 0 0 transparent,
      28px -22px 0 0 transparent;
  }
}

/* Both footers sit on --charcoal, so the credit keeps one warm-grey treatment. */

/* Respect a reduced-motion preference: keep the link, drop the fireworks. */
@media (prefers-reduced-motion: reduce) {
  .sxn-credit:hover .sxn-logo-wrapper svg,
  .sxn-credit:hover .sxn-logo-wrapper .sxn-explosion { animation: none; }
}