/* ============================================================
   THEMES — اور ورلد (پیش‌فرض) / ندر / اند
   باید بعد از style.css و components.css لود شود
   ============================================================ */

/* ---------- دکمه و منوی تم در هدر ---------- */
.theme-switcher { position: relative; flex-shrink: 0; }

.theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding-inline: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-bright);
  background: var(--bg-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color .2s, background .2s, transform .15s;
}
.theme-btn:hover { border-color: var(--accent); background: var(--bg-3); }
.theme-btn-arrow { transition: transform .2s; image-rendering: pixelated; }
.theme-btn[aria-expanded="true"] .theme-btn-arrow { transform: rotate(180deg); }

.theme-menu {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-start: 0;
  min-width: 200px;
  padding: 6px;
  background: var(--bg-1);
  border: 2px solid var(--border-bright);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform-origin: top;
  animation: themeMenuIn .16s ease-out;
}
.theme-menu[hidden] { display: none; }

@keyframes themeMenuIn {
  from { opacity: 0; transform: translateY(-6px) scaleY(.9); }
  to   { opacity: 1; transform: none; }
}

.theme-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  text-align: start;
  transition: background .15s, border-color .15s;
}
.theme-item img { image-rendering: pixelated; flex-shrink: 0; }
.theme-item:hover { background: var(--bg-3); }
.theme-item[aria-checked="true"] {
  border-color: var(--accent);
  background: var(--bg-3);
}

@media (max-width: 900px) {
  /* موبایل: منو نسبت به هدر (نه دکمه) جایگذاری می‌شود تا هیچ‌وقت از صفحه بیرون نزند */
  .theme-switcher { position: static; }
  .theme-menu {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: 14px;
    inset-inline-end: auto;
    width: min(220px, calc(100vw - 28px));
    min-width: 0;
    max-width: calc(100vw - 28px);
    box-sizing: border-box;
  }
}

/* ---------- لایه‌ی افکت کلیک ---------- */
.fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
.fx-px {
  position: absolute;
  display: block;
  pointer-events: none;
  image-rendering: pixelated;
  will-change: transform, opacity;
}
.fx-wave {
  position: absolute;
  display: block;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .fx-layer { display: none; }
  .theme-menu { animation: none; }
}

/* ============================================================
   تم ندر
   ============================================================ */
