/* Cloth retains the current composition and typography, with room for taller hems. */
/* Enlarge each sheet around its own centre without changing the layout or gaps. */
.changes--silk .change-orb__card { scale: 1.2; transform-origin: 50% 50%; }
.changes--silk .change-orb__description { position: absolute; color: var(--cream); }
.changes--silk .change-orb__card[open] .change-orb__description { animation: none; }
.changes--silk.has-silk-unfold .change-orb__flow { transition: none; }
.changes--silk.has-silk-unfold .change-orb__card .change-orb__title {
  opacity: var(--silk-title-opacity, 1);
  transition: none;
}
.changes--silk.has-silk-unfold .change-orb__card[open] .change-orb__description {
  opacity: var(--silk-copy-opacity, 0);
}
.changes--silk.has-silk-unfold .change-orb[data-silk-active] { z-index: 20; }
.changes--silk.has-silk-unfold .changes__orbs:has([data-silk-active]) .change-orb:not([data-silk-active]) { opacity: .25; }

@media (min-width: 681px) {
  /* One scene clock drives the outer spread and the actual fold mapping together. */
  .changes.changes--silk.has-silk-unfold .change-orb .change-orb__flow {
    width: calc(100% + 70% * var(--silk-unfold, 0));
    height: calc(100% + 70% * var(--silk-unfold, 0));
    left: calc(var(--water-unfold-x, -35%) * var(--silk-unfold, 0));
    top: calc(var(--water-unfold-y, 0%) * var(--silk-unfold, 0));
  }
}
@media (min-width: 901px) {
  .changes--silk .change-orb--three { --water-y: 23%; --water-height: 42%; }
  .changes--silk .change-orb--five { --water-y: 55%; --water-height: 45%; }
}
@media (min-width: 681px) and (max-width: 900px) {
  .changes--silk .change-orb--three { --water-y: 30%; --water-height: 35%; }
}
@media (max-width: 680px) {
  .changes--silk .change-orb--two { --water-mobile-x: -8%; --water-mobile-width: 92%; }
  .changes--silk .change-orb--three { --water-mobile-x: 15%; --water-mobile-width: 85%; }
  .changes--silk .change-orb--four { --water-mobile-x: -5%; --water-mobile-width: 95%; }
  .changes--silk .change-orb--five { --water-mobile-x: 18%; --water-mobile-width: 82%; }
  .changes--silk .change-orb--six { --water-mobile-x: -10%; }
  .changes.changes--silk.has-silk-unfold .change-orb {
    left: calc(var(--water-mobile-x, 0%) * (1 - var(--silk-unfold, 0)));
    width: calc(var(--water-mobile-width, 96%) + (100% - var(--water-mobile-width, 96%)) * var(--silk-unfold, 0));
  }
  .changes.changes--silk.has-silk-unfold .change-orb .change-orb__flow { width: 100%; height: auto; left: 0; top: 0; }
  .changes--silk.has-silk-unfold .change-orb__toggle {
    aspect-ratio: calc(var(--water-art-ratio, 1.8) * (1 - var(--silk-unfold, 0)) + 1.12 * var(--silk-unfold, 0));
    min-height: calc(340px * var(--silk-unfold, 0));
  }
  .changes--silk .change-orb__description {
    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%);
    padding: 0; color: var(--cream);
  }
  .changes--silk .change-orb__description p { line-height: 1.4; }
  .changes--silk .change-orb__card[open] .change-orb__title { opacity: 0; }
  .changes--silk.has-silk-unfold .change-orb__card[open] .change-orb__title { opacity: var(--silk-title-opacity, 1); }
}