/**
 * 前台交互动效层（LOOK CLUB · brand）
 * 只负责动画/过渡，不改布局语义与文案。
 * 依赖：src/motion/enhance.ts（motion-reveal / motion-in / is-scrolled）
 */

html {
  scroll-behavior: smooth;
}

:root {
  --motion-dur: 0.48s;
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-pink-shadow: rgba(180, 90, 90, 0.16);
}

/* ---------- 视口入场 ---------- */
.motion-reveal {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity var(--motion-dur) var(--motion-ease),
    transform var(--motion-dur) var(--motion-ease);
  transition-delay: var(--motion-stagger, 0s);
  animation: none !important;
}

.motion-reveal.motion-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 壳层滑动期间：侧栏内禁止再叠 transform / filter 过渡 */
html.page-enter-pending .brand-rail-inner,
html.page-enter-pending .brand-panel,
html.page-enter-pending .brand-logo {
  transition: none !important;
}

html.page-enter-pending .brand-deer-main {
  transition: opacity 0.7s var(--motion-ease) !important;
}

/* ---------- 侧栏滚动质感 ---------- */
.brand-rail-inner,
.brand-panel {
  transition:
    box-shadow var(--motion-dur) var(--motion-ease),
    background var(--motion-dur) var(--motion-ease),
    filter var(--motion-dur) var(--motion-ease);
}

body.is-scrolled .brand-rail-inner,
body.is-scrolled .brand-panel {
  box-shadow:
    0 18px 44px rgba(180, 70, 70, 0.34),
    0 2px 0 rgba(255, 255, 255, 0.18) inset;
  background: linear-gradient(165deg, #fd9c97 0%, #fd9994 48%, #f7908b 100%);
}

.brand-logo {
  transition: transform 0.35s var(--motion-ease-out);
}

body.is-scrolled .brand-logo {
  transform: scale(0.96);
}

.brand-deer-main {
  transition: transform 0.55s var(--motion-ease-out);
}

body.is-scrolled .brand-deer-main {
  transform: translateY(4px) scale(0.98);
}

/* ---------- 按钮 / 可点 ---------- */
button.primary,
button.ghost,
button.roll,
.pill-btn,
.preview-close,
.back,
.side-fun-cat summary,
.side-fun-dir summary,
.side-fun-item,
.enter,
.rank-form .btn,
.rank-upload .btn,
.rank-nav a,
.rank-entry-shot {
  transition:
    transform 0.26s var(--motion-ease-out),
    box-shadow 0.26s var(--motion-ease-out),
    filter 0.26s var(--motion-ease-out),
    background-color 0.26s var(--motion-ease-out),
    background 0.26s var(--motion-ease-out),
    color 0.26s var(--motion-ease-out),
    border-color 0.26s var(--motion-ease-out),
    opacity 0.26s var(--motion-ease-out);
}

button.primary:hover,
button.roll:not(:disabled):hover,
.pill-btn:hover,
.rank-form .btn.primary:hover,
.rank-upload .btn.primary:hover {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.05);
  box-shadow: 0 12px 26px rgba(233, 120, 117, 0.35);
}

button.ghost:hover,
.back:hover,
.rank-form .btn.ghost:hover,
.rank-upload .btn.ghost:hover {
  transform: translateY(-1px) scale(1.02);
  filter: brightness(0.98);
}

button.primary:active,
button.ghost:active,
button.roll:not(:disabled):active,
.pill-btn:active,
.back:active,
.preview-close:active,
.rank-form .btn:active,
.rank-upload .btn:active {
  transform: translateY(0) scale(0.96);
}

.side-fun-cat summary:hover,
.side-fun-dir summary:hover {
  background: rgba(255, 255, 255, 0.1);
}

.side-fun-cat summary::after,
.side-fun-dir summary::after {
  transition: transform 0.28s var(--motion-ease-out);
}

.side-fun-item:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 22px rgba(80, 40, 40, 0.14);
}

.side-fun-item:active {
  transform: translateY(0) scale(0.98);
}

.side-fun-item.is-selected {
  transform: translateY(-2px) scale(1.02);
}

.preview-close:hover {
  transform: scale(1.08);
  background: rgba(0, 0, 0, 0.55);
}

.rank-nav a:hover {
  transform: translateY(-1px);
  filter: brightness(0.95);
}

/* ---------- 玩法卡 / 趣味卡 ---------- */
.play-card {
  transition:
    transform 0.34s var(--motion-ease-out),
    box-shadow 0.34s var(--motion-ease-out),
    border-color 0.34s var(--motion-ease-out) !important;
}

.play-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 24px 48px var(--motion-pink-shadow);
}

.play-card:hover .enter {
  transform: translateX(4px);
}

.play-card:active {
  transform: translateY(-3px) scale(0.99);
}

.play-card .enter {
  display: inline-block;
  transition: transform 0.28s var(--motion-ease-out);
}

.fun-card {
  transition:
    transform 0.3s var(--motion-ease-out),
    box-shadow 0.3s var(--motion-ease-out) !important;
}

.fun-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px var(--motion-pink-shadow);
}

.panel {
  transition:
    transform 0.32s var(--motion-ease),
    box-shadow 0.32s var(--motion-ease),
    border-color 0.32s var(--motion-ease);
}

