/* ============================================================
   BEINC — Section: Brand Element Divider
   Single inline SVG: full-width horizontal bar + animated
   5-bar cluster centered, both wrapped in one <g> so the
   feMorphology filter produces a single unified 0.5px grey
   stroke around the whole silhouette.
   Depends on: global.css, components/icons.css (.brand-bar)
   ============================================================ */

.sbed-section {
    width: 100%;
    background: var(--color-black2);
    padding: var(--pad-y) 0;   /* no horizontal padding — SVG spans edge-to-edge */
    display: block;
    /* Earlier sections (hero-wrapper, mvp-pinned) use position: sticky
       and stay in the stacking context as the user scrolls past. Without
       a stacking context here, the sticky hero peeks through this strip.
       relative + z-index lifts the divider above any sticky from above. */
    position: relative;
    z-index: 1;
}

/* Responsive SVG height.
   Cluster rendered width ≈ height × 2.165, so at these heights
   the cluster spans ~175px (mobile) → ~370px (wide desktop).
   translateZ pins the filter to a stable GPU layer — fixes
   sub-pixel trails during the breathing animation on mobile. */
.sbed-svg {
    display: block;
    width: 100%;
    height: clamp(80px, 12vw, 170px);
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Fill of every bar in the cluster (+ the full-width rect).
   Stroke comes from the SVG feMorphology filter on the parent <g>. */
.sbed-section .brand-bar {
    fill: var(--color-black);
}

/* Outline stroke colour — driven by --color-grid token via CSS
   so the SVG <feFlood> stays in sync with global theming. */
.sbed-section .sbed-svg feFlood {
    flood-color: var(--color-grid);
}

/* Reduced motion — freeze the breathing animation */
@media (prefers-reduced-motion: reduce) {
    .sbed-section .brand-bar {
        animation: none !important;
    }
}