/* 动画定义 */

@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pulse {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
}

@keyframes gradientRotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 发光动画优化 */
@keyframes glow {
    from {
        box-shadow: var(--shadow-md);
    }
    to {
        box-shadow: var(--shadow-lg);
    }
}

@keyframes slideRight {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: -100%; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes weatherFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes weatherIconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes pageLoad {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 滚动驱动动画 */
@scroll-timeline scroll-timeline {
    source: auto;
    orientation: vertical;
    scroll-offsets: 0% 0%, 100% 100%;
}

/* 页面加载动画 */
body {
    animation: pageLoad 1s ease-out;
}

/* 英雄区域视差效果 */
.hero-content {
    animation: heroParallax both linear;
    animation-timeline: scroll-timeline;
}

@keyframes heroParallax {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(100px);
    }
}

/* OC设定区域视差效果 */
.unknown-info {
    animation: infoSectionParallax both linear;
    animation-timeline: scroll-timeline;
}

@keyframes infoSectionParallax {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(50px);
    }
}

/* 信息卡片滚动动画 */
.info-item {
    animation: infoItemParallax both linear;
    animation-timeline: scroll-timeline;
}

.info-item:nth-child(1) {
    animation-delay: 0s;
}

.info-item:nth-child(2) {
    animation-delay: 0.1s;
}

.info-item:nth-child(3) {
    animation-delay: 0.2s;
}

.info-item:nth-child(4) {
    animation-delay: 0.3s;
}

.info-item:nth-child(5) {
    animation-delay: 0.4s;
}

.info-item:nth-child(6) {
    animation-delay: 0.5s;
}

.info-item:nth-child(7) {
    animation-delay: 0.6s;
}

@keyframes infoItemParallax {
    from {
        transform: translateY(100px) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translateY(-50px) scale(1.05);
        opacity: 1;
    }
}

/* 神秘信息区域视差效果 */
.message-content {
    animation: messageParallax both linear;
    animation-timeline: scroll-timeline;
}

@keyframes messageParallax {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(100px);
    }
}

/* 信息段落滚动动画 */
.message-content p {
    animation: paragraphParallax both linear;
    animation-timeline: scroll-timeline;
}

.message-content p:nth-child(1) {
    animation-delay: 0s;
}

.message-content p:nth-child(2) {
    animation-delay: 0.2s;
}

.message-content p:nth-child(3) {
    animation-delay: 0.4s;
}

.message-content p:nth-child(4) {
    animation-delay: 0.6s;
}

@keyframes paragraphParallax {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(-50px);
        opacity: 1;
    }
}