.panel:hover {
  box-shadow: 0 16px 36px rgba(180, 90, 90, 0.12);
  border-color: rgba(244, 139, 136, 0.32);
}

.prob-item {
  transition:
    transform 0.28s var(--motion-ease-out),
    background-color 0.28s var(--motion-ease-out),
    box-shadow 0.28s var(--motion-ease-out);
}

.prob-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(180, 90, 90, 0.1);
  background: rgba(244, 139, 136, 0.12);
}

.prob-item .f {
  transform-origin: left center;
  transition: transform 0.45s var(--motion-ease-out);
}

.prob-item:hover .f {
  transform: scaleX(1.04);
}

/* ---------- 输入框 ---------- */
.auth-row input,
.rank-form input,
.rank-form select,
.rank-form textarea,
.rank-paper select,
#queryOrderInput {
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.auth-row input:focus,
.rank-form input:focus,
.rank-form select:focus,
.rank-form textarea:focus,
.rank-paper select:focus,
#queryOrderInput:focus {
  outline: none;
  border-color: rgba(233, 120, 117, 0.55);
  box-shadow: 0 0 0 4px rgba(244, 139, 136, 0.18);
  transform: translateY(-1px);
}

/* ---------- 骰子呼吸 + 摇动 ---------- */
.dice:not(.rolling) {
  animation: diceFloat 2.8s var(--motion-ease) infinite;
}

@keyframes diceFloat {
  0%,
  100% {
    transform: translateY(0);
    box-shadow: 0 12px 30px rgba(244, 139, 136, 0.25);
  }
  50% {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(244, 139, 136, 0.32);
  }
}

button.roll:not(:disabled) {
  animation: rollPulse 2.4s var(--motion-ease) infinite;
}

@keyframes rollPulse {
  0%,
  100% {
    box-shadow: 0 8px 20px rgba(233, 120, 117, 0.28);
  }
  50% {
    box-shadow: 0 12px 28px rgba(233, 120, 117, 0.42);
  }
}

button.roll:disabled {
  animation: none;
}

/* ---------- 榜单条目 ---------- */
.rank-entry {
  transition:
    transform 0.28s var(--motion-ease-out),
    box-shadow 0.28s var(--motion-ease-out),
    border-color 0.28s var(--motion-ease-out),
    background 0.28s var(--motion-ease-out);
}

.rank-entry:hover {
  transform: translateY(-3px);
  border-color: rgba(244, 139, 136, 0.4);
  box-shadow: 0 14px 28px var(--motion-pink-shadow);
  background: rgba(255, 255, 255, 0.88);
}

.rank-entry-shot img {
  transition: transform 0.28s var(--motion-ease-out);
}

.rank-entry-shot:hover img {
  transform: scale(1.06);
}

/* ---------- 预览 / 弹窗 ---------- */
.preview-mask {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.4s var(--motion-ease),
    visibility 0.4s var(--motion-ease);
}

.preview-mask.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.preview-mask .preview-box {
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  transition:
    transform 0.52s var(--motion-ease-out),
    opacity 0.42s var(--motion-ease);
}

.preview-mask.show .preview-box {
  transform: none;
  opacity: 1;
}

.modal {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.32s var(--motion-ease),
    visibility 0.32s var(--motion-ease);
}

.modal.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal .modal-card {
  transform: translateY(14px) scale(0.97);
  transition: transform 0.34s var(--motion-ease-out);
}

.modal.show .modal-card {
  transform: none;
}

.ended {
  transition:
    opacity 0.35s var(--motion-ease),
    transform 0.35s var(--motion-ease);
}

.auth-status.ok {
  animation: statusPop 0.35s var(--motion-ease-out);
}

@keyframes statusPop {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 减少动效（?fx=1 → html.fx-force 可强制预览）---------- */
@media (prefers-reduced-motion: reduce) {
  html:not(.fx-force) {
    scroll-behavior: auto;
  }

  html:not(.fx-force) .motion-reveal,
  html:not(.fx-force) .motion-reveal.motion-in,
  html:not(.fx-force) .play-card,
  html:not(.fx-force) .fun-card,
  html:not(.fx-force) .panel,
  html:not(.fx-force) .prob-item,
  html:not(.fx-force) button.primary,
  html:not(.fx-force) button.ghost,
  html:not(.fx-force) button.roll,
  html:not(.fx-force) .pill-btn,
  html:not(.fx-force) .side-fun-item,
  html:not(.fx-force) .preview-mask,
  html:not(.fx-force) .preview-mask .preview-box,
  html:not(.fx-force) .modal,
  html:not(.fx-force) .modal .modal-card,
  html:not(.fx-force) .brand-rail-inner,
  html:not(.fx-force) .brand-panel,
  html:not(.fx-force) .brand-logo,
  html:not(.fx-force) .brand-deer-main,
  html:not(.fx-force) .rank-entry,
  html:not(.fx-force) .dice:not(.rolling) {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  html:not(.fx-force) .motion-reveal {
    opacity: 1;
  }

  html:not(.fx-force) .preview-mask:not(.show),
  html:not(.fx-force) .modal:not(.show) {
    display: none !important;
  }
}