/* 页面整体加载动画 */
@keyframes pageLoad {
    0% {
        opacity: 0;
        filter: blur(20px);
    }

    100% {
        opacity: 1;
        filter: blur(0);
    }
}

/* 背景粒子效果 */
@keyframes float {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }

    33% {
        transform: translateY(-30px) translateX(30px) rotate(120deg);
    }

    66% {
        transform: translateY(30px) translateX(-20px) rotate(240deg);
    }
}

/* 霓虹光效 */
@keyframes neonGlow {

    0%,
    100% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.3),
            0 0 10px rgba(255, 255, 255, 0.3),
            0 0 15px rgba(255, 255, 255, 0.3),
            0 0 20px rgba(78, 151, 216, 0.5),
            0 0 35px rgba(78, 151, 216, 0.5),
            0 0 40px rgba(78, 151, 216, 0.5);
    }

    50% {
        text-shadow: 0 0 2px rgba(255, 255, 255, 0.5),
            0 0 5px rgba(255, 255, 255, 0.5),
            0 0 8px rgba(255, 255, 255, 0.5),
            0 0 12px rgba(78, 151, 216, 0.8),
            0 0 18px rgba(78, 151, 216, 0.8),
            0 0 25px rgba(78, 151, 216, 0.8);
    }
}

/* 脉冲呼吸效果 */
@keyframes pulse {

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

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

/* 3D卡片翻转效果 */
@keyframes cardFlip {
    0% {
        transform: rotateY(0deg) rotateX(0deg);
    }

    25% {
        transform: rotateY(90deg) rotateX(5deg);
    }

    50% {
        transform: rotateY(180deg) rotateX(0deg);
    }

    75% {
        transform: rotateY(270deg) rotateX(-5deg);
    }

    100% {
        transform: rotateY(360deg) rotateX(0deg);
    }
}

/* 波浪式文字动画 */
@keyframes wave {

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

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

/* 磁场扭曲效果 */
@keyframes magneticDistortion {

    0%,
    100% {
        transform: skew(0deg, 0deg) scale(1);
        filter: hue-rotate(0deg);
    }

    25% {
        transform: skew(2deg, 1deg) scale(1.02);
        filter: hue-rotate(5deg);
    }

    50% {
        transform: skew(-1deg, -2deg) scale(0.98);
        filter: hue-rotate(-5deg);
    }

    75% {
        transform: skew(-2deg, 1deg) scale(1.01);
        filter: hue-rotate(3deg);
    }
}

/* 光束扫描效果 */
@keyframes lightScan {
    0% {
        background-position: -100% 0;
    }

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

/* 量子闪烁效果 */
@keyframes quantumFlicker {

    0%,
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    10% {
        opacity: 0.8;
        transform: scale(1.02) rotate(1deg);
    }

    20% {
        opacity: 1;
        transform: scale(0.98) rotate(-1deg);
    }

    30% {
        opacity: 0.9;
        transform: scale(1.01) rotate(0.5deg);
    }

    40% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    50% {
        opacity: 0.95;
        transform: scale(1.005) rotate(-0.5deg);
    }

    60% {
        opacity: 1;
        transform: scale(0.995) rotate(0.2deg);
    }

    70% {
        opacity: 0.98;
        transform: scale(1.008) rotate(-0.2deg);
    }

    80% {
        opacity: 1;
        transform: scale(0.992) rotate(0deg);
    }

    90% {
        opacity: 0.99;
        transform: scale(1.003) rotate(0.1deg);
    }
}

/* 应用动画到页面元素 */
body {
    animation: pageLoad 1.5s ease-out forwards;
}

/* 标题霓虹效果 */
.panel-title {
    animation: neonGlow 3s ease-in-out infinite alternate;
    position: relative;
    overflow: hidden;
}

.panel-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: lightScan 4s infinite;
}

/* 头像增强效果 */
.profilepic {
    animation: pulse 4s ease-in-out infinite, quantumFlicker 8s ease-in-out infinite;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.profilepic:hover {
    animation: cardFlip 1s ease-in-out, magneticDistortion 2s ease-in-out infinite;
    box-shadow: 0 0 30px rgba(78, 151, 216, 0.6),
        0 0 60px rgba(78, 151, 216, 0.4),
        0 0 90px rgba(78, 151, 216, 0.2);
}

/* 导航按钮动画 */
.navigation__item a {
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    transform-style: preserve-3d;
}

.navigation__item a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(78, 151, 216, 0.3), transparent);
    transition: left 0.5s ease;
    z-index: -1;
}

.navigation__item a:hover::before {
    left: 100%;
}

.navigation__item a:hover {
    transform: translateY(-3px) rotateX(10deg);
    box-shadow: 0 10px 20px rgba(78, 151, 216, 0.3),
        0 0 20px rgba(78, 151, 216, 0.2);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* 文字波浪效果 */
.panel-title {
    display: inline-block;
}

.panel-title span {
    display: inline-block;
    animation: wave 2s ease-in-out infinite;
}

.panel-title span:nth-child(1) {
    animation-delay: 0s;
}

.panel-title span:nth-child(2) {
    animation-delay: 0.1s;
}

.panel-title span:nth-child(3) {
    animation-delay: 0.2s;
}

.panel-title span:nth-child(4) {
    animation-delay: 0.3s;
}

.panel-title span:nth-child(5) {
    animation-delay: 0.4s;
}

.panel-title span:nth-child(6) {
    animation-delay: 0.5s;
}

.panel-title span:nth-child(7) {
    animation-delay: 0.6s;
}

.panel-title span:nth-child(8) {
    animation-delay: 0.7s;
}

.panel-title span:nth-child(9) {
    animation-delay: 0.8s;
}

.panel-title span:nth-child(10) {
    animation-delay: 0.9s;
}

/* 背景粒子 */
.panel-cover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(78, 151, 216, 0.1) 1px, transparent 1px),
        radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        radial-gradient(circle at 80% 20%, rgba(78, 151, 216, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 50px 50px, 30px 30px, 70px 70px, 40px 40px;
    animation: float 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* 信息卡片悬浮效果 */
.panel-main__content {
    transition: all 0.5s ease;
    transform-style: preserve-3d;
}

.panel-main__content:hover {
    transform: translateZ(20px) rotateX(5deg);
}

/* 按钮组弹性效果 */
.cover-navigation {
    animation: quantumFlicker 10s ease-in-out infinite;
}

.navigation__item {
    transition: all 0.3s ease;
}

.navigation__item:hover {
    transform: scale(1.1) translateY(-5px);
}

/* 响应式适配 */
@media (max-width: 768px) {
    .panel-title {
        animation-duration: 4s;
    }

    .profilepic {
        animation-duration: 6s;
    }

    .navigation__item a:hover {
        transform: translateY(-2px);
    }
}

/* 减少动画以提高性能（可选） */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.1s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.1s !important;
    }
}

/* 增强交互效果 */
.panel-cover {
    position: relative;
    overflow: hidden;
}

/* 鼠标跟随光效 */
.panel-cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle 100px at var(--mouse-x, 0) var(--mouse-y, 0),
            rgba(78, 151, 216, 0.1) 0%,
            transparent 80%);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.panel-cover:hover::before {
    opacity: 1;
}