/* 第 4 組：切換組 25 到 32 */

/* ---------- 25 翻牌 Split Flap（6s） ---------- */
.fx-25 .row{display:flex;gap:3cqw}
.fx-25 .t{position:relative;width:27cqw;height:40cqw;perspective:70cqw}
.fx-25 .h{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:#17181A;color:#fff}
.fx-25 .top{top:0;border-radius:2.4cqw 2.4cqw 0 0}
.fx-25 .bot{bottom:0;border-radius:0 0 2.4cqw 2.4cqw}
.fx-25 .g{position:absolute;left:0;right:0;height:200%;display:flex;align-items:center;justify-content:center;font-size:21cqw;line-height:1}
.fx-25 .top .g{top:0}
.fx-25 .bot .g{top:-100%}
.fx-25 .t::after{content:"";position:absolute;left:-1cqw;right:-1cqw;top:calc(50% - .4cqw);height:.8cqw;background:#ECEEF1;z-index:9}
.fx-25 .f1,.fx-25 .f3{transform-origin:50% 100%}
.fx-25 .f2,.fx-25 .f4{transform-origin:50% 0;transform:rotateX(90deg)}
.fx-25 .f3,.fx-25 .f2,.fx-25 .f4{opacity:0}
.fx-25 .uB{animation:fx25-ub 6s linear infinite;animation-delay:calc(var(--i)*.12s)}
.fx-25 .f1{animation:fx25-f1 6s ease-in infinite;animation-delay:calc(var(--i)*.12s)}
.fx-25 .f2{animation:fx25-f2 6s ease-out infinite;animation-delay:calc(var(--i)*.12s)}
.fx-25 .f3{animation:fx25-f3 6s ease-in infinite;animation-delay:calc(var(--i)*.12s)}
.fx-25 .f4{animation:fx25-f4 6s ease-out infinite;animation-delay:calc(var(--i)*.12s)}
@keyframes fx25-ub{0%,46%{opacity:1}47%,100%{opacity:0}}
@keyframes fx25-f1{0%,10%{transform:rotateX(0)}20%,99%{transform:rotateX(-90deg)}100%{transform:rotateX(0)}}
@keyframes fx25-f2{0%,19%{transform:rotateX(90deg);opacity:0}20%{transform:rotateX(90deg);opacity:1}28%,99%{transform:rotateX(0);opacity:1}100%{transform:rotateX(90deg);opacity:0}}
@keyframes fx25-f3{0%,46%{transform:rotateX(0);opacity:0}47%{transform:rotateX(0);opacity:1}54%,99%{transform:rotateX(-90deg);opacity:1}100%{transform:rotateX(-90deg);opacity:0}}
@keyframes fx25-f4{0%,53%{transform:rotateX(90deg);opacity:0}54%{transform:rotateX(90deg);opacity:1}62%,99%{transform:rotateX(0);opacity:1}100%{transform:rotateX(90deg);opacity:0}}

/* ---------- 26 翻卡 Flip Cards（5s） ---------- */
.fx-26 .row{display:flex;gap:4cqw;perspective:90cqw}
.fx-26 .c{position:relative;width:34cqw;height:46cqw;transform-style:preserve-3d;
  animation:fx26-flip 5s cubic-bezier(.5,0,.2,1) infinite;animation-delay:calc(var(--i)*.18s)}
.fx-26 .f{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:3cqw;
  display:flex;align-items:center;justify-content:center;font-size:27cqw;line-height:1}
.fx-26 .fr{background:#fff;color:#17181A;box-shadow:0 1cqw 2.4cqw rgba(23,24,26,.2)}
.fx-26 .bk{background:linear-gradient(135deg,#FFE9A3 0%,#F5C84C 45%,#B8871F 100%);color:#17181A;transform:rotateY(180deg);box-shadow:0 1cqw 2.4cqw rgba(23,24,26,.2)}
@keyframes fx26-flip{
  0%,14%{transform:rotateY(0) scale(1)}
  21%{transform:rotateY(90deg) scale(1.1)}
  28%,58%{transform:rotateY(180deg) scale(1)}
  65%{transform:rotateY(270deg) scale(1.1)}
  72%,100%{transform:rotateY(360deg) scale(1)}
}

/* ---------- 27 打字機 Typewriter（5s） ---------- */
.fx-27 .w{position:relative;display:inline-block;font-size:18cqw;line-height:1.25}
.fx-27 .t{display:block;white-space:nowrap;animation:fx27-t 5s linear infinite}
.fx-27 .cur{position:absolute;left:0;top:12%;bottom:12%;width:1.8cqw;background:#B8871F;animation:fx27-c 5s linear infinite}
.fx-27 .cur i{display:block;width:100%;height:100%;background:inherit;animation:fx27-blink .9s steps(1) infinite}
@keyframes fx27-t{
  0%,8%{clip-path:inset(0 100% 0 0);animation-timing-function:steps(4,jump-end)}
  52%,86%{clip-path:inset(0 0 0 0)}
  87.5%,100%{clip-path:inset(0 100% 0 0)}
}
@keyframes fx27-c{
  0%,8%{transform:translateX(0);animation-timing-function:steps(4,jump-end)}
  52%,86%{transform:translateX(72cqw)}
  87.5%,100%{transform:translateX(0)}
}
@keyframes fx27-blink{0%,65%{opacity:1}66%,100%{opacity:0}}

/* ---------- 28 拉霸 Slot Machine（6s） ---------- */
.fx-28 .row{display:flex;gap:3cqw}
.fx-28 .win{position:relative;width:27cqw;height:36cqw;background:#fff;border-radius:3cqw;overflow:hidden}
.fx-28 .win::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1cqw #17181A;
  background:linear-gradient(rgba(23,24,26,.24),rgba(23,24,26,0) 28%,rgba(23,24,26,0) 72%,rgba(23,24,26,.24))}
.fx-28 .reel{display:flex;flex-direction:column;transform:translateY(-252cqw);
  animation:fx28-roll 6s cubic-bezier(.25,.6,.3,1) infinite;animation-delay:calc(var(--i)*.35s)}
.fx-28 .reel b{display:block;height:36cqw;line-height:36cqw;text-align:center;font-size:25cqw;font-weight:900}
@keyframes fx28-roll{
  0%,8%{transform:translateY(0)}
  46%{transform:translateY(-258cqw)}
  52%,100%{transform:translateY(-252cqw)}
}

/* ---------- 29 計數器 Odometer（5s） ---------- */
.fx-29 .o{display:flex;align-items:center;gap:1.4cqw;animation:fx29-o 5s linear infinite}
.fx-29 .col{position:relative;width:15cqw;height:28cqw;background:#17181A;border-radius:2cqw;overflow:hidden}
.fx-29 .col::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(23,24,26,.7),rgba(23,24,26,0) 30%,rgba(23,24,26,0) 70%,rgba(23,24,26,.7))}
.fx-29 .st{display:flex;flex-direction:column;transform:translateY(calc((10 + var(--d)) * -28cqw));animation-duration:5s;animation-timing-function:cubic-bezier(.25,.6,.2,1);animation-iteration-count:infinite}
.fx-29 .st b{display:block;height:28cqw;line-height:28cqw;text-align:center;font-size:22cqw;font-weight:900;color:#fff}
.fx-29 .cm{font-size:22cqw;line-height:1;align-self:flex-end;margin-bottom:1cqw;width:4cqw;text-align:center;color:#17181A}
.fx-29 .s1{animation-name:fx29-r1}
.fx-29 .s2{animation-name:fx29-r2}
.fx-29 .s3{animation-name:fx29-r3}
.fx-29 .s4{animation-name:fx29-r4}
.fx-29 .s5{animation-name:fx29-r5}
@keyframes fx29-o{0%{opacity:0}5%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes fx29-r1{0%,4%{transform:translateY(0)}30%,95%{transform:translateY(calc((10 + var(--d)) * -28cqw))}95.1%,100%{transform:translateY(0)}}
@keyframes fx29-r2{0%,4%{transform:translateY(0)}38%,95%{transform:translateY(calc((10 + var(--d)) * -28cqw))}95.1%,100%{transform:translateY(0)}}
@keyframes fx29-r3{0%,4%{transform:translateY(0)}46%,95%{transform:translateY(calc((10 + var(--d)) * -28cqw))}95.1%,100%{transform:translateY(0)}}
@keyframes fx29-r4{0%,4%{transform:translateY(0)}54%,95%{transform:translateY(calc((10 + var(--d)) * -28cqw))}95.1%,100%{transform:translateY(0)}}
@keyframes fx29-r5{0%,4%{transform:translateY(0)}62%,95%{transform:translateY(calc((10 + var(--d)) * -28cqw))}95.1%,100%{transform:translateY(0)}}

/* ---------- 30 標題切換 Headline Swap（5s） ---------- */
.fx-30 .a,.fx-30 .b{position:absolute;left:0;right:0;top:50%;margin-top:-12cqw;height:24cqw;line-height:24cqw;text-align:center;font-size:20cqw;white-space:nowrap}
.fx-30 .b{opacity:0;color:#B8871F}
.fx-30 .a{animation:fx30-a 5s linear infinite}
.fx-30 .b{animation:fx30-b 5s linear infinite}
.fx-30 .sw{position:absolute;left:0;top:50%;width:100%;height:34cqw;margin-top:-17cqw;transform:translateX(-101%);
  background:linear-gradient(135deg,#FFE9A3 0%,#F5C84C 45%,#B8871F 100%);animation:fx30-sw 5s cubic-bezier(.6,0,.4,1) infinite}
@keyframes fx30-a{0%,15%{opacity:1}15.1%,74.9%{opacity:0}75%,100%{opacity:1}}
@keyframes fx30-b{0%,15%{opacity:0}15.1%,74.9%{opacity:1}75%,100%{opacity:0}}
@keyframes fx30-sw{
  0%,6%{transform:translateX(-101%)}
  15%{transform:translateX(0)}
  24%{transform:translateX(101%)}
  24.1%,66%{transform:translateX(-101%)}
  75%{transform:translateX(0)}
  84%{transform:translateX(101%)}
  84.1%,100%{transform:translateX(-101%)}
}

/* ---------- 31 LED 看板（5s） ---------- */
.fx-31{--p:3.4cqw}
.fx-31 .bd{background:#17181A;padding:2.6cqw;border-radius:2.4cqw}
.fx-31 .gr{position:relative;width:calc(25 * var(--p));height:calc(7 * var(--p));overflow:hidden;
  background-image:radial-gradient(circle closest-side,rgba(154,160,168,.34) 0 78%,rgba(154,160,168,0) 84%);
  background-size:var(--p) var(--p)}
.fx-31 .strip{position:absolute;left:0;top:0;transform:translateX(var(--p));animation:fx31-s 5s linear infinite}
.fx-31 .d{position:absolute;display:block;width:calc(var(--p) * .78);height:calc(var(--p) * .78);border-radius:50%;
  left:calc(var(--c) * var(--p) + var(--p) * .11);top:calc(var(--r) * var(--p) + var(--p) * .11);
  background:#E8B33A;box-shadow:0 0 1.2cqw rgba(232,179,58,.75)}
@keyframes fx31-s{
  0%{transform:translateX(calc(var(--p) * 25));animation-timing-function:steps(24,jump-end)}
  36%,66%{transform:translateX(var(--p));animation-timing-function:steps(24,jump-end)}
  100%{transform:translateX(calc(var(--p) * -23))}
}

/* ---------- 32 上下裂開 Split Halves（5s） ---------- */
.fx-32 .h{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30cqw;line-height:1;white-space:nowrap}
.fx-32 .hu{clip-path:inset(0 0 50% 0);animation:fx32-u 5s cubic-bezier(.2,.9,.3,1.15) infinite}
.fx-32 .hl{clip-path:inset(50% 0 0 0);animation:fx32-l 5s cubic-bezier(.2,.9,.3,1.15) infinite}
.fx-32 .bd{position:absolute;left:0;right:0;top:calc(50% - 14cqw);height:28cqw;display:flex;align-items:center;justify-content:center;
  font-size:17cqw;line-height:1;color:#17181A;background:linear-gradient(135deg,#FFE9A3 0%,#F5C84C 45%,#B8871F 100%);
  opacity:0;animation:fx32-b 5s cubic-bezier(.2,.9,.3,1) infinite}
@keyframes fx32-u{0%,15%{transform:translateY(0)}30%,62%{transform:translateY(-14cqw)}76%,100%{transform:translateY(0)}}
@keyframes fx32-l{0%,15%{transform:translateY(0)}30%,62%{transform:translateY(14cqw)}76%,100%{transform:translateY(0)}}
@keyframes fx32-b{0%,15%{opacity:0;transform:scaleY(.1)}30%,62%{opacity:1;transform:scaleY(1)}76%,100%{opacity:0;transform:scaleY(.1)}}