/* ======== ORGAN ANIMATIONS STYLES ======== */
/* Red/warm theme — integrates with Body Explorer */

@keyframes organ-anim-pulse {
  0%, 100% { r: 10; opacity: 0.3; }
  50% { r: 14; opacity: 0.15; }
}

@keyframes organ-anim-fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Heart beating */
@keyframes organ-heartbeat {
  0%   { transform: scale(1); }
  8%   { transform: scale(1.04); }
  16%  { transform: scale(1); }
  24%  { transform: scale(1.06); }
  32%  { transform: scale(0.98); }
  42%  { transform: scale(1); }
  100% { transform: scale(1); }
}

.organ-anim-heartbeat {
  transform-origin: 150px 155px;
  animation: organ-heartbeat 1.2s ease-in-out infinite;
}

/* Lungs breathing */
@keyframes organ-breathe-left {
  0%, 100% { transform: scaleX(0.95) scaleY(0.96) translateX(2px); }
  50%      { transform: scaleX(1) scaleY(1) translateX(0); }
}

@keyframes organ-breathe-right {
  0%, 100% { transform: scaleX(0.95) scaleY(0.96) translateX(-2px); }
  50%      { transform: scaleX(1) scaleY(1) translateX(0); }
}

.organ-anim-breathe-left {
  transform-origin: 85px 180px;
  animation: organ-breathe-left 4s ease-in-out infinite;
}

.organ-anim-breathe-right {
  transform-origin: 215px 180px;
  animation: organ-breathe-right 4s ease-in-out infinite;
}

/* Diaphragm movement */
@keyframes organ-diaphragm {
  0%, 100% { transform: translateY(-5px); }
  50%      { transform: translateY(5px); }
}

.organ-anim-diaphragm {
  animation: organ-diaphragm 4s ease-in-out infinite;
}

/* Liver gentle pulse */
@keyframes organ-liver-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.012); }
}

.organ-anim-liver-pulse {
  transform-origin: 155px 115px;
  animation: organ-liver-pulse 3s ease-in-out infinite;
}

/* Kidney gentle pulse */
@keyframes organ-kidney-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

.organ-anim-kidney-pulse {
  transform-origin: 150px 150px;
  animation: organ-kidney-pulse 2.5s ease-in-out infinite;
}

/* Pancreas gentle pulse */
@keyframes organ-pancreas-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.01); }
}

.organ-anim-pancreas-pulse {
  transform-origin: 150px 90px;
  animation: organ-pancreas-pulse 3s ease-in-out infinite;
}

/* ---- Card in Body Explorer home ---- */
.organ-anim-card {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg, 16px);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.organ-anim-card:hover:not(.locked) {
  transform: translateY(-3px);
  border-color: #dc2626;
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.12);
}

.organ-anim-card.locked {
  cursor: default;
  opacity: 0.55;
}

.organ-anim-card.completed {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.04);
}

.organ-anim-card-emoji {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
}

.organ-anim-card-body {
  flex: 1;
  min-width: 0;
}

.organ-anim-card-title {
  font-family: var(--font-display);
  font-size: var(--text-base, 1rem);
  font-weight: 700;
  margin: 0 0 var(--space-1);
}

.organ-anim-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-1);
  line-height: 1.4;
}

.organ-anim-card-progress {
  font-size: var(--text-xs, 0.75rem);
  color: #dc2626;
  font-weight: 600;
}

/* ---- Organ Viewer Page ---- */
.organ-anim-home {
  max-width: 740px;
  margin: 0 auto;
  padding-bottom: var(--space-8);
}

.organ-anim-back-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.organ-anim-tier-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
  color: #fff;
}

.organ-anim-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  text-align: center;
  margin: 0 0 var(--space-1);
}

.organ-anim-subtitle {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

/* Progress bar */
.organ-anim-progress-wrap {
  max-width: 400px;
  margin: 0 auto var(--space-4);
}

.organ-anim-progress-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.organ-anim-progress-bg {
  height: 10px;
  background: var(--color-surface-2);
  border-radius: var(--radius-full, 50px);
  overflow: hidden;
}

.organ-anim-progress-fill {
  height: 100%;
  border-radius: var(--radius-full, 50px);
  transition: width 0.6s ease;
}

/* ---- Layout: SVG + Info ---- */
.organ-anim-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}

.organ-anim-svg-wrap {
  width: 300px;
  flex-shrink: 0;
}

.organ-anim-svg-wrap svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 15px rgba(220, 38, 38, 0.08));
}

/* Hotspot pulse animation */
.organ-anim-pulse-ring {
  animation: organ-anim-pulse 2s ease-in-out infinite;
}

.organ-anim-hotspot-g {
  transition: opacity 0.2s;
}

.organ-anim-hotspot-g:hover circle:last-child {
  r: 8;
  fill-opacity: 1;
}

.organ-anim-hotspot-g.active circle:last-child {
  r: 8;
  stroke: #fff;
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(255,215,0,.6));
}

.organ-anim-hotspot-g.explored .organ-anim-pulse-ring {
  animation: none;
  opacity: 0;
}

/* Hotspot label pills below SVG */
.organ-anim-hotspot-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: var(--space-3);
}

