/* =========================================================================
   Ikigai Venn diagram — SVG circles that draw as zones complete
   ========================================================================= */

.ikigai-diagram {
  display: flex;
  justify-content: center;
}

.ikigai-diagram svg {
  filter: drop-shadow(0 0 12px rgba(255, 209, 102, 0.1));
}

/* Circumference of r=52 circle ~= 327 */
.venn-circle {
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  opacity: 0.25;
  transition:
    stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.8s ease;
}

.venn-circle.zone-complete {
  stroke-dashoffset: 0;
  opacity: 1;
}

.venn-center {
  opacity: 0;
  fill: var(--color-gold);
  transition: opacity 1s ease 0.4s;
}

/* When all 4 circles are complete, light up the center */
.venn-love.zone-complete
  ~ .venn-good.zone-complete
  ~ .venn-needs.zone-complete
  ~ .venn-valued.zone-complete
  ~ .venn-center {
  opacity: 0.6;
  filter: drop-shadow(0 0 16px var(--color-gold));
}

/* Mobile — smaller diagram */
@media (max-width: 600px) {
  .ikigai-diagram svg {
    width: 80px;
    height: 80px;
  }
}