/* ============================================
   🧵 Longling Silk — 趣味注入 CSS
   让网站有丝绸的滑感、匠人的温度、面料的节奏
   ============================================ */

/* ─── 1. 按钮丝绸质感 hover ─── */
.trx_sc_button .sc_button,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
input[type="submit"],
.sc_button {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.trx_sc_button .sc_button::after,
.elementor-button::after,
.woocommerce a.button::after,
input[type="submit"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.18) 45%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 55%
  );
  transition: left 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  z-index: 1;
}

.trx_sc_button .sc_button:hover::after,
.elementor-button:hover::after,
.woocommerce a.button:hover::after,
input[type="submit"]:hover::after {
  left: 100%;
}

.trx_sc_button .sc_button:hover,
.elementor-button:hover,
.woocommerce a.button:hover,
input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.10);
}

.trx_sc_button .sc_button:active,
.elementor-button:active,
.woocommerce a.button:active,
input[type="submit"]:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ─── 2. Section 渐现动画（面料展开感） ─── */
.elementor-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.elementor-section.whimsy-revealed,
.elementor-section.elementor-top-section:first-child {
  opacity: 1;
  transform: translateY(0);
}

/* 给每个 section 不同的延迟，模拟涟漪展开 */
.elementor-section:nth-child(1).whimsy-revealed { transition-delay: 0s; }
.elementor-section:nth-child(2).whimsy-revealed { transition-delay: 0.08s; }
.elementor-section:nth-child(3).whimsy-revealed { transition-delay: 0.16s; }
.elementor-section:nth-child(4).whimsy-revealed { transition-delay: 0.24s; }
.elementor-section:nth-child(5).whimsy-revealed { transition-delay: 0.32s; }

/* ─── 3. 产品卡片 hover — 面料触感 ─── */
.trx_sc_extended_products .products .product,
.woocommerce ul.products li.product {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s ease;
  will-change: transform;
}

.trx_sc_extended_products .products .product:hover,
.woocommerce ul.products li.product:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

.trx_sc_extended_products .products .product img,
.woocommerce ul.products li.product img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.trx_sc_extended_products .products .product:hover img,
.woocommerce ul.products li.product:hover img {
  transform: scale(1.05);
}

/* ─── 4. 客户评价引用装饰 ─── */
.trx_sc_testimonials .testimonial blockquote::before {
  content: '"';
  font-size: 120px;
  line-height: 1;
  position: absolute;
  top: -20px;
  left: 10px;
  color: rgba(0, 0, 0, 0.03);
  font-family: Georgia, "Times New Roman", serif;
  pointer-events: none;
}

/* ─── 5. 纺织风加载动画 ─── */
.whimsy-loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.whimsy-loader::before {
  content: '';
  width: 36px;
  height: 36px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-right-color: currentColor;
  border-radius: 50%;
  animation: threadSpin 0.8s linear infinite;
}

.whimsy-loader::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid transparent;
  border-bottom-color: currentColor;
  border-left-color: currentColor;
  border-radius: 50%;
  animation: threadSpin 1.2s linear infinite reverse;
}

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

/* 给 AJAX 加载增加个性 */
.woocommerce .blockUI.blockOverlay::before,
.loading::before {
  content: '';
  display: block;
  width: 36px;
  height: 36px;
  margin: 0 auto;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-right-color: currentColor;
  border-radius: 50%;
  animation: threadSpin 0.8s linear infinite;
}

/* ─── 6. 表单成功反馈动画 ─── */
@keyframes threadIn {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.mc4wp-response .mc4wp-success {
  animation: threadIn 0.6s ease-out;
  font-style: italic;
  padding: 12px 16px;
  border-left: 3px solid currentColor;
  background: rgba(0,0,0,0.02);
}

/* ─── 7. 彩蛋 — 彩虹模式（Konami 激活） ─── */
body.rainbow-mode {
  animation: rainbowBg 3s linear infinite;
}

@keyframes rainbowBg {
  0%   { background-color: rgba(255, 200, 200, 0.08); }
  20%  { background-color: rgba(255, 230, 200, 0.08); }
  40%  { background-color: rgba(230, 255, 200, 0.08); }
  60%  { background-color: rgba(200, 255, 230, 0.08); }
  80%  { background-color: rgba(200, 220, 255, 0.08); }
  100% { background-color: rgba(230, 200, 255, 0.08); }
}

/* ─── 8. 飘落表情动画 ─── */
.floating-emoji {
  position: fixed;
  top: -50px;
  font-size: 28px;
  pointer-events: none;
  z-index: 99999;
  animation: emojiFall linear forwards;
}

@keyframes emojiFall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }
  70% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translateY(110vh) rotate(720deg) scale(0.3);
  }
}

/* ─── 9. Logo 点击色卡切换过渡 ─── */
body.color-shifting {
  transition: background-color 1.5s ease;
}

/* ─── 10. 导航栏丝滑 sticky ─── */
.top_panel {
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.top_panel_fixed .top_panel {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

/* ─── 11. 链接 hover 微交互 ─── */
.entry-content a:not(.sc_button):not(.button):not(.elementor-button),
.content a:not(.sc_button):not(.button):not(.elementor-button) {
  transition: color 0.3s ease, background-size 0.3s ease;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
}

.entry-content a:not(.sc_button):not(.button):not(.elementor-button):hover,
.content a:not(.sc_button):not(.button):not(.elementor-button):hover {
  background-size: 100% 1px;
}

/* ─── 12. 滚动条美化（Webkit） ─── */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 4px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.25);
}