/* ═══════════════════════════════════════════
   ToneSpoon — Shared Base Styles
   ═══════════════════════════════════════════ */

:root {
  --bg-base: #0f0f14;
  --text: #f0ede8;
  --text-muted: #a09c96;
  --accent: #a3b5b1;
  --accent-glow: rgba(163,181,177,0.25);
  --orb1-bg: radial-gradient(circle, rgba(139,155,180,0.65) 0%, transparent 70%);
  --orb2-bg: radial-gradient(circle, rgba(148,130,140,0.6) 0%, transparent 70%);
  --orb3-bg: radial-gradient(circle, rgba(120,150,150,0.5) 0%, transparent 70%);
}
[data-theme="light"] {
  --bg-base: #f4f1eb;
  --text: #1c1c22;
  --text-muted: #6b6560;
  --accent: #5a7d6e;
  --accent-glow: rgba(90,125,110,0.18);
  --orb1-bg: radial-gradient(circle, rgba(180,170,155,0.4) 0%, transparent 70%);
  --orb2-bg: radial-gradient(circle, rgba(170,155,165,0.38) 0%, transparent 70%);
  --orb3-bg: radial-gradient(circle, rgba(155,175,170,0.35) 0%, transparent 70%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-base); color: var(--text);
  min-height: 100vh; overflow-x: hidden;
  transition: background-color 0.5s ease, color 0.5s ease;
}

/* ── Animated background orbs ────────────── */

.bg-liquid { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.bg-liquid__orb {
  position: absolute; border-radius: 50%; filter: blur(140px); opacity: 0.5;
  animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate;
}
.bg-liquid__orb--1 {
  width: 620px; height: 620px;
  background: var(--orb1-bg);
  top: -15%; left: -10%; animation-name: orb1-drift; animation-duration: 18s;
}
.bg-liquid__orb--2 {
  width: 500px; height: 500px;
  background: var(--orb2-bg);
  bottom: -12%; right: -8%; animation-name: orb2-drift; animation-duration: 22s;
}
.bg-liquid__orb--3 {
  width: 420px; height: 420px;
  background: var(--orb3-bg);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  animation-name: orb3-drift; animation-duration: 20s;
}

/* ── Page-specific orb overrides ──────────── */

[data-page="review"] { --orb1-bg: radial-gradient(circle, rgba(155,130,140,0.55) 0%, transparent 70%); }
[data-page="community"] { --orb2-bg: radial-gradient(circle, rgba(130,155,145,0.5) 0%, transparent 70%); }
[data-page="artist-detail"] { --orb3-bg: radial-gradient(circle, rgba(155,145,170,0.5) 0%, transparent 70%); }
[data-page="feedback"] { --orb1-bg: radial-gradient(circle, rgba(160,155,140,0.5) 0%, transparent 70%); }
[data-theme="light"] [data-page="review"] { --orb1-bg: radial-gradient(circle, rgba(175,155,165,0.35) 0%, transparent 70%); }
[data-theme="light"] [data-page="community"] { --orb2-bg: radial-gradient(circle, rgba(160,175,165,0.33) 0%, transparent 70%); }
[data-theme="light"] [data-page="artist-detail"] { --orb3-bg: radial-gradient(circle, rgba(175,170,185,0.32) 0%, transparent 70%); }
[data-theme="light"] [data-page="feedback"] { --orb1-bg: radial-gradient(circle, rgba(180,175,160,0.32) 0%, transparent 70%); }
@keyframes orb1-drift {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(80px,60px) scale(1.15); }
}
@keyframes orb2-drift {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(-50px,-70px) scale(1.12); }
}
@keyframes orb3-drift {
  0% { transform: translate(-50%,-50%) scale(1); }
  100% { transform: translate(-40%,-55%) scale(1.2); }
}

/* ── Favicon pattern overlay ─────────────── */

.bg-pattern {
  position: fixed; inset: -25%; z-index: 1; pointer-events: none;
  background-image: url('favicon.png');
  background-repeat: repeat;
  background-size: 110px 110px;
  opacity: 0.2;
  transform: rotate(20deg);
}
[data-theme="light"] .bg-pattern { opacity: 0.06; }

/* ── Noise grain overlay ─────────────────── */

body::after {
  content: '';
  position: fixed; inset: -50%;
  z-index: 4; pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}
[data-theme="light"] body::after { opacity: 0.025; }

/* ── Scroll-triggered reveals ────────────── */

.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.65s cubic-bezier(0.2,0.8,0.2,1), transform 0.65s cubic-bezier(0.2,0.8,0.2,1);
}
.reveal.is-revealed {
  opacity: 1; transform: translateY(0);
}

/* ── Skeleton shimmer ────────────────────── */

.skeleton {
  background: linear-gradient(96deg, rgba(255,255,255,0.025) 25%, rgba(255,255,255,0.06) 38%, rgba(255,255,255,0.025) 50%);
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
  border-radius: 10px;
}
[data-theme="light"] .skeleton {
  background: linear-gradient(96deg, rgba(0,0,0,0.03) 25%, rgba(0,0,0,0.06) 38%, rgba(0,0,0,0.03) 50%);
  background-size: 200% 100%;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton--text { height: 14px; margin-bottom: 8px; }
.skeleton--text-sm { height: 10px; width: 60%; margin-bottom: 6px; }
.skeleton--card { height: 80px; margin-bottom: 12px; border-radius: 14px; }
.skeleton--avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.skeleton--thumb { width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0; }

/* ── Image lazy-load blur ────────────────── */

img.lazy-img {
  filter: blur(10px);
}
img.lazy-img.is-loaded {
  animation: blurOut 0.5s ease forwards;
}
@keyframes blurOut {
  from { filter: blur(10px); }
  to   { filter: blur(0); }
}

/* ── Toast notifications ─────────────────── */

.ts-toast {
  position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(16px);
  z-index: 200;
  padding: 10px 22px; border-radius: 999px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  background: rgba(30,30,40,0.92);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem; color: var(--text);
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2,0.8,0.2,1);
}
.ts-toast.is-visible {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
[data-theme="light"] .ts-toast {
  background: rgba(248,245,240,0.92);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}

/* ── Shared keyframes ────────────────────── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}