/* Isolated visual experiment: remove the three partials to remove the study.
   Nothing here restyles the hero, copy, or existing sections. */
.cloud-study {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: clamp(8rem, 15vw, 13rem);
  overflow: clip;
  pointer-events: none;
  user-select: none;
}

.cloud-study__cloud {
  position: absolute;
  left: 0;
  top: 4%;
  width: clamp(17rem, 38vw, 36rem);
  transform: translateX(-18%);
}

.cloud-study__cloud svg { display: block; width: 100%; height: auto; overflow: visible; }
.cloud-study__silhouette { fill: #37352f; }
.cloud-study__curls { fill: none; stroke: var(--yao-bg); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cloud-study__pixels { fill: #37352f; }
.cloud-study__pixels rect:nth-child(n + 3) { opacity: 0.65; }

.cloud-study__thread {
  position: absolute;
  inset: 0;
  opacity: 0.65;
  transform-origin: 12% 50%;
}

.cloud-study__thread svg { width: 100%; height: 100%; overflow: visible; }
.cloud-study__thread path { fill: none; stroke: var(--yao-red); stroke-width: 0.85; vector-effect: non-scaling-stroke; }
.cloud-study__thread rect { fill: var(--yao-red); }

.cloud-study--right .cloud-study__cloud { right: 0; left: auto; top: 12%; transform: translateX(18%); }
.cloud-study--right .cloud-study__cloud svg { transform: scaleX(-1); }
.cloud-study--right .cloud-study__thread { transform-origin: 88% 50%; }
.cloud-study--right .cloud-study__thread svg { transform: scaleX(-1); }

@media (max-width: 767px) {
  .cloud-study { height: 8.5rem; }
  .cloud-study__cloud { width: 17rem; top: 8%; }
  .cloud-study__thread { top: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cloud-study__cloud, .cloud-study__thread { will-change: auto; }
}