/**
 * TeardownScroll — Styles
 * Auto-applied to elements created by teardown-scroll.js
 *
 * Customize via CSS custom properties on .td-stage:
 *   --td-accent: #f97316;
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* === Stage (user adds this class to their container) === */
.td-stage {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: #050505;
  font-family: 'Inter', sans-serif;
}

/* === Part base (user adds .td-part to each part element) === */
.td-part {
  position: absolute;
  will-change: transform, opacity;
}

/* === Auto-generated number badge === */
.td-num {
  position: absolute;
  top: -22px; left: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  color: var(--td-accent, #f97316);
  opacity: 0;
  pointer-events: none;
}
.td-num::before {
  content: '—  ';
  color: color-mix(in srgb, var(--td-accent, #f97316) 50%, transparent);
}

/* === Auto-generated name label === */
.td-label {
  position: absolute;
  bottom: -22px; left: 0;
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.6);
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
}

/* === Auto-generated background grid === */
.td-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0;
  pointer-events: none;
}

/* === Auto-generated detail panel === */
.td-detail {
  position: absolute;
  left: 58%; top: 50%;
  transform: translateY(-50%);
  width: min(440px, 36vw);
  opacity: 0;
  z-index: 50;
}
.td-detail-step {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 500;
  color: var(--td-accent, #f97316);
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.td-detail-title {
  font-size: 28px; font-weight: 700;
  color: #fff; line-height: 1.2;
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}
.td-detail-divider {
  width: 36px; height: 2px;
  background: var(--td-accent, #f97316);
  margin-bottom: 18px;
}
.td-detail-desc {
  font-size: 14px; font-weight: 300;
  color: rgba(255,255,255,0.55);
  line-height: 1.75;
  margin-bottom: 24px;
}
.td-detail-tags {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.td-tag {
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.35);
  padding: 4px 12px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.1);
}

/* === Auto-generated UI overlays === */
.td-progress {
  position: fixed; top: 0; left: 0; height: 2px;
  background: linear-gradient(90deg, var(--td-accent, #f97316), #fdba74);
  z-index: 1000; width: 0;
}
.td-phase {
  position: fixed; top: 32px; right: 40px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.15);
  z-index: 100;
  font-family: 'Inter', sans-serif;
}
.td-pct {
  position: fixed; bottom: 32px; right: 40px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: rgba(255,255,255,0.2);
  z-index: 100;
}
.td-counter {
  position: fixed; bottom: 32px; left: 40px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: color-mix(in srgb, var(--td-accent, #f97316) 50%, transparent);
  z-index: 100;
  opacity: 0;
}
.td-hint {
  position: fixed; bottom: 36px; left: 50%;
  transform: translateX(-50%);
  text-align: center; z-index: 100;
  color: rgba(255,255,255,0.2);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: opacity 0.5s;
}
.td-hint svg {
  display: block;
  margin: 6px auto 0;
  animation: td-float 2.5s ease-in-out infinite;
}
@keyframes td-float {
  0%, 100% { transform: translateY(0); opacity: 0.3; }
  50%      { transform: translateY(8px); opacity: 0.6; }
}

/* === Light mode (auto-activated via lightMode: true option) === */
.td-stage.td-light { background: #faf6ef; }

.td-stage.td-light .td-grid {
  background-image:
    linear-gradient(rgba(26,22,17,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,22,17,0.04) 1px, transparent 1px);
}

.td-stage.td-light .td-num { color: var(--td-accent); }
.td-stage.td-light .td-num::before { color: color-mix(in srgb, var(--td-accent) 40%, transparent); }
.td-stage.td-light .td-label { color: rgba(26,22,17,0.5); }
.td-stage.td-light .td-detail-title { color: #1a1611; }
.td-stage.td-light .td-detail-desc  { color: rgba(107,99,89,0.7); }
.td-stage.td-light .td-detail-step  { color: var(--td-accent); }
.td-stage.td-light .td-detail-divider { background: var(--td-accent); }
.td-stage.td-light .td-tag { color: rgba(107,99,89,0.5); border-color: rgba(26,22,17,0.1); }

.td-stage.td-light .td-progress {
  background: linear-gradient(90deg, var(--td-accent), color-mix(in srgb, var(--td-accent) 60%, #fdba74));
}

.td-stage.td-light .td-phase { color: rgba(26,22,17,0.2); }
.td-stage.td-light .td-pct { color: rgba(26,22,17,0.2); }
.td-stage.td-light .td-counter { color: color-mix(in srgb, var(--td-accent) 50%, transparent); }
.td-stage.td-light .td-hint { color: rgba(107,99,89,0.5); }
.td-stage.td-light .td-hint svg { stroke: rgba(107,99,89,0.4); }

.td-stage.td-light .td-detail {
  background: rgba(250,246,239,0.92);
  backdrop-filter: blur(14px);
  border-radius: 12px;
  padding: 32px;
  border: 1px solid rgba(26,22,17,0.06);
  box-shadow: 0 8px 32px rgba(26,22,17,0.06);
}

/* Light mode — mobile responsive */
@media (max-width: 768px) {
  .td-stage.td-light .td-detail {
    left: 4vw !important;
    top: auto !important;
    bottom: 2vh !important;
    transform: none !important;
    width: 92vw !important;
    padding: 18px !important;
    border-radius: 10px !important;
  }
  .td-stage.td-light .td-detail-title { font-size: 20px !important; }
  .td-stage.td-light .td-detail-desc { font-size: 12px !important; line-height: 1.6 !important; margin-bottom: 12px !important; }
  .td-stage.td-light .td-detail-step { font-size: 10px !important; margin-bottom: 8px !important; }
  .td-stage.td-light .td-detail-divider { margin-bottom: 12px !important; }
  .td-stage.td-light .td-num { font-size: 8px !important; top: -16px !important; }
  .td-stage.td-light .td-num::before { font-size: 8px !important; }
  .td-stage.td-light .td-label { font-size: 8px !important; bottom: -16px !important; }
  .td-stage.td-light .td-phase { font-size: 9px !important; top: 16px !important; right: 16px !important; }
  .td-stage.td-light .td-pct { font-size: 10px !important; bottom: 16px !important; right: 16px !important; }
  .td-stage.td-light .td-counter { font-size: 10px !important; bottom: 16px !important; left: 16px !important; }
  .td-stage.td-light .td-hint { font-size: 9px !important; bottom: 20px !important; }
  .td-stage.td-light .td-hint p { letter-spacing: 0.15em !important; }
}

/* Demo animations (for animated teardown part content) */
@keyframes td-demo-reveal {
  0%, 20% { opacity: 0; transform: translateY(6px); }
  40%, 80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(6px); }
}

@keyframes td-demo-hover {
  0%, 30% { transform: translateY(0); border-color: rgba(37,32,26,0.15); }
  50%, 70% { transform: translateY(-2px); border-color: var(--td-accent); }
  100% { transform: translateY(0); border-color: rgba(37,32,26,0.15); }
}

@keyframes td-demo-fade {
  0%, 100% { opacity: 0.2; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}

@keyframes td-demo-slide {
  0%, 100% { transform: translateX(-4px); opacity: 0.5; }
  50% { transform: translateX(4px); opacity: 1; }
}

/* === CSS Custom Properties — module-specific === */

/* Palette (配色) — RGB 通道三元组（"R G B"）为唯一真值。
   Tailwind 的 bg/text/border 通过 rgb(var(--td-palette-*-rgb) / <alpha-value>) 消费；
   --td-palette-* 颜色别名供现有 teardown CSS 消费，由通道合成，跟随切换。 */
:root {
  --td-palette-bg-rgb: 250 246 239;
  --td-palette-text-rgb: 26 22 17;
  --td-palette-accent-rgb: 184 84 45;
  --td-palette-surface-rgb: 240 230 216;
  --td-palette-muted-rgb: 107 99 89;

  --td-palette-bg: rgb(var(--td-palette-bg-rgb));
  --td-palette-text: rgb(var(--td-palette-text-rgb));
  --td-palette-accent: rgb(var(--td-palette-accent-rgb));
  --td-palette-surface: rgb(var(--td-palette-surface-rgb));
  --td-palette-muted: rgb(var(--td-palette-muted-rgb));
  --td-palette-border: rgb(var(--td-palette-text-rgb) / 0.1);
}

/* Atmosphere (氛围) — grain/glow 仍用 @property 平滑过渡 */
@property --td-atmo-grain {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --td-atmo-glow {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
html {
  transition: --td-atmo-grain 0.5s ease, --td-atmo-glow 0.5s ease;
}

/* 整页换肤过渡：仅在切换的 0.5s 窗口内启用（<html>.td-switching），
   避免给日常 hover/reveal 动画长期挂上 color 过渡。
   TeardownStyles 切换前置位、结束后清除。 */
html.td-switching,
html.td-switching * {
  transition: background-color 0.5s ease, border-color 0.5s ease,
              color 0.5s ease, fill 0.5s ease, stroke 0.5s ease !important;
}

/* Page body — palette drives background */
body {
  background-color: var(--td-palette-bg, #faf6ef) !important;
}

/* Teardown stage — palette drives background */
.td-stage {
  background-color: var(--td-palette-bg, #050505) !important;
}

/* Typography — applies to detail panel text */
.td-detail-title {
  font-family: var(--td-typo-family, 'Inter', sans-serif) !important;
  font-weight: var(--td-typo-weight, 700) !important;
  letter-spacing: var(--td-typo-tracking, -0.02em) !important;
  text-transform: var(--td-typo-caps, normal) !important;
}
.td-detail-desc {
  font-family: var(--td-typo-family, 'Inter', sans-serif) !important;
}

/* Atmosphere — grain overlay on stage */
.td-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: var(--td-atmo-grain, 0);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  pointer-events: none;
  z-index: 1;
}

/* Layout — teardown card radius driven by layout preset */
#teardown .td-part {
  border-radius: var(--td-layout-radius, 8px) !important;
}

/* Elements — component shape driven by elements preset */
#teardown .td-part {
  border-radius: var(--td-el-radius, 8px) !important;
  border-width: var(--td-el-border, 1px) !important;
  box-shadow: var(--td-el-shadow, none) !important;
}

/* === Style switcher (← name →) inside detail panel === */
.td-style-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.td-style-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.td-style-btn:hover {
  border-color: var(--td-accent);
  color: var(--td-accent);
  background: rgba(255,255,255,0.06);
}

.td-style-btn:active {
  transform: scale(0.92);
}

.td-style-name {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.05em;
  white-space: nowrap;
  min-width: 48px;
  text-align: center;
  transition: color 0.2s;
}

/* Light mode overrides */
.td-stage.td-light .td-style-switcher {
  border-top-color: rgba(26,22,17,0.08);
}

.td-stage.td-light .td-style-btn {
  border-color: rgba(26,22,17,0.1);
  background: rgba(26,22,17,0.03);
  color: rgba(26,22,17,0.4);
}

.td-stage.td-light .td-style-btn:hover {
  border-color: var(--td-accent);
  color: var(--td-accent);
  background: rgba(26,22,17,0.05);
}

.td-stage.td-light .td-style-name {
  color: rgba(26,22,17,0.5);
}