.elementor-widget-viral_text_box {
    position: relative;
    z-index: 1;
    overflow: visible;
}

@property --viral-runner-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.viral-tb {
    --viral-tb-accent: #00ffe1;
    --viral-tb-glow-size: 30px;
    --viral-tb-glow-strength: 55;
    --viral-tb-speed: 3.2s;
    --viral-tb-lift: 6px;
    --viral-runner-angle: 0deg;
    --viral-runner-duration: 3.2s;
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    isolation: isolate;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}

.viral-tb::before,
.viral-tb::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.viral-tb::before {
    inset: -1px;
    z-index: -2;
    background:
        radial-gradient(circle at 12% 20%, rgba(0,255,225,.20), transparent 30%),
        radial-gradient(circle at 88% 78%, rgba(0,255,225,.14), transparent 34%);
    filter: blur(var(--viral-tb-glow-size));
    opacity: calc(var(--viral-tb-glow-strength) / 100);
    transform: scale(.98);
    transition: opacity .35s ease, transform .35s ease;
}

/* Finom, statikus keretfény. A mozgó fény külön rétegen fut. */
.viral-tb::after {
    inset: 0;
    z-index: 2;
    padding: 1px;
    background: linear-gradient(110deg, rgba(255,255,255,.05), transparent 25%, rgba(0,255,225,.08) 70%, transparent);
    opacity: .55;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/*
 * Futó fény a cián kereten.
 * A conic-gradientből csak a perem látszik, ezért a világosabb cián
 * ténylegesen végigjárja a box teljes kerületét, a lekerekített sarkokat is.
 */
.viral-tb__runner {
    position: absolute;
    inset: -2px;
    z-index: 4;
    padding: 2px;
    pointer-events: none;
    opacity: .98;

    background: conic-gradient(
        from var(--viral-runner-angle),
        transparent 0deg,
        transparent 278deg,
        rgba(0,255,225,0) 292deg,
        rgba(103,255,240,.34) 304deg,
        rgba(183,255,248,.82) 316deg,
        #e2fffc 326deg,
        #8efff3 334deg,
        rgba(0,255,225,.72) 343deg,
        rgba(0,255,225,0) 352deg,
        transparent 360deg
    );

    filter:
        drop-shadow(0 0 4px rgba(174,255,248,.95))
        drop-shadow(0 0 10px rgba(0,255,225,.72))
        drop-shadow(0 0 18px rgba(0,255,225,.34));

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.viral-tb.is-animated .viral-tb__runner {
    animation-name: viralTbBorderRun;
    animation-duration: var(--viral-runner-duration, var(--viral-tb-speed));
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

.viral-tb.is-animated .viral-tb__runner.is-reverse {
    animation-direction: reverse;
}

.viral-tb__inner {
    position: relative;
    overflow: hidden;
    background-color: #050909;
    border-style: solid;
    border-color: rgba(0,255,225,.62);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        inset 0 0 60px rgba(0,255,225,.025),
        0 18px 70px rgba(0,0,0,.42);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.viral-tb__inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    width: 28%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--viral-tb-accent), transparent);
    box-shadow: 0 0 14px var(--viral-tb-accent);
    opacity: .95;
}

.viral-tb__inner::after {
    content: "";
    position: absolute;
    right: -90px;
    bottom: -110px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,255,225,.12) 0%, rgba(0,255,225,.04) 34%, transparent 68%);
    filter: blur(5px);
    pointer-events: none;
}

.viral-tb__text {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #fff;
    text-wrap: pretty;
    text-shadow: 0 1px 18px rgba(0,0,0,.30);
}

.viral-tb:hover {
    transform: translateY(calc(var(--viral-tb-lift) * -1));
}

.viral-tb:hover::before {
    opacity: min(1, calc((var(--viral-tb-glow-strength) + 18) / 100));
    transform: scale(1.015);
}

@keyframes viralTbBorderRun {
    from { --viral-runner-angle: 0deg; }
    to   { --viral-runner-angle: 360deg; }
}

@media (max-width: 767px) {
    .viral-tb::before {
        filter: blur(calc(var(--viral-tb-glow-size) * .72));
    }

    .viral-tb__inner::after {
        width: 220px;
        height: 220px;
        right: -80px;
        bottom: -85px;
    }

    .viral-tb__runner {
        inset: -1.5px;
        padding: 1.5px;
        filter:
            drop-shadow(0 0 4px rgba(174,255,248,.90))
            drop-shadow(0 0 9px rgba(0,255,225,.62));
    }
}

@media (prefers-reduced-motion: reduce) {
    .viral-tb,
    .viral-tb::before,
    .viral-tb::after,
    .viral-tb__runner {
        animation: none !important;
        transition: none !important;
    }
}