/* ===== 動態效果（motion.js 載入後才啟用；減少動態設定時自動關閉） ===== */
.mo .hero{isolation:isolate}
.mo .hero .orb{position:absolute;border-radius:50%;pointer-events:none;z-index:-1;filter:blur(8px);opacity:.75}
.mo .hero .orb.o1{width:420px;height:420px;left:-120px;top:40px;background:radial-gradient(circle,#FFE7A8,rgba(255,231,168,0) 70%);animation:orb1 14s ease-in-out infinite alternate}
.mo .hero .orb.o2{width:520px;height:520px;right:-160px;bottom:-120px;background:radial-gradient(circle,#F7D9B5,rgba(247,217,181,0) 70%);animation:orb2 18s ease-in-out infinite alternate}
@keyframes orb1{to{transform:translate(120px,80px) scale(1.15)}}
@keyframes orb2{to{transform:translate(-140px,-60px) scale(1.1)}}

/* 大標逐字落下 */
.mo .hero h1 .ch{display:inline-block;opacity:0;transform:translateY(.55em) rotate(-8deg) scale(.9);filter:blur(6px);
  transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.34,1.56,.64,1),filter .6s ease;transition-delay:var(--d)}
.mo .hero.go h1 .ch{opacity:1;transform:none;filter:none}
.mo .hero h1 .hl{background-size:0% 100%;background-repeat:no-repeat;transition:background-size .7s cubic-bezier(.65,0,.35,1) 1.05s}
.mo .hero.go h1 .hl{background-size:100% 100%}
.mo .hero h1 .under{background-size:0% 12px;transition:background-size .8s cubic-bezier(.65,0,.35,1) 1.35s}
.mo .hero.go h1 .under{background-size:100% 12px}
.mo .hero .spark{animation:twinkle 2.6s ease-in-out infinite 1.6s}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(1.5) rotate(90deg);opacity:.55}}
.mo .hero .eyebrow::after{transform-origin:left;transform:scaleX(0);transition:transform .8s cubic-bezier(.65,0,.35,1) .2s}
.mo .hero.go .eyebrow::after{transform:scaleX(1)}

/* 主視覺：作品畫面飛入，之後輕輕漂浮 */
.mo .hero-visual{perspective:1400px}
.mo .hero-visual > *{transition:transform 1.1s cubic-bezier(.22,1.2,.36,1),opacity .9s ease}
.mo .hero-visual .f1{opacity:0;transform:translate(-140px,40px) rotate(-14deg) scale(.86)}
.mo .hero-visual .f2{opacity:0;transform:translate(160px,60px) rotate(12deg) scale(.86)}
.mo .hero-visual .phone{opacity:0;transform:translateY(140px) rotate(-6deg)}
.mo .hero-visual .badge{opacity:0;transform:scale(.4) rotate(-10deg)}
.mo .hero.go .hero-visual .f1{opacity:1;transform:translate(var(--px1,0),var(--py1,0)) rotate(-1.5deg);transition-delay:.35s}
.mo .hero.go .hero-visual .f2{opacity:1;transform:translate(var(--px2,0),var(--py2,0)) rotate(2deg);transition-delay:.55s}
.mo .hero.go .hero-visual .phone{opacity:1;transform:translate(var(--px3,0),var(--py3,0)) rotate(0);transition-delay:.8s}
.mo .hero.go .hero-visual .badge{opacity:1;transform:rotate(3deg);transition-delay:1.2s;transition-timing-function:cubic-bezier(.34,1.8,.64,1)}
.mo .hero.settled .hero-visual > *{transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s ease;transition-delay:0s}
.mo .hero.settled .hero-visual .frame img,.mo .hero.settled .hero-visual .phone img{animation:bob 6s ease-in-out infinite}
.mo .hero.settled .hero-visual .f2 img{animation-delay:-2s}.mo .hero.settled .hero-visual .phone img{animation-delay:-4s}
@keyframes bob{50%{transform:translateY(-6px)}}
.mo .hero.settled .hero-visual .badge{animation:badge 4s ease-in-out infinite}
@keyframes badge{50%{transform:rotate(-1deg) translateY(-6px)}}

/* 金色按鈕：每隔幾秒一道光 */
.mo .btn-gold{position:relative;overflow:hidden}
.mo .btn-gold::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-20deg);animation:shine 4.5s ease-in-out infinite 2s;pointer-events:none}
@keyframes shine{0%{left:-60%}22%,100%{left:130%}}

