/* 
 * OSPFv3交互式H5网页 - 动画样式表
 * 包含所有动画效果的CSS定义
 */

/* ===== 基础动画 ===== */

/* 淡入 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out forwards;
}

/* 淡出 */
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.fade-out {
    animation: fadeOut 0.5s ease-in-out forwards;
}

/* 滑入（从左） */
@keyframes slideInLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.slide-in-left {
    animation: slideInLeft 0.5s ease-in-out forwards;
}

/* 滑入（从右） */
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.slide-in-right {
    animation: slideInRight 0.5s ease-in-out forwards;
}

/* 滑入（从上） */
@keyframes slideInTop {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.slide-in-top {
    animation: slideInTop 0.5s ease-in-out forwards;
}

/* 滑入（从下） */
@keyframes slideInBottom {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.slide-in-bottom {
    animation: slideInBottom 0.5s ease-in-out forwards;
}

/* 缩放 */
@keyframes scale {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.scale-in {
    animation: scale 0.5s ease-in-out forwards;
}

/* 旋转 */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.rotate {
    animation: rotate 1s linear infinite;
}

/* 脉冲 */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

/* 闪烁 */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.blink {
    animation: blink 1s ease-in-out infinite;
}

/* 震动 */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

/* ===== 特定组件动画 ===== */

/* 数据包传输动画 */
@keyframes packetMove {
    0% { transform: translateX(0) scale(1); opacity: 1; }
    90% { transform: translateX(var(--packet-distance)) scale(1); opacity: 1; }
    100% { transform: translateX(var(--packet-distance)) scale(1.5); opacity: 0; }
}

.packet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--primary-color);
    position: absolute;
    animation: packetMove var(--packet-duration, 1s) linear;
}

.packet.hello {
    background-color: var(--primary-light);
}

.packet.dbd {
    background-color: var(--warning-color);
}

.packet.lsr {
    background-color: var(--success-color);
}

.packet.lsu {
    background-color: var(--error-color);
}

.packet.lsack {
    background-color: var(--neutral-dark);
}

/* 状态转换动画 */
@keyframes stateHighlight {
    0% { box-shadow: 0 0 0 0 rgba(30, 136, 229, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(30, 136, 229, 0); }
    100% { box-shadow: 0 0 0 0 rgba(30, 136, 229, 0); }
}

.state-highlight {
    animation: stateHighlight 1.5s ease-in-out;
}

/* 路由器状态变化动画 */
@keyframes routerStateChange {
    0% { background-color: var(--background-light); }
    50% { background-color: var(--primary-light); }
    100% { background-color: var(--background-light); }
}

.router-state-change {
    animation: routerStateChange 1s ease-in-out;
}

/* 链路活动动画 */
@keyframes linkActive {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -20; }
}

.link-active {
    stroke-dasharray: 5;
    animation: linkActive 1s linear infinite;
}

/* 路由计算动画 */
@keyframes routeCalculation {
    0% { stroke-width: 1; stroke-opacity: 0.3; }
    50% { stroke-width: 3; stroke-opacity: 1; }
    100% { stroke-width: 1; stroke-opacity: 0.3; }
}

.route-calculation {
    animation: routeCalculation 1.5s ease-in-out infinite;
}

/* 智慧城市数据流动画 */
@keyframes dataFlow {
    0% { stroke-dashoffset: 0; opacity: 0.3; }
    50% { opacity: 1; }
    100% { stroke-dashoffset: -50; opacity: 0.3; }
}

.data-flow {
    stroke-dasharray: 5;
    animation: dataFlow 2s linear infinite;
}

/* 按钮点击波纹效果 */
@keyframes ripple {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}

.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

/* 加载动画 */
@keyframes loading {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(30, 136, 229, 0.3);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: loading 1s linear infinite;
}

/* 状态机节点动画 */
.state-node {
    transition: all 0.3s ease-in-out;
}

.state-node:hover {
    transform: scale(1.1);
}

.state-node.active {
    fill: var(--primary-color);
    filter: drop-shadow(0 0 5px rgba(30, 136, 229, 0.5));
}

/* 状态转换路径动画 */
@keyframes pathTraverse {
    0% { stroke-dashoffset: 100; }
    100% { stroke-dashoffset: 0; }
}

.path-traverse {
    stroke-dasharray: 100;
    animation: pathTraverse 1s linear forwards;
}

/* 拓扑图设备拖拽动画 */
.device-dragging {
    opacity: 0.7;
    transform: scale(1.05);
    z-index: 100;
    transition: transform 0.1s, opacity 0.1s;
}

/* 设备选中动画 */
@keyframes deviceSelect {
    0% { box-shadow: 0 0 0 0 rgba(30, 136, 229, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(30, 136, 229, 0); }
    100% { box-shadow: 0 0 0 0 rgba(30, 136, 229, 0); }
}

.device-selected {
    animation: deviceSelect 1.5s ease-in-out;
}

/* 配置命令显示动画 */
@keyframes commandAppear {
    0% { transform: translateY(10px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.command-appear {
    animation: commandAppear 0.3s ease-out forwards;
}

/* 步骤导航动画 */
@keyframes stepTransition {
    0% { transform: translateX(0); opacity: 1; }
    20% { transform: translateX(-10%); opacity: 0; }
    80% { transform: translateX(10%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

.step-transition {
    animation: stepTransition 0.5s ease-in-out;
}

/* 场景切换动画 */
@keyframes sceneTransition {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.scene-transition {
    animation: sceneTransition 0.5s ease-in-out;
}

/* 知识点提示动画 */
@keyframes tipAppear {
    0% { transform: translateY(-10px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.tip-appear {
    animation: tipAppear 0.3s ease-out forwards;
}

/* 错误提示动画 */
@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.error-shake {
    animation: errorShake 0.5s ease-in-out;
    border-color: var(--error-color) !important;
}

/* 成功提示动画 */
@keyframes successPulse {
    0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

.success-pulse {
    animation: successPulse 1.5s ease-in-out;
    border-color: var(--success-color) !important;
}

/* 动画速度控制 */
.animation-speed-1 {
    animation-duration: calc(var(--animation-base-duration) * 2);
}

.animation-speed-2 {
    animation-duration: calc(var(--animation-base-duration) * 1.5);
}

.animation-speed-3 {
    animation-duration: var(--animation-base-duration);
}

.animation-speed-4 {
    animation-duration: calc(var(--animation-base-duration) * 0.75);
}

.animation-speed-5 {
    animation-duration: calc(var(--animation-base-duration) * 0.5);
}

/* 动画暂停控制 */
.animation-paused {
    animation-play-state: paused !important;
}