/* ============================================================
   BEINC — Services Fan (Section CSS)
   Two label-fans that flank the dashed nav guides on the
   services hero — left fan hinged at viewport-left, right fan
   hinged at viewport-right. Vertically centered in the area
   below the nav bar. SVGs are injected at runtime by
   services-fan.js, so all visual styling lives here.
   Depends on: global.css, services-hero.css
   ============================================================ */

/* Outer wrapper — pins each fan to its side gutter and vertically
   centers the stage within the section's "below-nav" area. */
.services-hero__fan {
    position: absolute;
    top: var(--nav-section-height);
    bottom: 0;
    display: flex;
    align-items: center;
    pointer-events: none;       /* shy effect uses window mousemove, not hits */
    /* Sit above the dashed guide lines (--z-indicator) so the fan
       reads as the primary visual when it overlaps the verticals. */
    z-index: calc(var(--z-indicator) + 1);
}
.services-hero__fan--left  { left: 0; }
.services-hero__fan--right { right: 0; }

/* Aspect-locked stage — width drives sizing, height follows the
   SVG's 330:265 viewBox. Width is clamped per breakpoint. */
.services-hero__fan-stage {
    position: relative;
    width: clamp(320px, 32vw, 480px);
    aspect-ratio: 330 / 265;
}

/* Injected SVG fills the stage and is allowed to overflow so
   labels can swing past the SVG's bbox without being clipped. */
.services-hero__fan-stage .sfl-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Each label group — rotation origin is set per-fan via JS
   (svgOrigin), no transform-origin needed here. */
.services-hero__fan-stage .sfl-label {
    will-change: transform, opacity;
}

/* Replacement <rect> pill (clean dashed stroke, replaces Figma's
   baked outlined-dash geometry). */
.services-hero__fan-stage .sfl-pill {
    fill: var(--color-black2);
    stroke: var(--color-grid);
    stroke-width: 1;
    stroke-dasharray: 2 2;
    vector-effect: non-scaling-stroke;
}


/* ── TABLET (768–1023) ──
   Nav contracts to 50vw → side gutter is ~25vw. Slightly larger
   fan since there's more room. */
@media (max-width: 1023px) {
    .services-hero__fan-stage {
        width: clamp(280px, 36vw, 400px);
    }
}

/* ── MOBILE (≤767) ──
   Nav is 80vw so the side gutter is only ~10vw — too narrow to
   fit the fan. Per design brief, fans are allowed to grow and
   overlap the dashed guide lines on mobile. */
@media (max-width: 767px) {
    .services-hero__fan-stage {
        width: 50vw;
    }
}