/* Preserve the approved photograph; all label geometry follows its liquid body. */
.changes--water { min-height: 740px; }
.changes--water .changes__orbs {
  --canvas-ratio: 1.9;
  aspect-ratio: var(--canvas-ratio);
  display: block;
}
.changes--water .change-orb {
  position: absolute;
  left: var(--water-x); top: var(--water-y);
  width: var(--water-width); height: var(--water-height);
  aspect-ratio: auto;
  transition: opacity 0.35s;
}
/* Close, staggered shoulders: each optical body has its own space, without rows. */
.changes--water .change-orb--one   { --water-x: 0%;  --water-y: 5%;  --water-width: 43%; --water-height: 50%; }
.changes--water .change-orb--two   { --water-x: 38%; --water-y: 0%;  --water-width: 31%; --water-height: 44%; }
.changes--water .change-orb--three { --water-x: 63%; --water-y: 27%; --water-width: 37%; --water-height: 38%; }
.changes--water .change-orb--four  { --water-x: 8%;  --water-y: 45%; --water-width: 40%; --water-height: 53%; }
.changes--water .change-orb--five  { --water-x: 43%; --water-y: 65%; --water-width: 27%; --water-height: 35%; }
.changes--water .change-orb--six   { --water-x: 66%; --water-y: 61%; --water-width: 34%; --water-height: 39%; }
.changes.changes--water .change-orb__flow { animation: none; }
.changes.changes--water .change-orb__membrane { animation: none; }
.changes--water .change-orb__shape {
  overflow: hidden;
  scale: 1;
  filter: none;
  transform: none;
  transition: none;
}
.change-orb__water-mask { mask-type: alpha; }
.change-orb__water-canvas {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
}
.change-orb__water-canvas.is-ready { opacity: 1; }
.change-orb__water-canvas.is-ready + .change-orb__water-fallback { opacity: 0; }
.changes--water .change-orb__card[open] .change-orb__shape { transform: none; }

.changes--water .change-orb__title {
  position: absolute;
  left: var(--water-text-x, 25%);
  top: var(--water-text-y, 25%);
  width: var(--water-text-width, 50%);
  height: var(--water-text-height, 50%);
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1.12;
  transform: none;
  color: var(--cream);
  background: none;
  text-shadow: none;
  -webkit-text-stroke: 0;
  transition: opacity 0.25s;
}
.change-orb__text { display: block; width: 100%; line-height: 1.12; text-wrap: balance; }
.changes--water .change-orb__card[open] .change-orb__title { transform: none; }
.changes--water .change-orb__hint {
  left: var(--water-plus-x, 78%);
  top: var(--water-plus-y, 55%);
  bottom: auto;
  width: 15px; height: 15px;
  transform: translate(-50%, -50%);
  border-color: rgb(253 247 230 / 0.75);
  background: rgb(253 247 230 / 0.78);
  color: var(--dark-burgundy);
  box-shadow: 0 1px 3px rgb(35 4 0 / 0.18);
}
.changes--water .change-orb__hint::before,
.changes--water .change-orb__hint::after { top: 6px; left: 3px; width: 7px; }
.changes--water .change-orb__description {
  inset: auto;
  left: var(--water-text-x, 25%);
  top: var(--water-text-y, 25%);
  width: var(--water-text-width, 50%);
  height: var(--water-text-height, 50%);
  padding: 0;
  transform: none;
}
.changes--water .change-orb__description p {
  max-width: none;
  width: 100%;
  font-size: 15px;
  line-height: 1.4;
  text-shadow: none;
  -webkit-text-stroke: 0;
}
.changes--water .change-orb__card[open] .change-orb__description { animation: water-copy-reveal 0.35s ease both; }
@keyframes water-copy-reveal { from { opacity: 0; } to { opacity: 1; } }

