/**
 * Giffgaff eSIM 工具 - 动画样式
 * 包含：所有动画效果和过渡动画
 */

/* ===== 基础动画 ===== */
@keyframes spin {
    to { transform: rotate(360deg); }
}

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

@keyframes slideIn {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

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

.animate-in {
    animation: fadeInUp 0.6s ease-out;
}

/*
 * 装饰动画时长 token（非静态优化：统一节奏、便于微调）
 * --anim-fast: 横幅图标弹跳
 * --anim-base: 呼吸/警告脉冲
 * --anim-slow: 时间卡 glow / 数字呼吸
 */
:root {
    --anim-ease-pulse: cubic-bezier(0.45, 0, 0.55, 1);
    --anim-fast: 2s;
    --anim-base: 2.75s;
    --anim-slow: 3.25s;
}

/* ===== 推广横幅动画（原有效果：scale 1.02 / bounce 位移） ===== */
@keyframes subtle-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-5px); }
    60% { transform: translateY(-3px); }
}

/* ===== 服务时间动画（原有效果幅度，时长用 token 略放缓） ===== */
@keyframes breathing-light {
    0%, 100% {
        box-shadow: 0 0 5px rgba(220, 38, 38, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 20px rgba(220, 38, 38, 0.6);
        transform: scale(1.05);
    }
}

@keyframes breathing-light-orange {
    0%, 100% {
        box-shadow: 0 0 5px rgba(245, 158, 11, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.6);
        transform: scale(1.05);
    }
}

@keyframes breathing-light-green {
    0%, 100% {
        box-shadow: 0 0 5px rgba(22, 163, 74, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 20px rgba(22, 163, 74, 0.6);
        transform: scale(1.05);
    }
}

@keyframes breathing-light-purple {
    0%, 100% {
        box-shadow: 0 0 5px rgba(99, 102, 241, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);
        transform: scale(1.05);
    }
}

@keyframes warning-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes success-bounce {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.02); }
    75% { transform: scale(1.02); }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
    }
}

@keyframes time-update {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes time-breathe {
    0%, 100% { transform: translateZ(0) scale(1); }
    50% { transform: translateZ(0) scale(1.02); }
}

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

/* ===== 服务时间图标过渡 ===== */
#serviceTimeIcon {
    transition:
        color var(--transition-base, 240ms ease),
        transform var(--transition-base, 240ms ease),
        opacity var(--transition-base, 240ms ease);
}

/* 步骤内容进入（与 design-system / animations 对齐的本地兜底） */
@keyframes section-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}