/*
 * DGxOne live top-bar wave
 *
 * Isolated presentation only.
 * Must not control workspace, conversation, or sidebar layout.
 */

.dgx-live-wave {
    position: fixed;
    top: 13px;
    left: 50%;
    z-index: 1200;

    width: clamp(360px, 43vw, 760px);
    height: 43px;

    transform: translateX(-50%);
    overflow: visible;
    pointer-events: none;
    user-select: none;
}

.dgx-live-wave::before {
    content: "";
    position: absolute;
    inset: 11px 7% 8px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(87, 199, 255, 0.13),
            rgba(87, 199, 255, 0) 69%
        );

    filter: blur(8px);
    opacity: 0.8;
    animation: dgx-live-wave-breathe 3.4s ease-in-out infinite;
}

.dgx-live-wave-svg {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.dgx-live-wave-track {
    transform-origin: center;
    animation: dgx-live-wave-energy 3.2s ease-in-out infinite;
}

.dgx-live-wave-line {
    fill: none;
    stroke: url("#dgxLiveWaveGradient");
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.dgx-live-wave-line-back {
    stroke-width: 5;
    opacity: 0.18;
    filter: url("#dgxLiveWaveGlow");
    stroke-dasharray: 90 22;
    animation: dgx-live-wave-flow 5.8s linear infinite reverse;
}

.dgx-live-wave-line-main {
    stroke-width: 1.65;
    opacity: 0.98;
    filter: url("#dgxLiveWaveGlow");
    stroke-dasharray: 118 18;
    animation: dgx-live-wave-flow 4.8s linear infinite;
}

.dgx-live-wave-pulse {
    fill: #b8edff;
    filter: url("#dgxLiveWaveGlow");
    opacity: 0;
}

.dgx-live-wave-pulse-one {
    animation: dgx-live-wave-point 2.8s ease-in-out infinite;
}

.dgx-live-wave-pulse-two {
    animation: dgx-live-wave-point 2.8s ease-in-out 0.85s infinite;
}

.dgx-live-wave-pulse-three {
    animation: dgx-live-wave-point 2.8s ease-in-out 1.55s infinite;
}

@keyframes dgx-live-wave-flow {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -272;
    }
}

@keyframes dgx-live-wave-energy {
    0%,
    100% {
        transform: scaleY(0.82);
        opacity: 0.76;
    }

    48% {
        transform: scaleY(1.12);
        opacity: 1;
    }

    62% {
        transform: scaleY(0.94);
        opacity: 0.9;
    }
}

@keyframes dgx-live-wave-breathe {
    0%,
    100% {
        opacity: 0.38;
        transform: scaleX(0.9);
    }

    50% {
        opacity: 0.9;
        transform: scaleX(1.04);
    }
}

@keyframes dgx-live-wave-point {
    0%,
    20%,
    100% {
        opacity: 0;
        transform: scale(0.45);
    }

    44% {
        opacity: 1;
        transform: scale(1.55);
    }

    65% {
        opacity: 0.28;
        transform: scale(0.85);
    }
}

/*
 * Prevent overlap with the workspace controls on narrower screens.
 */
@media (max-width: 1240px) {
    .dgx-live-wave {
        width: clamp(300px, 36vw, 520px);
    }
}

@media (max-width: 960px) {
    .dgx-live-wave {
        width: 290px;
        opacity: 0.75;
    }
}

@media (max-width: 760px) {
    .dgx-live-wave {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dgx-live-wave *,
    .dgx-live-wave::before {
        animation: none !important;
    }

    .dgx-live-wave-track {
        opacity: 0.78;
    }
}



/* DGxOne Engineering Signal Trace v35 */

.dgx-live-wave-svg {
    overflow: visible;
}

.dgx-live-wave-grid {
    fill: none;
    stroke: rgba(105, 190, 238, .075);
    stroke-width: .55;
    vector-effect: non-scaling-stroke;
}

.dgx-live-wave-baseline {
    fill: none;
    stroke: rgba(106, 203, 255, .15);
    stroke-width: .7;
    stroke-dasharray: 2 7;
    vector-effect: non-scaling-stroke;
}

.dgx-live-wave-track {
    transform-box: fill-box;
    transform-origin: center;
    animation: dgx-live-wave-signal 3.8s ease-in-out infinite;
}

.dgx-live-wave-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;
}

.dgx-live-wave-line-back {
    stroke: rgba(62, 186, 255, .30);
    stroke-width: 5;
    opacity: .44;
    filter: blur(3px);
    animation: none;
}

.dgx-live-wave-line-main {
    stroke: url("#dgxLiveWaveGradient");
    stroke-width: 1.35;
    opacity: .94;
    filter: url("#dgxLiveWaveGlow");
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
}

.dgx-live-wave-scan {
    fill: none;
    stroke: #d5f5ff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: miter;
    stroke-dasharray: 42 858;
    filter: url("#dgxLiveWaveGlow");
    opacity: .9;
    vector-effect: non-scaling-stroke;
    animation: dgx-live-wave-scan 3.6s linear infinite;
}

.dgx-live-wave-trigger {
    fill: #d8f7ff;
    filter: url("#dgxLiveWaveGlow");
    transform-box: fill-box;
    transform-origin: center;
    animation: dgx-live-wave-trigger 2.4s ease-out infinite;
}

.dgx-live-wave-pulse {
    display: none;
}

@keyframes dgx-live-wave-scan {
    from {
        stroke-dashoffset: 42;
    }

    to {
        stroke-dashoffset: -858;
    }
}

@keyframes dgx-live-wave-signal {
    0%,
    100% {
        transform: scaleY(.82);
        opacity: .76;
    }

    45% {
        transform: scaleY(1);
        opacity: 1;
    }

    58% {
        transform: scaleY(.91);
        opacity: .9;
    }
}

@keyframes dgx-live-wave-trigger {
    0%,
    68%,
    100% {
        opacity: .24;
        transform: scale(.75);
    }

    74% {
        opacity: 1;
        transform: scale(1.8);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dgx-live-wave-track,
    .dgx-live-wave-scan,
    .dgx-live-wave-trigger {
        animation: none;
    }
}



/* DGxOne Compact Runtime Signal Monitor v36 */

.dgx-live-wave {
    position: fixed !important;
    top: 12px !important;
    left: 50% !important;
    width: clamp(210px, 20vw, 310px) !important;
    height: 38px !important;
    padding: 3px 12px !important;
    border: 1px solid rgba(99, 177, 226, .10) !important;
    border-radius: 11px !important;
    background:
        linear-gradient(
            180deg,
            rgba(12, 28, 42, .30),
            rgba(5, 16, 27, .10)
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .025),
        0 9px 24px rgba(0, 6, 16, .12) !important;
    opacity: .82 !important;
    overflow: hidden !important;
    transform: translateX(-50%) !important;
}

.dgx-live-wave::before {
    inset: 10px 12% 8px !important;
    opacity: .32 !important;
    animation:
        dgx-runtime-monitor-breathe
        4.8s
        ease-in-out
        infinite !important;
}

.dgx-live-wave-grid {
    stroke: rgba(105, 190, 238, .045) !important;
}

.dgx-live-wave-baseline {
    stroke: rgba(106, 203, 255, .10) !important;
}

.dgx-live-wave-track {
    animation:
        dgx-runtime-monitor-energy
        4.2s
        ease-in-out
        infinite !important;
}

.dgx-live-wave-line-back {
    stroke-width: 3.5 !important;
    opacity: .24 !important;
    filter: blur(2.5px) !important;
}

.dgx-live-wave-line-main {
    stroke-width: 1.1 !important;
    opacity: .82 !important;
}

.dgx-live-wave-scan {
    stroke-width: 1.65 !important;
    stroke-dasharray: 28 872 !important;
    opacity: .72 !important;
    animation:
        dgx-runtime-monitor-scan
        5.4s
        linear
        infinite !important;
}

.dgx-live-wave-trigger {
    r: 1.8px;
    opacity: .64 !important;
    animation:
        dgx-runtime-monitor-trigger
        3.6s
        ease-out
        infinite !important;
}

@keyframes dgx-runtime-monitor-scan {
    from {
        stroke-dashoffset: 28;
    }

    to {
        stroke-dashoffset: -872;
    }
}

@keyframes dgx-runtime-monitor-energy {
    0%,
    100% {
        transform: scaleY(.74);
        opacity: .65;
    }

    42% {
        transform: scaleY(.94);
        opacity: .90;
    }

    55% {
        transform: scaleY(.82);
        opacity: .76;
    }
}

@keyframes dgx-runtime-monitor-breathe {
    0%,
    100% {
        opacity: .18;
        transform: scaleX(.88);
    }

    50% {
        opacity: .48;
        transform: scaleX(1);
    }
}

@keyframes dgx-runtime-monitor-trigger {
    0%,
    72%,
    100% {
        opacity: .18;
        transform: scale(.72);
    }

    78% {
        opacity: .92;
        transform: scale(1.45);
    }
}

@media (max-width: 1120px) {
    .dgx-live-wave {
        width: 220px !important;
    }
}

@media (max-width: 820px) {
    .dgx-live-wave {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dgx-live-wave *,
    .dgx-live-wave::before {
        animation: none !important;
    }
}



/* DGxOne Animated Operating Slogan v44 */

.dgx-live-wave.dgx-topbar-slogan {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(7px, 1vw, 15px) !important;

    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 520px) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 7px 18px !important;

    border: 1px solid rgba(112, 203, 255, .10) !important;
    border-radius: 999px !important;

    background:
        linear-gradient(
            90deg,
            rgba(63, 188, 255, .025),
            rgba(138, 109, 255, .045),
            rgba(59, 227, 192, .025)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .025),
        0 0 28px rgba(61, 177, 255, .045) !important;

    opacity: 1 !important;
    overflow: hidden !important;
    transform: translate(-50%, -50%) !important;
    filter: none !important;

    white-space: nowrap !important;
    pointer-events: none !important;
    user-select: none !important;
}

.dgx-live-wave.dgx-topbar-slogan::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255, 255, 255, .10) 48%,
            transparent 76%
        ) !important;

    transform: translateX(-130%) !important;
    animation:
        dgx-slogan-sheen
        5.8s
        ease-in-out
        infinite !important;
}

