/* ===================================
   PaintWalk Pitch Deck — Background Effects
   Pixel-art themed background layer
   =================================== */

/* --- Pixel Dot Grid --- */
.deck-stage {
  background-color: #0a0a14 !important;
  background-image:
    radial-gradient(circle, rgba(248,248,248,0.09) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0;
}

/* --- CRT Scanline Overlay --- */
.deck-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(248, 248, 248, 0.018) 3px,
    rgba(248, 248, 248, 0.018) 4px
  );
}

/* --- Edge Vignette --- */
.deck-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 49;
  background: radial-gradient(
    ellipse 80% 70% at 50% 50%,
    transparent 40%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

/* --- Pixel Particle Canvas --- */
.pixel-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* --- Boost geo shape presence (larger + glow) --- */
.slide-bg .bg-shape {
  opacity: 1;
  filter: brightness(1.45) saturate(1.1);
  mix-blend-mode: screen;
  scale: 5.5;
}

.slide-bg .bg-shape::after {
  content: '';
  position: absolute;
  inset: -90%;
  border-radius: inherit;
  background: inherit;
  opacity: 0.72;
  filter: blur(80px);
  pointer-events: none;
}

/* --- Static Geometric Shapes Layer --- */
.geo-shapes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.geo {
  position: absolute;
  pointer-events: none;
}

/* Diamond / rotated square */
.geo--diamond {
  width: 80px;
  height: 80px;
  border: 2px solid rgba(232, 76, 61, 0.08);
  transform: rotate(45deg);
}

.geo--diamond-lg {
  width: 140px;
  height: 140px;
  border: 2px solid rgba(102, 178, 255, 0.06);
  transform: rotate(45deg);
}

.geo--diamond-sm {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(107, 203, 119, 0.08);
  transform: rotate(45deg);
}

/* Cross / plus shape */
.geo--cross {
  width: 60px;
  height: 60px;
  position: absolute;
}

.geo--cross::before,
.geo--cross::after {
  content: '';
  position: absolute;
  background: rgba(255, 149, 0, 0.07);
}

.geo--cross::before {
  width: 100%;
  height: 3px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.geo--cross::after {
  width: 3px;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

/* Outlined circle */
.geo--circle {
  width: 100px;
  height: 100px;
  border: 2px solid rgba(232, 76, 61, 0.06);
  border-radius: 50%;
}

.geo--circle-lg {
  width: 200px;
  height: 200px;
  border: 1.5px solid rgba(102, 178, 255, 0.05);
  border-radius: 50%;
}

/* Outlined square */
.geo--square {
  width: 70px;
  height: 70px;
  border: 2px solid rgba(248, 248, 248, 0.05);
}

.geo--square-lg {
  width: 120px;
  height: 120px;
  border: 1.5px solid rgba(107, 203, 119, 0.05);
}

/* Dotted line segments */
.geo--dots-h {
  width: 200px;
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    rgba(232, 76, 61, 0.1) 0px,
    rgba(232, 76, 61, 0.1) 4px,
    transparent 4px,
    transparent 12px
  );
}

.geo--dots-v {
  width: 2px;
  height: 180px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(102, 178, 255, 0.08) 0px,
    rgba(102, 178, 255, 0.08) 4px,
    transparent 4px,
    transparent 12px
  );
}

/* Corner bracket shapes */
.geo--bracket {
  width: 50px;
  height: 50px;
  border-top: 2px solid rgba(248, 248, 248, 0.06);
  border-left: 2px solid rgba(248, 248, 248, 0.06);
}

.geo--bracket-br {
  width: 50px;
  height: 50px;
  border-bottom: 2px solid rgba(248, 248, 248, 0.06);
  border-right: 2px solid rgba(248, 248, 248, 0.06);
}

/* Small filled pixel squares (static decoration) */
.geo--pixel {
  width: 6px;
  height: 6px;
  background: rgba(232, 76, 61, 0.12);
}

.geo--pixel-cyan {
  width: 6px;
  height: 6px;
  background: rgba(102, 178, 255, 0.10);
}

.geo--pixel-lime {
  width: 6px;
  height: 6px;
  background: rgba(107, 203, 119, 0.10);
}

/* Triangle (CSS borders) */
.geo--triangle {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 52px solid rgba(255, 149, 0, 0.05);
}

/* ===================================
   LIGHT MODE OVERRIDES
   =================================== */

/* Light dot grid */
[data-theme="light"] .deck-stage {
  background-color: #EDEDED !important;
  background-image:
    radial-gradient(circle, rgba(28,28,28,0.06) 1px, transparent 1px);
}

/* Light scanlines — dark on light */
[data-theme="light"] .deck-stage::after {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.012) 3px,
    rgba(0, 0, 0, 0.012) 4px
  );
}

/* Light vignette — much softer */
[data-theme="light"] .deck-stage::before {
  background: radial-gradient(
    ellipse 80% 70% at 50% 50%,
    transparent 40%,
    rgba(0, 0, 0, 0.06) 100%
  );
}

/* Light mode bg shapes — use multiply instead of screen */
[data-theme="light"] .slide-bg .bg-shape {
  filter: brightness(1.1) saturate(1.2);
  mix-blend-mode: multiply;
}

/* Geometric shapes — flip to dark strokes on light bg */
[data-theme="light"] .geo--diamond {
  border-color: rgba(214, 48, 49, 0.10);
}

[data-theme="light"] .geo--diamond-lg {
  border-color: rgba(9, 132, 227, 0.08);
}

[data-theme="light"] .geo--diamond-sm {
  border-color: rgba(0, 184, 148, 0.10);
}

[data-theme="light"] .geo--cross::before,
[data-theme="light"] .geo--cross::after {
  background: rgba(225, 112, 85, 0.09);
}

[data-theme="light"] .geo--circle {
  border-color: rgba(214, 48, 49, 0.08);
}

[data-theme="light"] .geo--circle-lg {
  border-color: rgba(9, 132, 227, 0.06);
}

[data-theme="light"] .geo--square {
  border-color: rgba(28, 28, 28, 0.06);
}

[data-theme="light"] .geo--square-lg {
  border-color: rgba(0, 184, 148, 0.06);
}

[data-theme="light"] .geo--dots-h {
  background: repeating-linear-gradient(
    to right,
    rgba(214, 48, 49, 0.10) 0px,
    rgba(214, 48, 49, 0.10) 4px,
    transparent 4px,
    transparent 12px
  );
}

[data-theme="light"] .geo--dots-v {
  background: repeating-linear-gradient(
    to bottom,
    rgba(9, 132, 227, 0.08) 0px,
    rgba(9, 132, 227, 0.08) 4px,
    transparent 4px,
    transparent 12px
  );
}

[data-theme="light"] .geo--bracket {
  border-top-color: rgba(28, 28, 28, 0.07);
  border-left-color: rgba(28, 28, 28, 0.07);
}

[data-theme="light"] .geo--bracket-br {
  border-bottom-color: rgba(28, 28, 28, 0.07);
  border-right-color: rgba(28, 28, 28, 0.07);
}

[data-theme="light"] .geo--pixel {
  background: rgba(214, 48, 49, 0.14);
}

[data-theme="light"] .geo--pixel-cyan {
  background: rgba(9, 132, 227, 0.12);
}

[data-theme="light"] .geo--pixel-lime {
  background: rgba(0, 184, 148, 0.12);
}

[data-theme="light"] .geo--triangle {
  border-bottom-color: rgba(225, 112, 85, 0.07);
}

/* --- Reduced Motion: hide animated layers --- */
@media (prefers-reduced-motion: reduce) {
  .pixel-particles {
    display: none;
  }
}