/* ============================================================
   TAOIST TREASURES – Custom Styles
   道教文化主题独立站 – 自定义样式
   配合 Tailwind CSS 使用，涵盖：
   - 按钮与交互
   - 产品卡片悬停效果
   - 购物车抽屉
   - 导航滚动效果
   - FAQ 手风琴
   - Toast 消息
   - 自定义滚动条
   - 呼吸/脉冲/浮动动画
   ============================================================ */

/* ── CSS 变量（便于全局统一管理） ── */
:root {
    --tao-red:    #C41E3A;
    --tao-gold:   #D4AF37;
    --tao-dark:   #0D0D0D;
    --tao-darker: #080808;
    --tao-cream:  #F5F0E8;
    --tao-gray:   #A0A0A0;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
}

/* ── 全局滚动条样式 ── */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--tao-darker);
}
::-webkit-scrollbar-thumb {
    background: var(--tao-gold);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--tao-red);
}

/* ── 全局选中文字颜色 ── */
::selection {
    background: var(--tao-red);
    color: var(--tao-cream);
}

/* ── 平滑滚动 ── */
html {
    scroll-behavior: smooth;
}

/* ============================================================
   通用按钮样式
   ============================================================ */

/* 主要按钮 – 朱红色背景 + 金色悬停 */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--tao-red);
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 0.375rem;
    font-family: 'Noto Serif SC', 'Cinzel', serif;
    font-size: 0.8125rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: all var(--transition-base);
    border: 1px solid transparent;
    cursor: pointer;
}
.btn-primary:hover {
    background: #a01830;
    box-shadow: 0 0 24px rgba(196, 30, 58, 0.3);
    transform: translateY(-1px);
}

/* 次要按钮 – 描边样式 */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--tao-cream);
    padding: 0.75rem 2rem;
    border-radius: 0.375rem;
    font-family: 'Noto Serif SC', 'Cinzel', serif;
    font-size: 0.8125rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border: 1px solid rgba(212, 175, 55, 0.3);
    transition: all var(--transition-base);
    cursor: pointer;
}
.btn-secondary:hover {
    border-color: var(--tao-gold);
    color: var(--tao-gold);
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.1);
}

/* ============================================================
   导航栏 – 滚动后的样式变化
   ============================================================ */
#header.scrolled {
    background: rgba(8, 8, 8, 0.97);
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.5);
}

/* 导航链接下划线效果 */
.nav-link {
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background: var(--tao-gold);
    transition: width var(--transition-base);
}
.nav-link:hover::after {
    width: 60%;
}

/* ============================================================
   产品卡片
   ============================================================ */

/* 卡片容器 */
.product-card {
    border: 1px solid rgba(212, 175, 55, 0.1);
    border-radius: 0.5rem;
    overflow: hidden;
    background: rgba(13, 13, 13, 0.6);
    transition: all var(--transition-slow);
}
.product-card:hover {
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(212, 175, 55, 0.05);
}

/* 产品图片区 */
.product-image-wrapper {
    position: relative;
    height: 260px;
    overflow: hidden;
    background: var(--tao-darker);
}

/* 悬停时出现的快捷操作按钮 */
.product-actions {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateY(10px);
    transition: all var(--transition-base);
}
.product-card:hover .product-actions {
    opacity: 1;
    transform: translateY(0);
}

/* 购物车小按钮 */
.add-to-cart-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(13, 13, 13, 0.85);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--tao-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    backdrop-filter: blur(4px);
}
.add-to-cart-btn:hover {
    background: var(--tao-red);
    border-color: var(--tao-red);
    color: white;
    transform: scale(1.1);
}

/* ============================================================
   分类卡片
   ============================================================ */
.category-card {
    background: rgba(13, 13, 13, 0.5);
    backdrop-filter: blur(4px);
}
.category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   探索卡片悬停效果
   ============================================================ */
.explore-card {
    transition: all var(--transition-slow);
    cursor: pointer;
}
.explore-card:hover {
    transform: translateY(-4px);
}

/* ============================================================
   FAQ 手风琴
   ============================================================ */

/* FAQ 展开时的图标旋转 */
.faq-toggle.active .faq-icon {
    transform: rotate(45deg);
}

/* FAQ 内容区展开动画 */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}
.faq-content.open {
    max-height: 300px;
}

/* ============================================================
   购物车抽屉
   ============================================================ */

/* 抽屉打开状态 */
#cartDrawer.open {
    transform: translateX(0);
}

/* 遮罩层淡入 */
#cartOverlay.show {
    display: block !important;
    opacity: 1;
}

/* 购物车商品项动画 */
.cart-item-enter {
    animation: slideIn 0.3s ease forwards;
}
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================================
   Toast 消息动画
   ============================================================ */
#toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ============================================================
   回到顶部按钮 – 显示状态
   ============================================================ */
#backToTop.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ============================================================
   自定义动画关键帧
   ============================================================ */

/* 金色光晕脉冲 */
@keyframes goldPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(212, 175, 55, 0);
    }
}

/* 文字渐现 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 浮动效果（用于装饰元素） */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* 发光呼吸 */
@keyframes glow {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}

/* 旋转（太极图标） */
@keyframes slowSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 线条从左到右移动 */
@keyframes slideRight {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

/* ============================================================
   响应式微调
   ============================================================ */

/* 移动端优化 */
@media (max-width: 640px) {
    .product-image-wrapper {
        height: 220px;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* 平板端调整 */
@media (min-width: 641px) and (max-width: 1024px) {
    .product-image-wrapper {
        height: 240px;
    }
}

/* ============================================================
   无障碍 – 减少动画偏好
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html {
        scroll-behavior: auto;
    }
}

/* ============================================================
   打印样式
   ============================================================ */
@media print {
    #header,
    #cartDrawer,
    #cartOverlay,
    #searchOverlay,
    #backToTop,
    #toast {
        display: none !important;
    }
    body {
        background: white;
        color: black;
    }
}

/* ── 工具类：文本行数截断 ── */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}