@media (min-width: 681px) {
  .changes--water .change-orb:has(.change-orb__card[open]) { z-index: 20; }
  .changes--water .change-orb:has(.change-orb__card[open]) .change-orb__flow {
    width: 170%; height: 170%;
    left: var(--water-unfold-x, -35%);
    top: var(--water-unfold-y, 0%);
  }
  .changes--water .changes__orbs:has(.change-orb__card[open]) .change-orb:not(:has(.change-orb__card[open])) { opacity: 0.25; }
}
@media (min-width: 901px) {
  .changes--water .change-orb:nth-child(3n+1) { --water-unfold-x: 0%; }
  .changes--water .change-orb:nth-child(3n) { --water-unfold-x: -70%; }
  .changes--water .change-orb:nth-child(n+4) { --water-unfold-y: -70%; }
}
@media (max-width: 900px) {
  .changes--water { height: auto; padding-bottom: 28px; }
  .changes--water .changes__container { height: auto; grid-template-rows: auto auto auto; }
  .changes--water .changes__stage { container-type: inline-size; }
  .changes--water .changes__orbs {
    width: 100%; height: auto; max-height: none; aspect-ratio: 1.08;
    container-type: inline-size;
  }
}
@media (min-width: 681px) and (max-width: 900px) {
  .changes--water .change-orb--one   { --water-x: 0%;  --water-y: 0%;  --water-width: 56%; --water-height: 34%; }
  .changes--water .change-orb--two   { --water-x: 49%; --water-y: 15%; --water-width: 51%; --water-height: 37%; }
  .changes--water .change-orb--three { --water-x: 0%;  --water-y: 32%; --water-width: 58%; --water-height: 28%; }
  .changes--water .change-orb--four  { --water-x: 47%; --water-y: 43%; --water-width: 53%; --water-height: 36%; }
  .changes--water .change-orb--five  { --water-x: 0%;  --water-y: 65%; --water-width: 50%; --water-height: 32%; }
  .changes--water .change-orb--six   { --water-x: 43%; --water-y: 70%; --water-width: 57%; --water-height: 30%; }
  .changes--water .change-orb { --water-unfold-y: -35%; }
  .changes--water .change-orb:nth-child(odd) { --water-unfold-x: 0%; }
  .changes--water .change-orb:nth-child(even) { --water-unfold-x: -70%; }
  .changes--water .change-orb:nth-child(-n+2) { --water-unfold-y: 0%; }
  .changes--water .change-orb:nth-child(n+5) { --water-unfold-y: -70%; }
}
@media (max-width: 680px) {
  .changes--water .changes__orbs {
    display: flex; flex-direction: column;
    aspect-ratio: auto; max-width: 470px;
  }
  .changes--water .change-orb {
    position: relative; left: var(--water-mobile-x, 0%); top: auto;
    height: auto; width: var(--water-mobile-width, 96%);
    align-self: flex-start;
    margin-top: var(--water-mobile-overlap, -11cqw);
  }
  /* Account for the asymmetric liquid body, rather than aligning its empty canvas. */
  .changes--water .change-orb--one { --water-mobile-x: 0%; --water-mobile-width: 100%; --water-mobile-overlap: 0px; }
  .changes--water .change-orb--two { --water-mobile-x: -6%; --water-mobile-width: 88%; --water-mobile-overlap: -10cqw; }
  .changes--water .change-orb--three { --water-mobile-x: 18%; --water-mobile-width: 82%; }
  .changes--water .change-orb--four { --water-mobile-x: 0%; --water-mobile-width: 84%; --water-mobile-overlap: -10cqw; }
  .changes--water .change-orb--five { --water-mobile-x: 20%; --water-mobile-width: 80%; }
  .changes--water .change-orb--six { --water-mobile-x: -12%; --water-mobile-width: 96%; --water-mobile-overlap: -12cqw; }
  .changes--water .change-orb:has(.change-orb__card[open]) + .change-orb { margin-top: 8px; }
  .changes--water .change-orb__flow,
  .changes--water .change-orb__card { height: auto; }
  .changes--water .change-orb__toggle {
    position: relative; inset: auto;
    width: 100%; height: auto; padding: 0;
    aspect-ratio: var(--water-art-ratio, 1.8);
  }
  .changes--water .change-orb:has(.change-orb__card[open]) { width: var(--water-mobile-width, 96%); }
  .changes--water .change-orb__card[open] .change-orb__title { opacity: 1; }
  .changes--water .change-orb__description {
    position: relative; inset: auto;
    width: 100%; height: auto;
    padding: 14px 18px 24px;
    color: var(--dark-burgundy);
  }
  .changes--water .change-orb__description p { font-size: 16px; line-height: 1.55; text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .changes--water .change-orb { transition: none; }
  .changes--water .change-orb__card[open] .change-orb__description { animation: none; }
}