/* ============================================================
   Sifency Light Beam Widget — Styles v1.2
   ============================================================

   DOM structure produced by the widget:
   ┌─ .elementor-widget-sifency-light-beam  (widget el, stays in column)
   │  └─ .elementor-widget-container
   │     └─ <style id="slb-style-{id}">    (scoped CSS vars — stays here)
   │        (no .slb-wrapper here after JS init — it is moved to section)
   │
   ┌─ .elementor-section / .e-con          (section — reparent target)
   │  └─ #slb-{id}.slb-wrapper            (moved here by JS, position:absolute)
   │     └─ .slb-beam                      (rotated)
   │        └─ .slb-beam-inner             (trapezoid)

   WHY SCOPED <style> INSTEAD OF Elementor 'selectors':
   Elementor writes 'selectors' as inline styles on {{WRAPPER}}.
   Once JS reparents .slb-wrapper out of {{WRAPPER}}, any rule like
   {{WRAPPER}} .slb-wrapper or {{WRAPPER}} .slb-beam stops matching.
   The scoped <style id="slb-style-{id}"> targets #slb-{widget_id}
   which works regardless of DOM position.

   CSS Custom Properties (all set on .slb-wrapper via inline <style>):
     --slb-color         : beam fill colour           default: #FF4500
     --slb-start-width   : tip width in px            default: 0px
     --slb-end-width     : spread width in px         default: 400px
     --slb-length        : beam reach in px           default: 800px
     --slb-base-angle    : resting rotation in deg    default: 135deg
     --slb-anchor-x      : fine-tune origin X %       default: 0%
     --slb-anchor-y      : fine-tune origin Y %       default: 0%
   ============================================================ */


/* ─── 1. Widget container — zero footprint ──────────────────
 *
 * The widget must not occupy any layout space. The .slb-wrapper
 * is reparented into the section by JS, so the column doesn't
 * need to know about the beam at all.
 */
.elementor-widget-sifency-light-beam {
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    flex-shrink: 0 !important;
}

.elementor-widget-sifency-light-beam>.elementor-widget-container {
    position: relative !important;
    width: 0 !important;
    height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    pointer-events: none !important;
}


/* ─── 2. CSS variable defaults on .slb-wrapper ──────────────
 *
 * These are FALLBACK defaults only.
 * Real values are written by PHP via the scoped inline <style>.
 * They are placed here so the beam renders even if the inline
 * style tag fails to load (e.g. during first paint in editor).
 */
.slb-wrapper {
    --slb-color: #fff;
    --slb-start-width: 0px;
    --slb-end-width: 400px;
    --slb-length: 800px;
    --slb-base-angle: 135deg;
    --slb-anchor-x: 0%;
    --slb-anchor-y: 0%;

    /* Positioning is applied inline by JS */
    overflow: visible;
    /* beam MUST overflow — never clip here */
    pointer-events: none;
    z-index: 0;
}


/* ─── 3. Beam container ──────────────────────────────────────
 *
 */
.slb-beam {
    position: absolute;
    width: 2000px;
    height: 2000px;
    transform-origin: 0px 0px;
    will-change: transform;
    overflow: visible;
    pointer-events: none;
}


/* ─── 4. Anchor point placement ─────────────────────────────
 *
 * Moves .slb-beam so its top-left corner lands at the chosen
 * (= the top-left corner = the beam tip).
 */
.slb-anchor-top-left .slb-beam {
    top: calc(0% + var(--slb-anchor-y));
    left: calc(0% + var(--slb-anchor-x));
}

.slb-anchor-top-center .slb-beam {
    top: calc(0% + var(--slb-anchor-y));
    left: calc(50% + var(--slb-anchor-x));
}

.slb-anchor-top-right .slb-beam {
    top: calc(0% + var(--slb-anchor-y));
    left: calc(100% + var(--slb-anchor-x));
}

.slb-anchor-middle-left .slb-beam {
    top: calc(50% + var(--slb-anchor-y));
    left: calc(0% + var(--slb-anchor-x));
}

.slb-anchor-middle-right .slb-beam {
    top: calc(50% + var(--slb-anchor-y));
    left: calc(100% + var(--slb-anchor-x));
}

.slb-anchor-bottom-left .slb-beam {
    top: calc(100% + var(--slb-anchor-y));
    left: calc(0% + var(--slb-anchor-x));
}

.slb-anchor-bottom-center .slb-beam {
    top: calc(100% + var(--slb-anchor-y));
    left: calc(50% + var(--slb-anchor-x));
}

.slb-anchor-bottom-right .slb-beam {
    top: calc(100% + var(--slb-anchor-y));
    left: calc(100% + var(--slb-anchor-x));
}


/* ─── 5. Beam inner — the visible trapezoid ─────────────────
 *
 *   - Tip at (0,0) of .slb-beam
 *   - Beam extends DOWN (positive Y) toward the far spread
 *
 * clip-path trapezoid:
 *   top-left  → (50% - start/2,  0%)   ← narrow tip
 *   top-right → (50% + start/2,  0%)
 *   bot-right → (100%,          100%)   ← full end-width
 *   bot-left  → (0%,            100%)
 *
 * Width of element = end-width so % clip-path coords work correctly.
 * Translated left by (start/2 - end/2) to centre the trapezoid on tip.
 *
 * NOTE: `background` and `mask-image` / `-webkit-mask-image` are written
 * by PHP via an inline <style> scoped to #slb-{id} so every widget
 * instance has independent controllable values. The defaults below are
 * FALLBACKS only, shown before the inline style tag renders.
 */
.slb-beam-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--slb-end-width);
    height: var(--slb-length);
    transform: translateX(calc(var(--slb-start-width) / 2 - var(--slb-end-width) / 2));

    /* Fallback fill — overridden per-instance by PHP inline <style> */
    background: #fff;

    clip-path: polygon(calc(50% - var(--slb-start-width) / 2) 0%,
            calc(50% + var(--slb-start-width) / 2) 0%,
            100% 100%,
            0% 100%);

    pointer-events: none;
}


/* ─── 6. Blanket pointer-events off ─────────────────────────── */
.slb-beam,
.slb-beam-inner {
    pointer-events: none;
}