/* =========================================
   Pressure Section — Premium Background (DIV layer)
   File: assets/css/sections/pressure-bg.css
   Scope: .pressure-section only
========================================= */

.pressure-section {
  position: relative;
}

/* Background layer lives inside section, behind content */
.pressure-section .pressure-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* Test palette (temporary) */
  --p-energy-1: rgba(25, 0, 255, 0.74);   /* blue */
  --p-energy-2: rgba(0, 180, 69, 0.753);  /* teal */
  --p-energy-3: rgba(10, 14, 20, 0.06);   /* neutral shadow */
  --p-dot: rgba(3, 3, 24, 0.842);
  --p-dot-opacity: 0.40;

  background:
    /* right-side energy field */
    radial-gradient(820px 520px at 86% 18%, var(--p-energy-1), transparent 52%),
    radial-gradient(760px 520px at 92% 52%, var(--p-energy-2), transparent 54%),
    radial-gradient(980px 680px at 40% 92%, var(--p-energy-3), transparent 50%),

    /* dotted texture (subtle) */
    radial-gradient(var(--p-dot) 1px, transparent 1px);

  background-size:
    auto,
    auto,
    auto,
    18px 18px;

  background-position:
    0 0,
    0 0,
    0 0,
    0 0;

  opacity: 1;

  /* mask so dots/energy are concentrated near the indicator side */
  mask-image: radial-gradient(900px 520px at 74% 24%, rgba(0,0,0,0.90), transparent 72%);
  -webkit-mask-image: radial-gradient(900px 520px at 74% 24%, rgba(0,0,0,0.90), transparent 72%);
}

/* Ensure content stays above the background */
.pressure-section .pressure-inner {
  position: relative;
  z-index: 1;
}

/* Optional: give indicator card a slightly stronger “energy kiss” */
.pressure-section .pressure-indicator-card {
  background:
    linear-gradient(180deg, var(--p-surface), rgba(255, 255, 255, 0.88)),
    radial-gradient(520px 260px at 92% 0%, rgba(0, 90, 255, 0.12), transparent 60%);
}

/* Reduce intensity on smaller screens */
@media (max-width: 980px) {
  .pressure-section .pressure-bg {
    --p-energy-1: rgba(0, 90, 255, 0.10);
    --p-energy-2: rgba(0, 180, 140, 0.08);
    --p-dot-opacity: 0.28;

    mask-image: radial-gradient(820px 460px at 62% 20%, rgba(0,0,0,0.85), transparent 72%);
    -webkit-mask-image: radial-gradient(820px 460px at 62% 20%, rgba(0,0,0,0.85), transparent 72%);
  }
}