/* Six soft circular forms, using the existing INNAYA palette and typefaces. */
.changes {
  height: 100svh;
  min-height: 600px;
  padding: 110px 0 22px;
}
.changes__container {
  max-width: 1280px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 48px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
}

.changes .divider { margin-bottom: 0; }
.changes h2 {
  font-size: clamp(1.75rem, 3.1vw, 2.625rem);
  text-wrap: balance;
  margin: 0;
}

.changes__stage {
  min-height: 0;
  container-type: size;
  display: grid;
  place-items: center;
}
.changes__orbs {
  --canvas-ratio: 1.75858648;
  position: relative;
  width: min(100cqw, calc(100cqh * var(--canvas-ratio)));
  height: min(calc(100cqw / var(--canvas-ratio)), 100cqh);
  max-height: 100cqh;
  aspect-ratio: 1184 / 673.268;
  container-type: size;
}

.change-orb {
  --orb-shape: 50%;
  position: absolute;
  left: var(--orb-x);
  top: var(--orb-y);
  width: var(--orb-width);
  height: var(--orb-height);
  perspective: 1000px;
}
.change-orb--one {
  --orb-x: 0%;
  --orb-y: 8%;
  --orb-width: 31%;
  --orb-height: 42%;
  --orb-shape: 48% 52% 49% 51% / 52% 47% 53% 48%;
}
.change-orb--two {
  --orb-x: 35%;
  --orb-y: 0%;
  --orb-width: 28%;
  --orb-height: 45%;
  --orb-shape: 50% 50% 47% 53% / 48% 54% 46% 52%;
}
.change-orb--three {
  --orb-x: 68%;
  --orb-y: 10%;
  --orb-width: 32%;
  --orb-height: 43%;
  --orb-shape: 52% 48% 54% 46% / 49% 52% 48% 51%;
}
.change-orb--four {
  --orb-x: 3%;
  --orb-y: 57%;
  --orb-width: 28%;
  --orb-height: 40%;
  --orb-shape: 47% 53% 50% 50% / 54% 48% 52% 46%;
}
.change-orb--five {
  --orb-x: 34%;
  --orb-y: 50%;
  --orb-width: 33%;
  --orb-height: 50%;
  --orb-shape: 53% 47% 48% 52% / 47% 51% 49% 53%;
}
.change-orb--six {
  --orb-x: 71%;
  --orb-y: 60%;
  --orb-width: 28%;
  --orb-height: 38%;
  --orb-shape: 49% 51% 53% 47% / 51% 46% 54% 49%;
}

