/* ============================================================
   调酒配方网站 - 全局交互动画样式
   ============================================================ */

/* ---------- 页面进入动画 ---------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-enter    { animation: fadeIn .45s ease both; }
.page-enter-up { animation: fadeInUp .55s ease both; }
.zoom-enter    { animation: zoomIn .4s cubic-bezier(.22,1,.36,1) both; }
.slide-down    { animation: slideDown .3s ease both; }

/* 子元素依次入场（最多 12 项） */
.stagger > * { animation: fadeInUp .5s ease both; }
.stagger > *:nth-child(1)  { animation-delay: .04s; }
.stagger > *:nth-child(2)  { animation-delay: .08s; }
.stagger > *:nth-child(3)  { animation-delay: .12s; }
.stagger > *:nth-child(4)  { animation-delay: .16s; }
.stagger > *:nth-child(5)  { animation-delay: .20s; }
.stagger > *:nth-child(6)  { animation-delay: .24s; }
.stagger > *:nth-child(7)  { animation-delay: .28s; }
.stagger > *:nth-child(8)  { animation-delay: .32s; }
.stagger > *:nth-child(9)  { animation-delay: .36s; }
.stagger > *:nth-child(10) { animation-delay: .40s; }
.stagger > *:nth-child(11) { animation-delay: .44s; }
.stagger > *:nth-child(12) { animation-delay: .48s; }

/* ---------- 图片加载：骨架屏微光 + 淡入 ---------- */
.img-skeleton {
  position: relative;
  overflow: hidden;
  background: #edf1f6;
}
.img-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.65) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: shimmer 1.4s forwards;
}
@keyframes shimmer {
  100% { transform: translateX(100%); }
}
/* JS 可用时图片先隐藏、加载完成后淡入；禁用 JS 时图片正常显示 */
html.js img.lazy-img { opacity: 0; transition: opacity .5s ease; }
html.js img.lazy-img.loaded { opacity: 1; }

/* ---------- 按钮按压反馈 ---------- */
.btn-press { transition: transform .12s ease, opacity .2s ease, box-shadow .2s ease; }
.btn-press:active { transform: scale(.95); }
.btn-press:hover { opacity: .9; }

/* 表单提交中 loading（JS 添加 .btn-loading） */
.btn-loading { color: transparent !important; pointer-events: none; position: relative; }
.btn-loading::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 卡片悬浮 ---------- */
.card-hover { transition: transform .25s ease, box-shadow .25s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.09); }

/* ---------- 底部导航 ---------- */
.nav-item { transition: transform .12s ease, color .2s ease; }
.nav-item:active { transform: scale(.9); }

/* ---------- 标签 chip ---------- */
.chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 12px;
  line-height: 1.4;
  margin: 2px 6px 2px 0;
  animation: fadeInUp .35s ease both;
}

