/* ══════════════════════════════════════════════════════
   SUPERARCHAIC DNA — story-specific styles
   ══════════════════════════════════════════════════════ */

/* ── Color tokens for this story ── */
:root {
  --sa-ghost: #7b4fbf;
  --sa-ghost-dim: rgba(123, 79, 191, 0.15);
  --sa-ghost-glow: rgba(123, 79, 191, 0.5);
  --sa-ghost-gradient: linear-gradient(135deg, #5b3d8f, #7b4fbf, #9b6abf);
}

/* ══ SECTION 1: DNA RING ══ */

.sa-ring-wrap {
  width: 200px;
  height: 200px;
  margin: 24px auto 0;
}

.sa-ring-svg {
  width: 100%;
  height: 100%;
}

.sa-ring-track {
  fill: none;
  stroke: var(--surface-raised);
  stroke-width: 14;
}

.sa-ring-sapiens {
  fill: none;
  stroke: var(--accent);
  stroke-width: 14;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dasharray 1.5s ease-out;
}

.sa-ring-ghost {
  fill: none;
  stroke: var(--sa-ghost);
  stroke-width: 14;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  filter: drop-shadow(0 0 12px var(--sa-ghost-glow));
  transition: stroke-dasharray 1.5s ease-out;
}

.sa-ring-pct {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 400;
  fill: var(--text-primary);
  text-anchor: middle;
  dominant-baseline: auto;
}

.sa-ring-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3px;
  fill: var(--text-dim);
  text-anchor: middle;
}

/* ══ SECTION 2–3: GENOME BARS ══ */

.sa-genome-bar {
  display: flex;
  width: min(80vw, 600px);
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  margin: 24px auto 0;
}