.change-orb__card {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: var(--orb-shape);
  color: var(--cream);
  isolation: isolate;
}
.change-orb__flow {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s;
}
.change-orb__membrane {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.change-orb__shape {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  scale: var(--music-swell, 1);
  transition: transform 0.65s cubic-bezier(0.2, 0.65, 0.2, 1);
}
.change-orb__shape path {
  fill: var(--dark-burgundy);
  stroke: var(--dark-burgundy);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.change-orb__card[open] .change-orb__shape {
  transform: rotateY(180deg);
}

.changes__motion-toggle {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: grid;
  place-items: center;
  color: var(--dark-burgundy);
  border: 1px solid rgba(103, 17, 2, 0.45);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.changes__motion-toggle[hidden] { display: none; }
.changes__motion-toggle::after { content: ''; position: absolute; inset: -12px; }
.changes__motion-toggle svg { width: 16px; height: 16px; }
.changes__play-symbol { display: none; }
.is-flow-paused .changes__play-symbol { display: block; }
.is-flow-paused .changes__pause-symbol { display: none; }
.changes__motion-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }

.change-orb__toggle {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  list-style: none;
  border-radius: inherit;
  padding: 28px 24px 38px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.change-orb__toggle::-webkit-details-marker { display: none; }
.change-orb__toggle::marker { content: ''; }
.change-orb__toggle:focus-visible {
  outline: 1px solid var(--dark-burgundy);
  outline-offset: 7px;
}

.change-orb__title {
  display: block;
  max-width: 16ch;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(1.3125rem, min(3cqw, 6cqh), 1.875rem);
  line-height: 1.13;
  text-align: center;
  text-wrap: balance;
  backface-visibility: hidden;
  text-shadow: 0 0 calc(6px * var(--orb-ring, 0)) rgb(253 247 230 / calc(0.3 * var(--orb-ring, 0)));
  transition: transform 0.65s cubic-bezier(0.2, 0.65, 0.2, 1), opacity 0.3s;
}
.change-orb__card[open] .change-orb__title {
  opacity: 0;
  transform: rotateY(180deg);
}

.change-orb__hint {
  position: absolute;
  bottom: 14px;
  left: calc(50% - 9px);
  width: 18px;
  height: 18px;
  border: 1px solid rgba(253, 247, 230, 0.65);
  border-radius: 50%;
  transition: border-color 0.2s;
}
.change-orb__hint::before,
.change-orb__hint::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 4px;
  width: 8px;
  height: 1px;
  background: currentColor;
}
.change-orb__hint::after {
  transform: rotate(90deg);
  transition: transform 0.3s;
}
.change-orb__card[open] .change-orb__hint::after { transform: rotate(0); }
@media (hover: hover) {
  .change-orb__toggle:hover .change-orb__hint { border-color: var(--cream); }
}

.change-orb__description {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 26px 24px 38px;
  pointer-events: none;
  backface-visibility: hidden;
}
.change-orb__card:not([open]) .change-orb__description { display: none; }
.change-orb__description p {
  max-width: 26ch;
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  font-size: clamp(0.82rem, min(1.5cqw, 3.2cqh), 0.95rem);
  line-height: 1.55;
  text-align: center;
  text-wrap: pretty;
}
.change-orb__card[open] .change-orb__description {
  animation: change-orb-unfold 0.65s cubic-bezier(0.2, 0.65, 0.2, 1) both;
}
@keyframes change-orb-unfold {
  from { opacity: 0; transform: rotateY(-140deg) scale(0.96); }
  35% { opacity: 0.2; }
  to { opacity: 1; transform: rotateY(0) scale(1); }
}

@media (max-width: 580px) {
  .changes { min-height: 720px; padding-top: 104px; }
  .changes__container { gap: 12px; }
  .changes__orbs {
    width: min(100cqw, 85cqh);
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 18px 14px;
    container-type: inline-size;
  }
  .change-orb {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: var(--orb-ratio, 1.2);
  }
  .change-orb--five { width: 90%; justify-self: center; }
  .change-orb:has(.change-orb__card[open]) { grid-column: 1 / -1; width: min(100%, 320px); justify-self: center; }
  .change-orb--one { --orb-x: 1%; --orb-y: 0%; --orb-width: 47%; --orb-height: 30.5%; }
  .change-orb--two { --orb-x: 52%; --orb-y: 5%; --orb-width: 47%; --orb-height: 29%; }
  .change-orb--three { --orb-x: 2%; --orb-y: 34%; --orb-width: 44%; --orb-height: 31%; }
  .change-orb--four { --orb-x: 49%; --orb-y: 38%; --orb-width: 51%; --orb-height: 29%; }
  .change-orb--five { --orb-x: 0%; --orb-y: 69%; --orb-width: 49%; --orb-height: 30%; }
  .change-orb--six { --orb-x: 53%; --orb-y: 71%; --orb-width: 46%; --orb-height: 28%; }
  .change-orb__title { font-size: clamp(1rem, 4.5cqw, 1.2rem); }
  .change-orb__toggle { padding: 20px 20px 30px; }
  .change-orb__description { padding: 20px 20px 30px; }
  .change-orb__description p { font-size: clamp(0.78rem, 2.6cqw, 0.9rem); line-height: 1.5; }
  .change-orb__hint { bottom: 10px; }
}

@media (max-width: 420px) {
  .changes { min-height: 780px; }
  .changes__container { padding-inline: 20px; }
  .changes h2 { font-size: 1.75rem; }
  .change-orb__title { font-size: 1.125rem; }
  .change-orb__toggle { padding: 16px 14px 28px; }
  .change-orb__description { padding: 16px 14px 28px; }
  .change-orb__description p { font-size: 0.78rem; line-height: 1.45; }
}

@media (prefers-reduced-motion: reduce) {
  .change-orb__flow { transition: none; }
  .change-orb__shape,
  .change-orb__title,
  .change-orb__hint::after { transition: none; }
  .change-orb__card[open] .change-orb__shape,
  .change-orb__card[open] .change-orb__title { transform: none; }
  .change-orb__card[open] .change-orb__description { animation: none; }
}

/* Native CSS keeps a clearly visible, slow current even if the SVG loop is gated.
   The text only drifts; the membrane alone changes its proportions. */
.change-orb { --flow-period: 24s; --flow-delay: 0s; --breath-period: 15.75s; --breath-delay: 0s; }
.change-orb--two { --flow-period: 27s; --flow-delay: -11s; --breath-period: 18s; --breath-delay: -7s; }
.change-orb--three { --flow-period: 22.5s; --flow-delay: -19s; --breath-period: 15s; --breath-delay: -13s; }
.change-orb--four { --flow-period: 30.75s; --flow-delay: -6s; --breath-period: 20.25s; --breath-delay: -5s; }
.change-orb--five { --flow-period: 23.25s; --flow-delay: -23s; --breath-period: 16.5s; --breath-delay: -17s; }
.change-orb--six { --flow-period: 28.5s; --flow-delay: -15s; --breath-period: 18.75s; --breath-delay: -21s; }
.change-orb__flow { animation: changes-current var(--flow-period) ease-in-out var(--flow-delay) infinite both; }
.change-orb__membrane { animation: changes-breathe var(--breath-period) ease-in-out var(--breath-delay) infinite both; }
@keyframes changes-current {
  0%, 100% { transform: translate3d(-1.5%, -0.8%, 0); }
  25% { transform: translate3d(2.1%, -3%, 0); }
  50% { transform: translate3d(1%, 2.3%, 0); }
  75% { transform: translate3d(-2%, 2.8%, 0); }
}
@keyframes changes-breathe {
  0%, 100% { transform: rotate(-1.1deg) scale(0.95, 1.015); }
  25% { transform: rotate(0.9deg) scale(1.065, 0.925); }
  50% { transform: rotate(1.4deg) scale(0.99, 1.065); }
  75% { transform: rotate(-0.8deg) scale(0.89, 0.985); }
}
@media (prefers-reduced-motion: reduce) {
  .change-orb__flow, .change-orb__membrane { animation: none; }
}
/* An explicit Play click or the requested motion=on preview can opt in. */
.changes.is-motion-enabled .change-orb__flow { animation: changes-current var(--flow-period) ease-in-out var(--flow-delay) infinite both; }
.changes.is-motion-enabled .change-orb__membrane { animation: changes-breathe var(--breath-period) ease-in-out var(--breath-delay) infinite both; }
.changes.is-flow-paused .change-orb__flow,
.changes.is-flow-paused .change-orb__membrane,
.changes.is-flow-asleep .change-orb__flow,
.changes.is-flow-asleep .change-orb__membrane { animation-play-state: paused; }

@media (min-width: 581px) and (max-width: 1000px) {
  .change-orb:has(.change-orb__card[open]) { z-index: 5; }
  .change-orb:has(.change-orb__card[open]) .change-orb__flow {
    width: 160%; height: 160%; left: var(--unfold-x, -30%); top: var(--unfold-y, 0%);
  }
  .change-orb--one, .change-orb--four { --unfold-x: 0%; }
  .change-orb--three, .change-orb--six { --unfold-x: -60%; }
  .change-orb--four, .change-orb--five, .change-orb--six { --unfold-y: -60%; }
}