:root {
        --gme-accent: #A3238E;
        --gme-accent-rgb: 163, 35, 142;
        --gme-motion-fast: 180ms;
        --gme-motion-normal: 420ms;
        --gme-motion-slow: 900ms;
}

/* Positioning context required by the ::before/::after driven effects. */
.gme-border-flow,
.gme-glow-hover,
.gme-light-sweep,
.gme-tilt-soft,
.gme-magnetic {
        position: relative;
}

/* ------------------------------------------------------------------ *
 * Border flow — animated conic gradient trace
 * ------------------------------------------------------------------ */
.gme-border-flow {
        isolation: isolate;
        border: 1px solid transparent;
        background-clip: padding-box;
}
.gme-border-flow::before {
        content: "";
        position: absolute;
        inset: -1px;
        z-index: -1;
        border-radius: inherit;
        padding: 1px;
        background: conic-gradient(
                from var(--gme-angle, 0deg),
                transparent 0 68%,
                var(--gme-accent) 78%,
                rgba(var(--gme-accent-rgb), 0.12) 88%,
                transparent 100%
        );
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        animation: gme-border-rotate 4s linear infinite;
}
@keyframes gme-border-rotate {
        to { --gme-angle: 360deg; }
}
@property --gme-angle {
        syntax: "<angle>";
        inherits: false;
        initial-value: 0deg;
}

/* ------------------------------------------------------------------ *
 * Glow hover
 * ------------------------------------------------------------------ */
.gme-glow-hover {
        transition: box-shadow var(--gme-motion-normal) ease, transform var(--gme-motion-normal) ease;
}
.gme-glow-hover:hover {
        box-shadow:
                0 0 0 1px rgba(var(--gme-accent-rgb), 0.35),
                0 0 28px rgba(var(--gme-accent-rgb), 0.16);
}

/* ------------------------------------------------------------------ *
 * Light sweep (mirrored automatically in RTL documents)
 * ------------------------------------------------------------------ */
.gme-light-sweep {
        overflow: hidden;
        isolation: isolate;
}
.gme-light-sweep::after {
        content: "";
        position: absolute;
        inset: -60% auto -60% -45%;
        width: 28%;
        transform: rotate(22deg) translateX(-180%);
        background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.18),
                rgba(var(--gme-accent-rgb), 0.22),
                transparent
        );
        pointer-events: none;
        transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gme-light-sweep:hover::after {
        transform: rotate(22deg) translateX(650%);
}
[dir="rtl"] .gme-light-sweep::after {
        inset: -60% -45% -60% auto;
        transform: rotate(-22deg) translateX(180%);
}
[dir="rtl"] .gme-light-sweep:hover::after {
        transform: rotate(-22deg) translateX(-650%);
}

/* ------------------------------------------------------------------ *
 * Float — uses the individual `translate` property so it composes with
 * pointer transforms instead of overwriting them.
 * ------------------------------------------------------------------ */
.gme-float {
        animation: gme-float var(--gme-float-duration, 5.5s) ease-in-out infinite;
}
@keyframes gme-float {
        0%, 100% { translate: 0 0; }
        50% { translate: 0 -9px; }
}

/* ------------------------------------------------------------------ *
 * Scroll reveal — hidden state only applies once the JS engine has
 * confirmed it is running (`.gme-js`), so content can never be lost
 * when JavaScript is unavailable or fails to load.
 * ------------------------------------------------------------------ */
.gme-js .gme-reveal-up {
        opacity: 0;
        translate: 0 24px;
        transition:
                opacity 700ms ease,
                translate 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
        transition-delay: var(--gme-reveal-delay, 0ms);
}
.gme-js .gme-reveal-up.gme-is-visible {
        opacity: 1;
        translate: 0 0;
}

/* ------------------------------------------------------------------ *
 * Particles
 * ------------------------------------------------------------------ */
.gme-particles-network {
        position: relative;
        overflow: hidden;
        isolation: isolate;
}
.gme-particles-network > .gme-particles-canvas {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
}
.gme-particles-network > .gme-particles-content {
        position: relative;
        z-index: 1;
}

/* ------------------------------------------------------------------ *
 * Premium backgrounds — the electromagnetic field (gme-field), the
 * plugin's signature background. Renders into a full-bleed canvas;
 * existing children are wrapped into .gme-fx-content so they stay
 * above the effect.
 * ------------------------------------------------------------------ */
.gme-field {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        background: #05060a;
}
.gme-fx-canvas {
        position: absolute;
        inset: 0;
        z-index: 0;
        display: block;
        width: 100%;
        height: 100%;
        pointer-events: none;
}
.gme-fx-content {
        position: relative;
        z-index: 1;
}

/*
 * Overlay mount (v0.4.0 — Elementor integration): the canvas is injected
 * without re-parenting the children, so Elementor layouts stay byte-identical.
 * The host keeps isolation:isolate, therefore the negative z-index stays
 * inside the section's own stacking context: canvas paints above the section
 * background but below every child. Overflow stays visible so dropdown menus
 * inside the section are never clipped by the effect.
 */
