/* Database Guide — Custom CSS */
/* Animation keyframes and SVG overrides */

/* ── Keyframes ──────────────────────────────────────────────────────────── */

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

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes bounce-in {
  0%   { transform: scale(0.8); opacity: 0; }
  70%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}

@keyframes grow-up {
  from { transform: scaleY(0); transform-origin: bottom; }
  to   { transform: scaleY(1); transform-origin: bottom; }
}

@keyframes particle-rise {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-30px) scale(0); opacity: 0; }
}

@keyframes draw-path {
  from { stroke-dashoffset: 200; }
  to   { stroke-dashoffset: 0; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

/* ── Utility animation classes ──────────────────────────────────────────── */

.animate-fade-in     { animation: fadeIn 0.3s ease both; }
.animate-slide-left  { animation: slideInLeft 0.3s ease both; }
.animate-slide-right { animation: slideInRight 0.3s ease both; }
.animate-bounce-in   { animation: bounce-in 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
.animate-float       { animation: float 3s ease-in-out infinite; }

/* Step-based stagger delay for card list items */
.stagger-1  { animation-delay: 0.05s; }
.stagger-2  { animation-delay: 0.10s; }
.stagger-3  { animation-delay: 0.15s; }
.stagger-4  { animation-delay: 0.20s; }
.stagger-5  { animation-delay: 0.25s; }

/* ── SVG Illustration Container ─────────────────────────────────────────── */

#illustration-container {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

#illustration-container svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ── SVG — CAP Theorem circles ──────────────────────────────────────────── */

.cap-circle {
  transition: opacity 0.4s ease, filter 0.4s ease;
  opacity: 0.35;
}
.cap-circle.active {
  opacity: 0.85;
  filter: drop-shadow(0 0 8px currentColor);
}

/* Pulse for selected pair */
.cap-pair-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* ── SVG — Data Model icons ─────────────────────────────────────────────── */

.model-icon {
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0.3;
}
.model-icon.active {
  opacity: 1;
  transform: scale(1.1);
}

/* ── SVG — Scale towers ──────────────────────────────────────────────────── */

.scale-bar {
  transform-origin: bottom center;
  animation: grow-up 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}

.scale-bar.active {
  filter: drop-shadow(0 0 6px #6366f1);
}

/* ── SVG — Particles ─────────────────────────────────────────────────────── */

.particle {
  animation: particle-rise 1.2s ease-out infinite;
}
.particle:nth-child(2) { animation-delay: 0.3s; }
.particle:nth-child(3) { animation-delay: 0.6s; }
.particle:nth-child(4) { animation-delay: 0.9s; }

/* ── DB Card styles ──────────────────────────────────────────────────────── */

.db-card {
  transition: all 0.2s ease;
}
.db-card:hover {
  transform: translateY(-1px);
}
.db-card.eliminated {
  opacity: 0.6;
}
.db-card .why-content {
  display: none;
}
.db-card.why-open .why-content {
  display: block;
}

/* ── Option button ───────────────────────────────────────────────────────── */

.option-btn {
  transition: all 0.15s ease;
  cursor: pointer;
  user-select: none;
}
.option-btn:hover {
  transform: translateX(2px);
}
.option-btn.selected {
  border-color: #6366f1;
  background-color: #eef2ff;
}

/* ── Progress dots ───────────────────────────────────────────────────────── */

.progress-dot {
  transition: all 0.2s ease;
}
.progress-dot.done {
  background-color: #6366f1;
}
.progress-dot.active {
  background-color: #6366f1;
  box-shadow: 0 0 0 3px #c7d2fe;
}
.progress-dot.future {
  background-color: #e5e7eb;
}

/* ── Collapsible accordion ───────────────────────────────────────────────── */

.accordion-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.accordion-content.open {
  max-height: 2000px;
}

/* ── Language toggle ─────────────────────────────────────────────────────── */

.lang-btn {
  transition: all 0.15s ease;
}
.lang-btn.active {
  background-color: #6366f1;
  color: white;
}

/* ── Results page cards ──────────────────────────────────────────────────── */

.result-card {
  transition: all 0.2s ease;
}
.result-card:hover {
  box-shadow: 0 8px 25px rgba(99,102,241,0.15);
  transform: translateY(-2px);
}

/* ── Scrollbar styles ────────────────────────────────────────────────────── */

.db-panel-scroll::-webkit-scrollbar {
  width: 4px;
}
.db-panel-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.db-panel-scroll::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 2px;
}
.db-panel-scroll::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* ── Tooltip ─────────────────────────────────────────────────────────────── */

.tooltip {
  position: relative;
}
.tooltip .tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: white;
  font-size: 0.75rem;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  max-width: 240px;
  white-space: normal;
  z-index: 50;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* ── Intro card highlights ───────────────────────────────────────────────── */

.intro-feature {
  animation: fadeIn 0.5s ease both;
}
.intro-feature:nth-child(1) { animation-delay: 0.1s; }
.intro-feature:nth-child(2) { animation-delay: 0.2s; }
.intro-feature:nth-child(3) { animation-delay: 0.3s; }

/* ── Mobile panel toggle ─────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .mobile-panel-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 12px 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 8px;
  }
  .mobile-panel-content.hidden {
    display: none;
  }
}

/* ── Dark-mode-safe number badge ─────────────────────────────────────────── */

.rank-badge {
  font-variant-numeric: tabular-nums;
}