/* animations.css — ThreadRoot CSS/SVG animations.
   Two animations: (1) One-Time Setup step-by-step, (2) Swap loop. */

/* ======================== Design Tokens ======================== */
:root {
  --a-cream: #FDF8F0;
  --a-indigo: #1C2B4A;
  --a-saffron: #C8956C;
  --a-saffron-light: #E0B898;
  --a-denim: #3A4E7A;
  --a-denim-dark: #243048;
  --a-gold: #D4A853;
}

/* ======================== One-Time Setup Animation ======================== */
.setup-section {
  padding: 80px 64px;
  background: var(--a-cream);
}
.setup-header {
  text-align: center;
  margin-bottom: 56px;
}
.setup-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--a-saffron);
  margin-bottom: 16px;
  font-weight: 500;
}
.setup-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 600;
  color: var(--a-indigo);
  line-height: 1.15;
  margin-bottom: 12px;
}
.setup-sub {
  font-size: 15px;
  color: #6B5E54;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Tier Toggle Tabs */
.tier-tab-bar {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
}
.tier-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border-radius: 40px;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.25s;
  background: #fff;
  color: var(--a-indigo);
}
.tier-tab:hover { border-color: var(--a-saffron); }
.tier-tab.active {
  background: var(--a-indigo);
  color: var(--a-cream);
  border-color: var(--a-indigo);
}
.tier-tab-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* Animation Stage */
.setup-stage-wrap {
  max-width: 900px;
  margin: 0 auto;
}
.setup-stage {
  background: #fff;
  border-radius: 8px;
  border: 1.5px solid rgba(28,43,74,0.08);
  overflow: hidden;
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Step indicator row */
.step-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(28,43,74,0.15);
  transition: background 0.3s, transform 0.3s;
}
.step-dot.active { background: var(--a-saffron); transform: scale(1.3); }
.step-dot.done { background: var(--a-indigo); }

/* Controls */
.setup-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}
.setup-prev, .setup-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(28,43,74,0.2);
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.setup-prev:hover, .setup-next:hover {
  border-color: var(--a-saffron);
  background: var(--a-saffron);
}
.setup-prev:hover svg, .setup-next:hover svg { stroke: #fff; }
.setup-prev:disabled, .setup-next:disabled {
  opacity: 0.3;
  cursor: default;
}
.setup-step-label {
  font-size: 13px;
  color: #6B5E54;
  min-width: 120px;
  text-align: center;
  letter-spacing: 0.04em;
}

/* Auto-play toggle */
.auto-play-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1.5px solid rgba(28,43,74,0.15);
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  color: #6B5E54;
  font-family: 'DM Sans', sans-serif;
  transition: all 0.2s;
}
.auto-play-btn:hover { border-color: var(--a-saffron); color: var(--a-indigo); }
.auto-play-btn.playing { background: var(--a-indigo); color: var(--a-cream); border-color: var(--a-indigo); }

/* Caption */
.setup-caption {
  text-align: center;
  margin-top: 28px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--a-indigo);
  letter-spacing: 0.01em;
}

/* ======================== SVG Illustration Stage ======================== */
.anim-jeans-wrap {
  position: relative;
  width: 320px;
  height: 240px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* ======================== Swap Loop Animation ======================== */
.swap-animation-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
}
.swap-jeans-wrap {
  position: relative;
  width: 280px;
  height: 200px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* The extension panel that swaps */
.swap-ext {
  position: absolute;
  bottom: 0;
  transform-origin: top center;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s;
}
.swap-ext.entering { opacity: 0; transform: scale(0.7) translateY(20px); }
.swap-ext.visible { opacity: 1; transform: scale(1) translateY(0); }
.swap-ext.leaving { opacity: 0; transform: scale(0.7) translateY(-40px); }

/* ======================== Step Animation Keyframes ======================== */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
  0% { opacity: 0; transform: scale(0.6); }
  70% { transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes velcroPress {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.92); }
}
@keyframes rivetSnap {
  0% { transform: translateY(-8px) scale(0.8); opacity: 0; }
  60% { transform: translateY(2px) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes checkPop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes shimmer {
  0% { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}
@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ======================== Step Content Fade ======================== */
.step-content { animation: fadeSlideIn 0.5s ease; }
.step-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--a-indigo);
  margin-bottom: 8px;
  text-align: center;
}
.step-description {
  font-size: 14px;
  color: #6B5E54;
  text-align: center;
  margin-bottom: 24px;
  line-height: 1.6;
}

/* Step badge */
.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--a-saffron);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
  animation: popIn 0.4s ease;
}

/* ======================== Classic / Signature Badge ======================== */
.ext-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}
.ext-badge-classic {
  background: rgba(200,149,108,0.15);
  color: var(--a-saffron);
  border: 1px solid rgba(200,149,108,0.3);
}
.ext-badge-signature {
  background: var(--a-indigo);
  color: var(--a-cream);
}

/* Copy blocks */
.copy-classic {
  font-size: 12px;
  color: #6B5E54;
  letter-spacing: 0.04em;
}
.copy-signature {
  font-size: 12px;
  color: #6B5E54;
}
.copy-classic strong, .copy-signature strong {
  color: var(--a-indigo);
}

/* ======================== Responsive ======================== */
@media (max-width: 900px) {
  .setup-section { padding: 64px 28px; }
  .anim-jeans-wrap, .swap-jeans-wrap { transform: scale(0.8); }
}
@media (max-width: 600px) {
  .setup-section { padding: 48px 20px; }
  .tier-tab-bar { gap: 8px; }
  .tier-tab { padding: 10px 18px; font-size: 13px; }
  .anim-jeans-wrap, .swap-jeans-wrap { transform: scale(0.65); }
  .setup-stage { min-height: 280px; }
}