/* 33 空心字 */
.fx-33 .rows{display:flex;flex-direction:column;align-items:center}
.fx-33 .l{position:relative;font-size:24cqw;line-height:1.02;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:.6cqw #17181A}
.fx-33 .l::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;text-align:center;
  -webkit-text-fill-color:#E8B33A;-webkit-text-stroke:.6cqw #17181A;opacity:0;
  animation:fx33-fill 4.5s ease-in-out infinite;animation-delay:calc(var(--i) * .6s)}
@keyframes fx33-fill{0%{opacity:0}5%,30%{opacity:1}38%,100%{opacity:0}}

/* 34 故障切片 */
.fx-34 .gl{position:relative;width:100cqw;height:36cqw;font-size:30cqw;line-height:36cqw}
.fx-34 .s{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  animation:fx34-slice 3.6s linear infinite}
.fx-34 .s::before{content:attr(data-t);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#E8B33A;opacity:0;transform:translateX(2cqw);z-index:-1;animation:fx34-gold 3.6s linear infinite}
.fx-34 .s:nth-child(1){clip-path:inset(0 0 80% 0);--a:-9cqw;--b:6cqw;--c:-3cqw}
.fx-34 .s:nth-child(2){clip-path:inset(20% 0 60% 0);--a:8cqw;--b:-7cqw;--c:4cqw}
.fx-34 .s:nth-child(3){clip-path:inset(40% 0 40% 0);--a:-6cqw;--b:10cqw;--c:-5cqw}
.fx-34 .s:nth-child(4){clip-path:inset(60% 0 20% 0);--a:7cqw;--b:-9cqw;--c:3cqw}
.fx-34 .s:nth-child(5){clip-path:inset(80% 0 0 0);--a:-8cqw;--b:5cqw;--c:-4cqw}
.fx-34 .s:nth-child(even)::before{transform:translateX(-2cqw)}
@keyframes fx34-slice{
  0%,20%{transform:translateX(0)}
  23%{transform:translateX(var(--a))}
  27%{transform:translateX(var(--b))}
  31%{transform:translateX(var(--c))}
  35%,58%{transform:translateX(0)}
  60%{transform:translateX(var(--b))}
  63%{transform:translateX(var(--a))}
  66%,100%{transform:translateX(0)}
}
@keyframes fx34-gold{
  0%,20%{opacity:0}23%,33%{opacity:1}35%,58%{opacity:0}60%,64%{opacity:1}66%,100%{opacity:0}
}

/* 35 圖案遮罩 */
.fx-35 .w{font-size:32cqw;line-height:1.1;color:transparent;-webkit-text-fill-color:transparent;
  background-image:repeating-linear-gradient(45deg,#E8B33A 0,#E8B33A 3cqw,#17181A 3cqw,#17181A 6cqw);
  background-size:8.485cqw 8.485cqw;-webkit-background-clip:text;background-clip:text;
  animation:fx35-move 1.6s linear infinite}
@keyframes fx35-move{from{background-position:0 0}to{background-position:8.485cqw 0}}

/* 36 長陰影 */
.fx-36 .rev{position:absolute;left:-50%;top:-50%;width:200%;height:200%;display:flex;align-items:center;justify-content:center;
  transform:rotate(45deg);animation:fx36-grow 4s ease-in-out infinite}
.fx-36 .cnt{width:50%;height:50%;display:flex;align-items:center;justify-content:center;transform:rotate(-45deg)}
.fx-36 .t{font-size:28cqw;line-height:1;transform:translate(-10cqw,-10cqw)}
.fx-36 .sh{color:#B8871F;text-shadow:0.5cqw 0.5cqw #B8871F,1cqw 1cqw #B8871F,1.5cqw 1.5cqw #B8871F,2cqw 2cqw #B8871F,2.5cqw 2.5cqw #B8871F,3cqw 3cqw #B8871F,3.5cqw 3.5cqw #B8871F,4cqw 4cqw #B8871F,4.5cqw 4.5cqw #B8871F,5cqw 5cqw #B8871F,5.5cqw 5.5cqw #B8871F,6cqw 6cqw #B8871F,6.5cqw 6.5cqw #B8871F,7cqw 7cqw #B8871F,7.5cqw 7.5cqw #B8871F,8cqw 8cqw #B8871F,8.5cqw 8.5cqw #B8871F,9cqw 9cqw #B8871F,9.5cqw 9.5cqw #B8871F,10cqw 10cqw #B8871F,10.5cqw 10.5cqw #B8871F,11cqw 11cqw #B8871F,11.5cqw 11.5cqw #B8871F,12cqw 12cqw #B8871F,12.5cqw 12.5cqw #B8871F,13cqw 13cqw #B8871F,13.5cqw 13.5cqw #B8871F,14cqw 14cqw #B8871F,14.5cqw 14.5cqw #B8871F,15cqw 15cqw #B8871F,15.5cqw 15.5cqw #B8871F,16cqw 16cqw #B8871F,16.5cqw 16.5cqw #B8871F,17cqw 17cqw #B8871F,17.5cqw 17.5cqw #B8871F,18cqw 18cqw #B8871F,18.5cqw 18.5cqw #B8871F,19cqw 19cqw #B8871F,19.5cqw 19.5cqw #B8871F,20cqw 20cqw #B8871F,20.5cqw 20.5cqw #B8871F,21cqw 21cqw #B8871F,21.5cqw 21.5cqw #B8871F,22cqw 22cqw #B8871F,22.5cqw 22.5cqw #B8871F,23cqw 23cqw #B8871F,23.5cqw 23.5cqw #B8871F,24cqw 24cqw #B8871F,24.5cqw 24.5cqw #B8871F,25cqw 25cqw #B8871F}
.fx-36 .front{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
@keyframes fx36-grow{
  0%,8%{clip-path:inset(0 72% 0 28%)}
  40%,85%{clip-path:inset(0 22% 0 28%)}
  95%,100%{clip-path:inset(0 72% 0 28%)}
}

/* 37 液體填滿 */
.fx-37 .w{font-size:36cqw;line-height:1;color:transparent;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:.7cqw #17181A;display:inline-block;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40' preserveAspectRatio='none'%3E%3Cpath fill='%23E8B33A' d='M0,3 C4,0 8,0 12,3 S20,6 24,3 V40 H0Z'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40' preserveAspectRatio='none'%3E%3Cpath fill='%23B8871F' d='M0,3 C4,6 8,6 12,3 S20,0 24,3 V40 H0Z'/%3E%3C/svg%3E");
  background-size:24cqw 44cqw,24cqw 44cqw;background-repeat:repeat-x,repeat-x;
  background-position:0 0,0 -1.5cqw;
  -webkit-background-clip:text;background-clip:text;
  animation:fx37-rise 4.5s linear infinite}
@keyframes fx37-rise{
  0%,6%{background-position:0 38cqw,0 36cqw}
  38%{background-position:-6.5cqw -3cqw,6.5cqw -5cqw}
  82%{background-position:-17.6cqw -3cqw,17.6cqw -5cqw}
  94%{background-position:-21.3cqw 38cqw,21.3cqw 36cqw}
  100%{background-position:-24cqw 38cqw,24cqw 36cqw}
}

/* 38 螢光筆 */
.fx-38 .box{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.fx-38 .a{font-size:17cqw}
.fx-38 .b{font-size:32cqw;margin-top:2cqw}
.fx-38 .hl{position:relative;display:inline-block;z-index:0;padding:0 2cqw}
.fx-38 .hl::before{content:"";position:absolute;z-index:-1;left:-1cqw;right:-1cqw;top:38%;bottom:-3%;background:#E8B33A;
  clip-path:polygon(0 12%,4% 0,50% 6%,97% 0,100% 18%,98% 62%,100% 100%,52% 94%,3% 100%,1% 55%);
  transform-origin:left center;transform:rotate(-2.5deg) scaleX(1);animation:fx38-sweep 4s cubic-bezier(.5,.1,.3,1) infinite}
@keyframes fx38-sweep{
  0%,10%{transform:rotate(-2.5deg) scaleX(0);opacity:1}
  38%,86%{transform:rotate(-2.5deg) scaleX(1);opacity:1}
  94%,100%{transform:rotate(-2.5deg) scaleX(1);opacity:0}
}

/* 39 雙色反轉 */
.fx-39 .p{position:relative;width:84cqw;height:46cqw;overflow:hidden}
.fx-39 .a,.fx-39 .b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:26cqw;line-height:1}
.fx-39 .a{background:#17181A;color:#FFFFFF}
.fx-39 .b{background:#E8B33A;color:#17181A;animation:fx39-clip 4s cubic-bezier(.45,.05,.55,.95) infinite}
.fx-39 .ln{position:absolute;left:0;top:0;bottom:0;width:1cqw;background:#FFFFFF;opacity:0;animation:fx39-ln 4s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes fx39-clip{
  0%,10%{clip-path:inset(0 100% 0 0)}
  45%,58%{clip-path:inset(0 0 0 0)}
  92%,100%{clip-path:inset(0 0 0 100%)}
}
@keyframes fx39-ln{
  0%,9%{opacity:0;transform:translateX(0)}
  10%{opacity:1;transform:translateX(0)}
  45%{opacity:1;transform:translateX(83cqw)}
  46%,57%{opacity:0;transform:translateX(83cqw)}
  58%{opacity:1;transform:translateX(0)}
  92%{opacity:1;transform:translateX(83cqw)}
  93%,100%{opacity:0;transform:translateX(83cqw)}
}

/* 40 殘影 */
.fx-40 .e{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28cqw;line-height:1;
  color:#E8B33A;opacity:calc(1 - var(--i) * .15);animation:fx40-move 4s ease-in-out infinite backwards;animation-delay:calc(var(--i) * .07s)}
.fx-40 .e[style*="--i:0"]{color:#17181A}
@keyframes fx40-move{
  0%,12%{transform:translateX(-17cqw)}
  45%,62%{transform:translateX(17cqw)}
  95%,100%{transform:translateX(-17cqw)}
}
