/* ============================================================
   PassBy — PixelBlast фоны (React Bits):
   • .hero-blast    — фон hero-секции (вместо .hero-grid)
   • .pricing-blast — фон секции тарифов; цвет пикселей следует
     за активным тарифом (см. pixel-fx.js)
   Компонентный CSS React Bits + стили слоёв интеграции.
   ============================================================ */

/* ── Компонентный CSS (PixelBlast/PixelCard, vendored) ───── */
.pixel-blast-container{position:relative;overflow:hidden;width:100%;height:100%}.pixel-canvas{display:block;width:100%;height:100%}.pixel-card{position:relative;overflow:hidden;display:grid;aspect-ratio:4/5;border:1px solid var(--pixel-card-border,#27272a);background:var(--pixel-card-background,transparent);isolation:isolate;user-select:none;border-radius:25px;place-items: center;width:300px;height:400px;transition:border-color .2s cubic-bezier(.5,1,.89,1)}.pixel-card:before{content:"";position:absolute;aspect-ratio:1;background:radial-gradient(circle,var(--pixel-card-active-color,#09090b),transparent 85%);opacity:0;margin:auto;transition:opacity .8s cubic-bezier(.5,1,.89,1);inset:0}.pixel-card:hover:before,.pixel-card:focus-within:before{opacity:1}

/* ── HERO: слой PixelBlast ───────────────────────────────── */
.hero-blast {
  position: absolute;
  inset: 0;
  z-index: -1; /* та же схема слоёв, что у .hero-grid на других страницах */
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(62% 52% at 50% 38%, black, transparent 78%);
  mask-image: radial-gradient(62% 52% at 50% 38%, black, transparent 78%);
  transition: opacity .5s ease;
  pointer-events: auto; /* клики по hero дают ripple-волны */
}
/* в светлой теме эффект тише (цвет пикселей меняется в JS) */
[data-theme="light"] .hero-blast { opacity: 0.28; }
@media (max-width: 760px) {
  .hero-blast { opacity: 0.38; }
  [data-theme="light"] .hero-blast { opacity: 0.22; }
}

/* ── PRICING: PixelBlast как фон секции ──────────────────── */
/* Точка монтирования #price-pixel-root стоит первым ребёнком
   <section id="pricing"> и тянется на всю секцию; консоль тарифов
   лежит поверх со своим фоном, пиксели видны вокруг неё. */
.pricing-blast {
  position: absolute;
  inset: 0;
  z-index: -1; /* та же схема слоёв, что у .hero-blast */
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(62% 55% at 50% 45%, black, transparent 80%);
  mask-image: radial-gradient(62% 55% at 50% 45%, black, transparent 80%);
  transition: opacity .5s ease;
  pointer-events: auto; /* ховер и клики по фону секции дают ripple-волны */
}
/* в светлой теме эффект тише (цвет пикселей меняется в JS) */
[data-theme="light"] .pricing-blast { opacity: 0.28; }
@media (max-width: 760px) {
  .pricing-blast { opacity: 0.38; }
  [data-theme="light"] .pricing-blast { opacity: 0.22; }
}