/* ==========================================================
   TensorEDA
   Premium Animations
   ========================================================== */

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

.hero-copy{

    animation:fadeUp .9s ease forwards;

}

.hero-graphic{

    animation:fadeIn 1.4s ease;

}

/* ---------- Navigation ---------- */

nav a{

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#D71920;

    transition:.3s;

}

nav a:hover::after{

    width:100%;

}

/* ---------- Floating Graphic ---------- */

#tensorNetwork{

    animation:floatNetwork 8s ease-in-out infinite;

}

@keyframes floatNetwork{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0px);

    }

}

/* ---------- Animated Rings ---------- */

#tensorNetwork::before{

    content:"";

    position:absolute;

    inset:30px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.08);

    animation:rotateSlow 18s linear infinite;

}

#tensorNetwork::after{

    content:"";

    position:absolute;

    inset:90px;

    border-radius:50%;

    border:1px solid rgba(215,25,32,.15);

    animation:rotateReverse 14s linear infinite;

}

@keyframes rotateSlow{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes rotateReverse{

    from{

        transform:rotate(360deg);

    }

    to{

        transform:rotate(0deg);

    }

}

/* ---------- Reveal Animation ---------- */

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.visible{

    opacity:1;

    transform:translateY(0);

}

/* ---------- Buttons ---------- */

.btn-primary,

.btn-secondary{

    transition:

        transform .25s ease,

        box-shadow .25s ease,

        background .25s ease;

}

.btn-primary:hover{

    transform:translateY(-4px);

}

.btn-secondary:hover{

    transform:translateY(-4px);

}

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

.card{

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}

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

.footer a{

    position:relative;

}

.footer a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-3px;

    width:0;

    height:1px;

    background:#D71920;

    transition:.3s;

}

.footer a:hover::after{

    width:100%;

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

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

@keyframes pulseGlow{

    0%{

        box-shadow:

            0 0 20px rgba(215,25,32,.12);

    }

    50%{

        box-shadow:

            0 0 60px rgba(215,25,32,.30);

    }

    100%{

        box-shadow:

            0 0 20px rgba(215,25,32,.12);

    }

}

#tensorNetwork{

    animation:

        floatNetwork 8s ease-in-out infinite,

        pulseGlow 5s ease-in-out infinite;

}

/* ---------- Particle Animation ---------- */

.particle{

    position:absolute;

    width:4px;

    height:4px;

    border-radius:50%;

    background:white;

    opacity:.18;

    animation:particleFloat linear infinite;

}

@keyframes particleFloat{

    0%{

        transform:translateY(0);

        opacity:.15;

    }

    50%{

        transform:translateY(-35px);

        opacity:.45;

    }

    100%{

        transform:translateY(0);

        opacity:.15;

    }

}
#tensorNetwork canvas{

    width:100%;

    height:100%;

    display:block;

    border-radius:50%;

}