/* 创作历程漫画动画 - 丝滑流畅升级版 */

/* ========== 漫画分镜入场动画 ========== */
.comic-panel {
    opacity: 0;
    transform: translateY(60px) scale(0.92);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.comic-panel.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 错开入场时间 - 更自然的节奏 */
.comic-panel:nth-child(1) { transition-delay: 0.08s; }
.comic-panel:nth-child(2) { transition-delay: 0.16s; }
.comic-panel:nth-child(3) { transition-delay: 0.24s; }
.comic-panel:nth-child(4) { transition-delay: 0.32s; }
.comic-panel:nth-child(5) { transition-delay: 0.4s; }

/* ========== 分镜悬停效果 - 丝滑版 ========== */
.panel-frame {
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 悬停时光晕效果 - 更柔和 */
.panel-frame::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 60%);
    transform: translate(-50%, -50%);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
    pointer-events: none;
}

.panel-frame:hover::before {
    width: 250%;
    height: 250%;
}

.panel-frame:hover {
    transform: translateY(-10px) rotate(-1deg);
    box-shadow: 16px 16px 0 rgba(0, 0, 0, 0.9);
}

/* ========== 场景角色动画 - 丝滑版 ========== */
.character-scene {
    opacity: 0;
    transform: scale(0.4) translateY(30px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.comic-panel.visible .character-scene {
    opacity: 1;
    transform: scale(0.65) translateY(0);
}

/* 每个角色错开入场 - 更自然的节奏 */
.comic-panel.visible .character-scene:nth-child(1) { transition-delay: 0.25s; }
.comic-panel.visible .character-scene:nth-child(2) { transition-delay: 0.35s; }
.comic-panel.visible .character-scene:nth-child(3) { transition-delay: 0.45s; }
.comic-panel.visible .character-scene:nth-child(4) { transition-delay: 0.55s; }

/* 角色悬停动画 - 更柔和的呼吸感 */
.panel-frame:hover .character-scene {
    animation: characterBreathe 2s ease-in-out infinite;
}

@keyframes characterBreathe {
    0%, 100% { transform: scale(0.65) translateY(0); }
    50% { transform: scale(0.68) translateY(-8px); }
}

/* ========== 对话气泡动画 - 丝滑版 ========== */
.speech-bubble {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.comic-panel.visible .speech-bubble {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition-delay: 0.35s;
}

/* 气泡悬停效果 - 更轻柔的浮动 */
.panel-frame:hover .speech-bubble {
    animation: bubbleFloat 3s ease-in-out infinite;
}

@keyframes bubbleFloat {
    0%, 100% { transform: scale(1) translateY(0) rotate(0deg); }
    25% { transform: scale(1.02) translateY(-4px) rotate(-1deg); }
    75% { transform: scale(1.02) translateY(-2px) rotate(1deg); }
}

/* ========== 场景元素动画 - 丝滑版 ========== */
.book-stack, .sparkles, .party-popper {
    opacity: 0;
    transform: scale(0) rotate(-10deg);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.comic-panel.visible .book-stack,
.comic-panel.visible .sparkles,
.comic-panel.visible .party-popper {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.comic-panel.visible .book-stack { transition-delay: 0.4s; }
.comic-panel.visible .sparkles { transition-delay: 0.5s; }
.comic-panel.visible .party-popper { transition-delay: 0.3s; }

/* ========== 成长线动画 - 丝滑版 ========== */
.growth-line {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.comic-panel.visible .growth-line {
    transform: scaleX(1);
    transition-delay: 0.25s;
}

/* 箭头依次出现 - 更流畅的滑入 */
.arrow {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.comic-panel.visible .arrow:nth-of-type(1) { transition-delay: 0.45s; opacity: 1; transform: translateX(0); }
.comic-panel.visible .arrow:nth-of-type(2) { transition-delay: 0.6s; opacity: 1; transform: translateX(0); }
.comic-panel.visible .arrow:nth-of-type(3) { transition-delay: 0.75s; opacity: 1; transform: translateX(0); }

/* ========== 分镜说明动画 - 丝滑级联 ========== */
.panel-caption {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.comic-panel.visible .panel-caption {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

.caption-number {
    transform: scale(0) rotate(-180deg);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.comic-panel.visible .caption-number {
    transform: scale(1) rotate(0deg);
    transition-delay: 0.35s;
}

.panel-caption h3 {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.comic-panel.visible .panel-caption h3 {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.45s;
}

.panel-caption p {
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.comic-panel.visible .panel-caption p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.55s;
}

/* ========== 特殊场景动画 - 丝滑版 ========== */

/* 第一格：好奇探索 - 更轻柔的摇摆 */
.scene-start .character-scene {
    animation: curiousFloat 4s ease-in-out infinite;
}

@keyframes curiousFloat {
    0%, 100% { transform: scale(0.65) translateY(0) rotate(-3deg); }
    50% { transform: scale(0.65) translateY(-6px) rotate(3deg); }
}

/* 第二格：认真学习 - 柔和的书本呼吸 */
.scene-learn .book-stack {
    animation: bookBreathe 3s ease-in-out infinite;
}

@keyframes bookBreathe {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); transform: scale(1); }
    50% { filter: brightness(1.15) drop-shadow(0 0 8px rgba(253, 224, 71, 0.5)); transform: scale(1.03); }
}

/* 第三格：首次创作 - 星星柔和闪烁 */
.scene-first .sparkles {
    animation: sparkleGlow 2.5s ease-in-out infinite;
}

@keyframes sparkleGlow {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.9; }
    50% { transform: scale(1.15) rotate(90deg); opacity: 1; }
}

/* 第四格：成长历程 - 四个角色围绕中心轨道旋转 */
.scene-grow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.creator-center {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.creator-core {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--purple) 0%, var(--orange) 50%, var(--yellow) 100%);
    border: 3px solid var(--black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-hand);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--white);
    text-align: center;
    line-height: 1.2;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
    z-index: 10;
    animation: corePulse 3s ease-in-out infinite;
}

@keyframes corePulse {
    0%, 100% { transform: scale(1); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2); }
    50% { transform: scale(1.05); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.15), 0 0 20px rgba(139, 92, 246, 0.3); }
}

.orbit-ring {
    position: absolute;
    width: 180px;
    height: 180px;
    border: 2px dashed rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    animation: orbitRotate 20s linear infinite;
}

@keyframes orbitRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.characters-orbit {
    position: absolute;
    width: 180px;
    height: 180px;
    animation: orbitRotate 20s linear infinite;
}

.orbit-character {
    position: absolute;
    transform: scale(0.5);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 四个角色分布在轨道四个方向 */
.orbit-character.character-purple {
    top: 0;
    left: 50%;
    transform: translateX(-50%) scale(0.55);
}

.orbit-character.character-orange {
    top: 50%;
    right: 0;
    transform: translateY(-50%) scale(0.55);
}

.orbit-character.character-black {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scale(0.55);
}

.orbit-character.character-yellow {
    top: 50%;
    left: 0;
    transform: translateY(-50%) scale(0.55);
}

/* 特性标签 */
.trait-label {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--black);
    background: var(--white);
    padding: 2px 8px;
    border: 2px solid var(--black);
    border-radius: 10px;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.3s ease;
}

.orbit-character:hover .trait-label {
    opacity: 1;
    bottom: -25px;
}

/* 悬停时暂停轨道旋转，角色放大 */
.panel-frame:hover .characters-orbit,
.panel-frame:hover .orbit-ring {
    animation-play-state: paused;
}

.panel-frame:hover .orbit-character {
    filter: brightness(1.1);
}

/* 悬停时角色放大 - 需要保持原有定位 */
.panel-frame:hover .orbit-character.character-purple {
    top: -5px;
    transform: translateX(-50%) scale(0.65);
}
.panel-frame:hover .orbit-character.character-orange {
    right: -5px;
    transform: translateY(-50%) scale(0.65);
}
.panel-frame:hover .orbit-character.character-black {
    bottom: -5px;
    transform: translateX(-50%) scale(0.65);
}
.panel-frame:hover .orbit-character.character-yellow {
    left: -5px;
    transform: translateY(-50%) scale(0.65);
}

/* 入场动画 - 依次出现 */
.comic-panel.visible .orbit-character {
    opacity: 0;
    animation: orbitFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.comic-panel.visible .orbit-character.character-purple { animation-delay: 0.3s; }
.comic-panel.visible .orbit-character.character-orange { animation-delay: 0.45s; }
.comic-panel.visible .orbit-character.character-black { animation-delay: 0.6s; }
.comic-panel.visible .orbit-character.character-yellow { animation-delay: 0.75s; }

@keyframes orbitFadeIn {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    to {
        opacity: 1;
    }
}

/* 应用正确的transform */
.comic-panel.visible .orbit-character.character-purple {
    transform: translateX(-50%) scale(0.55);
}
.comic-panel.visible .orbit-character.character-orange {
    transform: translateY(-50%) scale(0.55);
}
.comic-panel.visible .orbit-character.character-black {
    transform: translateX(-50%) scale(0.55);
}
.comic-panel.visible .orbit-character.character-yellow {
    transform: translateY(-50%) scale(0.55);
}

/* 第五格：庆祝派对 - 丝带飘落 - 更柔和的效果 */
.scene-now {
    position: relative;
    overflow: hidden;
}

.scene-now::before {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    right: 0;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 25px,
        var(--pink) 25px,
        var(--pink) 27px,
        transparent 27px,
        transparent 50px,
        var(--cyan) 50px,
        var(--cyan) 52px,
        transparent 52px,
        transparent 75px
    );
    opacity: 0;
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.panel-frame:hover .scene-now::before {
    top: 100%;
    opacity: 0.2;
}

.scene-now .party-popper {
    animation: popperSway 3s ease-in-out infinite;
}

@keyframes popperSway {
    0%, 100% { transform: translateX(-50%) rotate(-3deg); }
    50% { transform: translateX(-50%) rotate(3deg); }
}

/* ========== 滚动触发动画类 - 丝滑版 ========== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========== 连接线条动画 - 丝滑绘制 ========== */
.comic-panel::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    background: linear-gradient(to right, var(--black), transparent);
    border-radius: 2px;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 横向连接的线 */
.comic-panel:nth-child(odd)::after {
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
}

.comic-panel:nth-child(odd).visible::after {
    width: 20px;
    transition-delay: 0.6s;
}

/* 响应式调整 */
@media (max-width: 1024px) {
    .comic-panel {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .character-scene,
    .speech-bubble,
    .book-stack,
    .sparkles,
    .party-popper,
    .panel-caption,
    .caption-number,
    .panel-caption h3,
    .panel-caption p {
        opacity: 1;
        transform: none;
        animation: none;
        transition: none;
    }

    .comic-panel::after {
        display: none;
    }

    .panel-frame:hover {
        transform: translateY(-5px) rotate(-1deg);
        box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.9);
    }
}