/* =========================================================
   WILLSMARG MOTION SYSTEM FINAL
   File: wwwroot/css/MotionSystem.css
   Purpose: motion styling only. No JavaScript here.
========================================================= */

.wsm-motion-glow {
    position: fixed;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: .14;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(0,168,200,.45), transparent 62%);
    filter: blur(36px);
}

.wsm-main::before {
    animation: wsmGridDrift 26s linear infinite;
}

@keyframes wsmGridDrift {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 60px 60px;
    }
}

.wsm-engineering-board {
    will-change: transform;
    transition: transform .22s ease, box-shadow .25s ease;
}

    .wsm-engineering-board:hover {
        box-shadow: 0 34px 110px rgba(11,31,58,.16);
    }

.wsm-node {
    animation: wsmNodeFloat 7s ease-in-out infinite;
}

    .wsm-node:nth-child(odd) {
        animation-delay: .8s;
    }

@keyframes wsmNodeFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

.wsm-board-canvas::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, transparent 42%, rgba(0,168,200,.14) 50%, transparent 58%, transparent 100%);
    transform: translateX(-130%);
    animation: wsmBoardScan 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes wsmBoardScan {
    0%, 45% {
        transform: translateX(-130%);
    }

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

.wsm-btn-primary {
    position: relative;
    overflow: hidden;
}

    .wsm-btn-primary::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-120%);
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
        transition: transform .55s ease;
    }

    .wsm-btn-primary:hover::after {
        transform: translateX(120%);
    }

.wsm-core-engine {
    animation: wsmCoreFloatFixed 6s ease-in-out infinite !important;
}

@keyframes wsmCoreFloatFixed {
    0%, 100% {
        transform: translate(-50%, -50%);
    }

    50% {
        transform: translate(-50%, calc(-50% - 6px));
    }
}

@media (max-width: 767.98px) {
    .wsm-motion-glow {
        display: none;
    }

    .wsm-main::before,
    .wsm-node,
    .wsm-core-engine,
    .wsm-board-canvas::after {
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wsm-motion-glow,
    .wsm-main::before,
    .wsm-node,
    .wsm-core-engine,
    .wsm-board-canvas::after {
        animation: none !important;
    }
}