/* Shared motion layer — scroll reveals, headline split, button shine, cursor, progress bar.
   Classes are added by motion.js, so pages still work if the script does not run. */

/* Scaled/sliding elements must never cause sideways scrolling */
html, body { overflow-x: clip; }

/* Page fade-in */
html.mx-ready body { animation: mx-page-in .6s ease both; }
@keyframes mx-page-in { from { opacity: 0; } to { opacity: 1; } }

/* Scroll progress bar */
.mx-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--mx-accent, currentColor); z-index: 9999; pointer-events: none; }

/* Reveal on scroll — uses individual translate/scale so existing transforms keep working */
.mx-reveal { opacity: 0; translate: 0 34px; transition: opacity .9s cubic-bezier(.2,.65,.25,1), translate .9s cubic-bezier(.2,.65,.25,1), scale .9s cubic-bezier(.2,.65,.25,1), clip-path 1.1s cubic-bezier(.7,0,.2,1), filter .9s ease; transition-delay: var(--mx-delay, 0s); }
.mx-reveal.mx-left { translate: -40px 0; }
.mx-reveal.mx-right { translate: 40px 0; }
.mx-reveal.mx-zoom { translate: 0 0; scale: .92; filter: blur(6px); }
.mx-reveal.mx-img { translate: 0 0; clip-path: inset(12% 12% 12% 12%); scale: 1.12; }
.mx-reveal.mx-in { opacity: 1; translate: 0 0; scale: 1; filter: none; clip-path: inset(0 0 0 0); }

/* Headline word split */
/* Room around each word so tall Chinese glyphs and italic letters are never clipped by the reveal mask; negative margins keep the layout unchanged */
.mx-word { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em .12em .16em; margin: -.14em -.12em -.16em; }
.mx-word > span { display: inline-block; translate: 0 125%; transition: translate 1s cubic-bezier(.2,.75,.2,1); transition-delay: var(--mx-delay, 0s); }
.mx-split-in .mx-word > span { translate: 0 0; }

/* Button shine sweep */
.mx-shine { position: relative; overflow: hidden; isolation: isolate; }
.mx-shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: -75%; width: 50%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); pointer-events: none; z-index: 1; }
.mx-shine:hover::after { animation: mx-shine .75s ease; }
@keyframes mx-shine { to { left: 130%; } }
.mx-magnet { transition: translate .25s cubic-bezier(.2,.8,.2,1); }

/* Tilt cards */
.mx-tilt { transition: transform .45s ease; }
.mx-tilt:hover { transform: translateY(-4px); }

/* Image hover zoom for links/cards that contain an image */
.mx-zoom-wrap { overflow: hidden; }
.mx-zoom-wrap img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.mx-zoom-wrap:hover img { transform: scale(1.06); }

