/**
 * dPass Invest — shared atmosphere background.
 * Lightweight, GPU-friendly. No infinite animations on complex shapes.
 */

:root {
  /* Base wash */
  --atmos-glow-1: rgba(0, 232, 123, 0.068);
  --atmos-glow-2: rgba(139, 92, 246, 0.052);
  --atmos-surface-bg: #0b1120;
  /* Micro-grid + blooms: visible but still behind content */
  --atmos-struct-h: rgba(255, 255, 255, 0.017);
  --atmos-struct-v: rgba(255, 255, 255, 0.011);
  --atmos-struct-bloom-1: rgba(0, 232, 123, 0.048);
  --atmos-struct-bloom-2: rgba(139, 92, 246, 0.042);
}

html[data-theme="light"] {
  --atmos-glow-1: rgba(0, 232, 123, 0.085);
  --atmos-glow-2: rgba(139, 92, 246, 0.068);
  --atmos-surface-bg: #f8fafc;
  --atmos-struct-h: rgba(15, 23, 42, 0.036);
  --atmos-struct-v: rgba(15, 23, 42, 0.024);
  --atmos-struct-bloom-1: rgba(5, 150, 105, 0.058);
  --atmos-struct-bloom-2: rgba(99, 102, 241, 0.052);
}

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

/* ── Background glow layer ── */
.dinv-atmos-bg {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -5%, var(--atmos-glow-1), transparent 60%),
    radial-gradient(ellipse 55% 40% at 100% 25%, var(--atmos-glow-2), transparent 50%),
    radial-gradient(ellipse 50% 35% at 0% 80%, var(--atmos-glow-2), transparent 45%);
}

/* Abstract detail: light grid + two blooms + minimal SVG (curves only). Layer opacity keeps this barely-there. */
.dinv-atmos-struct {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: transparent;
  background-image:
    repeating-linear-gradient(0deg, transparent 0, transparent 55px, var(--atmos-struct-h) 55px, var(--atmos-struct-h) 56px),
    repeating-linear-gradient(90deg, transparent 0, transparent 80px, var(--atmos-struct-v) 80px, var(--atmos-struct-v) 81px),
    radial-gradient(ellipse 100% 55% at 72% 5%, var(--atmos-struct-bloom-1) 0%, transparent 58%),
    radial-gradient(ellipse 85% 50% at 8% 92%, var(--atmos-struct-bloom-2) 0%, transparent 55%),
    url("atmosphere-struct-dark.svg");
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, min(138vw, 1620px) auto;
  background-position: 0 0, 0 0, 0 0, 0 0, 55% 22%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  opacity: 0.64;
}

html[data-theme="light"] .dinv-atmos-struct {
  background-image:
    repeating-linear-gradient(0deg, transparent 0, transparent 55px, var(--atmos-struct-h) 55px, var(--atmos-struct-h) 56px),
    repeating-linear-gradient(90deg, transparent 0, transparent 80px, var(--atmos-struct-v) 80px, var(--atmos-struct-v) 81px),
    radial-gradient(ellipse 100% 55% at 72% 5%, var(--atmos-struct-bloom-1) 0%, transparent 58%),
    radial-gradient(ellipse 85% 50% at 8% 92%, var(--atmos-struct-bloom-2) 0%, transparent 55%),
    url("atmosphere-struct-light.svg");
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, min(138vw, 1620px) auto;
  background-position: 0 0, 0 0, 0 0, 0 0, 55% 22%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  opacity: 0.56;
}

/* ── Subtle dot-grid overlay ── */
.dinv-atmos-fx {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 32px 32px;
}

html[data-theme="light"] .dinv-atmos-fx {
  background-image: radial-gradient(rgba(0, 0, 0, 0.032) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Hide legacy child elements (shards, cracks, shimmer) if still in DOM */
.dinv-atmos-cracks,
.dinv-atmos-shards,
.dinv-atmos-shimmer,
.dinv-atmos-shard {
  display: none !important;
}

/* ── Content surface ── */
.dinv-atmos-surface {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .dinv-atmos-bg,
  .dinv-atmos-fx,
  .dinv-atmos-struct {
    animation: none;
  }
}

/* Strip decorative struct layer (grid + diagram) when the user needs stronger contrast / less pattern */
@media (prefers-contrast: more) {
  .dinv-atmos-struct {
    background: none !important;
    opacity: 0;
  }
  .dinv-atmos-fx {
    opacity: 0.4;
  }
}

/* ── Viewport-safe layout (match index.php: no horizontal panning / zoom-to-fit) ── */
html {
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  min-width: 0;
  overflow-x: clip;
}
img,
video,
canvas {
  max-width: 100%;
  height: auto;
}
pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  word-wrap: break-word;
}
code {
  word-wrap: break-word;
}
table {
  max-width: 100%;
}