/* 01 文字爆開 */
.fx-01 .w{font-size:30cqw;color:#17181A;animation:fx01-w 3.6s cubic-bezier(.2,.9,.3,1.2) infinite}
.fx-01 .sh{position:absolute;left:50%;top:50%;width:3.4cqw;height:3.4cqw;margin:-1.7cqw 0 0 -1.7cqw;
  background:linear-gradient(135deg,#FFE9A3 0%,#F5C84C 45%,#B8871F 100%);opacity:0;
  animation:fx01-sh 3.6s ease-out infinite}
.fx-01 .sh:nth-of-type(odd){background:#17181A;width:2cqw;height:2cqw;margin:-1cqw 0 0 -1cqw}
@keyframes fx01-w{
  0%{transform:scale(0);opacity:0}
  8%{transform:scale(1.35);opacity:1}
  14%{transform:scale(.94)}
  20%,84%{transform:scale(1);opacity:1}
  94%,100%{transform:scale(1);opacity:0}
}
@keyframes fx01-sh{
  0%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}
  4%{opacity:1}
  26%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(1)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(1)}
}

/* 02 逐字敲擊 */
.fx-02 .w{display:flex;font-size:19cqw;animation:fx02-shake 3.8s linear infinite}
.fx-02 .c{display:inline-block;transform-origin:50% 100%;
  animation:fx02-c 3.8s cubic-bezier(.5,0,.9,.5) infinite;animation-delay:calc(var(--i) * .22s)}
.fx-02 .gr{position:absolute;left:10cqw;right:10cqw;top:calc(50% + 12cqw);height:1cqw;background:#9AA0A8}
@keyframes fx02-c{
  0%{transform:translateY(-70cqh);opacity:0}
  2%{opacity:1}
  12%{transform:translateY(0) scale(1,1)}
  15%{transform:translateY(0) scale(1.18,.7)}
  20%{transform:translateY(0) scale(.96,1.06)}
  24%,82%{transform:translateY(0) scale(1,1);opacity:1}
  92%,100%{transform:translateY(0) scale(1,1);opacity:0}
}
@keyframes fx02-shake{
  0%,3%{transform:translate(0,0)}
  4%{transform:translate(0,1.6cqw)}
  6%{transform:translate(0,0)}
  8%{transform:translate(0,1.6cqw)}
  10%{transform:translate(0,0)}
  12%{transform:translate(0,1.6cqw)}
  14%{transform:translate(0,0)}
  16%{transform:translate(0,2cqw)}
  18%,100%{transform:translate(0,0)}
}

/* 03 印章 */
.fx-03 .w{font-size:24cqw;color:#B8871F;border:1.6cqw solid currentColor;border-radius:3cqw;
  padding:1cqw 4cqw;transform:rotate(-8deg);animation:fx03-stamp 3.2s cubic-bezier(.2,.9,.3,1.3) infinite}
@keyframes fx03-stamp{
  0%{transform:rotate(-8deg) scale(3);opacity:0}
  14%{transform:rotate(-8deg) scale(.92);opacity:1}
  20%{transform:rotate(-8deg) scale(1.04)}
  26%,82%{transform:rotate(-8deg) scale(1);opacity:1}
  92%,100%{transform:rotate(-8deg) scale(1);opacity:0}
}

/* 04 衝擊放大 */
.fx-04 .a,.fx-04 .b{font-size:30cqw;white-space:nowrap}
.fx-04 .a{color:#E8B33A;animation:fx04-a 3.6s cubic-bezier(.7,0,.9,.4) infinite}
.fx-04 .b{position:absolute;left:0;right:0;top:50%;margin-top:-15cqw;text-align:center;line-height:1;
  color:#17181A;opacity:0;animation:fx04-b 3.6s cubic-bezier(.2,.9,.3,1.3) infinite}
@keyframes fx04-a{
  0%{transform:scale(.4);opacity:0}
  8%{transform:scale(1);opacity:1}
  30%{transform:scale(1);opacity:1}
  42%{transform:scale(22);opacity:1}
  44%,100%{transform:scale(22);opacity:0}
}
@keyframes fx04-b{
  0%,38%{transform:scale(.2);opacity:0}
  44%{transform:scale(1.25);opacity:1}
  50%{transform:scale(1)}
  52%,86%{transform:scale(1);opacity:1}
  94%,100%{transform:scale(1);opacity:0}
}

/* 05 動態堆疊 */
.fx-05 .st{display:flex;flex-direction:column;align-items:center;line-height:1.02}
.fx-05 .l{white-space:nowrap;animation:fx05-l 4s cubic-bezier(.2,.9,.3,1.1) infinite}
.fx-05 .l1{font-size:32cqw;color:#17181A}
.fx-05 .l2{font-size:24cqw;color:#B8871F;animation-delay:.25s}
.fx-05 .l3{font-size:15cqw;color:#17181A;animation-delay:.5s}
@keyframes fx05-l{
  0%{transform:translateY(55cqh);opacity:0}
  14%{transform:translateY(0);opacity:1}
  18%,80%{transform:translateY(0);opacity:1}
  92%,100%{transform:translateY(-30cqh);opacity:0}
}

/* 06 伸縮字 */
.fx-06 .w{display:flex;font-size:30cqw}
.fx-06 .c{display:inline-block;transform-origin:50% 60%;
  animation:fx06-c 3.4s ease-in-out infinite;animation-delay:calc(var(--i) * .14s)}
.fx-06 .c:nth-child(2){color:#B8871F}
@keyframes fx06-c{
  0%{transform:scale(1,1)}
  8%{transform:scale(1.12,.8)}
  24%{transform:scale(.62,2)}
  34%{transform:scale(1.25,.7)}
  42%{transform:scale(.92,1.12)}
  50%,100%{transform:scale(1,1)}
}

/* 07 穿越放大 */
.fx-07 .a,.fx-07 .b{font-size:32cqw;white-space:nowrap;line-height:1}
.fx-07 .a{color:#17181A;position:relative;z-index:2;
  animation:fx07-a 4s cubic-bezier(.6,0,.9,.5) infinite}
.fx-07 .b{position:absolute;left:0;right:0;top:50%;margin-top:-16cqw;text-align:center;
  color:#B8871F;z-index:1;opacity:0;animation:fx07-b 4s cubic-bezier(.2,.8,.3,1) infinite}
@keyframes fx07-a{
  0%{transform:scale(.6);opacity:0}
  10%,30%{transform:scale(1);opacity:1}
  56%{transform:scale(40);opacity:1}
  62%,100%{transform:scale(60);opacity:0}
}
@keyframes fx07-b{
  0%,32%{transform:scale(.08);opacity:0}
  40%{opacity:1}
  62%{transform:scale(1);opacity:1}
  64%,86%{transform:scale(1);opacity:1}
  95%,100%{transform:scale(1);opacity:0}
}

/* 08 擠壓彈跳 */
.fx-08 .w{font-size:28cqw;transform-origin:50% 100%;color:#17181A;
  animation:fx08-w 3.6s linear infinite}
.fx-08 .sd{position:absolute;left:50%;top:calc(50% + 18cqw);width:46cqw;height:4cqw;margin-left:-23cqw;
  border-radius:50%;background:#9AA0A8;opacity:.5;animation:fx08-sd 3.6s linear infinite}
@keyframes fx08-w{
  0%{transform:translateY(-60cqh) scale(1,1);opacity:0;animation-timing-function:cubic-bezier(.5,0,.9,.6)}
  3%{opacity:1}
  22%{transform:translateY(0) scale(1,1);animation-timing-function:ease-out}
  26%{transform:translateY(0) scale(1.5,.5);animation-timing-function:ease-out}
  36%{transform:translateY(-22cqh) scale(.88,1.15);animation-timing-function:ease-in}
  46%{transform:translateY(0) scale(1,1)}
  49%{transform:translateY(0) scale(1.28,.72);animation-timing-function:ease-out}
  57%{transform:translateY(-7cqh) scale(.95,1.06);animation-timing-function:ease-in}
  64%{transform:translateY(0) scale(1.1,.9)}
  70%,84%{transform:translateY(0) scale(1,1);opacity:1}
  94%,100%{transform:translateY(0) scale(1,1);opacity:0}
}
@keyframes fx08-sd{
  0%,12%{transform:scale(.2);opacity:0}
  22%{transform:scale(1);opacity:.5}
  26%{transform:scale(1.3);opacity:.5}
  36%{transform:scale(.6);opacity:.25}
  46%,49%{transform:scale(1.1);opacity:.5}
  57%{transform:scale(.85);opacity:.35}
  70%,84%{transform:scale(1);opacity:.5}
  94%,100%{opacity:0}
}