/* ColorLab paper-touch: one-shot, interruptible motion; content never waits for it. */
.exploration-loading,#route-status:not([hidden]){position:fixed;inset:80px 0 0;z-index:35;display:grid;place-items:center;padding:24px;background:rgba(241,240,238,.96);text-align:center}
#route-status:not([hidden]){inset:80px 0 0;background:transparent;pointer-events:none}
.account-app #main>.loading-scene{position:fixed;inset:80px 0 0;margin:0;width:auto;display:grid;place-items:center;background:rgba(241,240,238,.96);z-index:35;text-align:center}
.intro-loading:not([hidden]){position:absolute;inset:0;display:grid;place-items:center;background:rgba(241,240,238,.96)}
.loading-scene{width:min(100%,360px);padding:36px 20px;color:#555050}
.loading-scene p{margin:24px 0 8px;font-size:18px;line-height:1.6}.loading-scene small{font-size:13px;color:#797473;line-height:1.6}
.loading-colors{display:flex;justify-content:center;align-items:center;gap:16px;height:64px}
.loading-colors i{position:relative;display:block;width:22px;height:28px;border-radius:48% 48% 40% 40%;background:#ce806e;transform-origin:50% 100%;--beat:0s}
.loading-colors i:nth-child(2){background:#dfc05b;--beat:.4s}.loading-colors i:nth-child(3){background:#91a48a;--beat:.8s}.loading-colors i:nth-child(4){background:#889cba;--beat:1.2s}
.loading-colors i::after{content:'';position:absolute;inset:auto 2px -8px;height:3px;border-radius:50%;background:currentColor;opacity:.1}
@media(prefers-reduced-motion:no-preference){.loading-colors i{animation:cl-loading-hop 1.6s cubic-bezier(.45,0,.2,1) var(--beat) infinite}}
@keyframes cl-loading-hop{0%,25%,100%{transform:translateY(0) scale(1)}8%{transform:translateY(2px) scale(1.1,.88)}16%{transform:translateY(-18px) scale(.94,1.06)}22%{transform:translateY(0) scale(1.06,.94)}}
:is(#records-list,#review-results)[aria-busy="true"]::before { content:'正在更新內容…'; display:block; padding:10px 0; color:#994760; font-size:14px; }
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-quick: 140ms;
  --motion-step: 280ms;
  --motion-reveal: 440ms;
}
.button:not(:disabled), .back-link, .text-button {
  transition: transform var(--motion-quick) ease-out, background-color var(--motion-quick) ease-out;
}
:is(.button, .back-link, .text-button):active:not(:disabled) { transform: translateY(1px) scale(.985); }
.button .icon, .read-link .icon, .history-card > .icon, .expand-symbol {
  transition: transform var(--motion-step) var(--motion-ease);
}
.article-card, .resource-card, .history-card { transition: border-color var(--motion-quick) ease-out, background-color var(--motion-quick) ease-out; }
/* Scoped feedback; no permanent compositor layers or touch-hover movement. */
@media(prefers-reduced-motion:no-preference) {
  :is(.first-use-link,.refresh-view,.profile-page>[data-logout],.studio-end [data-signout]) { transition:transform 160ms var(--motion-ease); }
  :is(.first-use-link,.refresh-view,.profile-page>[data-logout],.studio-end [data-signout]):active { transform:scale(.985); }
}
@media(prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine) { .first-use-link:hover>.icon:last-child { transform:translateX(2px);transition:transform 160ms var(--motion-ease); } }

/* The heading leads; the paper deck settles once. No idle loop or new artwork. */
.swatch { transform-origin: 50% 88%; transition: transform 320ms var(--motion-ease); }
.swatch.selected .color-shape { animation: cl-ink var(--motion-reveal) var(--motion-ease); }
.swatch:focus-visible { z-index: 7; }
/* Reserve space for tilted paper edges on narrow touch screens. */
@media (max-width:767px) { .color-deck { padding-inline: 20px; } }
@media (hover:hover) and (pointer:fine) {
  .button:hover:not(:disabled) .icon, .article-card:hover .read-link .icon, .history-card:hover > .icon { transform: translateX(2px); }
  .swatch:hover { transform: translateY(-15px) rotate(var(--rotate)); }
}

/* Only the form moves between questions. The progress rail and action semantics stay put. */
.test-page .question-area { animation: none; }
#question-form { animation: cl-question var(--motion-step) var(--motion-ease); }
#main[data-step-motion="next"] { --question-x: 14px; --question-y: 0px; }
#main[data-step-motion="previous"] { --question-x: -14px; --question-y: 0px; }
.option:has(input:checked) .option-check .icon { animation: cl-check 220ms var(--motion-ease); }
.option-letter { transition: background-color var(--motion-quick) ease-out, color var(--motion-quick) ease-out; }
.option:active { transform: scale(.992); }
progress::-webkit-progress-value { transition: width var(--motion-step) var(--motion-ease); }

.insight[open] p { animation: cl-arrive 220ms var(--motion-ease); }
dialog[open] { animation: cl-dialog var(--motion-step) var(--motion-ease); }
dialog[open]::backdrop { animation: cl-shade 180ms ease-out; }
@media(prefers-reduced-motion:no-preference){
  dialog.article-dialog[open]{animation:cl-article-slide 600ms cubic-bezier(.25,.46,.45,.94)}
  dialog.article-dialog[open]::backdrop{animation:cl-shade 400ms ease-out}
}
@keyframes cl-article-slide{from{opacity:.4;transform:translateY(32px)}to{opacity:1;transform:none}}
/* Error text remains in the live region; feedback never shakes a form or changes focus. */
.form-status:not(:empty) { animation: cl-arrive 220ms var(--motion-ease); }

@keyframes cl-arrive { from { opacity: .45; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cl-question { from { opacity: .5; transform: translate(var(--question-x, 0px), var(--question-y, 6px)); } to { opacity: 1; transform: none; } }
@keyframes cl-ink { from { opacity: .6; transform: translateY(3px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes cl-check { from { opacity: .4; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes cl-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cl-dialog { from { opacity: .4; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes cl-shade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  :is(.button, .back-link, .text-button, .option):active:not(:disabled) { transform: none; }
}
/* Mobile press-and-scrub: only the bubble moves; labels stay anchored. */
@media(max-width:767px){
  #navigation.tab-scrubber{touch-action:none;isolation:isolate}
  #navigation.tab-scrubber a{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
  #navigation.tab-scrubber::after{content:"";position:absolute;left:0;top:var(--tab-bubble-y,5px);width:var(--tab-bubble-width,70px);height:var(--tab-bubble-height,62px);transform:translateX(var(--tab-bubble-x,0px)) scale(.96);border-radius:23px;border:1px solid #ffffffdc;background:linear-gradient(145deg,#fff9,#f3dce8b8);box-shadow:0 4px 18px #8e476424,inset 0 1px 2px #fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);pointer-events:none;z-index:-1;opacity:0;transition:opacity 100ms ease-out}
  #navigation.tab-scrubbing::after{opacity:1;transform:translateX(var(--tab-bubble-x,0px)) scale(1)}
  #navigation.tab-scrubbing.tab-outside::after{opacity:0}
  #navigation.tab-scrubbing a[aria-current]::before{opacity:0}
  #navigation.tab-scrubbing a{color:var(--muted)}
  #navigation.tab-scrubbing a.tab-preview{color:var(--rose)}
  #navigation.tab-scrubbing .tab-preview .icon{filter:drop-shadow(0 1px 3px #9d456422)}
}
/* Success is a short, opaque interstitial before the destination is revealed. */
.brand-entry{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;gap:14px;background:#fbf8f4eb;pointer-events:none;animation:brand-entry-out .2s .4s ease-in forwards}.brand-entry>span{font:600 32px Georgia,serif;color:#393435}.brand-entry img{animation:brand-entry-in .35s cubic-bezier(.2,.8,.2,1) both}.brand-entry .brand-dot{color:#9d4564}
@keyframes brand-entry-in{from{opacity:0;transform:translateY(6px) scale(.92)}to{opacity:1;transform:none}}@keyframes brand-entry-out{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.brand-entry img{animation:none}.brand-entry{animation:none}}
.completion-feedback{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:24px;background:#fcf8f4;color:#393435;transition:opacity .14s ease-in}.completion-feedback.is-leaving{opacity:0;pointer-events:none}.completion-content{display:grid;justify-items:center;gap:12px;text-align:center;animation:completion-arrive .38s cubic-bezier(.2,.8,.2,1) both}
.completion-feedback strong{font:600 18px/1.5 system-ui}.completion-feedback small{font:13px/1.6 system-ui;color:#746d70}
.completion-mark{position:relative;display:block;width:48px;height:48px;background:#f3e6eb;border-radius:50%}.completion-mark svg{width:48px;height:48px;fill:none;stroke:#9d4564;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.completion-mark path{stroke-dasharray:40;animation:completion-check .32s .1s ease-out both}
.completion-mark i{position:absolute;left:22px;top:22px;width:5px;height:5px;border-radius:50%;background:var(--dot);animation:completion-dot .5s cubic-bezier(.2,.8,.2,1) both}.completion-mark i:nth-of-type(1){--x:-34px;--y:-23px;--dot:#df7280}.completion-mark i:nth-of-type(2){--x:35px;--y:-19px;--dot:#edc96c}.completion-mark i:nth-of-type(3){--x:32px;--y:28px;--dot:#89aa8c}.completion-mark i:nth-of-type(4){--x:-31px;--y:30px;--dot:#8bb1d1}
@keyframes completion-arrive{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes completion-check{from{stroke-dashoffset:40}to{stroke-dashoffset:0}}
@keyframes completion-dot{from{transform:translate(0,0);opacity:0}40%{opacity:1}to{transform:translate(var(--x),var(--y));opacity:0}}
@media(prefers-reduced-motion:reduce){.completion-feedback{transition:none}.completion-content,.completion-mark path,.completion-mark i{animation:none}.completion-mark i{display:none}}