/* ========================================
GLOBAL ANIMATIONS
======================================== */

@keyframes fadeInUp {

from {
opacity:0;
transform:translateY(40px);
}

to {
opacity:1;
transform:translateY(0);
}

}

@keyframes fadeIn {

from {
opacity:0;
}

to {
opacity:1;
}

}

/* ========================================
HERO GLOW
======================================== */

@keyframes heroGlow {

0%{
filter:
drop-shadow(0 0 20px rgba(93,214,255,.15));
}

50%{
filter:
drop-shadow(0 0 60px rgba(93,214,255,.45));
}

100%{
filter:
drop-shadow(0 0 20px rgba(93,214,255,.15));
}

}

#pcb-animation{

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

}

/* ========================================
FLOATING EFFECT
======================================== */

@keyframes floating {

0%{
transform:translateY(0px);
}

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

100%{
transform:translateY(0px);
}

}

.hero-animation{

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

}

/* ========================================
BUTTON GLOW
======================================== */

@keyframes pulseGlow {

0%{
box-shadow:
0 0 10px rgba(93,214,255,.15);
}

50%{
box-shadow:
0 0 35px rgba(93,214,255,.45);
}

100%{
box-shadow:
0 0 10px rgba(93,214,255,.15);
}

}

.btn-primary{

animation:
pulseGlow 4s infinite;

}

/* ========================================
SERVICE CARD
======================================== */

.service-card{

animation:
fadeInUp .8s ease both;

}

.service-card:hover{

transform:
translateY(-10px)
scale(1.02);

}

/* ========================================
DEMO CARDS
======================================== */

.demo-card{

position:relative;

overflow:hidden;

}

.demo-card::after{

content:"";

position:absolute;

top:0;
left:-150%;

width:80%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.06),
transparent
);

transition:1s;

pointer-events:none;

}

.demo-card:hover::after{

left:150%;

}

/* ========================================
TECHNOLOGY HOVER
======================================== */

.tech-card{

position:relative;
overflow:hidden;

}

.tech-card::before{

content:"";

position:absolute;
inset:0;

background:
linear-gradient(
90deg,
transparent,
rgba(93,214,255,.08),
transparent
);

transform:translateX(-150%);
transition:.8s;

}

.tech-card:hover::before{

transform:translateX(150%);

}

transform:
translateX(-150%);

transition:
.8s;

}

.tech-grid span:hover::before{

transform:
translateX(150%);

}

/* ========================================
PCB BACKGROUND
======================================== */

@keyframes pcbMove {

0%{
background-position:
0 0,
0 0;
}

100%{
background-position:
60px 60px,
60px 60px;
}

}

#pcb-background{

animation:
pcbMove 25s linear infinite;

}

/* ========================================
DATA NODES
======================================== */

.pcb-node{

position:absolute;

width:10px;
height:10px;

border-radius:50%;

background:
var(--accent-light);

box-shadow:
0 0 15px var(--accent-light),
0 0 30px var(--accent-light);

animation:
nodePulse 3s infinite;

}

@keyframes nodePulse {

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

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

100%{
transform:scale(1);
opacity:.5;
}

}

/* ========================================
TIMELINE
======================================== */

.timeline div::before{

transition:
var(--transition);

}

.timeline div:hover::before{

background:
rgba(93,214,255,.15);

box-shadow:
0 0 20px rgba(93,214,255,.4);

}

/* ========================================
CTA PANEL
======================================== */

@keyframes ctaGlow {

0%{
box-shadow:
0 0 30px rgba(93,214,255,.15);
}

50%{
box-shadow:
0 0 60px rgba(93,214,255,.35);
}

100%{
box-shadow:
0 0 30px rgba(93,214,255,.15);
}

}

.cta-banner{

animation:
ctaGlow 5s infinite;

}

/* ========================================
FAQ
======================================== */

.faq-item{

transition:
var(--transition);

}

.faq-item:hover{

border-color:
rgba(93,214,255,.3);

box-shadow:
0 0 20px rgba(93,214,255,.12);

}

/* ========================================
CONTACT FORM
======================================== */

#contact-form input:focus,
#contact-form textarea:focus{

outline:none;

border-color:
var(--accent-light);

box-shadow:
0 0 15px rgba(93,214,255,.2);

}

/* ========================================
LOGO
======================================== */

@keyframes logoFloat {

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}

.logo img{

animation:
logoFloat 6s ease-in-out infinite;

}

/* ========================================
SCROLL REVEAL PREP
======================================== */

.reveal{

opacity:0;
transform:translateY(50px);

transition:
1s ease;

}

.reveal.active{

opacity:1;
transform:translateY(0);

}