.sa-bar-label {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

.sa-bar-label-sm {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #fff;
  white-space: nowrap;
}

.sa-bar-label-ghost {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}

/* ── Genome v1 (Section 2) ── */
.sa-bar-sapiens {
  flex: 98;
  background: linear-gradient(90deg, var(--surface), var(--surface-raised));
  display: flex;
  align-items: center;
  justify-content: center;
}

.sa-bar-neanderthal {
  flex: 2;
  background: linear-gradient(135deg, var(--terra), #d47030);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
}

@keyframes barPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.sa-pulse {
  animation: barPulse 2s ease-in-out infinite;
}

/* ── Genome v2 (Section 3) ── */
.sa-bar-sapiens-v2 {
  flex: 78;
  background: linear-gradient(90deg, var(--surface), var(--surface-raised));
  display: flex;
  align-items: center;
  justify-content: center;
}

.sa-bar-ghost-segment {
  flex: 20;
  background: var(--sa-ghost-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  filter: drop-shadow(0 0 8px var(--sa-ghost-glow));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.sa-bar-ghost-segment.expanded {
  transform: scaleX(1);
}

.sa-bar-question {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  opacity: 0;
  transition: opacity 0.5s ease 0.8s;
}
.sa-bar-ghost-segment.expanded .sa-bar-question {
  opacity: 1;
}

.sa-bar-neanderthal-v2 {
  flex: 2;
  background: linear-gradient(135deg, var(--terra), #d47030);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
}

/* Section 3 screen shake (optional, nice-to-have) */
@keyframes sectionShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-1px, 2px); }
  80% { transform: translate(1px, -2px); }
}
.sa-bombshell.shake {
  animation: sectionShake 0.2s ease;
}

/* ── Genome v3 (Section 7) ── */
.sa-genome-v3 {
  height: 36px;
}

.sa-bar-unknown-edge {
  flex: 2;
  background: rgba(90, 138, 154, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
}

.sa-bar-sapiens-v3 {
  flex: 74;
  background: linear-gradient(90deg, var(--surface), var(--surface-raised));
  display: flex;
  align-items: center;
  justify-content: center;
}

.sa-bar-ghost-v3 {
  flex: 20;
  background: var(--sa-ghost-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 6px var(--sa-ghost-glow));
}

.sa-bar-neanderthal-v3 {
  flex: 2;
  background: linear-gradient(135deg, var(--terra), #d47030);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
}

@keyframes barWavePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}
.sa-genome-v3 {
  animation: barWavePulse 3s ease-in-out infinite;
}

/* ── CTA group ── */
.sa-cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* ══ SECTION 4: GHOST SILHOUETTES ══ */

.sa-silhouettes {
  width: min(90vw, 400px);
  margin: 24px auto 0;
}

.sa-silhouettes-svg {
  width: 100%;
  height: auto;
}

.sa-sil-label {
  font-family: var(--font-body);
  font-size: 7px;
  fill: var(--text-dim);
  letter-spacing: 0.5px;
}

.sa-sil-label-ghost {
  fill: var(--sa-ghost);
}

@keyframes ghostFlicker {
  0% { opacity: 0.15; }
  15% { opacity: 0.5; }
  30% { opacity: 0.2; }
  50% { opacity: 0.55; }
  65% { opacity: 0.25; }
  80% { opacity: 0.45; }
  100% { opacity: 0.15; }
}

/* Longer vanish beat — layered on top of ghostFlicker */
@keyframes ghostVanish {
  0%, 90%, 100% { opacity: 1; }
  95% { opacity: 0.05; }
}

.sa-ghost-figure {
  animation:
    ghostFlicker 3s steps(12) infinite,
    ghostVanish 9s ease-in-out infinite;
}

/* ══ SECTION 5: MERGE EVENT MAP ══ */

.sa-map-wrap {
  width: min(90vw, 600px);
  margin: 24px auto 0;
  background: rgba(10, 12, 14, 0.5);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(200, 136, 58, 0.08);
}

.sa-map-svg {
  width: 100%;
  height: auto;
}

.sa-map-label {
  font-family: var(--font-body);
  font-size: 11px;
  fill: rgba(237, 232, 223, 0.25);
  letter-spacing: 1px;
}

.sa-merge-event {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.sa-merge-event.visible {
  opacity: 1;
}

.sa-merge-arrow {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 6, 4;
  stroke-dashoffset: 40;
  transition: stroke-dashoffset 1s ease;
}
.sa-arrow-purple { stroke: var(--sa-ghost); }
.sa-arrow-terra { stroke: var(--terra); }

.sa-merge-event.visible .sa-merge-arrow {
  stroke-dashoffset: 0;
}

.sa-event-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.5px;
}
.sa-event-label-purple { fill: var(--sa-ghost); }
.sa-event-label-terra { fill: var(--terra); }

/* Destination dot ripple */
.sa-ripple {
  fill: none;
  stroke-width: 1.5;
  opacity: 0;
}
.sa-ripple-purple { stroke: var(--sa-ghost); }
.sa-ripple-terra { stroke: var(--terra); }

@keyframes dotRipple {
  0% { r: 5; opacity: 0.6; }
  100% { r: 18; opacity: 0; }
}

.sa-merge-event.visible .sa-ripple {
  animation: dotRipple 0.8s ease-out 1s forwards;
}
.sa-event-2.visible .sa-ripple {
  animation-delay: 1.5s;
}

/* ══ SECTION 6: MOSAIC FIGURE ══ */

.sa-mosaic-wrap {
  width: 180px;
  height: 280px;
  margin: 24px auto 0;
}

.sa-mosaic-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  width: 100%;
  height: 100%;
  clip-path: polygon(
    35% 0%, 65% 0%,
    72% 5%, 76% 12%,
    74% 18%, 70% 20%,
    78% 24%, 82% 30%,
    80% 45%, 76% 50%,
    72% 52%, 68% 56%,
    72% 62%, 74% 70%,
    70% 80%, 66% 85%,
    62% 92%, 58% 100%,
    42% 100%, 38% 92%,
    34% 85%, 30% 80%,
    26% 70%, 28% 62%,
    32% 56%, 28% 52%,
    24% 50%, 20% 45%,
    18% 30%, 22% 24%,
    30% 20%, 26% 18%,
    24% 12%, 28% 5%
  );
}

.sa-mosaic-tile {
  background: var(--tile-color);
  border-radius: 1px;
  transform: translate(var(--scatter-x, 0), var(--scatter-y, 0)) rotate(var(--scatter-r, 0deg));
  opacity: 0;
  transition:
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--tile-delay, 0s),
    opacity 0.5s ease var(--tile-delay, 0s);
}

.sa-mosaic-grid.assembled .sa-mosaic-tile {
  transform: translate(0, 0) rotate(0deg);
  opacity: 1;
}

/* ══ REDUCED MOTION ══ */
@media (prefers-reduced-motion: reduce) {
  .sa-ring-sapiens,
  .sa-ring-ghost {
    transition: none;
  }
  .sa-pulse {
    animation: none;
  }
  .sa-bar-ghost-segment {
    transform: scaleX(1);
    transition: none;
  }
  .sa-bar-ghost-segment .sa-bar-question {
    opacity: 1;
    transition: none;
  }
  .sa-bombshell.shake {
    animation: none;
  }
  .sa-genome-v3 {
    animation: none;
  }
  .sa-ghost-figure {
    animation: none;
    opacity: 0.4;
  }
  .sa-merge-event {
    opacity: 1;
    transition: none;
  }
  .sa-merge-arrow {
    stroke-dashoffset: 0;
    transition: none;
  }
  .sa-merge-event .sa-ripple {
    animation: none;
  }
  .sa-mosaic-tile {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

/* ══ RESPONSIVE ══ */
@media (max-width: 768px) {
  .sa-ring-wrap {
    width: 160px;
    height: 160px;
  }
  .sa-ring-pct {
    font-size: 30px;
  }
}

@media (max-width: 480px) {
  .sa-ring-wrap {
    width: 140px;
    height: 140px;
  }
  .sa-ring-pct {
    font-size: 26px;
  }
  .sa-genome-bar {
    height: 32px;
  }
  .sa-bar-label {
    font-size: 10px;
  }
}

@media (max-width: 768px) {
  .sa-mosaic-wrap {
    width: 140px;
    height: 220px;
  }
}

@media (max-width: 480px) {
  .sa-mosaic-wrap {
    width: 120px;
    height: 190px;
  }
}