/* ═══════════════════════════════════════════════════════
   SparkCut — Styles
   ═══════════════════════════════════════════════════════ */

/* ─── Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700;800&family=Sarabun:wght@300;400;500;600;700&display=swap');

/* ─── Base ──────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ─── Custom scrollbar ──────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* ─── Glass card ────────────────────────────────────── */
.glass {
  background: rgba(17, 17, 17, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ─── Gradient text ─────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, #ff6b35 0%, #ff4500 50%, #ff8c00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Animated mesh background ──────────────────────── */
.bg-mesh {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255, 69, 0, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(255, 140, 0, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(255, 69, 0, 0.08) 0%, transparent 50%), #0a0a0a;
}

/* ─── Input focus glow ──────────────────────────────── */
.glow-input:focus {
  box-shadow: 0 0 0 2px rgba(255, 69, 0, 0.4);
}

/* ─── Shimmer loading ───────────────────────────────── */
.shimmer {
  background: linear-gradient(90deg, #1a1a1a 25%, #222 50%, #1a1a1a 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* ─── Toast ─────────────────────────────────────────── */
@keyframes toastIn {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
.toast-enter {
  animation: toastIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Textarea ──────────────────────────────────────── */
textarea {
  resize: vertical;
  min-height: 96px;
}

/* ─── Shake (empty-input warning) ───────────────────── */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}