/* =============================================================================
   电商 App 产品规划演示原型 · animations.css
   内容：页面转场 / 滚动入场 / 骨架屏 / Toast / 空状态 / 加载 / 降级
   性能原则：只动 transform / opacity / filter，不动 width/height/top/left
   ========================================================================== */

/* ---------- 1. 页面转场 ---------- */
/* 跨文档 View Transitions（Chrome 126+ 支持，自动接管页面切换动画） */
@view-transition { navigation: auto; }

.app {
  will-change: opacity, transform;
}
.page-in {
  animation: pageIn var(--dur-page) var(--ease-fluid) both;
}
.page-out {
  animation: pageOut calc(var(--dur-page) * 0.6) var(--ease-fluid) both;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes pageOut {
  from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  to { opacity: 0; transform: translateY(-6px) scale(0.99); filter: blur(4px); }
}
/* app 内部分区依次上浮，做出「内容分层进入」的层次感 */
.page-in .stagger > * {
  animation: riseIn var(--dur-slow) var(--ease-fluid) both;
}
.page-in .stagger > *:nth-child(1) { animation-delay: 60ms; }
.page-in .stagger > *:nth-child(2) { animation-delay: 130ms; }
.page-in .stagger > *:nth-child(3) { animation-delay: 200ms; }
.page-in .stagger > *:nth-child(4) { animation-delay: 270ms; }
.page-in .stagger > *:nth-child(5) { animation-delay: 340ms; }
.page-in .stagger > *:nth-child(6) { animation-delay: 410ms; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* View Transitions API 生效时，浏览器自己接管跨页动画，屏蔽内置淡入 */
.vt-active .page-in { animation: none; }
::view-transition-old(root) { animation: vtOut 260ms var(--ease-fluid) both; }
::view-transition-new(root) { animation: vtIn 420ms var(--ease-fluid) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } }

/* ---------- 2. 滚动入场（IntersectionObserver 驱动） ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-fluid),
              transform var(--dur-slow) var(--ease-fluid);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal.is-done { will-change: auto; }

/* ---------- 3. 骨架屏 shimmer ---------- */
.sk-line, .skeleton::after { }
.skeleton { position: relative; overflow: hidden; }
.skeleton::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 45%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.55) 55%,
    transparent 100%);
  animation: shimmer 1.35s infinite;
}
[data-theme="dark"] .skeleton::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 45%,
    rgba(255, 255, 255, 0.11) 50%,
    rgba(255, 255, 255, 0.05) 55%,
    transparent 100%);
}
@keyframes shimmer { to { transform: translateX(100%); } }
.sk-line { height: 12px; border-radius: 6px; background: var(--surface-3); }
.sk-line.w60 { width: 60%; }
.sk-line.w40 { width: 40%; }
.sk-line.w80 { width: 80%; }

/* ---------- 4. 加载指示器：果冻圆点 + 流体球 ---------- */
.loading-dots { display: inline-flex; gap: 6px; align-items: center; }
.loading-dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-brand);
  animation: dotJelly 1.1s var(--ease-jelly) infinite;
}
.loading-dots i:nth-child(2) { animation-delay: 0.14s; background: var(--c-brand-2); }
.loading-dots i:nth-child(3) { animation-delay: 0.28s; background: var(--c-accent); }
@keyframes dotJelly {
  0%, 100% { transform: translateY(0) scale(1); border-radius: 50%; }
  35% { transform: translateY(-7px) scale(1.18, 0.86); border-radius: 44% 56% 52% 48%/58% 46% 54% 42%; }
  65% { transform: translateY(2px) scale(0.9, 1.12); border-radius: 56% 44% 48% 52%/44% 58% 42% 56%; }
}

.fluid-loader {
  width: 46px; height: 46px; position: relative;
  filter: url(#goo-soft);
}
.fluid-loader i {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--grad-cta);
  animation: fluidOrbit 1.5s var(--ease-fluid) infinite;
}
.fluid-loader i:nth-child(2) { animation-delay: -0.5s; background: var(--grad-data); }
.fluid-loader i:nth-child(3) { animation-delay: -1s; background: var(--c-cyan); }
@keyframes fluidOrbit {
  0% { transform: rotate(0deg) translateX(13px) scale(1); }
  50% { transform: rotate(180deg) translateX(13px) scale(0.72); }
  100% { transform: rotate(360deg) translateX(13px) scale(1); }
}

