/* 動態效果獨立管理。參數由 config.js 的 motion 與 effects.js 寫入 CSS 變數。 */
:root{--motion-camera-duration:26s;--motion-sheen-duration:10s;--motion-float-top:8s;--motion-float-bottom:9s;--motion-travel-x:12px;--motion-travel-y:8px;--motion-zoom:1.045;--motion-rotate:.35deg;--motion-light-opacity:.16}
html[data-xz-motion] .luxe-hero{isolation:isolate}
html[data-xz-motion] .hero-stage{z-index:2}
html[data-xz-motion] .hero-scene{transition:transform 1.1s cubic-bezier(.18,.65,.3,1)}
html[data-xz-motion] .hero-scene img{transform-origin:72% 53%;animation:xz-camera var(--motion-camera-duration) ease-in-out infinite;will-change:transform}
html[data-xz-motion] .hero-scene::after{content:'';position:absolute;inset:-12%;background:linear-gradient(112deg,transparent 30%,#c8feff00 39%,#d9ffff9c 45%,#8ffaff54 49%,transparent 58%);mix-blend-mode:screen;opacity:var(--motion-light-opacity);pointer-events:none;transform:translateX(-45%);animation:xz-material-sweep var(--motion-sheen-duration) ease-in-out infinite}
html[data-xz-motion] .hero-glass{overflow:hidden}
html[data-xz-motion] .hero-glass::after{content:'';position:absolute;inset:-80% -70%;background:linear-gradient(115deg,transparent 35%,#e6ffff00 43%,#e6ffff73 49%,#b3feff1c 53%,transparent 61%);pointer-events:none;transform:translateX(-40%);animation:xz-glass-sheen var(--motion-sheen-duration) ease-in-out infinite;animation-delay:-3s}
html[data-xz-motion] .glass-top{animation-duration:var(--motion-float-top)}
html[data-xz-motion] .glass-bottom{animation-duration:var(--motion-float-bottom)}
html[data-xz-motion] .glow-type{background-size:230% 100%;animation:xz-type-shine calc(var(--motion-sheen-duration) * 1.3) ease-in-out infinite}
html[data-xz-motion] .motion-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;mix-blend-mode:screen;opacity:.8}
html[data-xz-motion] .motion-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #afebed4d;border-radius:20px;padding:7px 11px;font-size:8px;line-height:1.3;letter-spacing:.03em;color:#c4f4f6;background:linear-gradient(140deg,#b5fcff17,#174e5175);box-shadow:inset 0 1px #fff1;backdrop-filter:blur(10px);flex-shrink:0;transition:background .2s,border-color .2s}
html[data-xz-motion] .motion-toggle:hover{background:#a8f5f72e;border-color:#c8feff99}
html[data-xz-motion] .motion-toggle::before{content:'';display:block;box-sizing:content-box;width:2px;height:8px;border-left:2px solid currentColor;border-right:2px solid currentColor}
html[data-xz-motion=paused] .motion-toggle::before{width:0;height:0;border:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid currentColor;margin-right:1px}
html[data-xz-motion] .motion-toggle[hidden]{display:none}
html[data-xz-motion] .project-image::after{background:linear-gradient(115deg,#fff0 12%,#ffffff00 32%,#ffffff29 45%,#c5fdff0f 51%,#ffffff00 66%,#fff0 90%);background-size:190% 100%;background-position:115% 0;transition:background-position 1.1s,opacity .7s;opacity:.3}
html[data-xz-motion] .project-card:hover .project-image::after{background-position:-55% 0;opacity:.85}
html[data-xz-motion] .button-primary::before,html[data-xz-motion] .button-dark::before{background:linear-gradient(110deg,#fff0 30%,#fff5 47%,#fff0 66%);background-size:220% 100%;animation:xz-button-sheen calc(var(--motion-sheen-duration) * 1.6) ease-in-out infinite}
/* 所有停止狀態均只暫停時間軸，保留當前材質與構圖。 */
html[data-xz-motion=paused] .luxe-hero *,html[data-xz-motion=paused] .luxe-hero *::before,html[data-xz-motion=paused] .luxe-hero *::after,html[data-xz-motion=paused] .button::before,html.motion-dormant .luxe-hero *,html.motion-dormant .luxe-hero *::before,html.motion-dormant .luxe-hero *::after,html.motion-dormant .button::before,.luxe-hero.motion-outside *,.luxe-hero.motion-outside *::before,.luxe-hero.motion-outside *::after{animation-play-state:paused!important}
html[data-xz-motion=disabled] .hero-scene img,html[data-xz-motion=disabled] .hero-scene::after,html[data-xz-motion=disabled] .hero-glass,html[data-xz-motion=disabled] .hero-glass::after,html[data-xz-motion=disabled] .glow-type,html[data-xz-motion=disabled] .hero-scroll i::after,html[data-xz-motion=disabled] .button::before{animation:none!important;will-change:auto}
html[data-xz-motion=disabled] .hero-scene::after,html.motion-no-sweep .hero-scene::after,html.motion-no-sweep .hero-glass::after{display:none}
html.motion-no-sweep .glow-type,html.motion-no-sweep .button::before{animation:none!important}
html.motion-no-camera .hero-scene img{animation:none!important;will-change:auto}
html[data-xz-motion=disabled] .hero-scene img{transform:none}
html[data-xz-motion=paused] .hero-scene img,html.motion-dormant .hero-scene img{will-change:auto}
@keyframes xz-camera{0%,100%{transform:scale(1.005) translate3d(calc(var(--motion-travel-x) * -.35),calc(var(--motion-travel-y) * .35),0) rotate(calc(var(--motion-rotate) * -1))}45%{transform:scale(var(--motion-zoom)) translate3d(var(--motion-travel-x),calc(var(--motion-travel-y) * -1),0) rotate(var(--motion-rotate))}75%{transform:scale(1.025) translate3d(calc(var(--motion-travel-x) * -.5),calc(var(--motion-travel-y) * -.3),0) rotate(0deg)}}
@keyframes xz-material-sweep{0%,12%{transform:translateX(-46%);opacity:0}30%{opacity:var(--motion-light-opacity)}60%{opacity:var(--motion-light-opacity)}82%,100%{transform:translateX(46%);opacity:0}}
@keyframes xz-glass-sheen{0%,10%{transform:translateX(-55%);opacity:0}30%{opacity:.65}63%{opacity:.35}80%,100%{transform:translateX(55%);opacity:0}}
@keyframes xz-type-shine{0%,100%{background-position:0 50%}55%{background-position:100% 50%}}
@keyframes xz-button-sheen{0%,35%{background-position:110% 0}70%,100%{background-position:-110% 0}}
@media(max-width:850px){html[data-xz-motion] .motion-toggle{font-size:7px;padding:7px 10px;gap:7px}.hero-footer>span:last-of-type{display:none}}
@media(max-width:600px){html[data-xz-motion] .motion-field{opacity:.6}html[data-xz-motion] .motion-toggle{margin-left:auto;font-size:7px;padding:8px 11px}.hero-footer{align-items:center}.hero-footer>span:last-of-type{display:none!important}html[data-xz-motion] .hero-scene img{transform-origin:70% 60%}}
@media(prefers-reduced-motion:reduce){html[data-xz-motion] .luxe-hero *,html[data-xz-motion] .luxe-hero *::before,html[data-xz-motion] .luxe-hero *::after,html[data-xz-motion] .button::before{animation:none!important;transition:none!important}html[data-xz-motion] .hero-scene img{transform:none;will-change:auto}html[data-xz-motion] .hero-scene::after,html[data-xz-motion] .hero-glass::after,html[data-xz-motion] .motion-field{display:none!important}}