/* =============================================================
   micro/micro.css — styles for the micro-interaction library
   Uses your --accent, --surface etc. tokens from colors_and_type.css
   ============================================================= */

/* respect reduced motion globally */
@media (prefers-reduced-motion: reduce) {
  .micro-toast, .micro-radial-btn, .micro-flame-em { transition: none !important; animation: none !important; }
}

/* -------- toast stack -------- */
.micro-toast-stack {
  position: fixed; right: 16px; bottom: 16px; z-index: 10000;
  display: flex; flex-direction: column; gap: 10px;
  max-width: calc(100vw - 32px);
}
.micro-toast {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; min-width: 220px; max-width: 360px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 10px;
  font: 600 13px/1.35 var(--font-sans, system-ui);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.2);
  transform: translateY(12px) scale(.98); opacity: 0;
  animation: microToastIn .32s cubic-bezier(.2,.9,.3,1.2) forwards;
  touch-action: pan-y;
  user-select: none;
}
.micro-toast.leave { animation: microToastOut .24s ease-in forwards; }
.micro-toast-ic {
  width: 22px; height: 22px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 13px; font-weight: 800;
  background: var(--surface3); color: var(--text);
}
.micro-toast-success .micro-toast-ic { background: rgba(93,156,106,.2); color: var(--success); }
.micro-toast-error   .micro-toast-ic { background: rgba(196,88,88,.2);  color: var(--danger); }
.micro-toast-warn    .micro-toast-ic { background: rgba(196,162,72,.2); color: var(--warn); }
.micro-toast-info    .micro-toast-ic { background: var(--accent-bg);    color: var(--accent); }
.micro-toast-success { border-left: 3px solid var(--success); }
.micro-toast-error   { border-left: 3px solid var(--danger); }
.micro-toast-info    { border-left: 3px solid var(--accent); }
.micro-toast-warn    { border-left: 3px solid var(--warn); }
@keyframes microToastIn  { to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes microToastOut { to { transform: translateX(40px) scale(.98); opacity: 0; } }

/* -------- rocket -------- */
.micro-rocket {
  position: absolute; font-size: 28px;
  transform: translate(-50%,-50%); will-change: transform;
  filter: drop-shadow(0 4px 10px rgba(212,112,74,.5));
}
.micro-rocket-trail {
  position: absolute; width: 6px; transform: translate(-50%, 0);
  background: linear-gradient(to bottom, rgba(212,112,74,.8), rgba(212,112,74,0));
  border-radius: 3px;
  filter: blur(1.5px);
  will-change: transform,height,opacity;
}

/* -------- pull to refresh -------- */
.micro-ptr {
  position: absolute; top: 0; left: 0; right: 0;
  height: 0; overflow: hidden; display: flex; align-items: flex-end;
  justify-content: center; opacity: 0;
  pointer-events: none;
}
.micro-ptr-stage {
  position: relative; width: 120px; height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
}
.micro-ptr-peak {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) scaleY(0.6);
  width: 0; height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 52px solid var(--accent);
  transform-origin: bottom;
  filter: drop-shadow(0 2px 8px rgba(212,112,74,.4));
  transition: transform .15s ease;
}
.micro-ptr-peak::after {
  content: ""; position: absolute; bottom: 0; left: -20px;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 26px solid rgba(255,255,255,.4);
}
.micro-ptr-hiker {
  position: absolute; bottom: 8px; left: 50%;
  font-size: 22px; transform: translate(-50%, 0);
  transition: transform .15s ease;
}
.micro-ptr.refreshing .micro-ptr-hiker { animation: ptrBob .7s infinite; }
@keyframes ptrBob {
  0%, 100% { transform: translate(-50%, -16px) rotate(-4deg); }
  50%      { transform: translate(-50%, -24px) rotate(4deg); }
}

/* -------- streak flame -------- */
.micro-flame {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-bg); color: var(--accent);
  padding: 6px 16px; border-radius: 20px;
  font-size: 14px; font-weight: 700;
  border: 1px solid var(--accent-bg);
}
.micro-flame-em {
  display: inline-block; font-size: 18px; transform-origin: center bottom;
  transition: transform .3s ease, filter .3s ease;
}
.micro-flame-num { font-weight: 800; font-size: 15px; }
.micro-flame-label { color: var(--text2); font-weight: 600; font-size: 13px; }

