/* ==========================================================
   SERVICE ICON SYSTEM
   Source: SCL Solution v1.7
========================================================== */

:root{

    --icon-outline:#F5F5F5;

    --icon-accent:#00E5FF;

}

body.light{

    --icon-outline:#1F2937;

}

/* ==========================================================
   ICON CONTAINER
========================================================== */

.service-icon{

    width:80px;
    height:80px;

    margin:38px auto 24px;

    display:flex;
    justify-content:center;
    align-items:center;

    border:1.5px solid var(--border);

    border-radius:18px;

    background:rgba(255,255,255,.02);

    backdrop-filter:blur(8px);

    color:var(--primary);

    transition:all .35s ease;

}

.service-icon i{

    font-size:48px;

    color:inherit;

    transition:var(--transition-normal);

}

.service-icon > *{

    width:40px;
    height:40px;

    color:inherit;

    transition:inherit;

}

.service-icon svg{

    width:64px;

    height:64px;

    color:inherit;

    transition:var(--transition-normal);

}

/* ==========================================================
   FDM ICON
========================================================== */

.fdm-icon{

    width:40px;
    height:40px;

    color:var(--icon-outline);

    transition:var(--transition-normal);

}

.fdm-icon *{

    stroke:currentColor;

}

#fdm-carriage{

    transform-box:fill-box;

    transform-origin:center;

}

#fdm-filament{

    opacity:0;

}

#fdm-object{

    transform-origin:bottom;

    transform-box:fill-box;

}

/* ==========================================================
   AI ICON
========================================================== */

.ai-icon{

    width:42px;

    height:42px;

    overflow:visible;

    color:var(--icon-outline);

}

.ai-icon *{

    vector-effect:non-scaling-stroke;

}

#ai-connections line{

    stroke:currentColor;

    stroke-width:2.8;

    transition:
        stroke .35s ease,
        filter .35s ease,
        opacity .35s ease;

}

#ai-nodes circle{

    stroke:currentColor;

    stroke-width:2.8;

    fill:none;

}

.node-halo{

    fill:var(--icon-accent);

    stroke:none;

    opacity:0;

    transform:scale(.2);

    transform-box:fill-box;

    transform-origin:center;

    filter:
        drop-shadow(0 0 4px rgba(0,229,255,.9))
        drop-shadow(0 0 10px rgba(0,229,255,.7));

}

#ai-signals circle{

    fill:var(--icon-accent);

    stroke:none;

    opacity:0;

    filter:
        drop-shadow(0 0 3px rgba(0,229,255,.9))
        drop-shadow(0 0 6px rgba(0,229,255,.6));

}

#ai-core{

    opacity:.88;

    transition:
        opacity .4s ease,
        filter .4s ease;

}

#ai-core-body rect{

    fill:none;

    stroke:currentColor;

    stroke-width:2.8;

}

#ai-neural{

    stroke:currentColor;

    stroke-width:1.8;

    opacity:.85;

}

#ai-neural circle{

    fill:currentColor;

}

#ai-neural line{

    stroke:currentColor;

}

#core-packet{

    fill:var(--icon-accent);

    stroke:none;

    opacity:0;

}

.ai-icon *{

    shape-rendering:geometricPrecision;

    transform-box:fill-box;

    transform-origin:center;

}

/* ==========================================================
   MAINTENANCE ICON
========================================================== */

#maintenance-gear{

    transform-origin:50% 50%;

    transform-box:fill-box;

}

/* ==========================================================
   ORIGINAL ICON ANIMATIONS
   Source: animations.css
========================================================== */

/* ---------- FDM ---------- */

@keyframes fdmCarriage{

    0%{transform:translate(0px,0px);}
    15%{transform:translate(0px,2px);}
    25%{transform:translate(0px,2px);}
    45%{transform:translate(-6px,2px);}
    75%{transform:translate(6px,2px);}
    90%{transform:translate(0px,2px);}
    100%{transform:translate(0px,0px);}

}

.service-card:hover #fdm-carriage{

    animation:fdmCarriage 3.2s ease-in-out;

}

@keyframes filamentPrint{

    0%{opacity:0;}
    35%{opacity:1;}
    70%{opacity:1;}
    100%{opacity:0;}

}

.service-card:hover #fdm-filament{

    animation:filamentPrint 3.2s ease-in-out;

}

@keyframes objectGrow{

    0%{transform:scaleY(1);}
    60%{transform:scaleY(1.18);}
    100%{transform:scaleY(1);}

}

.service-card:hover #fdm-object{

    animation:objectGrow 3.2s ease-in-out;

}

/* ---------- AI ---------- */

@keyframes nodeWake{

    0%{
        opacity:0;
        transform:scale(.2);
    }

    20%{
        opacity:.95;
        transform:scale(.7);
    }

    50%{
        opacity:.55;
        transform:scale(1.2);
    }

    100%{
        opacity:0;
        transform:scale(1.8);
    }

}

@keyframes nodeFlash{

    0%,100%{

        fill:none;

    }

    50%{

        fill:#00E5FF;

    }

}

