/* ==========================================================
   Coralina Edge Network
   File: css/animations.css
   Version: 1.0
   ========================================================== */

/* ---------- Fade ---------- */

.fade-in{

    opacity:0;

    transform:translateY(20px);

    animation:fadeInUp .8s ease forwards;

}

.fade-delay-1{

    animation-delay:.15s;

}

.fade-delay-2{

    animation-delay:.30s;

}

.fade-delay-3{

    animation-delay:.45s;

}

.fade-delay-4{

    animation-delay:.60s;

}

.fade-delay-5{

    animation-delay:.75s;

}

@keyframes fadeInUp{

    from{

        opacity:0;

        transform:translateY(28px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ---------- Float ---------- */

.float{

    animation:floatAnimation 7s ease-in-out infinite;

}

@keyframes floatAnimation{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0px);

    }

}

/* ---------- Background Glow ---------- */

.background-glow{

    animation:glowMove 20s ease-in-out infinite alternate;

}

@keyframes glowMove{

    0%{

        transform:translate(0,0) scale(1);

    }

    50%{

        transform:translate(-60px,30px) scale(1.08);

    }

    100%{

        transform:translate(40px,-40px) scale(.95);

    }

}

/* ---------- Grid ---------- */

.background-grid{

    animation:gridMove 45s linear infinite;

}

@keyframes gridMove{

    from{

        background-position:0 0,0 0;

    }

    to{

        background-position:40px 40px,40px 40px;

    }

}

/* ---------- Status ---------- */

.status-dot{

    animation:

        pulse 2s infinite,

        statusGlow 2.5s ease infinite;

}

@keyframes statusGlow{

    0%{

        box-shadow:

            0 0 0 rgba(22,179,100,.25);

    }

    50%{

        box-shadow:

            0 0 18px rgba(22,179,100,.65);

    }

    100%{

        box-shadow:

            0 0 0 rgba(22,179,100,.25);

    }

}

/* ---------- Cards ---------- */

.panel,
.gauge-card,
.hero-card{

    transition:

        transform .28s ease,

        box-shadow .28s ease,

        border-color .28s ease;

}

.panel:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-md);

}

.hero-card:hover{

    transform:translateY(-5px);

}

/* ---------- Statistics ---------- */

.value,
.hero-value,
.stat-card strong{

    transition:

        color .3s ease,

        transform .3s ease;

}

.value.updated{

    color:var(--primary);

    animation:valuePulse .45s ease;

}

@keyframes valuePulse{

    0%{

        transform:scale(1);

    }

    40%{

        transform:scale(1.12);

    }

    100%{

        transform:scale(1);

    }

}

/* ---------- Events ---------- */

.event{

    position:relative;

    overflow:hidden;

}

.event::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    bottom:0;

    width:3px;

    background:var(--primary);

    transform:scaleY(0);

    transform-origin:top;

    transition:transform .25s ease;

}

.event:hover::before{

    transform:scaleY(1);

}

.event:hover{

    background:#fff7f7;

}

/* ---------- Services ---------- */

.service{

    transition:

        background .25s ease,

        transform .25s ease;

}

.service:hover{

    background:#fafafa;

    transform:translateX(6px);

}

.service.online::after{

    animation:heartbeat 2.5s infinite;

}

@keyframes heartbeat{

    0%{

        opacity:.45;

        transform:scale(1);

    }

    40%{

        opacity:1;

        transform:scale(1.45);

    }

    100%{

        opacity:.45;

        transform:scale(1);

    }

}

/* ---------- Edge Nodes ---------- */

.edge-node{

    fill:var(--primary);

    stroke:#ffffff;

    stroke-width:3;

    filter:drop-shadow(0 0 6px rgba(240,6,6,.45));

    animation:nodePulse 2.6s infinite;

}

@keyframes nodePulse{

    0%{

        r:6;

        opacity:.85;

    }

    50%{

        r:8;

        opacity:1;

    }

    100%{

        r:6;

        opacity:.85;

    }

}

/* ---------- Map Routes ---------- */

.edge-route{

    fill:none;

    stroke:rgba(240,6,6,.45);

    stroke-width:2;

    stroke-dasharray:8 8;

    animation:routeFlow 8s linear infinite;

}

@keyframes routeFlow{

    from{

        stroke-dashoffset:100;

    }

    to{

        stroke-dashoffset:0;

    }

}

/* ---------- Hero Status ---------- */

.hero-value{

    animation:heroGlow 5s ease-in-out infinite;

}

@keyframes heroGlow{

    0%{

        text-shadow:none;

    }

    50%{

        text-shadow:

            0 0 20px rgba(240,6,6,.18);

    }

    100%{

        text-shadow:none;

    }

}

/* ---------- Footer ---------- */

footer{

    animation:footerFade 1.2s ease;

}

@keyframes footerFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* ---------- Accessibility ---------- */

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}