/* 捲動出現：更有層次 */
.mo [data-reveal]{opacity:0;transform:translateY(34px) scale(.98);filter:blur(4px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1),filter .8s ease;transition-delay:var(--rd,0s)}
.mo [data-reveal].in{opacity:1;transform:none;filter:none}
.mo .services [data-reveal],.mo .steps [data-reveal],.mo .plans [data-reveal]{transform:translateY(60px) rotateX(14deg);transform-origin:50% 100%}
.mo .services,.mo .steps,.mo .plans{perspective:1200px}
.mo .mini-cases [data-reveal]:nth-child(odd),.mo .case[data-reveal]:nth-child(odd){transform:translateX(-70px) rotate(-3deg)}
.mo .mini-cases [data-reveal]:nth-child(even),.mo .case[data-reveal]:nth-child(even){transform:translateX(70px) rotate(3deg)}
.mo [data-reveal].in{transform:none!important}
.mo .sec-head .eyebrow::before,.mo .sec-head .eyebrow::after{transform:scaleX(0);transition:transform .8s cubic-bezier(.65,0,.35,1) .25s}
.mo .sec-head.in .eyebrow::before,.mo .sec-head.in .eyebrow::after{transform:scaleX(1)}
.mo .mini img,.mo .case-shot img,.mo .demo img{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.mo .mini:hover img,.mo .demo:hover img{transform:scale(1.04)}
.mo .svc{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.mo .svc:hover{transform:translateY(-6px) rotate(-.4deg)}

/* 頁面上方的閱讀進度條 */
.mo-progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--gold),var(--gold-deep));z-index:60;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .mo *{animation:none!important;transition:none!important}
  .mo .hero h1 .ch,.mo [data-reveal],.mo .hero-visual > *{opacity:1!important;transform:none!important;filter:none!important}
}

/* 關於區塊大頭貼：動態版 */
.mo .me img{animation:meFloat 5.5s ease-in-out infinite}
@keyframes meFloat{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(1.5deg) translateY(-10px)}}
.mo .me-blob{animation:meBlob 9s ease-in-out infinite}
@keyframes meBlob{0%,100%{border-radius:46% 54% 48% 52%/55% 50% 50% 45%;transform:rotate(0) scale(1)}
  33%{border-radius:58% 42% 55% 45%/45% 58% 42% 55%;transform:rotate(8deg) scale(1.04)}
  66%{border-radius:42% 58% 44% 56%/52% 42% 58% 48%;transform:rotate(-6deg) scale(.98)}}
.mo .me::before{content:"";position:absolute;left:16%;right:16%;top:22%;bottom:8%;border-radius:50%;border:2px solid rgba(239,210,122,.7);animation:mePulse 3.2s ease-out infinite;pointer-events:none}
@keyframes mePulse{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.mo .me-bubble.pop{animation:bubblePop .5s cubic-bezier(.34,1.8,.64,1)}
@keyframes bubblePop{0%{transform:rotate(6deg) scale(.4);opacity:0}100%{transform:rotate(6deg) scale(1);opacity:1}}
.me-dot{position:absolute;bottom:18%;width:8px;height:8px;border-radius:50%;background:var(--gold);opacity:0;pointer-events:none}
.mo .me-dot{animation:meDot 4s ease-in infinite}
@keyframes meDot{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:.9}100%{transform:translateY(-220px) scale(1.1);opacity:0}}
.mo .me.jelly img{animation:meJelly .7s ease}
@keyframes meJelly{0%{transform:scale(1)}30%{transform:scale(1.08,.92) rotate(-3deg)}55%{transform:scale(.95,1.05) rotate(3deg)}75%{transform:scale(1.03,.97)}100%{transform:scale(1)}}
.me{cursor:pointer;-webkit-tap-highlight-color:transparent}