.service-card:hover #node-top > circle:last-child{

    animation:nodeFlash .7s ease both;

}

.service-card:hover #node-right > circle:last-child{

    animation:nodeFlash .7s ease .25s both;

}

.service-card:hover #node-bottom > circle:last-child{

    animation:nodeFlash .7s ease .5s both;

}

.service-card:hover #node-left > circle:last-child{

    animation:nodeFlash .7s ease .75s both;

}

.service-card:hover #node-top .node-halo{

    animation:nodeWake .7s ease both;

}

.service-card:hover #node-right .node-halo{

    animation:nodeWake .7s ease .25s both;

}

.service-card:hover #node-bottom .node-halo{

    animation:nodeWake .7s ease .5s both;

}

.service-card:hover #node-left .node-halo{

    animation:nodeWake .7s ease .75s both;

}

@keyframes signalTravel{

    0%{

        stroke:#00E5FF;

        stroke-width:3.2;

        stroke-dasharray:2 12;

        stroke-dashoffset:12;

        filter:
            drop-shadow(0 0 3px #00E5FF)
            drop-shadow(0 0 6px rgba(0,229,255,.7));

    }

    100%{

        stroke:#00E5FF;

        stroke-width:3.2;

        stroke-dasharray:2 12;

        stroke-dashoffset:0;

        filter:
            drop-shadow(0 0 3px #00E5FF)
            drop-shadow(0 0 6px rgba(0,229,255,.7));

    }

}

.service-card:hover #line-top{

    animation:signalTravel .25s linear .45s both;

}

.service-card:hover #line-right{

    animation:signalTravel .25s linear .70s both;

}

.service-card:hover #line-bottom{

    animation:signalTravel .25s linear .95s both;

}

.service-card:hover #line-left{

    animation:signalTravel .25s linear 1.20s both;

}

@keyframes coreGlow{

    0%{

        opacity:.88;

        filter:none;

    }

    40%{

        opacity:1;

        filter:
            drop-shadow(0 0 4px rgba(0,229,255,.8))
            drop-shadow(0 0 10px rgba(0,229,255,.6));

    }

    100%{

        opacity:.88;

        filter:none;

    }

}

@keyframes neuralPulse{

    0%{

        opacity:.85;

    }

    50%{

        opacity:1;

        stroke:#00E5FF;

        fill:#00E5FF;

    }

    100%{

        opacity:.85;

    }

}

.service-card:hover #ai-core{

    animation:coreGlow .8s ease 1.45s both;

}

.service-card:hover #ai-neural{

    animation:neuralPulse .6s ease 1.55s both;

}

/* ---------- Maintenance ---------- */

@keyframes maintenanceSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.service-card:hover #maintenance-gear{

    animation:maintenanceSpin .8s ease;

}

/* ==========================================================
   General SMT Trading Logo
========================================================== */

.gst-machine-logo {

    display: block;

    width: 80px;
    height: 80px;

    color: currentColor;

    overflow: visible;

}


/* ==========================================================
   Machine Line Styling
========================================================== */

.gst-machine-logo .machine-outline,
.gst-machine-logo .machine-detail {

    stroke: currentColor;

    stroke-linecap: round;
    stroke-linejoin: round;

    fill: none;

}

.gst-machine-logo .machine-outline {

    stroke-width: 2.2;

}

.gst-machine-logo .machine-detail {

    stroke-width: 1.6;

}


/* ==========================================================
   Animation Setup
========================================================== */

.gst-machine-logo .pick-head {

    transform-box: fill-box;
    transform-origin: center;

}

.gst-machine-logo .nozzle {

    transform-box: fill-box;
    transform-origin: top center;

}

.gst-machine-logo .status-light {

    opacity: 0.5;

}


/* ==========================================================
   General SMT
========================================================== */

@keyframes smtPickHead {

    0%,
    15% {
        transform: translateX(0);
    }

    40%,
    55% {
        transform: translateX(5px);
    }

    80%,
    100% {
        transform: translateX(0);
    }

}

@keyframes smtNozzle {

    0%,
    40% {
        transform: translateY(0);
    }

    48%,
    56% {
        transform: translateY(3px);
    }

    65%,
    100% {
        transform: translateY(0);
    }

}

@keyframes smtStatus {

    0%,
    20% {
        opacity: 0.5;
    }

    35%,
    55% {
        opacity: 1;
    }

    70%,
    100% {
        opacity: 0.5;
    }

}


/* ==========================================================
   Card Hover Animation
========================================================== */

.service-card:hover .gst-machine-logo .pick-head {

    animation:
        smtPickHead
        2.8s
        ease-in-out
        1;

}

.service-card:hover .gst-machine-logo .nozzle {

    animation:
        smtNozzle
        2.8s
        ease-in-out
        1;

}

.service-card:hover .gst-machine-logo .status-light {

    animation:
        smtStatus
        2.8s
        ease-in-out
        1;

}


/* ==========================================================
   Accessibility
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .service-card:hover .gst-machine-logo .pick-head,
    .service-card:hover .gst-machine-logo .nozzle,
    .service-card:hover .gst-machine-logo .status-light {

        animation: none;

    }

}