/* Bottom-right dock: back to top + back to the works directory */
.mx-dock { position: fixed; right: 22px; bottom: 22px; z-index: 95; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; transition: bottom .3s; }
.mx-dock.mx-lift { bottom: 96px; }
.mx-dock > * { pointer-events: auto; }
.mx-dock svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.mx-top { width: 58px; height: 58px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(20,20,20,.8); color: #fff; cursor: pointer; box-shadow: 0 10px 28px rgba(0,0,0,.28); backdrop-filter: blur(6px); opacity: 0; translate: 0 16px; pointer-events: none !important; transition: opacity .3s, translate .3s, background .2s, scale .2s; }
.mx-top.mx-show { opacity: 1; translate: 0 0; pointer-events: auto !important; }
/* While hidden, back-to-top takes no space so the language button sits right above the home button */
.mx-top:not(.mx-show) { height: 0 !important; margin-top: -12px; overflow: hidden; box-shadow: none; }
.mx-top { transition: opacity .3s, translate .3s, background .2s, scale .2s, height .3s, margin .3s; }
@media (max-width: 640px) { .mx-top:not(.mx-show) { margin-top: -10px; } }
.mx-top:hover { background: #111; }
/* Home button: glowing, with a bouncing label so visitors notice the way back to the works directory */
.mx-home { position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(135deg, #ff7a45, #ff3d77); color: #fff; text-decoration: none; box-shadow: 0 10px 28px rgba(255,90,90,.45); transition: scale .25s ease, box-shadow .25s ease; animation: mx-home-in .6s .8s both, mx-glow 2.2s ease-in-out 1.4s infinite; }
.mx-home::before, .mx-home::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #ff6a5b; opacity: 0; animation: mx-ring 2.2s ease-out 1.4s infinite; pointer-events: none; }
.mx-home::after { animation-delay: 2.5s; }
.mx-home:hover { scale: 1.08; box-shadow: 0 14px 36px rgba(255,90,90,.6); }
.mx-home-tip { position: absolute; right: calc(100% + 14px); top: 50%; margin-top: -17px; height: 34px; padding: 0 14px; display: flex; align-items: center; white-space: nowrap; border-radius: 999px; background: #fff; color: #e5484d; font: 700 14px/1 system-ui, "Noto Sans SC", sans-serif; font-style: normal; box-shadow: 0 8px 24px rgba(0,0,0,.22); animation: mx-tip-in .5s 1.2s both, mx-bounce 1.6s ease-in-out 1.7s infinite; }
.mx-home-tip::after { content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: #fff; rotate: 45deg; border-radius: 2px; }
.mx-home:hover .mx-home-tip { animation-play-state: running, paused; background: #ff3d77; color: #fff; }
.mx-home:hover .mx-home-tip::after { background: #ff3d77; }
@keyframes mx-glow { 0%, 100% { box-shadow: 0 10px 28px rgba(255,90,90,.45); } 50% { box-shadow: 0 10px 28px rgba(255,90,90,.45), 0 0 34px 6px rgba(255,100,90,.55); } }
@keyframes mx-ring { 0% { opacity: .7; scale: 1; } 100% { opacity: 0; scale: 1.7; } }
@keyframes mx-bounce { 0%, 100% { translate: 0 0; } 30% { translate: -8px -6px; } 45% { translate: 0 0; } 60% { translate: -4px -3px; } 75% { translate: 0 0; } }
@keyframes mx-tip-in { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes mx-home-in { from { opacity: 0; translate: 30px 0; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .mx-home, .mx-home::before, .mx-home::after, .mx-home-tip { animation: none; } }
@media (max-width: 640px) {
  .mx-dock { right: 16px; bottom: 16px; gap: 10px; }
  .mx-dock.mx-lift { bottom: 82px; }
  .mx-top, .mx-home { width: 52px; height: 52px; min-width: 52px; padding: 0; }
  .mx-home-tip { font-size: 13px; height: 30px; margin-top: -15px; padding: 0 12px; }
  .mx-dock svg { width: 24px; height: 24px; }
}

/* Ripple on click */
.mx-ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.45); transform: scale(0); animation: mx-ripple .6s ease-out forwards; pointer-events: none; z-index: 2; }
@keyframes mx-ripple { to { transform: scale(4); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .mx-reveal, .mx-word > span { opacity: 1 !important; translate: 0 0 !important; scale: 1 !important; clip-path: none !important; filter: none !important; transition: none !important; }
  .mx-shine::after { display: none; }
  html.mx-ready body { animation: none; }
}

/* Language switch (EN / 中) — sits at the top of the bottom-right dock */
html.mx-i18n-wait body { opacity: 0; }
body { transition: opacity .25s ease; }
.mx-lang { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px 0 6px; border: 0; border-radius: 999px; background: #fff; color: #111; font: 700 14px/1 system-ui, "Noto Sans SC", sans-serif; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.22); transition: translate .25s ease, box-shadow .25s ease; animation: mx-home-in .6s .6s both; }
.mx-lang b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #111; color: #fff; font-size: 13px; letter-spacing: .02em; }
.mx-lang:hover { translate: 0 -2px; box-shadow: 0 12px 30px rgba(0,0,0,.28); }
@media (max-width: 640px) {
  .mx-lang { height: 42px; padding: 0 12px 0 5px; font-size: 13px; }
  .mx-lang b { width: 32px; height: 32px; }
}

/* English-first pages shown in Chinese: Chinese glyphs fill the whole em box, so headlines designed with tight English line spacing need a little more air */
html.mx-lang-zh h1, html.mx-lang-zh h2 { line-height: 1.22; letter-spacing: 0; }