/* =====================================
   流滋淇科技专业学校
   Advanced Animation System
===================================== */



/* ===============================
   全站出现动画
================================ */


.page{

opacity:0;

transform:

translateY(80px);


transition:

1.2s ease;


}


.page.active{


opacity:1;


transform:

translateY(0);


}







/* ===============================
   粒子背景层
================================ */


.particle-layer{


position:absolute;


width:100%;


height:100%;


overflow:hidden;


top:0;


left:0;


pointer-events:none;


}





.particle-layer::before,
.particle-layer::after{


content:"";


position:absolute;


width:5px;


height:5px;


background:#00eaff;


border-radius:50%;



box-shadow:


0 0 20px #00eaff;



animation:

particleMove 8s infinite linear;



}



.particle-layer::after{


animation-delay:4s;


left:70%;


}





@keyframes particleMove{


0%{


transform:

translateY(100vh)
translateX(0);



opacity:0;


}


20%{


opacity:1;


}



100%{


transform:

translateY(-100vh)
translateX(200px);



opacity:0;


}



}








/* ===============================
   Logo能量呼吸
================================ */


.tech-logo{


animation:


logoEnergy 3s infinite;


}




@keyframes logoEnergy{


0%{


box-shadow:

0 0 20px #00eaff;


}



50%{


box-shadow:


0 0 80px #0066ff;


}



100%{


box-shadow:


0 0 20px #00eaff;


}



}








/* ===============================
   黑洞进入动画
================================ */


.blackhole-open{


animation:


blackholeExpand 4s forwards;


}



@keyframes blackholeExpand{


0%{


transform:

scale(.2);


opacity:0;


}



40%{


opacity:1;


}



100%{


transform:

scale(8);


opacity:1;


}



}







/* ===============================
   网站出现
================================ */


.website-show{


animation:


websiteAppear 2s forwards;


}



@keyframes websiteAppear{


0%{


opacity:0;


filter:

blur(30px);



}



100%{


opacity:1;


filter:

blur(0);


}


}








/* ===============================
   科技扫描线
================================ */


.scan-line{


position:absolute;


width:100%;


height:2px;



background:


linear-gradient(

90deg,

transparent,

#00ffff,

transparent

);



animation:


scanMove 5s infinite;


}





@keyframes scanMove{


0%{


top:0;


}



100%{


top:100%;


}



}







/* ===============================
   卡片浮动
================================ */


.major-card,
.glass-card,
.teacher-card{


animation:


floatCard 6s infinite ease-in-out;


}





@keyframes floatCard{


0%{


transform:

translateY(0);


}



50%{


transform:

translateY(-15px);


}



100%{


transform:

translateY(0);


}



}








/* ===============================
   时间轴动画
================================ */


.timeline div{


opacity:0;


animation:


timelineShow 1s forwards;


}




.timeline div:nth-child(1){

animation-delay:.3s;

}


.timeline div:nth-child(2){

animation-delay:.6s;

}


.timeline div:nth-child(3){

animation-delay:.9s;

}


.timeline div:nth-child(4){

animation-delay:1.2s;

}


.timeline div:nth-child(5){

animation-delay:1.5s;

}





@keyframes timelineShow{


from{


opacity:0;


transform:

translateX(-100px);


}



to{


opacity:1;


transform:

translateX(0);


}


}








/* ===============================
   霓虹文字闪烁
================================ */


.neon{


animation:


neonFlash 2s infinite;


}





@keyframes neonFlash{


0%{


text-shadow:

0 0 10px #00ffff;


}



50%{


text-shadow:


0 0 50px #0066ff;


}



100%{


text-shadow:


0 0 10px #00ffff;


}


}








/* ===============================
   鼠标光效
================================ */


.cursor-light{


position:fixed;


width:200px;


height:200px;


border-radius:50%;



background:


radial-gradient(

circle,

rgba(0,220,255,.25),

transparent 70%

);



pointer-events:none;


z-index:999;



transform:

translate(-50%,-50%);



}








/* ===============================
   页面转场
================================ */


.transition-out{


animation:


fadeOut 2s forwards;


}




@keyframes fadeOut{


to{


opacity:0;


filter:

blur(30px);



transform:

scale(1.2);



}



}





/* ===============================
   HUD边框动画
================================ */


.hud{


position:relative;


}





.hud::before{


content:"";


position:absolute;


inset:0;


border:


1px solid rgba(0,220,255,.5);



animation:


hudPulse 3s infinite;


}





@keyframes hudPulse{


0%{


opacity:.2;


}



50%{


opacity:1;


}



100%{


opacity:.2;


}



}