/* Obsidian — ambient FX layers (photoreal studio lighting) */

.mh-obsidian-mesh {
  position: fixed;
  inset: 0;
  z-index: -4;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.mh-obsidian-grain {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  opacity: 0;
  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.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: soft-light;
}

.mh-obsidian-vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, rgba(120, 160, 220, 0.12), transparent 55%),
    radial-gradient(ellipse 100% 80% at 50% 110%, rgba(0, 0, 0, 0.55), transparent 50%),
    radial-gradient(ellipse 80% 60% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.45) 100%);
}

html[data-theme="obsidian"] .mh-starfield,
html[data-theme="obsidian"] .mh-vignette,
html[data-theme="obsidian"] .mh-scanlines,
html[data-theme="obsidian"] .mh-bg,
html[data-theme="obsidian"] .mh-grid,
html[data-theme="obsidian"] .mh-pixel-field,
html[data-theme="obsidian"] .mh-pixel-scan,
html[data-theme="obsidian"] .mh-arcade-marquee {
  opacity: 0 !important;
  visibility: hidden;
}

html[data-theme="obsidian"] .brand-mark__ring,
html[data-theme="obsidian"] .brand-mark__ghost {
  display: none !important;
}

html[data-theme="obsidian"] .mh-obsidian-mesh,
html[data-theme="obsidian"] .mh-obsidian-vignette {
  opacity: 1;
}

html[data-theme="obsidian"] .mh-obsidian-grain {
  opacity: 0.035;
}

html[data-theme="obsidian"] {
  color-scheme: dark;
}

html[data-theme="obsidian"] body {
  background: #0a0c10;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="obsidian"] .mh-obsidian-mesh {
    display: none;
  }

  html[data-theme="obsidian"] .mh-obsidian-shard {
    animation: none !important;
  }
}

/* Floating geometric shards (depth layer) */
.mh-obsidian-shards {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.8s ease;
}

html[data-theme="obsidian"] .mh-obsidian-shards {
  opacity: 1;
}

.mh-obsidian-shard {
  position: absolute;
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, rgba(126, 179, 232, 0.08), rgba(126, 179, 232, 0.01));
  border: 1px solid rgba(126, 179, 232, 0.12);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  animation: obs-shard-float 22s ease-in-out infinite;
}

.mh-obsidian-shard--b {
  width: 80px;
  height: 80px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: linear-gradient(145deg, rgba(201, 168, 108, 0.07), transparent);
  border-color: rgba(201, 168, 108, 0.12);
  animation-duration: 28s;
  animation-delay: -6s;
}

.mh-obsidian-shard--c {
  width: 160px;
  height: 90px;
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
  animation-duration: 32s;
  animation-delay: -12s;
}

.mh-obsidian-shard--a { top: 14%; left: 6%; }
.mh-obsidian-shard--b { top: 58%; right: 8%; left: auto; }
.mh-obsidian-shard--c { bottom: 12%; left: 18%; top: auto; }

@keyframes obs-shard-float {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.35; }
  50% { transform: translateY(-18px) rotate(6deg); opacity: 0.55; }
}