/* ============================================
   枧艺包装 - 全站统一 UI 交互动效
   轻量、商务、柔和：按钮/卡片/表单/导航/弹层/页面过渡
   ============================================ */
:root {
  --jy-motion-fast: 160ms;
  --jy-motion: 260ms;
  --jy-motion-slow: 420ms;
  --jy-ease-out: cubic-bezier(.16, 1, .3, 1);
  --jy-ease-spring: cubic-bezier(.2, .8, .2, 1);
  --jy-lift-shadow: 0 18px 38px rgba(15, 35, 67, .16);
  --jy-press-shadow: 0 6px 14px rgba(15, 35, 67, .14);
}

html { scroll-behavior: smooth; }

body {
  animation: jyPageEnter var(--jy-motion-slow) var(--jy-ease-out) both;
  text-rendering: optimizeLegibility;
}

@keyframes jyPageEnter {
  from { opacity: 0; transform: translateY(10px); filter: saturate(.96); }
  to { opacity: 1; transform: translateY(0); filter: saturate(1); }
}

@keyframes jySoftRise {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes jyPopIn {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes jyPulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(20, 52, 95, .20); }
  50% { box-shadow: 0 0 0 7px rgba(20, 52, 95, 0); }
}

*, *::before, *::after {
  transition-property: background-color, border-color, box-shadow, color, opacity, transform, filter;
  transition-duration: var(--jy-motion);
  transition-timing-function: var(--jy-ease-out);
}

.header,
.card,
.login-card,
.order-login-card,
.order-login-hero,
.param-panel,
.preview-panel,
.home-brand,
.home-intro,
.home-box-card,
.home-subtype-dialog,
.product-box,
.pool-card,
.pay-card,
.listing,
.catalog-card,
.modal,
.dialog,
.panel,
.customer-service-fab .cs-panel,
#mainArea,
#loginCard,
.tab-content,
.table-wrap,
.notice,
.alert,
.msg {
  animation: jySoftRise var(--jy-motion-slow) var(--jy-ease-out) both;
}

.header {
  backdrop-filter: saturate(1.08) blur(14px);
}

.card,
.login-card,
.order-login-card,
.order-login-hero,
.param-panel,
.preview-panel,
.home-box-card,
.product-box,
.pool-card,
.pay-card,
.listing,
.catalog-card,
.compare-entry a {
  transform: translateZ(0);
  will-change: transform, box-shadow;
}

.card:hover,
.login-card:hover,
.order-login-card:hover,
.order-login-hero:hover,
.param-panel:hover,
.preview-panel:hover,
.home-box-card:hover,
.product-box:hover,
.pool-card:hover,
.pay-card:hover,
.listing:hover,
.catalog-card:hover,
.compare-entry a:hover {
  transform: translateY(-4px);
  box-shadow: var(--jy-lift-shadow) !important;
}

button,
.btn,
.login-btn,
.nav-btn,
.tab,
a.btn,
.cs-fab-btn,
.icon-button,
.material-item,
.coating-item,
.home-box-card,
.home-subtype-card,
.product-box,
.pool-card,
.listing,
.catalog-card,
[role="button"] {
  cursor: pointer;
  transform: translateZ(0);
  user-select: none;
}

button:hover,
.btn:hover,
.login-btn:hover,
.nav-btn:hover,
.tab:hover,
a.btn:hover,
.cs-fab-btn:hover,
.icon-button:hover,
.material-item:hover,
.coating-item:hover,
.home-subtype-card:hover {
  transform: translateY(-2px);
  filter: brightness(1.025);
}

button:active,
.btn:active,
.login-btn:active,
.nav-btn:active,
.tab:active,
a.btn:active,
.cs-fab-btn:active,
.icon-button:active,
.material-item:active,
.coating-item:active,
.home-box-card:active,
.home-subtype-card:active {
  transform: translateY(0) scale(.975);
  box-shadow: var(--jy-press-shadow) !important;
}

button:focus-visible,
.btn:focus-visible,
.login-btn:focus-visible,
.nav-btn:focus-visible,
.tab:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(217, 130, 43, .22), 0 0 0 1px rgba(20, 52, 95, .32) !important;
}

input,
select,
textarea {
  transition-duration: var(--jy-motion-fast), var(--jy-motion), var(--jy-motion);
}

input:hover,
select:hover,
textarea:hover {
  border-color: rgba(20, 52, 95, .42) !important;
  box-shadow: 0 4px 14px rgba(15, 35, 67, .06) !important;
}

input:focus,
select:focus,
textarea:focus {
  transform: translateY(-1px);
}

.nav-btn {
  position: relative;
  overflow: hidden;
}

.nav-btn::after,
.btn::after,
.login-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(255,255,255,.34), transparent 58%);
  opacity: 0;
  transform: scale(.82);
}

.nav-btn:hover::after,
.btn:hover::after,
.login-btn:hover::after {
  opacity: 1;
  transform: scale(1.22);
}

.tab.active,
.material-item.selected,
.coating-item.selected,
.progress-step.active .dot,
.step.active,
.badge.active {
  animation: jyPulseGlow 1.8s ease-in-out infinite;
}

.home-subtype-overlay,
.modal-backdrop,
.overlay,
.drawer-mask {
  animation: jyPopIn var(--jy-motion) var(--jy-ease-out) both;
  backdrop-filter: blur(8px);
}

.home-subtype-dialog,
.modal,
.dialog,
.drawer,
.cs-panel.show {
  animation: jyPopIn var(--jy-motion-slow) var(--jy-ease-spring) both;
}

tr,
.list-row,
.order-row,
.cs-item,
.notification-item {
  transition-duration: var(--jy-motion-fast);
}

tr:hover,
.list-row:hover,
.order-row:hover,
.cs-item:hover,
.notification-item:hover {
  background-color: rgba(20, 52, 95, .045) !important;
}

img,
svg,
.preview-canvas,
.thumb,
.box-thumb {
  transition: transform var(--jy-motion-slow) var(--jy-ease-out), filter var(--jy-motion) var(--jy-ease-out), opacity var(--jy-motion) var(--jy-ease-out);
}

.home-box-card:hover img,
.home-subtype-card:hover img,
.product-box:hover img,
.catalog-card:hover img,
.box-card:hover img {
  transform: scale(1.045);
  filter: saturate(1.04) contrast(1.02);
}

.msg:not(:empty),
.alert:not(:empty),
.toast,
.notice {
  animation: jySoftRise var(--jy-motion) var(--jy-ease-out) both;
}

.loading,
.spinner,
.btn.loading::before {
  animation: jySpin .85s linear infinite;
}

@keyframes jySpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}