/* -------- empty state character -------- */
.micro-empty {
  text-align: center; padding: 40px 24px;
  color: var(--text2);
}
.micro-empty-stage {
  position: relative; width: 140px; height: 120px; margin: 0 auto 18px;
}
.micro-empty-mountain {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 80px solid var(--surface3);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.15));
}
.micro-empty-mountain::after {
  content: ""; position: absolute; bottom: 0; left: -30px;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 40px solid rgba(255,255,255,.12);
}
.micro-empty-sun {
  position: absolute; top: 14px; right: 20px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
  animation: sunPulse 3s ease-in-out infinite;
}
@keyframes sunPulse {
  0%, 100% { transform: scale(1); opacity: .9; }
  50%      { transform: scale(1.08); opacity: 1; }
}
.micro-empty-hiker {
  position: absolute; bottom: 4px; left: 20px;
  width: 18px; height: 28px;
  animation: hikerSway 4s ease-in-out infinite;
}
.micro-hiker-head { position: absolute; top: 0; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--text); }
.micro-hiker-body { position: absolute; top: 10px; left: 4px; width: 8px; height: 12px; border-radius: 3px; background: var(--accent); }
.micro-hiker-pack { position: absolute; top: 11px; left: 0; width: 6px; height: 9px; border-radius: 2px; background: var(--text2); }
@keyframes hikerSway {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(8px, -2px) rotate(2deg); }
  50%      { transform: translate(16px, 0) rotate(-1deg); }
  75%      { transform: translate(24px, -2px) rotate(2deg); }
}
.micro-empty-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.micro-empty-sub   { font-size: 13px; color: var(--text2); }

/* -------- skeleton (mountain shimmer) -------- */
.micro-skel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; position: relative;
}
.micro-skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    transparent 20%, rgba(255,255,255,.05) 48%, rgba(255,255,255,.08) 52%, transparent 82%);
  animation: skelShim 1.4s linear infinite;
  transform: translateX(-100%);
}
@keyframes skelShim { to { transform: translateX(100%); } }

.micro-skel-card { width: 100%; }
.micro-skel-banner {
  height: 60px; background: var(--surface2); position: relative;
}
.micro-skel-banner::before {
  content: ""; position: absolute; bottom: 0; left: 8px;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 24px solid var(--surface3);
}
.micro-skel-banner::after {
  content: ""; position: absolute; bottom: 0; left: 40px;
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
  border-bottom: 34px solid var(--surface3);
  z-index: 0;
}
.micro-skel-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.micro-skel-post { display: flex; }
.micro-skel-post .micro-skel-vote { width: 44px; background: var(--surface2); }
.micro-skel-post .micro-skel-body { flex: 1; padding: 14px; }
.micro-skel-line {
  height: 10px; border-radius: 5px; background: var(--surface2);
}
.micro-skel-line.w30 { width: 30%; }
.micro-skel-line.w50 { width: 50%; }
.micro-skel-line.w60 { width: 60%; }
.micro-skel-line.w70 { width: 70%; }
.micro-skel-line.w90 { width: 90%; }

/* -------- radial menu -------- */
.micro-radial {
  position: absolute; transform: translate(-50%,-50%); pointer-events: none;
}
.micro-radial-btn {
  position: absolute; top: 0; left: 0;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border2);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  font-size: 18px; cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%,-50%) scale(0);
  opacity: 0;
  animation: radialPop .28s cubic-bezier(.2,.9,.3,1.3) forwards;
  transition: background .15s ease;
}
.micro-radial-btn:hover { background: var(--surface3); }
@keyframes radialPop {
  to {
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1);
    opacity: 1;
  }
}

/* -------- swipe cards -------- */
.micro-swipe-wrap {
  position: relative; border-radius: 12px; overflow: hidden;
}
.micro-swipe-bg {
  position: absolute; inset: 0; display: flex; align-items: center;
  padding: 0 20px; font-weight: 700; font-size: 14px; color: #fff;
  opacity: 0; transition: opacity .1s linear;
  pointer-events: none; border-radius: 12px;
}
.micro-swipe-bg.right { justify-content: flex-start; background: linear-gradient(90deg, rgba(93,156,106,.95), rgba(93,156,106,.2)); }
.micro-swipe-bg.left  { justify-content: flex-end;   background: linear-gradient(90deg, rgba(196,88,88,.2), rgba(196,88,88,.95)); }

/* -------- subtle card press (for demo pages that import this CSS only) -------- */
.micro-card-press { transition: transform .14s ease; }
.micro-card-press:active { transform: scale(.985); }

/* -------- sound toggle chip (injected by init.js) -------- */
.micro-sound-toggle {
  position: fixed; right: 12px; bottom: 12px; z-index: 9997;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(24,26,32,.75); color: inherit;
  font-size: 16px; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: transform .15s ease, opacity .15s ease;
  opacity: .65;
}
.micro-sound-toggle:hover { opacity: 1; transform: scale(1.05); }