html[data-theme="nether"] {
  --bg-0: #1a0505;
  --bg-1: #260909;
  --bg-2: #340e0e;
  --bg-3: #481514;
  --border: #5c1c16;
  --border-bright: #8f2d1c;

  --text: #ffe9d8;
  --text-muted: #c99a86;

  --primary: #e8541a;
  --primary-dark: #8a1e0a;
  --primary-light: #ff8a4c;

  --accent: #ffb02e;
  --accent-dark: #b86a00;
  --accent-light: #ffd23a;

  --cyan: #ffb04a;
  --purple: #e0526a;
  --pink: #ff7a9a;
  --gold: #ffcf4d;

  --grad-primary: linear-gradient(180deg, #ff7a1a, #9a2a06);
  --grad-accent: linear-gradient(180deg, #ffd23a, #c27a00);
  --grad-card: linear-gradient(180deg, #340e0e, #260909);

  --shadow-glow-blue: 0 0 24px rgba(255, 90, 20, .4);
  --shadow-glow-gold: 0 0 24px rgba(255, 176, 46, .4);

  --cursor-default: url('/assets/cursors/nether-cursor-default.png') 0 0, auto;
  --cursor-pointer: url('/assets/cursors/nether-cursor-pointer.png') 0 0, pointer;
  --cursor-text: url('/assets/cursors/nether-cursor-default.png') 0 0, text;
}

/* بک‌گراند صفحه‌ی ندر: عکس واحد، چسبیده به بالای صفحه، همراه اسکرول */
html[data-theme="nether"] body {
  background-color: #1a0505;
  background-image:
    radial-gradient(1100px 420px at 50% 100%, rgba(255, 106, 20, .30), transparent 70%),
    linear-gradient(180deg, rgba(20, 3, 3, .86), rgba(26, 5, 5, .80)),
    url('/assets/images/nether-g.png');
  background-size: auto, auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center bottom, center, center top;
  /* بدون background-attachment → پیش‌فرض scroll (با صفحه حرکت می‌کند) */
}
html[data-theme="nether"] body,
html[data-theme="nether"] .hero-bg {
  image-rendering: pixelated;
}
html[data-theme="nether"] .hero-bg {
  background-image: url('/assets/images/nether-bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  opacity: .18;
  filter: brightness(.8) saturate(1.1);
}

html[data-theme="nether"] .site-header {
  background: rgba(26, 5, 5, .9);
  border-bottom-color: var(--border-bright);
}
html[data-theme="nether"] .main-nav a:hover { color: #fff; }
html[data-theme="nether"] a:hover { color: var(--primary-light); }
html[data-theme="nether"] :focus-visible { outline-color: var(--accent); }

html[data-theme="nether"] .header-socials a,
html[data-theme="nether"] .theme-btn { border-color: var(--border-bright); }

html[data-theme="nether"] .header-designer {
  border-color: rgba(255, 176, 46, .4);
  background: rgba(255, 176, 46, .08);
  color: #ffb02e;
}
html[data-theme="nether"] .header-designer:hover {
  border-color: #ffb02e;
  background: rgba(255, 176, 46, .18);
  color: #ffd23a;
}

html[data-theme="nether"] .site-footer {
  background: rgba(20, 3, 3, .85);
  border-top-color: var(--border-bright);
}
html[data-theme="nether"] .loading-screen { background: #1a0505; }
html[data-theme="nether"] .theme-menu {
  background: #260909;
  border-color: #8f2d1c;
}

/* آیکون‌های SVG در تم ندر رنگ نارنجی/طلایی */
html[data-theme="nether"] .main-nav a img,
html[data-theme="nether"] .icon-btn img,
html[data-theme="nether"] .header-socials img,
html[data-theme="nether"] .header-actions .btn img,
html[data-theme="nether"] .card-meta img,
html[data-theme="nether"] .job-icon img,
html[data-theme="nether"] .theme-item img,
html[data-theme="nether"] .theme-btn-arrow {
  filter: brightness(0) saturate(100%) invert(62%) sepia(78%) saturate(1850%)
          hue-rotate(340deg) brightness(103%) contrast(102%);
}
html[data-theme="nether"] .brand-icon img,
html[data-theme="nether"] .site-footer .brand img {
  filter: none !important;
}

/* هاور و سایه‌های ندر */
html[data-theme="nether"] .card:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .6), 0 0 24px rgba(255, 176, 46, .25);
}
html[data-theme="nether"] .btn-primary:hover {
  box-shadow: 0 6px 0 #4a0d02, 0 0 24px rgba(255, 106, 20, .55);
}
html[data-theme="nether"] .btn-accent:hover {
  box-shadow: 0 6px 0 #6b3a00, 0 0 24px rgba(255, 176, 46, .55);
}
html[data-theme="nether"] .icon-btn:hover {
  border-color: var(--border-bright);
  background: var(--bg-3);
  color: #fff;
}
html[data-theme="nether"] .orbit-item:hover {
  border-color: var(--accent);
  box-shadow: 0 0 24px rgba(255, 176, 46, .55), 0 4px 16px rgba(0, 0, 0, .5);
}

html[data-theme="nether"] ::selection { background: #ff6a14; color: #1a0505; }

/* ============================================================
   تم اند (End)
   ============================================================ */
html[data-theme="end"] {
  --bg-0: #0a0612;
  --bg-1: #120a1f;
  --bg-2: #1a0f2e;
  --bg-3: #251845;
  --border: #3a2860;
  --border-bright: #5a3f8f;

  --text: #e8e0f5;
  --text-muted: #a396c4;

  --primary: #9b6dff;
  --primary-dark: #5b3aa0;
  --primary-light: #b894ff;

  --accent: #c8b8e8;
  --accent-dark: #6e5a9a;
  --accent-light: #e8dfc0;

  --cyan: #7fdbda;
  --purple: #b088ff;
  --pink: #d9a8ff;
  --gold: #e8dfc0;

  --grad-primary: linear-gradient(180deg, #9b6dff, #5b3aa0);
  --grad-accent: linear-gradient(180deg, #e8dfc0, #9a8a6a);
  --grad-card: linear-gradient(180deg, #1a0f2e, #120a1f);

  --shadow-glow-blue: 0 0 24px rgba(155, 109, 255, .45);
  --shadow-glow-gold: 0 0 24px rgba(232, 223, 192, .35);

  --cursor-default: url('/assets/cursors/end-cursor-default.png') 0 0, auto;
  --cursor-pointer: url('/assets/cursors/end-cursor-pointer.png') 0 0, pointer;
  --cursor-text: url('/assets/cursors/end-cursor-default.png') 0 0, text;
}

/* بک‌گراند صفحه‌ی اند: عکس واحد، چسبیده به بالای صفحه، همراه اسکرول */
html[data-theme="end"] body {
  background-color: #0a0612;
  background-image:
    radial-gradient(1200px 500px at 50% 0%, rgba(155, 109, 255, .22), transparent 70%),
    linear-gradient(180deg, rgba(10, 6, 18, .88), rgba(18, 10, 31, .82)),
    url('/assets/images/end-b.png');
  background-size: auto, auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center top, center, center top;
  /* بدون background-attachment → پیش‌فرض scroll */
}
html[data-theme="end"] body,
html[data-theme="end"] .hero-bg {
  image-rendering: pixelated;
}
html[data-theme="end"] .hero-bg {
  background-image: url('/assets/images/end-bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  opacity: .20;
  filter: brightness(.75) saturate(1.2) hue-rotate(-10deg);
}

html[data-theme="end"] .site-header {
  background: rgba(10, 6, 18, .92);
  border-bottom-color: var(--border-bright);
}
html[data-theme="end"] .main-nav a:hover { color: #fff; }
html[data-theme="end"] a:hover { color: var(--primary-light); }
html[data-theme="end"] :focus-visible { outline-color: var(--accent); }

html[data-theme="end"] .header-socials a,
html[data-theme="end"] .theme-btn { border-color: var(--border-bright); }

html[data-theme="end"] .header-designer {
  border-color: rgba(184, 148, 255, .4);
  background: rgba(184, 148, 255, .08);
  color: #b894ff;
}
html[data-theme="end"] .header-designer:hover {
  border-color: #b894ff;
  background: rgba(184, 148, 255, .18);
  color: #d9a8ff;
}

html[data-theme="end"] .site-footer {
  background: rgba(10, 6, 18, .88);
  border-top-color: var(--border-bright);
}
html[data-theme="end"] .loading-screen { background: #0a0612; }
html[data-theme="end"] .theme-menu {
  background: #120a1f;
  border-color: #5a3f8f;
}

/* آیکون‌های SVG در تم اند رنگ بنفش Enderman */
html[data-theme="end"] .main-nav a img,
html[data-theme="end"] .icon-btn img,
html[data-theme="end"] .header-socials img,
html[data-theme="end"] .header-actions .btn img,
html[data-theme="end"] .card-meta img,
html[data-theme="end"] .job-icon img,
html[data-theme="end"] .theme-item img,
html[data-theme="end"] .theme-btn-arrow {
  filter: brightness(0) saturate(100%) invert(72%) sepia(38%) saturate(2200%)
          hue-rotate(230deg) brightness(105%) contrast(102%);
}
html[data-theme="end"] .brand-icon img,
html[data-theme="end"] .site-footer .brand img {
  filter: none !important;
}

/* هاور و سایه‌های اند */
html[data-theme="end"] .card:hover {
  border-color: var(--primary-light);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .6), 0 0 24px rgba(155, 109, 255, .35);
}
html[data-theme="end"] .btn-primary:hover {
  box-shadow: 0 6px 0 #2a1a52, 0 0 24px rgba(155, 109, 255, .6);
}
html[data-theme="end"] .btn-accent:hover {
  box-shadow: 0 6px 0 #6e5a3a, 0 0 24px rgba(232, 223, 192, .5);
}
html[data-theme="end"] .icon-btn:hover {
  border-color: var(--border-bright);
  background: var(--bg-3);
  color: #fff;
}
html[data-theme="end"] .orbit-item:hover {
  border-color: var(--primary-light);
  box-shadow: 0 0 24px rgba(155, 109, 255, .6), 0 4px 16px rgba(0, 0, 0, .5);
}
html[data-theme="end"] .section-frame--files {
  --frame-color: var(--primary);
  --frame-glow: rgba(155, 109, 255, .35);
  --frame-soft: rgba(155, 109, 255, .10);
}
html[data-theme="end"] .section-frame--jobs {
  --frame-color: var(--accent);
  --frame-glow: rgba(232, 223, 192, .30);
  --frame-soft: rgba(232, 223, 192, .10);
}

html[data-theme="end"] ::selection { background: #9b6dff; color: #0a0612; }

/* ============================================================
   بک‌گراند صفحات About و Jobs در تم‌های ندر و اند
   ============================================================ */
html[data-theme="nether"] .about-skin-side img {
  content: url('/assets/images/skin-nether.png');
}
html[data-theme="nether"] .jobs-skin-side img {
  content: url('/assets/images/skin-nether-jobs.png');
}
html[data-theme="end"] .about-skin-side img {
  content: url('/assets/images/skin-end.png');
}
html[data-theme="end"] .jobs-skin-side img {
  content: url('/assets/images/skin-end-jobs.png');
}