/* ==================================================================
   三级火箭返回顶部（全站共用）
   三段箭体独立动画：一级/二级助推器中途分离、坠落回浏览器底部，
   顶部三级继续上行到顶，尾焰按级接力。
   ================================================================== */

#gotop{
    right:0;
    bottom:0;
    width:48px;
    height:128px;
    background:transparent;
    overflow:visible;
}

#gotop .gotop-rocket{
    display:block;
    position:relative;
    width:48px;
    height:128px;
}

/* 三段箭体（自下而上：一级/二级/三级） */
#gotop .gotop-stage{
    position:absolute;
    left:0;
    width:48px;
    display:block;
}
#gotop .gotop-stage3{ top:0;    height:42px; }
#gotop .gotop-stage2{ top:42px; height:32px; }
#gotop .gotop-stage1{ top:74px; height:36px; }

#gotop .gotop-svg{ display:block; width:48px; overflow:visible; }
#gotop .gotop-stage3 .gotop-svg{ height:42px; }
#gotop .gotop-stage2 .gotop-svg{ height:32px; }
#gotop .gotop-stage1 .gotop-svg{ height:36px; }

/* 尾焰：每级发动机一个，位于该级底部 */
#gotop .gotop-flame{
    position:absolute;
    top:100%;
    left:50%;
    width:14px;
    height:18px;
    margin-left:-7px;
    margin-top:-3px;
    background:linear-gradient(to bottom,#fff2b0 0%,#ffd23f 30%,#ff8a1a 65%,#ff5a00 100%);
    clip-path:polygon(50% 0%, 78% 32%, 100% 62%, 82% 100%, 50% 80%, 18% 100%, 0% 62%, 22% 32%);
    transform-origin:50% 0%;
}

/* 静止：只有底部一级喷淡焰，其余隐藏 */
#gotop .gotop-flame1{ opacity:.55; animation:gotop-flicker 1.1s ease-in-out infinite; }
#gotop .gotop-flame2{ opacity:0; }
#gotop .gotop-flame3{ opacity:0; }

/* 悬停：点火，箭身晃动，底部尾焰更亮 */
#gotop:hover .gotop-rocket{ animation:gotop-shake .3s ease-in-out; }
#gotop:hover .gotop-flame1{ opacity:1; animation:gotop-flicker .45s ease-in-out infinite; }

/* 发射：三段各自动画 + 尾焰接力 */
#gotop.launching .gotop-stage3{ animation:stage3-launch 2s linear forwards; }
#gotop.launching .gotop-stage2{ animation:stage2-launch 2s linear forwards; }
#gotop.launching .gotop-stage1{ animation:stage1-launch 2s linear forwards; }
#gotop.launching .gotop-flame1{ animation:flame1-launch 2s linear forwards; }
#gotop.launching .gotop-flame2{ animation:flame2-launch 2s linear forwards; }
#gotop.launching .gotop-flame3{ animation:flame3-launch 2s linear forwards; }

/* 悬停滑出的「点火」标签 */
#gotop span.tit{
    top:46px;
    right:48px;
    height:36px;
    line-height:36px;
    overflow:hidden;
}

/* 归位 */
#gotop.respawn .gotop-stage{ animation:gotop-respawn .35s ease-out; }

/* ---- 关键帧 ---- */
@keyframes gotop-flicker{
    0%,100%{ transform:scaleY(1) scaleX(1); opacity:.85; }
    30%{ transform:scaleY(1.18) scaleX(.9); opacity:1; }
    60%{ transform:scaleY(.88) scaleX(1.06); opacity:.7; }
}
@keyframes gotop-shake{
    0%,100%{ transform:rotate(0deg); }
    25%{ transform:rotate(3deg); }
    50%{ transform:rotate(-3deg); }
    75%{ transform:rotate(2deg); }
}
@keyframes stage3-launch{
    0%{ transform:translateY(0); opacity:1; }
    40%{ transform:translateY(-30vh); opacity:1; }
    60%{ transform:translateY(-58vh); opacity:1; }
    85%{ transform:translateY(-108vh); opacity:1; }
    100%{ transform:translateY(-120vh); opacity:0; }
}
@keyframes stage2-launch{
    0%{ transform:translateY(0) rotate(0); opacity:1; }
    40%{ transform:translateY(-30vh) rotate(0); opacity:1; }
    60%{ transform:translateY(-58vh) rotate(0); opacity:1; }
    66%{ transform:translateY(-60vh) rotate(6deg); opacity:1; }
    94%{ transform:translateY(0) translateX(-14px) rotate(-28deg); opacity:1; }
    100%{ transform:translateY(0) translateX(-14px) rotate(-28deg); opacity:0; }
}
@keyframes stage1-launch{
    0%{ transform:translateY(0) rotate(0); opacity:1; }
    40%{ transform:translateY(-30vh) rotate(0); opacity:1; }
    46%{ transform:translateY(-32vh) rotate(-6deg); opacity:1; }
    90%{ transform:translateY(0) translateX(-34px) rotate(32deg); opacity:1; }
    100%{ transform:translateY(0) translateX(-34px) rotate(32deg); opacity:0; }
}
@keyframes flame1-launch{
    0%{ opacity:1; transform:scaleY(1); }
    40%{ opacity:1; transform:scaleY(1.25); }
    48%{ opacity:0; transform:scaleY(.5); }
    100%{ opacity:0; transform:scaleY(.5); }
}
@keyframes flame2-launch{
    0%{ opacity:0; }
    40%{ opacity:0; transform:scaleY(1); }
    48%{ opacity:1; transform:scaleY(1.2); }
    60%{ opacity:1; transform:scaleY(1.25); }
    68%{ opacity:0; transform:scaleY(.5); }
    100%{ opacity:0; transform:scaleY(.5); }
}
@keyframes flame3-launch{
    0%{ opacity:0; }
    60%{ opacity:0; transform:scaleY(1); }
    68%{ opacity:1; transform:scaleY(1.2); }
    96%{ opacity:1; transform:scaleY(1.25); }
    100%{ opacity:0; transform:scaleY(.5); }
}
@keyframes gotop-respawn{
    from{ opacity:0; transform:translateY(-8px); }
    to{ opacity:1; transform:translateY(0); }
}
