.vitality-card {
  perspective: 2000px;
}

.vitality-card-inner {
  display: grid;
  grid-template-areas: "face";
  transition: transform 0.8s;
  transform-style: preserve-3d;
  will-change: transform;
}

.vitality-card.flip .vitality-card-inner {
  transform: rotateY(180deg);
}

/* Don't use absolute positioning as it doesn't work well with Tailwind CSS grid layout */
.vitality-card-front, .vitality-card-back {
  grid-area: face;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

.vitality-card-back {
  transform: rotateY(180deg);
}

.vitality-score-ring {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 170px;
  height: 170px;
  --ring-color: #AF5BFFFF;

  svg {
    --stroke-width: 4;
    transform: rotate(-90deg); /* Starts progress at the top as the default is right */
    width: 100%;
    height: 100%;

    .background {
      fill: none;
      stroke: #e6e6e6; /* Background circle color */
      stroke-width: var(--stroke-width);
    }

    .ring {
      fill: none;
      stroke: var(--stroke-color); /* To show no color when score is zero */
      stroke-width: var(--stroke-width);
      stroke-linecap: round;
      animation-duration: 2s;
      animation-timing-function: ease-out;
      animation-fill-mode: forwards;
    }

    .front-ring {
      stroke-dasharray: var(--stroke-dasharray-front-ring-end-percentage), 100; /* Percentage-based stroke length */
      animation-name: front-ring-animation;
    }

    .back-ring {
      stroke-dasharray: var(--stroke-dasharray-back-ring-end-percentage), 100; /* Percentage-based stroke length */
      animation-name: back-ring-animation;
    }
  }

  .vitality-score {
    font-size: 2rem;
    font-weight: bold;
    position: absolute;
    color: rgb(17 24 39); /* text-gray-900 */
    text-align: center;
  }
}

/* Dark mode overrides for the vitality ring and score */
:where(.dark) .vitality-score-ring svg .background {
  stroke: var(--color-surface-muted);
}

:where(.dark) .vitality-score-ring .vitality-score {
  color: var(--color-text);
}

/* Score bar dark mode — swap pastel bg-{color}-200 fills for deeper
   semi-transparent colors that sit well on the dark surface track. */
:where(.dark) .score-bar {
  color: var(--color-text) !important;
}
:where(.dark) .score-bar.bg-green-200 {
  background-color: color-mix(in oklab, var(--color-success) 50%, transparent);
}
:where(.dark) .score-bar.bg-yellow-200 {
  background-color: color-mix(in oklab, var(--color-warning) 50%, transparent);
}
:where(.dark) .score-bar.bg-pink-200 {
  background-color: color-mix(in oklab, var(--color-brand-pink) 50%, transparent);
}
:where(.dark) .score-bar.bg-blue-200 {
  background-color: color-mix(in oklab, var(--color-info) 50%, transparent);
}
:where(.dark) .score-bar.bg-gray-200 {
  background-color: color-mix(in oklab, var(--color-text-subtle) 40%, transparent);
}

@keyframes front-ring-animation {
  from {
    stroke-dasharray: 0, 100; /* Start with no length */
  }
  to {
    stroke-dasharray: var(--stroke-dasharray-front-ring-end-percentage), 100;
  }
}

@keyframes back-ring-animation {
  from {
    stroke-dasharray: 0, 100; /* Start with no length */
  }
  to {
    stroke-dasharray: var(--stroke-dasharray-back-ring-end-percentage), 100;
  }
}

.score-bar {
  animation: score-bar-width-increase ease-in-out 2s;
  animation-fill-mode: both;
  overflow: hidden;
  white-space: nowrap;
}

@keyframes score-bar-width-increase {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}