.gme-field[data-gme-mount="overlay"] {
        overflow: visible;
}
.gme-field[data-gme-mount="overlay"] > .gme-fx-canvas {
        z-index: -1;
}
.gme-motion-reduced .gme-fx-canvas,
.gme-motion-reduced .gme-particles-canvas {
        display: none;
}

/* ------------------------------------------------------------------ *
 * Pointer interactions — CSS composes the final transform from custom
 * properties written by JS. Magnetic and tilt stack on the same element,
 * and neither overwrites transforms set by themes or Elementor wrappers.
 * ------------------------------------------------------------------ */
.gme-magnetic {
        transform: translate3d(var(--gme-mx, 0px), var(--gme-my, 0px), 0);
}
.gme-tilt-soft {
        transform:
                perspective(900px)
                translate3d(var(--gme-mx, 0px), var(--gme-my, 0px), 0)
                rotateX(var(--gme-rx, 0deg))
                rotateY(var(--gme-ry, 0deg));
}
.gme-is-interacting {
        will-change: transform;
}
.gme-tilt-soft,
.gme-magnetic {
        backface-visibility: hidden;
}

/* ------------------------------------------------------------------ *
 * Pointer spotlight (v0.8.0) — neon border + button hover glow.
 * JS publishes the pointer position as --gme-bx / --gme-by; every
 * visual is pure CSS, so there is no canvas and no paint loop.
 * ------------------------------------------------------------------ */
.gme-border-neon,
.gme-glow-follow {
        position: relative;
        isolation: isolate;
}

/* Neon border — the light ring (above the background, below content). */
.gme-border-neon::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: var(--gme-neon-width, 2px);
        background: radial-gradient(
                var(--gme-neon-radius, 140px) circle at var(--gme-bx, 50%) var(--gme-by, 50%),
                var(--gme-neon-color, var(--gme-accent, #A3238E)),
                transparent 72%
        );
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        opacity: var(--gme-neon-opacity, 0.85);
        pointer-events: none;
}

/* Neon halo — spills past the box (above the background, below content). */
.gme-border-neon::after {
        content: "";
        position: absolute;
        inset: -10px;
        z-index: -1;
        border-radius: inherit;
        background: radial-gradient(
                calc(var(--gme-neon-radius, 140px) * 1.6) circle at var(--gme-bx, 50%) var(--gme-by, 50%),
                var(--gme-neon-color, var(--gme-accent, #A3238E)),
                transparent 70%
        );
        filter: blur(16px);
        opacity: calc(var(--gme-neon-opacity, 0.85) * 0.55);
        pointer-events: none;
}

/* Idle sweep — while the pointer is away, a soft light circles the border. */
.gme-border-neon.gme-neon-idle::before {
        background: conic-gradient(
                from var(--gme-neon-angle, 0deg),
                transparent 0 62%,
                var(--gme-neon-color, var(--gme-accent, #A3238E)) 78%,
                transparent 92%
        );
        animation: gme-neon-sweep 5s linear infinite;
        opacity: calc(var(--gme-neon-opacity, 0.85) * 0.55);
}
/* Idle switch off (data-gme-neon-idle="off", emitted by PHP): JS skips the
   idle class; this rule hard-disables the sweep as belt-and-braces. */
.gme-border-neon[data-gme-neon-idle="off"].gme-neon-idle::before {
        animation: none;
}
@property --gme-neon-angle {
        syntax: "<angle>";
        inherits: false;
        initial-value: 0deg;
}
@keyframes gme-neon-sweep {
        to { --gme-neon-angle: 360deg; }
}

/* Button hover glow — a light that follows the cursor while hovering. */
.gme-glow-follow::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(
                var(--gme-glow-radius, 90px) circle at var(--gme-bx, 50%) var(--gme-by, 50%),
                var(--gme-glow-color, rgba(var(--gme-accent-rgb), 0.85)),
                transparent 72%
        );
        opacity: 0;
        transition: opacity var(--gme-motion-normal, 420ms) ease;
        pointer-events: none;
}
.gme-glow-follow:hover::after {
        opacity: var(--gme-glow-opacity, 0.45);
}

/* ------------------------------------------------------------------ *
 * Reduced motion — full opt-out for every module.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
        .gme-border-flow::before,
        .gme-float {
                animation: none !important;
        }
        .gme-border-neon::before {
                animation: none !important;
        }
        .gme-js .gme-reveal-up {
                opacity: 1 !important;
                translate: none !important;
                transition: none !important;
        }
        .gme-light-sweep::after {
                display: none !important;
        }
        .gme-fx-canvas {
                display: none !important;
        }
        .gme-glow-hover,
        .gme-tilt-soft,
        .gme-magnetic {
                transition: none !important;
                transform: none !important;
        }
        .gme-glow-follow::after {
                transition: none !important;
        }
        .gme-is-interacting {
                will-change: auto !important;
        }
}