/**
 * BG-Effects Pro — Frontend Styles
 * Version: 2.4.0
 *
 * ARCHITECTURE
 * ─────────────────────────────────────────────────────────────────────────────
 * bg-effect-*  → gradient / pattern / blob effects rendered via ::before
 * bg-glow-*    → blurry gradient blobs injected as real <div> via PHP at
 *                wp_footer, then repositioned by inline JS
 *
 * STACKING STRATEGY
 * ─────────────────────────────────────────────────────────────────────────────
 * The ::before pseudo-element carries the visual effect and must sit behind
 * all page content. However, z-index: -1 inside a position: relative parent
 * can fall behind the parent's own background — hiding the effect entirely
 * when a page builder (Kadence, Elementor, etc.) sets a background-color on
 * an intermediate wrapper child.
 *
 * Resolution: every direct child wrapper is forced to background: transparent
 * so the ::before pseudo-element bleeds through. A z-index: 0 stacking
 * baseline on ::before, combined with z-index: 1 on content children, keeps
 * everything ordered without relying on negative z-index.
 *
 * SPECIFICITY AND SOURCE ORDER
 * ─────────────────────────────────────────────────────────────────────────────
 * This file loads early via wp_enqueue_scripts. The per-class PHP-generated
 * rules are output at wp_head priority 9999 — after all page-builder style
 * blocks — giving them source-order advantage when specificity is equal.
 * The rules here serve as the base layer.
 *
 * KADENCE ROW-LEVEL APPLICATION
 * ─────────────────────────────────────────────────────────────────────────────
 * When the effect class is added directly to a Kadence row block
 * (.kb-row-layout-wrap), Kadence outputs its own background-color on the
 * inner .kt-row-column-wrap via an inline style-block at high priority.
 * We defeat that with a doubled-specificity selector (element + class) and
 * !important, applied at the late wp_head priority so source order is on our
 * side. See the per-class PHP output in bg-effects.php.
 *
 * SELECTOR ISOLATION
 * ─────────────────────────────────────────────────────────────────────────────
 * Every builder-compatibility rule uses its own block rather than a
 * comma-separated list. In standard CSS a single invalid selector in a
 * comma list silently discards the entire rule; isolated blocks ensure one
 * unknown class only drops that one line.
 */

/* ── Animations ──────────────────────────────────────────────────────────── */

@keyframes bge-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes bge-neon-rotate {
    0%   { --neon-angle: 0deg; }
    100% { --neon-angle: 360deg; }
}

@keyframes bge-neon-pulse {
    0%, 100% { opacity: 0.6; filter: blur(20px); }
    50%       { opacity: 1;   filter: blur(30px); }
}

@property --neon-angle {
    syntax: '<angle>';
    initial-value: 45deg;
    inherits: false;
}

/* ── bg-effect-* base rules ─────────────────────────────────────────────── */

[class*="bg-effect-"] {
    position: relative !important;
    overflow: hidden !important;
}

[class*="bg-effect-"]::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

[class*="bg-effect-"] > * {
    position: relative !important;
    z-index: 1 !important;
}

/* ── Kadence Blocks — inner-wrapper transparency ─────────────────────────── */
/*
 * Kadence outputs background-color on .kt-row-column-wrap via an inline
 * style-block. The doubled-specificity selector (element.class) and
 * !important are required to win that specificity battle when the effect
 * class lives on the outer .kb-row-layout-wrap.
 */

[class*="bg-effect-"] > .kt-row-column-wrap,
.kb-row-layout-wrap[class*="bg-effect-"] > .kt-row-column-wrap {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}

[class*="bg-effect-"] > .kt-row-column-wrap > .kt-inside-inner-col,
.kb-row-layout-wrap[class*="bg-effect-"] > .kt-row-column-wrap > .kt-inside-inner-col {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}

[class*="bg-effect-"] > .kt-inside-inner-col {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Kadence Column block — when effect class is on .wp-block-kadence-column
 * Kadence injects background-color on the inner .kt-inside-inner-col.
 * This clears it so ::before on the column element is visible.
 */
.wp-block-kadence-column[class*="bg-effect-"] > .kt-inside-inner-col {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}

.wp-block-kadence-column[class*="bg-effect-"] > .kt-inside-inner-col > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Kadence Row → Column → kt-inside-inner-col (3 levels deep).
 * When the effect class is on the outer row (.kb-row-layout-wrap),
 * Kadence injects background-color 3 levels deep on .kt-inside-inner-col.
 * These selectors reach that level and clear the background.
 */
[class*="bg-effect-"] > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col,
.kb-row-layout-wrap[class*="bg-effect-"] > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col,
div.kb-row-layout-wrap[class*="bg-effect-"] > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col,
div.wp-block-kadence-rowlayout[class*="bg-effect-"] > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ── Elementor — inner-wrapper transparency ──────────────────────────────── */

[class*="bg-effect-"] > .elementor-container {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-effect-"] > .elementor-row {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-effect-"] > .elementor-column-wrap {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-effect-"] > .elementor-widget-wrap {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-effect-"] > .e-con-inner {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ── Gutenberg native blocks — inner-wrapper transparency ────────────────── */

[class*="bg-effect-"] > .wp-block-group__inner-container {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-effect-"] > .wp-block-columns {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-effect-"] > .wp-block-column {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-effect-"] > .wp-block-cover__inner-container {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ── GeneratePress — inner-wrapper transparency ──────────────────────────── */

[class*="bg-effect-"] > .inside-section {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-effect-"] > .grid-container {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ── Divi — inner-wrapper transparency ───────────────────────────────────── */

[class*="bg-effect-"] > .et_pb_row {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-effect-"] > .et_pb_row_inner {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-effect-"] > .et-pb-columns {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-effect-"] > .et_pb_column {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-effect-"] > .et_pb_column_inner {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ── Oxygen Builder — inner-wrapper transparency ─────────────────────────── */

[class*="bg-effect-"] > .ct-section-inner {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-effect-"] > .ct-container {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ── Bricks Builder — inner-wrapper transparency ─────────────────────────── */

[class*="bg-effect-"] > .brxe-container {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-effect-"] > .brxe-block {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ── Generic / Flatsome — inner-wrapper transparency ─────────────────────── */

[class*="bg-effect-"] > .row {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-effect-"] > .container {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-effect-"] > .container-fluid {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-effect-"] > .inner-container {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-effect-"] > .section-inner {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-effect-"] > .wrapper {
    background: transparent !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ── bg-glow-* (blurry gradient — DOM injection) ─────────────────────────── */

[class*="bg-glow-"] {
    position: relative !important;
    overflow: visible !important;
}

[class*="bg-glow-"] > .kt-row-column-wrap {
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-glow-"] > .kt-inside-inner-col {
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-glow-"] > .elementor-container {
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-glow-"] > .e-con-inner {
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-glow-"] > .wp-block-group__inner-container {
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-glow-"] > .inside-section {
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-glow-"] > .et_pb_row {
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-glow-"] > .ct-section-inner {
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-glow-"] > .brxe-container {
    position: relative !important;
    z-index: 1 !important;
}
[class*="bg-glow-"] > .container {
    position: relative !important;
    z-index: 1 !important;
}

/* ── Blob and Glass component base styles ────────────────────────────────── */

.bge-blob {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    display: block;
}

.bge-glass {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    display: block;
}

/* ── Admin-only preview elements — hidden on frontend ────────────────────── */

.glow-preview-layers-outside,
.glow-preview-inset,
.glow-preview-outside,
[class*="glow-preview-"] {
    display: none;
}