@keyframes amicro-fade-up {
  from { opacity: 0; transform: translateY(36px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes amicro-zoom-in {
  from { opacity: 0; transform: scale(.85); filter: blur(12px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes amicro-pulse-dot {
  0%, 100% { opacity: .2; transform: scale(.72); }
  50% { opacity: 1; transform: scale(1); }
}

.motion-enter { opacity: 0; }
.motion-enter.is-visible { animation: amicro-fade-up .8s cubic-bezier(.16,1,.3,1) both; }
.upload-complete { animation: amicro-fade-up .45s cubic-bezier(.16,1,.3,1) both; }

.tilt-surface { transform-style: preserve-3d; will-change: transform; transition: transform .38s cubic-bezier(.16,1,.3,1), box-shadow .38s ease; }
.tilt-surface:hover { box-shadow: 25px 30px 0 var(--peach, #edc8b8); }
.magnetic { will-change: transform; transition: transform .3s cubic-bezier(.16,1,.3,1), background .2s ease, color .2s ease; }
body .brand-logo { display: block; margin: 0 0 8px; padding: 10px 0 6px; line-height: 0; }
.brand-logo a { display: block; width: fit-content; }
.brand-logo img { display: block; width: 82px; height: auto; mix-blend-mode: multiply; }
.person-upload { display: flex !important; align-items: center; justify-content: center; min-height: 58px; margin-top: 8px; }
.example-upload { display: block; width: fit-content; margin-top: 10px; padding: 0; border: 0; background: transparent; color: #82594f; font: 700 14px "Microsoft YaHei", "PingFang SC", sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.location .example-upload { grid-column: 2; justify-self: end; margin: 0; font-size: 12px; }
.location .plus { display: grid; place-items: center; line-height: 1; }
.location .plus.has-file { font-size: 0; }
.location .plus.has-file::after { content: "✓"; font-size: 24px; }
.location-preview { grid-column: 2; grid-row: 1; display: block; width: 50px; height: 50px; object-fit: cover; border: 3px solid #fbf6ec; box-shadow: 3px 4px 0 #edc8b8; }
.person-preview-stack { display: grid; grid-template-columns: repeat(3, 62px); gap: 0; min-height: 0; margin-top: 12px; }
.person-preview-stack img { width: 68px; height: 72px; object-fit: cover; border: 3px solid #fbf6ec; box-shadow: 4px 5px 0 #edc8b8; }
.person-preview-stack img + img { margin-left: -24px; }
.input-preview-strip { display: grid; grid-template-columns: 82px; margin-top: 14px; }
.input-preview-strip img { width: 82px; height: 82px; object-fit: cover; border: 3px solid #fbf6ec; box-shadow: 4px 5px 0 #edc8b8; }
.generated-result { display: grid; gap: 12px; margin-top: 18px; }
.generated-result:empty { display: none; }
.generated-result img { display: block; width: 100%; max-height: 620px; object-fit: contain; background: #edc8b8; }
.location-name { width: 100%; outline-color: #bd3c35; }
#add-location + .example-upload { margin-left: 29px; }
.generation-status { min-height: 22px; margin: 14px 0 0; color: #82594f; font-size: 14px; font-weight: 700; text-align: center; }
.footprint-generate { margin-top: 22px; }
.generated-download { display: inline-flex; margin-top: 14px; padding: 10px 15px; background: #bd3c35; color: #fbf6ec; font: 700 14px "Microsoft YaHei", sans-serif; letter-spacing: 1px; text-decoration: none; }
.generated-download:hover, .generated-download:focus-visible { background: #3c201c; }

.pulse-dots { display: inline-flex; gap: 5px; align-items: center; margin-left: 9px; vertical-align: middle; }
.pulse-dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: amicro-pulse-dot 1.4s ease-in-out infinite; }
.pulse-dots i:nth-child(2) { animation-delay: .2s; }
.pulse-dots i:nth-child(3) { animation-delay: .4s; }

/* 全项目唯一的按压反馈素材：用 translate 属性实现，不与 magnetic/tilt 的 transform 冲突 */
:where(button, a.generate, label.pick, label.action, label.upload, .upload, .add, .primary, .close):active { translate: 0 1px; }

.lightbox.open img, dialog[open] .dialog-head, dialog[open] .locations, dialog[open] .dialog-foot { animation: amicro-zoom-in .45s cubic-bezier(.16,1,.3,1) both; }
dialog[open] .locations { animation-delay: .04s; }
dialog[open] .dialog-foot { animation-delay: .08s; }

/* 减弱动态适配：默认不生效；仅当 JS 检测到 ?motion-off 且系统开启"减弱动态效果"时挂 html.motion-off 类 */
html.motion-off .motion-enter, html.motion-off .motion-enter.is-visible, html.motion-off .upload-complete, html.motion-off .lightbox.open img, html.motion-off dialog[open] .dialog-head, html.motion-off dialog[open] .locations, html.motion-off dialog[open] .dialog-foot { animation: none; opacity: 1; filter: none; }
html.motion-off .tilt-surface, html.motion-off .magnetic { transition: none; transform: none !important; }
html.motion-off .pulse-dots i { animation: none; opacity: 1; transform: none; }
html.motion-off :where(button, a.generate, label.pick, label.action, label.upload, .upload, .add, .primary, .close):active { translate: none; }

@media (max-width: 700px) {
  .brand-logo img { width: 66px; }
  body .brand-logo { margin-bottom: 4px; padding: 8px 0 4px; }
  #add-location + .example-upload { margin-left: 18px; }
}

.top:has(.brand-logo) { padding: 16px 0; }
.top .brand-logo { margin: 0; padding: 0; }
header:has(.brand-logo) { padding-bottom: 16px; }