/* SPICELINK - small layer on top of Tailwind CDN */

:root {
  --brand-600: #0f8a4a;
  --brand-700: #0d6b3b;
  --onion-500: #de476c;
  --surface: #f3f5f3;
}

html {
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  overscroll-behavior-y: none;
  text-rendering: optimizeLegibility;
}

/* Hide scrollbars on horizontal chip rows */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Lucide icons default sizing/stroke */
svg.lucide {
  stroke-width: 1.75;
}

/* Subtle pulse for live indicators */
@keyframes sl-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}
.sl-live-dot { animation: sl-pulse 1.8s ease-in-out infinite; }

@keyframes sl-live-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15, 138, 74, 0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(15, 138, 74, 0); }
}
.sl-live-badge {
  animation: sl-live-glow 2.2s ease-in-out infinite;
}

@keyframes sl-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.012); }
}
.sl-breathe {
  animation: sl-breathe 3.2s ease-in-out infinite;
  will-change: transform;
}

@keyframes sl-spark-draw {
  to { stroke-dashoffset: 0; }
}
.sl-spark-draw {
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  animation: sl-spark-draw 1.1s ease-out forwards;
}

@keyframes sl-scan {
  0% { transform: translateY(-100%); opacity: 0; }
  15% { opacity: .5; }
  100% { transform: translateY(220%); opacity: 0; }
}
.sl-hero-live {
  position: relative;
  overflow: hidden;
}
.sl-hero-live::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 28%;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.12), transparent);
  animation: sl-scan 4.5s ease-in-out infinite;
  pointer-events: none;
}

.sl-bar-fill {
  width: 0 !important;
  transition: width 1.1s cubic-bezier(.22, 1, .36, 1);
}
.sl-bar-fill.is-on {
  width: var(--bar-w, 0%) !important;
}

.sl-metric-flash {
  transition: background-color .35s ease, box-shadow .35s ease;
}
.sl-metric-flash.is-updating {
  background-color: #ecfdf5;
  box-shadow: 0 0 0 2px rgba(15, 138, 74, .15);
}

@media (prefers-reduced-motion: reduce) {
  .sl-breathe, .sl-live-dot, .sl-live-badge, .sl-spark-draw, .sl-hero-live::before { animation: none !important; }
  .sl-bar-fill { width: var(--bar-w, 0%) !important; transition: none; }
}

/* Progress ring helper */
.sl-ring {
  --size: 64px;
  --stroke: 8px;
  --pct: 0;
  width: var(--size);
  height: var(--size);
  border-radius: 9999px;
  background:
    radial-gradient(farthest-side, #fff calc(100% - var(--stroke)), transparent calc(100% - var(--stroke) + 1px)),
    conic-gradient(var(--ring-color, var(--brand-600)) calc(var(--pct) * 1%), #e5e7eb 0);
  display: grid;
  place-items: center;
}

/* Fade-in for content */
@keyframes sl-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sl-fade-up { animation: sl-fade-up .35s ease-out both; }

/* ---- Landing / marketing motion ---- */
@keyframes sl-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.sl-float {
  animation: sl-float 5.5s ease-in-out infinite;
}

@keyframes sl-orb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(18px, -14px) scale(1.06); }
}
.sl-orb {
  animation: sl-orb 10s ease-in-out infinite;
}
.sl-orb-delay {
  animation-delay: -4s;
}

@keyframes sl-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sl-rise {
  opacity: 0;
  animation: sl-rise .7s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: var(--rise-delay, 0s);
}

.sl-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .7s cubic-bezier(.22, 1, .36, 1),
    transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.sl-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

.sl-typewriter {
  display: inline;
}
.sl-typewriter-slot {
  min-height: 2.6em;
}
@media (min-width: 1024px) {
  .sl-typewriter-slot-lg {
    min-height: 2.2em;
  }
}
.sl-caret {
  display: inline-block;
  width: .08em;
  height: .9em;
  margin-left: .08em;
  vertical-align: -0.05em;
  background: currentColor;
  border-radius: 1px;
  animation: sl-caret-blink 1s steps(1) infinite;
}
.sl-caret.is-done {
  opacity: 0;
  animation: none;
  transition: opacity .4s ease .6s;
}
@keyframes sl-caret-blink {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.sl-nav-blur {
  transition: box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}
.sl-nav-blur.is-scrolled {
  border-color: rgba(226, 232, 240, .95);
  background-color: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 30px -18px rgba(15, 23, 42, .25);
}

@media (prefers-reduced-motion: reduce) {
  .sl-float, .sl-orb, .sl-orb-delay, .sl-rise, .sl-caret { animation: none !important; }
  .sl-rise { opacity: 1; transform: none; }
  .sl-reveal { opacity: 1; transform: none; transition: none; }
}

/* Standalone (installed PWA) polish */
.leaflet-container { font: inherit; z-index: 1; }
.sl-map {
  height: 220px;
  min-height: 220px;
  width: 100%;
  border-radius: 1rem;
  background: #e8eef2;
}