/* A quiet family of dusk clouds. Their form never represents progress. */
.goal-cloud {
  display: block; position: relative; flex: none; width: min(100%, 216px);
  aspect-ratio: 12 / 7; pointer-events: none;
}
.goal-cloud-drift { display: block; width: 100%; height: 100%; animation: cloud-drift var(--cloud-duration, 18s) var(--cloud-delay, 0s) ease-in-out infinite alternate; }
.goal-cloud svg { display: block; width: 100%; height: 100%; overflow: visible; opacity: .91; transition: opacity .25s ease; }
.goal-cloud[data-tone="1"] stop[offset="50%"] { stop-color: #717f75; }
.goal-cloud[data-tone="2"] stop[offset="50%"] { stop-color: #6b7c82; }
.goal-bubble:focus-visible .goal-cloud svg { opacity: 1; }
@media (hover: hover) { .goal-bubble:hover .goal-cloud svg { opacity: 1; } }
.goal-bubble:only-child .goal-cloud { width: min(22vw, 240px); }
@keyframes cloud-drift { from { transform: translate3d(-2px, 2px, 0); } to { transform: translate3d(2px, -3px, 0); } }
.goal-cloud-ghost { position: fixed; z-index: 40; pointer-events: none; will-change: transform, opacity; }
.goal-cloud-ghost .goal-cloud { width: 100%; height: 100%; }
.goal-cloud-ghost .goal-cloud-drift { animation: none; }
.goal-cloud-ghost svg { transition: none; }
.goal-cloud-mist { fill: #dbe2e8; opacity: 0; }
/* Transparent input shield: only the expanding silhouette covers the page. */
.goal-view-veil { position: fixed; inset: 0; z-index: 39; }
@media (min-width: 1101px) {
  .goal-bubbles { padding-bottom: 44px; scroll-padding-block: 12px 44px; -webkit-mask-image: linear-gradient(#000 calc(100% - 44px), transparent); mask-image: linear-gradient(#000 calc(100% - 44px), transparent); }
}
@media (max-width: 1100px) { .goal-bubble:only-child .goal-cloud { width: min(60vw, 240px); } }
@media (min-width: 1101px) and (max-height: 750px) { .goal-cloud, .goal-bubble:only-child .goal-cloud { width: min(100%, 190px); } }
@media (max-width: 600px) {
  .goal-bubble-list { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
  .goal-bubble:not(.is-current) .bubble-name, .goal-bubble:not(.is-current) .bubble-score, .goal-bubble:not(.is-current) .bubble-activity { opacity: 0; }
  .bubble-name, .bubble-score, .bubble-activity { transition: opacity .2s ease; }
  .goal-bubble-list .goal-cloud, .goal-bubble-list .goal-bubble:only-child .goal-cloud { width: min(56vw, 216px); }
  .goal-cloud-drift { animation: none; }
  .goal-bubble-list .goal-bubble:focus-visible { outline: 2px solid #d5dfc2; outline-offset: -2px; }
}
@media (prefers-reduced-motion: reduce) {
  .goal-cloud-drift { animation: none; }
  .goal-cloud svg { transition: none; }
}