/* ============================================================
   RENN OS — Theme Engine v2 (6 atmosfera, tata letak tetap)
   Aktif via: html[data-theme="onyx|cyber|sakura|emerald|blaze|pearl"]
   ============================================================ */

html[data-theme="cyber"] {
  --bg-base: #040f1a;
  --bg-elev: #06182b;
  --bg-card: rgba(103, 232, 249, .05);
  --text: #e0faff;
  --muted: #7dd3fc;
  --dim: #3f6d85;
  --line: rgba(125, 211, 252, .12);
  --line-strong: rgba(125, 211, 252, .22);
  --primary: #22d3ee;
  --primary-2: #38bdf8;
  --brand: #67e8f9;
  --cyan: #a5f3fc;
  --grad: linear-gradient(135deg, #0891b2, #22d3ee 45%, #818cf8);
  --grad-brand: linear-gradient(135deg, #38bdf8, #22d3ee);
  --glow-a: #22d3ee;
  --glow-b: #38bdf8;
  --glow-c: #6366f1;
}

html[data-theme="sakura"] {
  --bg-base: #150a19;
  --bg-elev: #201026;
  --bg-card: rgba(251, 113, 133, .05);
  --text: #fdf2f8;
  --muted: #f9a8d4;
  --dim: #9d5c78;
  --line: rgba(249, 168, 212, .14);
  --line-strong: rgba(249, 168, 212, .26);
  --primary: #f472b6;
  --primary-2: #fb7185;
  --brand: #fda4af;
  --cyan: #f9a8d4;
  --grad: linear-gradient(135deg, #db2777, #f472b6 45%, #c084fc);
  --grad-brand: linear-gradient(135deg, #fb7185, #f472b6);
  --glow-a: #f472b6;
  --glow-b: #fb7185;
  --glow-c: #c084fc;
}

html[data-theme="emerald"] {
  --bg-base: #03120e;
  --bg-elev: #07201a;
  --bg-card: rgba(52, 211, 153, .05);
  --text: #ecfdf5;
  --muted: #6ee7b7;
  --dim: #34685a;
  --line: rgba(110, 231, 183, .13);
  --line-strong: rgba(110, 231, 183, .24);
  --primary: #34d399;
  --primary-2: #2dd4bf;
  --brand: #5eead4;
  --cyan: #99f6e4;
  --grad: linear-gradient(135deg, #059669, #34d399 45%, #22d3ee);
  --grad-brand: linear-gradient(135deg, #10b981, #2dd4bf);
  --glow-a: #34d399;
  --glow-b: #2dd4bf;
  --glow-c: #38bdf8;
}

html[data-theme="blaze"] {
  --bg-base: #170904;
  --bg-elev: #241007;
  --bg-card: rgba(251, 146, 60, .05);
  --text: #fff7ed;
  --muted: #fdba74;
  --dim: #8a5630;
  --line: rgba(253, 186, 116, .14);
  --line-strong: rgba(253, 186, 116, .26);
  --primary: #fb923c;
  --primary-2: #f87171;
  --brand: #fca5a5;
  --cyan: #fdba74;
  --grad: linear-gradient(135deg, #ea580c, #fb923c 45%, #f43f5e);
  --grad-brand: linear-gradient(135deg, #f43f5e, #fb923c);
  --glow-a: #fb923c;
  --glow-b: #f87171;
  --glow-c: #fbbf24;
}

/* Pearl = light; token inti mewarisi blok [data-theme="light"] di app.css */
html[data-theme="pearl"] body::before { opacity: .5; }

/* ---------- Layer atmosfera (tanpa markup tambahan) ---------- */
body { position: relative; }
html[data-theme] body::before, html[data-theme="emerald"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
html[data-theme] body::before { will-change: background-position, transform; }
html[data-theme]:not([data-theme="emerald"]) body::after { display: none; }

html[data-theme="cyber"] body::before {
  background:
    repeating-linear-gradient(0deg, transparent 0 46px, var(--line) 46px 47px),
    repeating-linear-gradient(90deg, transparent 0 46px, var(--line) 46px 47px),
    radial-gradient(70% 55% at 50% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 70%);
  animation: ath-grid 3.2s linear infinite;
  opacity: .55;
}
@keyframes ath-grid { to { background-position: 0 47px, 47px 0, 0 0; } }

html[data-theme="sakura"] body::before {
  background-image:
    radial-gradient(3px 3px at 20% 0%, rgba(249, 168, 212, .8) 50%, transparent 51%),
    radial-gradient(2px 2px at 60% 0%, rgba(244, 114, 182, .65) 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 84% 0%, rgba(251, 207, 232, .7) 50%, transparent 51%),
    radial-gradient(2px 2px at 38% 0%, rgba(244, 114, 182, .5) 50%, transparent 51%);
  background-size: 480px 100%;
  animation: sakura-fall 11s linear infinite;
  opacity: .8;
}
@keyframes sakura-fall { to { background-position: -120px 100vh, 90px 100vh, -40px 100vh, 140px 100vh; } }

html[data-theme="emerald"] body::after {
  display: block;
  left: 50%; top: 62%;
  width: 44vmax; height: 44vmax;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--primary) 30%, transparent);
  box-shadow: 0 0 60px color-mix(in srgb, var(--primary) 18%, transparent), inset 0 0 40px color-mix(in srgb, var(--primary) 10%, transparent);
  animation: emerald-pulse 4.5s cubic-bezier(.16,.8,.32,1) infinite;
}
@keyframes emerald-pulse {
  0% { scale: .35; opacity: 0; }
  18% { opacity: .75; }
  100% { scale: 1.15; opacity: 0; }
}

html[data-theme="blaze"] body::before {
  background: linear-gradient(115deg,
    color-mix(in srgb, #ea580c 16%, transparent),
    color-mix(in srgb, #f43f5e 10%, transparent) 35%,
    transparent 60%,
    color-mix(in srgb, #fbbf24 8%, transparent) 85%);
  background-size: 220% 220%;
  animation: blaze-drift 14s ease-in-out infinite alternate;
  opacity: .8;
}
@keyframes blaze-drift {
  from { background-position: 0% 20%; }
  to { background-position: 100% 80%; }
}

html[data-theme="onyx"] body::before {
  background:
    radial-gradient(42rem 30rem at 82% -8%, color-mix(in srgb, var(--glow-a, #8b5cf6) 9%, transparent), transparent 68%),
    radial-gradient(36rem 26rem at -6% 104%, color-mix(in srgb, var(--brand, #ff4d8d) 7%, transparent), transparent 66%);
  animation: onyx-drift 18s ease-in-out infinite alternate;
}
@keyframes onyx-drift { to { transform: translate(-2.5%, 2%) scale(1.04); } }

html[data-theme="pearl"] body::before {
  background:
    radial-gradient(38rem 22rem at 78% 12%, rgba(165, 180, 252, .18), transparent 70%),
    radial-gradient(30rem 20rem at 12% 88%, rgba(147, 197, 253, .16), transparent 70%);
  animation: pearl-clouds 22s ease-in-out infinite alternate;
}
@keyframes pearl-clouds { to { transform: translate(3%, -2%); } }

@media (prefers-reduced-motion: reduce) {
  body.ath-ready::before, body.ath-ready::after { animation: none !important; }
}

/* ---------- Floating Theme Dock ---------- */
.rn-dock { position: fixed; left: 16px; bottom: 16px; z-index: 180; font-family: 'Plus Jakarta Sans', sans-serif; }
.rn-dock-main {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg-elev) 80%, transparent);
  backdrop-filter: blur(14px); color: var(--text); cursor: pointer;
  display: grid; place-items: center; font-size: 1rem;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.6);
  transition: all .25s cubic-bezier(.22,1,.36,1);
}
.rn-dock-main:hover { border-color: var(--primary); box-shadow: 0 0 24px color-mix(in srgb, var(--primary) 40%, transparent); transform: scale(1.06); }
.rn-dock-list { position: absolute; left: 4px; bottom: 56px; display: flex; flex-direction: column-reverse; gap: 9px; padding-bottom: 8px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: all .28s cubic-bezier(.22,1,.36,1); }
.rn-dock.open .rn-dock-list { opacity: 1; pointer-events: auto; transform: none; }
.rn-dock-item { display: flex; align-items: center; gap: .55rem; cursor: pointer; background: none; border: none; padding: 0; flex-direction: row; }
.rn-dock-item span.lbl { order: 2; font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: var(--text); background: color-mix(in srgb, var(--bg-elev) 85%, transparent); border: 1px solid var(--line); padding: .25rem .55rem; border-radius: 8px; opacity: 0; transform: translateX(-6px); transition: all .2s ease; white-space: nowrap; }
.rn-dock-item:hover span.lbl { opacity: 1; transform: none; }
.rn-dock-item .sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; display: block; transition: all .2s cubic-bezier(.22,1,.36,1); box-shadow: 0 4px 12px rgba(0,0,0,.45); }
.rn-dock-item:hover .sw { transform: scale(1.14); }
.rn-dock-item.on .sw { border-color: #fff; }
@media (max-width: 640px) { .rn-dock { left: 12px; bottom: 12px; } .rn-dock-main { width: 42px; height: 42px; } }