/* ============================================================
   小时光杂货铺 - 自定义样式
   Little Time Shop - Custom Styles
   ============================================================ */

/* -------------------- 全局平滑滚动 & 基础设置 -------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* 导航栏高度偏移，避免锚点被遮挡 */
}

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 自定义选中文字颜色 */
::selection {
  background-color: #cc8f34;
  color: #fff;
}

/* 自定义滚动条 (Webkit浏览器) */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #fdf8f0;
}

::-webkit-scrollbar-thumb {
  background: #d9a85f;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #cc8f34;
}

/* -------------------- 导航栏 -------------------- */

/* 滚动后导航栏阴影增强 */
#navbar.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 导航链接激活状态 */
.nav-link.active {
  color: #cc8f34;
  font-weight: 600;
}

/* 移动端菜单展开动画 */
#mobile-menu {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 移动端导航链接激活状态 */
.mobile-nav-link.active {
  color: #cc8f34;
  background-color: #faf0e0;
  font-weight: 600;
}

/* -------------------- 轮播海报 -------------------- */

/* 轮播滑动指示点激活状态 */
.carousel-dot.active {
  width: 1.75rem;
  background-color: #fff;
}

/* 轮播淡入淡出 */
.carousel-slide {
  pointer-events: none;
}

.carousel-slide.opacity-100 {
  pointer-events: auto;
}

/* -------------------- 商品展示区 -------------------- */

/* 商品标签切换动画 */
.product-tab.active {
  background-color: #cc8f34;
  color: #fff;
}

/* 商品卡片入场动画 */
.product-card {
  animation: fadeInUp 0.5s ease-out both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 商品卡片筛选隐藏 */
.product-card.hidden-by-filter {
  display: none;
}

/* -------------------- 店铺环境图片 -------------------- */

/* 画廊图片 hover 效果 */
.gallery-item img {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* -------------------- 营业时间 -------------------- */

/* 营业中/休息中状态指示 */
#status-dot.online {
  background-color: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

#status-dot.offline {
  background-color: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

#status-dot.closing-soon {
  background-color: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

/* -------------------- 返回顶部按钮 -------------------- */

#back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

/* 按钮脉冲动画 */
#back-to-top.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(204, 143, 52, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(204, 143, 52, 0);
  }
}

/* -------------------- 通用入场动画（滚动触发） -------------------- */

/* 初始化隐藏 */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 进入视口时显示 */
.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

/* 延迟动画 */
.animate-delay-1 { transition-delay: 0.1s; }
.animate-delay-2 { transition-delay: 0.2s; }
.animate-delay-3 { transition-delay: 0.3s; }
.animate-delay-4 { transition-delay: 0.4s; }

/* -------------------- 图片懒加载占位 -------------------- */

img {
  /* 加载前显示浅色背景 */
  background-color: #f5f0e8;
}

img:not([src]),
img[src=""] {
  /* 未设置src时显示虚线边框提示 */
  outline: 2px dashed #e6c28a;
  outline-offset: -8px;
  min-height: 100px;
}

/* -------------------- 响应式微调 -------------------- */

/* 平板设备 */
@media (max-width: 1024px) {
  html {
    scroll-padding-top: 4.5rem;
  }
}

/* 手机设备 */
@media (max-width: 640px) {
  html {
    scroll-padding-top: 4rem;
  }

  /* 手机下轮播文字略小 */
  #home h2 {
    font-size: 2rem;
  }
}