.organ-anim-hs-label {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--color-surface-2);
  cursor: pointer;
  transition: all 0.2s;
}

.organ-anim-hs-label:hover {
  background: rgba(220, 38, 38, 0.1);
  transform: scale(1.04);
}

.organ-anim-hs-label.explored {
  opacity: 0.7;
}

/* ---- Info Panel ---- */
.organ-anim-info-panel {
  flex: 1;
  min-width: 250px;
  max-width: 400px;
}

.organ-anim-info-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg, 16px);
  padding: var(--space-4);
  border: 2px solid var(--color-border);
  transition: border-color 0.3s;
  margin-bottom: var(--space-3);
}

.organ-anim-info-card.active {
  border-color: #dc2626;
  box-shadow: 0 0 16px rgba(220, 38, 38, 0.08);
}

.organ-anim-info-big {
  font-size: 3rem;
  display: block;
  text-align: center;
  margin-bottom: var(--space-2);
}

.organ-anim-info-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-2);
}

.organ-anim-info-emoji {
  font-size: 2rem;
}

.organ-anim-info-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
}

.organ-anim-info-body p {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Quiz button & hint */
.organ-anim-quiz-btn {
  display: block;
  width: 100%;
  padding: 12px 20px;
  border: none;
  border-radius: var(--radius-full, 50px);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-base, 1rem);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.organ-anim-quiz-btn:hover {
  transform: scale(1.03);
  filter: brightness(1.1);
}

.organ-anim-quiz-hint {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 600;
  padding: var(--space-2);
}

/* ---- Quiz ---- */
.organ-anim-qdots {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.organ-anim-qdot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-surface-2);
  transition: all 0.3s;
}

.organ-anim-qdot.cur { background: #dc2626; transform: scale(1.3); }
.organ-anim-qdot.right { background: #22c55e; }
.organ-anim-qdot.wrong { background: #ef4444; }

.organ-anim-qcard {
  background: var(--color-surface);
  border-radius: var(--radius-lg, 16px);
  padding: var(--space-5);
  text-align: center;
  border: 2px solid var(--color-border);
  max-width: 600px;
  margin: 0 auto;
}

.organ-anim-qnum {
  font-size: 0.72rem;
  color: #dc2626;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: var(--space-2);
}

.organ-anim-qemoji {
  font-size: 3rem;
  margin-bottom: var(--space-2);
  display: block;
}

.organ-anim-qq {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-4);
  line-height: 1.4;
}

.organ-anim-qopts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: var(--space-3);
}

.organ-anim-qopt {
  padding: 11px 14px;
  border-radius: var(--radius-md, 12px);
  background: var(--color-surface-2);
  border: 2px solid var(--color-border);
  cursor: pointer;
  font-weight: 700;
  font-size: var(--text-sm);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-align: left;
}

.organ-anim-qopt:hover:not(.dis) {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.06);
  transform: scale(1.02);
}

.organ-anim-qopt.ok { border-color: #22c55e !important; background: rgba(34,197,94,.12) !important; }
.organ-anim-qopt.no { border-color: #ef4444 !important; background: rgba(239,68,68,.12) !important; }
.organ-anim-qopt.show-ok { border-color: #22c55e !important; background: rgba(34,197,94,.06) !important; }
.organ-anim-qopt.dis { cursor: default; opacity: 0.7; }

.organ-anim-ol {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  flex-shrink: 0;
}

.organ-anim-qexpl {
  background: var(--color-surface-2);
  border-radius: var(--radius-md, 12px);
  padding: 11px 14px;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  display: none;
}

.organ-anim-qexpl.show { display: block; animation: organ-anim-fadeIn 0.3s; }

.organ-anim-qnext {
  padding: 10px 26px;
  border-radius: var(--radius-full, 50px);
  border: none;
  background: #dc2626;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: none;
}

.organ-anim-qnext.show { display: inline-block; animation: organ-anim-fadeIn 0.3s; }
.organ-anim-qnext:hover { transform: scale(1.06); filter: brightness(1.1); }

/* ---- Results ---- */
.organ-anim-results-card {
  text-align: center;
  background: var(--color-surface);
  border-radius: var(--radius-lg, 16px);
  padding: 30px 24px;
  border: 2px solid var(--color-border);
  max-width: 500px;
  margin: var(--space-6) auto 0;
}

.organ-anim-results-big { font-size: 3.5rem; margin-bottom: var(--space-2); display: block; }
.organ-anim-results-title { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; margin-bottom: var(--space-2); }
.organ-anim-results-score { font-size: 1rem; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.organ-anim-results-score span { color: #dc2626; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; }

.organ-anim-btn {
  padding: 10px 22px;
  border-radius: var(--radius-full, 50px);
  border: none;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.organ-anim-btn:hover { transform: scale(1.05); }

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .organ-anim-layout {
    flex-direction: column;
    align-items: center;
  }

  .organ-anim-svg-wrap {
    width: 260px;
  }

  .organ-anim-info-panel {
    min-width: 0;
    max-width: 100%;
  }

  .organ-anim-qopts {
    grid-template-columns: 1fr;
  }
}