/* ---------- 登录页输入框 ---------- */
.field-wrap { transition: transform .15s ease; }
.field-wrap:focus-within { transform: translateY(-2px); }
.icon-pop { transition: transform .25s ease, color .25s ease; }
.field-wrap:focus-within .icon-pop { transform: scale(1.15) translateX(2px); color: #2563eb; }

/* ---------- 后台行操作 ---------- */
.action-link { transition: transform .12s ease, color .2s ease; display: inline-block; }
.action-link:active { transform: scale(.9); }

/* ---------- 分享浮层 ---------- */
.share-pop { animation: zoomIn .3s ease both; }

/* ============================================================
   深色主题（html[data-theme="dark"] 覆盖 Tailwind 常用类）
   ============================================================ */
[data-theme="dark"] body { background-color: #0f172a; }
[data-theme="dark"] .bg-\[#fafafa\] { background-color: #0f172a; }
[data-theme="dark"] .bg-gray-100 { background-color: #0f172a; }
[data-theme="dark"] .bg-gray-50 { background-color: #1e293b; }
[data-theme="dark"] .bg-gray-200 { background-color: #334155; }
[data-theme="dark"] .bg-white { background-color: #1e293b; }
[data-theme="dark"] .bg-gray-500 { background-color: #475569; }
[data-theme="dark"] .bg-gray-600,
[data-theme="dark"] .bg-gray-700 { background-color: #334155; }
[data-theme="dark"] .bg-blue-50 { background-color: #1e3a5f; }
[data-theme="dark"] .bg-green-50 { background-color: #16351f; }
[data-theme="dark"] .bg-amber-50 { background-color: #3b2f14; }
[data-theme="dark"] .bg-amber-100 { background-color: #4a3a16; }

[data-theme="dark"] .text-gray-800 { color: #e2e8f0; }
[data-theme="dark"] .text-gray-700 { color: #cbd5e1; }
[data-theme="dark"] .text-gray-600 { color: #cbd5e1; }
[data-theme="dark"] .text-gray-500 { color: #94a3b8; }
[data-theme="dark"] .text-gray-400 { color: #64748b; }
[data-theme="dark"] .text-gray-300 { color: #475569; }
[data-theme="dark"] .text-red-500 { color: #f87171; }

[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .divide-gray-100 > * { border-color: #334155; }
[data-theme="dark"] .border-gray-200 { border-color: #334155; }
[data-theme="dark"] .border-gray-300 { border-color: #475569; }

[data-theme="dark"] .bg-red-50 { background-color: #3b1a1a; }
[data-theme="dark"] .bg-red-500 { background-color: #dc2626; }
[data-theme="dark"] .img-skeleton { background-color: #1e293b; }
[data-theme="dark"] .card-shadow { box-shadow: 0 1px 3px 0 rgba(0,0,0,.35); }
[data-theme="dark"] .nav-shadow { box-shadow: 0 -1px 4px 0 rgba(0,0,0,.35); }

/* ---------- 主题切换按钮 ---------- */
#themeToggle {
  transition: transform .2s ease, background-color .2s ease;
}
#themeToggle:active { transform: scale(.9); }

/* ============================================================
   文章富文本内容排版（.article-content）
   ============================================================ */
.article-content { line-height: 1.85; word-break: break-word; }
.article-content h1,
.article-content h2 { font-size: 1.4em; font-weight: 700; margin: 1.1em 0 .5em; }
.article-content h3 { font-size: 1.2em; font-weight: 700; margin: 1em 0 .4em; }
.article-content h4 { font-size: 1.05em; font-weight: 600; margin: .9em 0 .3em; }
.article-content p { margin: .7em 0; }
.article-content img { max-width: 100%; height: auto; border-radius: 10px; margin: .6em 0; }
.article-content ul { list-style: disc; padding-left: 1.5em; margin: .6em 0; }
.article-content ol { list-style: decimal; padding-left: 1.5em; margin: .6em 0; }
.article-content li { margin: .3em 0; }
.article-content blockquote {
  border-left: 3px solid #2563eb;
  padding: .2em 0 .2em 1em;
  margin: .8em 0;
  color: #64748b;
}
.article-content a { color: #2563eb; text-decoration: underline; }
.article-content code {
  background: rgba(0,0,0,.06);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .92em;
}
.article-content pre {
  background: #f1f5f9;
  padding: 12px;
  border-radius: 10px;
  overflow-x: auto;
  margin: .8em 0;
}
.article-content table { border-collapse: collapse; width: 100%; margin: .8em 0; }
.article-content td,
.article-content th { border: 1px solid #e2e8f0; padding: 6px 10px; }
[data-theme="dark"] .article-content code { background: rgba(255,255,255,.12); }
[data-theme="dark"] .article-content pre { background: #0f172a; }
[data-theme="dark"] .article-content td,
[data-theme="dark"] .article-content th { border-color: #334155; }

/* ---------- 桌面端适配 ---------- */
@media (min-width: 768px) {
  .safe-bottom { padding-bottom: 40px; }
}
/* 富文本编辑器容器（wangEditor）深色适配 */
[data-theme="dark"] .w-e-text-container { background-color: #1e293b !important; }
[data-theme="dark"] .w-e-toolbar { background-color: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .w-e-bar-divider { background-color: #334155 !important; }
[data-theme="dark"] .w-e-toolbar .w-e-icon { color: #cbd5e1; }

/* ============================================================
   阅读进度条（article.php #readingBar）
   ============================================================ */
#readingBar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  z-index: 90;
  transition: width .1s linear;
  border-radius: 0 3px 3px 0;
}

/* ============================================================
   回到顶部（tpl_nav.php #backTop）
   ============================================================ */
#backTop {
  transition: opacity .25s ease, transform .2s ease;
}
#backTop:active { transform: scale(.9); }

/* ============================================================
   文章图片灯箱（.article-content img 点击放大）
   ============================================================ */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .85);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn .2s ease both;
}
.lightbox-body { position: relative; max-width: 92vw; max-height: 92vh; }
.lightbox-img {
  max-width: 100%;
  max-height: 92vh;
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .5);
}
.lightbox-close {
  position: absolute;
  top: -42px;
  right: -4px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  border: none;
  cursor: pointer;
  transition: background-color .2s ease;
}
.lightbox-close:hover { background: rgba(255,255,255,.3); }
@media (min-width: 768px) {
  .lightbox-body { max-width: 80vw; }
}