/* Shared 0n106 motion. Content is visible before JavaScript and after failures. */
:root{--motion-ease:cubic-bezier(.2,.75,.25,1);--motion-ink:#173b51;--motion-teal:#087e83;--motion-rose:#bf3346}
.motion-art{box-sizing:border-box;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;max-width:1120px;margin:24px auto 32px;padding:12px 48px;background:linear-gradient(135deg,#f0f8f7,#fff 52%,#fff6f0);border:1px solid #dcebe9;border-radius:24px;overflow:hidden;box-shadow:0 12px 32px #153a4220}
.motion-art picture{display:block;width:min(100%,540px);flex:0 1 540px}.motion-art img{display:block;width:100%;height:auto;max-height:300px;object-fit:contain;border-radius:14px;animation:motion-arrive .7s var(--motion-ease) both,motion-float 7s ease-in-out .7s infinite}
.motion-glyphs{display:grid;gap:22px;position:absolute;left:28px;top:50%;transform:translateY(-50%);color:var(--motion-teal);opacity:.7}.motion-glyphs svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.motion-glyphs path{stroke-dasharray:1;stroke-dashoffset:0;animation:motion-draw 2s var(--motion-ease) both}
.motion-gallery{box-sizing:border-box;max-width:1120px;margin:32px auto;padding:24px 20px;background:#f4f9f8;border:1px solid #deebe8;border-radius:22px;color:var(--motion-ink)}.motion-gallery h2{margin:0 0 16px;font-size:clamp(21px,4vw,28px);line-height:1.3}.motion-wall{display:flex;gap:16px;overflow-x:auto;padding:4px 3px 16px;scroll-snap-type:x proximity;scrollbar-color:#9abfbd transparent;overscroll-behavior-x:contain}.motion-tile{display:block;flex:0 0 260px;max-width:82vw;overflow:hidden;background:#fff;border:1px solid #d9e5e2;border-radius:16px;text-decoration:none;color:inherit;scroll-snap-align:start;transition:transform .22s var(--motion-ease),box-shadow .22s}.motion-tile img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}.motion-tile span{display:block;padding:12px 14px;font-size:15px;font-weight:650;line-height:1.4}.motion-wall:focus-visible{outline:3px solid var(--motion-teal);outline-offset:4px}
.motion-revealed{animation:motion-rise .65s var(--motion-ease) both}.motion-count{font-variant-numeric:tabular-nums;display:inline-block;min-width:var(--count-width,1ch)}
/* Legacy scroll effects may add .js before observing off-screen sections. */
.rise:not([hidden]),.js .rise:not([hidden]){opacity:1!important}
/* Match the TW quiz navigation that existing config.js already applies. */
nav[aria-label="主要導覽"] .navlinks a[href="ai"],nav[aria-label="主要導覽"] .navlinks a[href="/quiz/exams/"]{display:none}
:where(button,.button,.btn,.primary,.exam-card,.plan-card,.motion-tile){transition:transform .22s var(--motion-ease),box-shadow .22s var(--motion-ease)}
@media(hover:hover){:where(button,.button,.btn,.primary,.exam-card,.plan-card,.motion-tile):hover{transform:translateY(-3px);box-shadow:0 12px 24px #153a4220}}
:where(button,.button,.btn,.primary,.motion-tile):active{transform:translateY(1px) scale(.985)}
:where(.primary,.btn-primary,.quiz-cta){position:relative;overflow:hidden;isolation:isolate}:where(.primary,.btn-primary,.quiz-cta)::after{content:"";position:absolute;inset:-30% auto -30% -70%;width:40%;background:linear-gradient(110deg,transparent,#ffffff36,transparent);transform:skewX(-18deg);pointer-events:none;animation:motion-sheen 6s ease-in-out infinite}
.motion-mark{display:inline-block;width:38px;height:34px;margin-inline:5px;vertical-align:middle;fill:none;stroke:#c52f45;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}.motion-mark path{stroke-dasharray:1;animation:motion-draw .45s ease-out both}.motion-explanation{animation:motion-rise .45s var(--motion-ease) both;animation-delay:var(--motion-delay,0s)}
@keyframes motion-arrive{from{opacity:.45;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes motion-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes motion-rise{from{opacity:.65;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes motion-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes motion-sheen{0%,78%{left:-70%;opacity:0}80%{opacity:1}96%,100%{left:130%;opacity:0}}
@media(max-width:640px){.motion-art{margin:16px 16px 24px;padding:8px 24px;border-radius:18px}.motion-art img{max-height:220px}.motion-glyphs{left:9px;gap:14px}.motion-glyphs svg{width:22px;height:22px}.motion-gallery{margin:24px 16px;padding:20px 14px}.motion-tile{flex-basis:245px}}
@media(prefers-reduced-motion:reduce){html:root{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-art img,.motion-revealed,.motion-explanation{opacity:1!important;transform:none!important}:where(button,.button,.btn,.primary,.exam-card,.plan-card,.motion-tile):hover,:where(button,.button,.btn,.primary,.motion-tile):active{transform:none!important}.motion-mark path,.motion-glyphs path{stroke-dashoffset:0!important}}