/* =========================================================================
   DTN POLISH LAYER (Iteration 7) — motion, states, feedback, depth.
   Additive. Sits on top of design-system.css + each page's inline skin.
   Respects prefers-reduced-motion everywhere. Uses existing synthwave tokens.
   ========================================================================= */

/* ---- motion reduction (accessibility: never fight the user) ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .aurora, .bg, .stardust, [class*="-drift"], [class*="Drift"] { display: none !important; }
}

/* ---- press feedback (every button answers on press) ---- */
.btn-lime, .btn-ghost, .inbox-send, .comp-publish, .comp-type-btn, .door,
.sum-card, .ib-open, .money-tour, .back-dash, .wf-step, .ib-row, .inbox-row {
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, opacity .12s ease;
}
.btn-lime:active, .btn-ghost:active, .inbox-send:active, .comp-publish:active,
.comp-type-btn:active, .door:active, .sum-card:active, .ib-open:active, .back-dash:active {
  transform: scale(.965);
}
.inbox-row:active, .ib-row:active, .wf-step:active { transform: scale(.99); }

/* ---- magnetic CTA (desktop-only, subtle pull toward cursor) ---- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .magnetic { will-change: transform; }
}

/* ---- skeleton loading states (no spinners) ---- */
.skel {
  position: relative; overflow: hidden; border-radius: 13px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
}
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.10), transparent);
  transform: translateX(-100%);
  animation: skel-sheen 1.4s ease-in-out infinite;
}
@keyframes skel-sheen { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }
.skel-line { height: 12px; margin: 8px 0; border-radius: 6px;
  background: rgba(255,255,255,.05); }
.skel-av { width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.05); }

/* ---- designed error state (plain words + one retry) ---- */
.wf-error, .money-error, .panel-error {
  padding: 20px 16px; text-align: center; color: var(--mut, #9d94b8);
  font-size: 13px; line-height: 1.5; border-radius: 13px;
  border: 1px solid rgba(255,61,240,.18); background: rgba(255,61,240,.05);
}
.retry-btn { margin-top: 10px; height: 40px; padding: 0 18px; border-radius: 12px;
  border: 1px solid rgba(0,229,255,.3); background: rgba(0,229,255,.08); color: var(--ice,#eae6ff);
  font: inherit; font-size: 13px; cursor: pointer; }
.retry-btn:hover { background: rgba(0,229,255,.16); }

/* ---- live number glow (rolling counters pop, not just sit) ---- */
[data-countup].counting { text-shadow: 0 0 18px rgba(0,229,255,.35); }

/* ---- celebration moment (coin purchase / publish) ---- */
.confetti-bit { position: fixed; top: -12px; z-index: 7200; pointer-events: none;
  border-radius: 2px; }
@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* ---- toast (every action answers) ---- */
.dtn-toast { position: fixed; left: 50%; bottom: 86px; transform: translateX(-50%) translateY(8px);
  z-index: 7300; max-width: min(92vw, 420px); padding: 12px 18px; border-radius: 14px;
  background: rgba(13,11,28,.92); backdrop-filter: blur(12px);
  border: 1px solid rgba(0,229,255,.28); color: var(--ice,#eae6ff);
  font-size: 13px; box-shadow: 0 0 30px rgba(0,229,255,.18);
  opacity: 0; transition: opacity .22s ease, transform .22s ease; }
.dtn-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.dtn-toast.good { border-color: rgba(198,255,61,.4); box-shadow: 0 0 30px rgba(198,255,61,.18); }
.dtn-toast.bad { border-color: rgba(255,61,240,.4); box-shadow: 0 0 30px rgba(255,61,240,.18); }

/* ---- subtle depth on hero parallax (desktop) ---- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .parallax-bg { transform: translate3d(0,0,0); will-change: transform; }
}