/* 第 3 組 立體組 17~24（CSS 3D）。opacity 不放在 preserve-3d 元素上（會被壓平），只放在葉節點 */
.fx-17 .sc,.fx-18 .sc,.fx-19 .sc,.fx-20 .sc,.fx-21 .sc,.fx-22 .sc,.fx-23 .sc,.fx-24 .sc{
  position:absolute;inset:0;perspective:60cqw}
.fx-17 .z,.fx-18 .z,.fx-19 .z,.fx-20 .z,.fx-21 .z,.fx-22 .z,.fx-23 .z,.fx-24 .z{
  position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.fx-17 *,.fx-18 *,.fx-19 *,.fx-20 *,.fx-21 *,.fx-22 *,.fx-23 *,.fx-24 *{line-height:1;white-space:nowrap}

/* ===== 17 文字隧道 ===== */
.fx-17 .sc{perspective:55cqw}
.fx-17 .ring{transform:translateZ(calc(var(--i) * -28cqw))}
.fx-17 .f{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;
  background:#fff;border:.7cqw solid #E8B33A;box-sizing:border-box;font-size:19cqw;color:#17181A;
  animation:fx17-fade 4.5s linear infinite;animation-delay:calc(var(--i) * -.75s)}
.fx-17 .ring:nth-child(even) .f{color:#B8871F}
.fx-17 .t,.fx-17 .b{width:70cqw;height:28cqw;margin:-14cqw 0 0 -35cqw}
.fx-17 .l,.fx-17 .r{width:28cqw;height:70cqw;margin:-35cqw 0 0 -14cqw;flex-direction:column;font-size:15cqw}
.fx-17 .t{transform:translateY(-35cqw) rotateX(-90deg)}
.fx-17 .b{transform:translateY(35cqw) rotateX(90deg)}
.fx-17 .l{transform:translateX(-35cqw) rotateY(90deg)}
.fx-17 .r{transform:translateX(35cqw) rotateY(-90deg)}
.fx-17 .ring{animation:fx17-run 4.5s linear infinite;animation-delay:calc(var(--i) * -.75s)}
@keyframes fx17-run{0%{transform:translateZ(-150cqw)}100%{transform:translateZ(18cqw)}}
@keyframes fx17-fade{0%{opacity:0}16%{opacity:1}78%{opacity:1}100%{opacity:0}}

/* ===== 18 文字走廊 ===== */
.fx-18 .sc{perspective:46cqw}
.fx-18 .rail{position:absolute;left:0;top:0;width:.7cqw;height:400cqw;margin:-200cqw 0 0 -.35cqw;
  background:linear-gradient(#F5C84C,#B8871F);transform:translate3d(var(--x),var(--y),0) rotateX(90deg)}
.fx-18 .zz{transform:translateZ(calc(var(--i) * -28cqw));animation:fx18-run 4s linear infinite;
  animation-delay:calc(var(--i) * -.8s)}
.fx-18 .w{position:absolute;left:0;top:0;width:28cqw;height:16cqw;margin:-8cqw 0 0 -14cqw;display:flex;
  align-items:center;justify-content:center;font-size:12.5cqw;color:#17181A;
  animation:fx18-fade 4s linear infinite;animation-delay:calc(var(--i) * -.8s)}
.fx-18 .L{transform:translate3d(-24cqw,var(--y),0) rotateY(90deg)}
.fx-18 .R{transform:translate3d(24cqw,var(--y),0) rotateY(-90deg);color:#B8871F}
@keyframes fx18-run{0%{transform:translateZ(-135cqw)}100%{transform:translateZ(10cqw)}}
@keyframes fx18-fade{0%{opacity:0}14%{opacity:1}80%{opacity:1}100%{opacity:0}}

/* ===== 19 圍柱 ===== */
.fx-19 .sc{perspective:130cqw}
.fx-19 .cyl{transform:rotateX(-14deg)}
.fx-19 .spin{animation:fx19-spin 5s linear infinite}
.fx-19 .row{transform:translateY(var(--y))}
.fx-19 .w{position:absolute;left:0;top:0;width:28cqw;height:14cqw;margin:-7cqw 0 0 -14cqw;display:flex;
  align-items:center;justify-content:center;font-size:10.5cqw;color:#17181A;backface-visibility:hidden;
  transform:rotateY(var(--a)) translateZ(31cqw);
  animation:fx19-fade 5s linear infinite;animation-delay:calc(var(--i) * -.5556s)}
.fx-19 .r0 .w,.fx-19 .r2 .w{color:#B8871F}
@keyframes fx19-spin{to{transform:rotateY(360deg)}}
@keyframes fx19-fade{
  0%,100%{opacity:1;backface-visibility:visible}
  20%{opacity:.9;backface-visibility:visible}
  40%,60%{opacity:.14;backface-visibility:visible}
  80%{opacity:.9;backface-visibility:visible}}

/* ===== 20 漩渦 ===== */
.fx-20 .sp.B{opacity:0}
.fx-20 .sp{animation:fx20-in 4s linear infinite}
.fx-20 .sp.B{animation-delay:-2s}
.fx-20 .it{transform:rotate(calc(var(--i) * 38deg)) translateX(calc(5cqw + var(--i) * 1.9cqw))}
.fx-20 .it b{position:absolute;left:0;top:0;width:0;height:0;display:flex;align-items:center;justify-content:center;
  font-size:calc(5cqw + var(--i) * .8cqw);font-weight:900}
.fx-20 .c0 b{color:#17181A}
.fx-20 .c1 b{color:#B8871F}
.fx-20 .c2 b{color:#E8B33A}
@keyframes fx20-in{
  0%{transform:rotate(0) scale(1.7);opacity:0}
  18%{opacity:1}
  80%{opacity:1}
  100%{transform:rotate(-260deg) scale(.06);opacity:0}}

/* ===== 21 圓環隧道 ===== */
.fx-21 .sc{perspective:70cqw}
.fx-21 .ring{transform:translateZ(calc(var(--i) * -30cqw));animation:fx21-run 4s linear infinite;
  animation-delay:calc(var(--i) * -.8s)}
.fx-21 .ring b{position:absolute;left:0;top:0;width:0;height:0;display:flex;align-items:center;justify-content:center;
  font-size:10.5cqw;font-weight:900;transform:rotate(calc(var(--j) * 25.714deg)) translateY(-29cqw)}
.fx-21 .c0 b{color:#17181A}
.fx-21 .c1 b{color:#B8871F}
@keyframes fx21-run{
  0%{transform:translateZ(-170cqw) rotate(0);opacity:0}
  14%{opacity:1}
  58%{opacity:1}
  100%{transform:translateZ(31cqw) rotate(50deg);opacity:0}}

/* ===== 22 軌道 ===== */
.fx-22 .sc{perspective:90cqw}
.fx-22 .m{position:absolute;left:50%;top:50%;width:60cqw;height:30cqw;margin:-15cqw 0 0 -30cqw;display:flex;
  align-items:center;justify-content:center;font-size:26cqw;color:#17181A}
.fx-22 .tilt{transform:rotateX(68deg)}
.fx-22 .orb{position:absolute;left:0;top:0;width:64cqw;height:64cqw;margin:-32cqw 0 0 -32cqw;border-radius:50%;
  border:.6cqw dashed #E8B33A;box-sizing:border-box}
.fx-22 .spin{animation:fx22-spin 5s linear infinite}
.fx-22 .it{transform:rotateZ(var(--a)) translateX(32cqw)}
.fx-22 .bb{position:absolute;left:0;top:0;width:22cqw;height:12cqw;margin:-6cqw 0 0 -11cqw;display:flex;
  align-items:center;justify-content:center;font-size:10cqw;color:#B8871F;
  transform:rotateZ(calc(var(--a) * -1)) rotateX(-68deg);animation:fx22-bb 5s linear infinite}
@keyframes fx22-spin{to{transform:rotateZ(360deg)}}
@keyframes fx22-bb{
  from{transform:rotateZ(calc(var(--a) * -1)) rotateX(-68deg)}
  to{transform:rotateZ(calc(var(--a) * -1 - 360deg)) rotateX(-68deg)}}

/* ===== 23 方塊 ===== */
.fx-23 .sc{perspective:120cqw}
.fx-23 .cube{transform:rotateX(-22deg) rotateY(-28deg);animation:fx23-flip 5.2s cubic-bezier(.5,0,.3,1) infinite}
.fx-23 .face{position:absolute;left:0;top:0;width:48cqw;height:48cqw;margin:-24cqw 0 0 -24cqw;display:flex;
  align-items:center;justify-content:center;font-size:20cqw;color:#17181A;background:#fff;
  border:1cqw solid #E8B33A;box-sizing:border-box;transform:rotateY(calc(var(--k) * 90deg)) translateZ(24cqw)}
.fx-23 .face:nth-child(2n){color:#B8871F}
.fx-23 .top{background:linear-gradient(135deg,#FFE9A3 0%,#F5C84C 45%,#B8871F 100%);transform:rotateX(90deg) translateZ(24cqw)}
@keyframes fx23-flip{
  0%,18%{transform:rotateX(-22deg) rotateY(0deg)}
  25%,43%{transform:rotateX(-22deg) rotateY(-90deg)}
  50%,68%{transform:rotateX(-22deg) rotateY(-180deg)}
  75%,93%{transform:rotateX(-22deg) rotateY(-270deg)}
  100%{transform:rotateX(-22deg) rotateY(-360deg)}}

/* ===== 24 立體字 ===== */
.fx-24 .sc{perspective:110cqw}
.fx-24 .ex{transform:rotateX(-8deg) rotateY(-24deg);animation:fx24-sway 4.5s ease-in-out infinite}
.fx-24 .ly{position:absolute;left:0;top:0;width:76cqw;height:36cqw;margin:-18cqw 0 0 -38cqw;display:flex;
  align-items:center;justify-content:center;font-size:31cqw;font-weight:900;color:#B8871F;
  transform:translateZ(calc(var(--i) * -1.05cqw))}
.fx-24 .ly.fr{background:linear-gradient(135deg,#FFE9A3 0%,#F5C84C 45%,#B8871F 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@keyframes fx24-sway{
  0%,100%{transform:rotateX(-8deg) rotateY(-26deg)}
  50%{transform:rotateX(-8deg) rotateY(26deg)}}