/* ---------- 5. Toast 动效 ---------- */
.toast.is-in { animation: toastIn 420ms var(--ease-jelly) both; }
.toast.is-out { animation: toastOut 200ms var(--ease-fluid) both; }
@keyframes toastIn {
  0% { opacity: 0; transform: translateY(-16px) scale(0.82); }
  60% { opacity: 1; transform: translateY(2px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateY(-10px) scale(0.92); }
}
.toast.is-error { animation: toastIn 420ms var(--ease-jelly) both, shake 380ms var(--ease-fluid) 180ms; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}
.toast.is-success { background: linear-gradient(135deg, #12b76a, #0e9f6e); }

/* ---------- 6. 空状态 / 404 浮动动画 ---------- */
.float-y { animation: floatY 3.2s var(--ease-fluid) infinite; }
@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-9px) rotate(-1.2deg); }
}
.pulse-btn { position: relative; }
.pulse-btn::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(255, 59, 92, 0.42);
  animation: pulseRing 1.9s var(--ease-fluid) infinite;
  pointer-events: none;
}
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(255, 59, 92, 0.42); }
  70% { box-shadow: 0 0 0 14px rgba(255, 59, 92, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 92, 0); }
}

.jelly-digit {
  font-size: 82px; font-weight: 900; letter-spacing: -4px;
  background: var(--grad-cta);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: inline-block;
  animation: digitJelly 2.4s var(--ease-jelly) infinite;
}
.jelly-digit:nth-child(2) { animation-delay: 0.12s; }
.jelly-digit:nth-child(3) { animation-delay: 0.24s; }
@keyframes digitJelly {
  0%, 100% { transform: scale(1) rotate(0deg); border-radius: 0; }
  35% { transform: scale(1.12, 0.9) rotate(-2deg); }
  70% { transform: scale(0.94, 1.08) rotate(1.5deg); }
}

/* ---------- 7. Banner 视差 + 卡片 3D tilt ---------- */
.parallax-layer { will-change: transform; }
.tilt {
  transform: perspective(760px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform var(--dur-base) var(--ease-fluid);
  will-change: transform;
}
.tilt.is-reset { transition: transform var(--dur-slow) var(--ease-jelly); }

/* ---------- 8. 手风琴 / 折叠 ---------- */
.collapse {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-slow) var(--ease-fluid), opacity var(--dur-base);
  opacity: 0;
}
.collapse.is-open { max-height: 900px; opacity: 1; }
.collapse-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.collapse-head svg { transition: transform var(--dur-base) var(--ease-jelly); }
.collapse-head.is-open svg { transform: rotate(180deg); }

/* ---------- 10. 长按快捷操作提示 ---------- */
.press-hint {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--px, 50%) var(--py, 50%),
    rgba(255, 255, 255, 0.35), transparent 62%);
  opacity: 0;
  transition: opacity var(--dur-base);
  pointer-events: none;
}
.press-hint.is-on { opacity: 1; }

/* ---------- 11. 下拉刷新 ---------- */
.refresh-hint {
  position: absolute; left: 0; right: 0; top: var(--bar-h);
  display: flex; align-items: center; justify-content: center;
  height: 0; overflow: hidden;
  color: var(--muted); font-size: 11px; gap: 6px;
  z-index: 25;
  transition: height var(--dur-base) var(--ease-fluid);
}
.refresh-hint.is-open { height: 34px; }
.refresh-hint svg { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-fluid); }
.refresh-hint.is-ready svg { transform: rotate(180deg); }

/* ---------- 12. 低端设备降级 ---------- */
.js-lowfx .fluid-loader,
.js-lowfx .parallax-layer { filter: none !important; }
.js-lowfx .tilt { transform: none !important; }
.js-lowfx .topbar,
.js-lowfx .tabbar,
.js-lowfx .actionbar,
.js-lowfx .toast { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.js-lowfx .toast-stack { background: transparent; }
.js-lowfx .sk-card::after { animation-duration: 2.2s; }
.js-lowfx .glass-strong { background: var(--surface); }

/* ---------- 13. 无障碍：尊重系统「减少动态效果」----------
   关闭粒子、视差、形变，只保留极短的淡入                                   */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .page-in, .page-out, .page-in .stagger > * { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .float-y, .jelly-digit, .pulse-btn::after, .fluid-loader i,
  .loading-dots i, .skeleton::after { animation: none !important; }
  .skeleton::after { display: none; }
  /* 保留唯一允许的动效：淡入 */
  .app, .toast, .reveal, .drawer, .drawer-mask, .modal {
    transition-property: opacity !important;
    transition-duration: 140ms !important;
  }
}