.dgx-live-wave.dgx-topbar-slogan::after {
    display: none !important;
    content: none !important;
}

.dgx-topbar-slogan .dgx-slogan-word {
    position: relative;
    z-index: 1;

    display: inline-block;

    font-size: clamp(9px, .72vw, 12px);
    font-weight: 750;
    line-height: 1;
    letter-spacing: .16em;

    text-shadow:
        0 0 12px currentColor;

    animation:
        dgx-slogan-word-pulse
        4.8s
        ease-in-out
        infinite;
}

.dgx-topbar-slogan .dgx-slogan-plan {
    color: #67c9ff;
    animation-delay: 0s;
}

.dgx-topbar-slogan .dgx-slogan-research {
    color: #8de5ff;
    animation-delay: .45s;
}

.dgx-topbar-slogan .dgx-slogan-design {
    color: #b49cff;
    animation-delay: .9s;
}

.dgx-topbar-slogan .dgx-slogan-execute {
    color: #62e8c3;
    animation-delay: 1.35s;
}

.dgx-topbar-slogan .dgx-slogan-divider {
    position: relative;
    z-index: 1;

    color: rgba(139, 199, 232, .32);
    font-size: 10px;
    font-weight: 400;
}

@keyframes dgx-slogan-word-pulse {
    0%,
    100% {
        opacity: .62;
        filter: saturate(.85);
        transform: translateY(0);
    }

    45% {
        opacity: 1;
        filter: saturate(1.3);
        transform: translateY(-1px);
    }
}

@keyframes dgx-slogan-sheen {
    0%,
    58% {
        transform: translateX(-130%);
    }

    82%,
    100% {
        transform: translateX(130%);
    }
}

@media (max-width: 1100px) {
    .dgx-live-wave.dgx-topbar-slogan {
        max-width: calc(100% - 410px) !important;
        gap: 7px !important;
        padding-right: 11px !important;
        padding-left: 11px !important;
    }

    .dgx-topbar-slogan .dgx-slogan-word {
        font-size: 9px !important;
        letter-spacing: .10em !important;
    }
}

@media (max-width: 820px) {
    .dgx-live-wave.dgx-topbar-slogan {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dgx-topbar-slogan,
    .dgx-topbar-slogan::before,
    .dgx-topbar-slogan .dgx-slogan-word {
        animation: none !important;
    }

    .dgx-topbar-slogan .dgx-slogan-word {
        opacity: 1 !important;
        transform: none !important;
    }
}