/* LittleCloud stays almost still while the face gently comes to life. */
.cloud-buddy-btn {
  animation: cloudQuietIdle 14s ease-in-out infinite;
  transform-origin: 50% 70%;
}
:is(.cloud-buddy-btn, .studio-cloud-character) .cloud-face {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: none;
  pointer-events: none;
}
.cloud-face .cloud-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: cloudSoftBlink 7.8s ease-in-out infinite;
}
.cloud-face .cloud-mouth {
  transform-box: fill-box;
  transform-origin: 50% 45%;
  animation: cloudSoftSmile 12s ease-in-out infinite;
}
.cloud-buddy-btn.cloud-wave {
  animation: cloudQuietHello 1.8s ease-in-out !important;
}
.cloud-wave .cloud-mouth {
  animation: cloudHappySmile 1.8s ease-in-out;
}
.cloud-brand .studio-heading.cosmic-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 42%);
  align-items: center;
  gap: 24px;
  min-height: 230px;
  padding: 28px clamp(32px, 7vw, 96px) 28px 8px;
  overflow: visible;
}
.cloud-brand .studio-heading.cosmic-heading > div:first-child {
  max-width: 100%;
  width: auto;
}
.cloud-brand .studio-heading .studio-cloud-visual {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  max-width: 310px;
  margin: 0;
  justify-self: center;
}
.studio-cloud-character {
  position: relative;
  width: 100%;
  animation: cloudStudioBounce 8s ease-in-out infinite;
  transform-origin: 50% 80%;
}
.cloud-brand .studio-cloud-character > img {
  display: block;
  width: 100%;
  height: auto;
  animation: none !important;
}
@keyframes cloudStudioBounce {
  0%, 100% { transform: translate3d(0, 4px, 0); }
  50% { transform: translate3d(0, -9px, 0); }
}
@media (max-width: 900px) {
  .cloud-brand .studio-heading.cosmic-heading {
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 16px;
    padding-right: 24px;
  }
}
@media (max-width: 650px) {
  .cloud-brand .studio-heading.cosmic-heading {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 0 16px;
  }
  .cloud-brand .studio-heading .studio-cloud-visual { max-width: 220px; }
}
@keyframes cloudQuietIdle {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.18deg); }
  50% { transform: translate3d(0, -3px, 0) rotate(.18deg); }
}
@keyframes cloudSoftBlink {
  0%, 23.5%, 28.5%, 66.5%, 71.5%, 100% { transform: scaleY(1); }
  25.5%, 26.5%, 68.5%, 69.5% { transform: scaleY(.045); }
}
@keyframes cloudSoftSmile {
  0%, 20%, 75%, 100% { transform: scale(.88, .82); }
  37%, 52% { transform: scale(1.1, 1.1); }
}
@keyframes cloudQuietHello {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  40% { transform: translate3d(0, -3px, 0) rotate(.45deg); }
  70% { transform: translate3d(0, -1px, 0) rotate(-.3deg); }
}
@keyframes cloudHappySmile {
  0%, 100% { transform: scale(.88, .82); }
  35%, 70% { transform: scale(1.2, 1.18); }
}
.cloud-brand.cloud-motion-paused .cloud-eye,
.cloud-brand.cloud-motion-paused .cloud-mouth {
  animation: none !important;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .cloud-buddy-btn,
  .studio-cloud-character,
  .cloud-buddy-btn.cloud-wave,
  .cloud-face .cloud-eye,
  .cloud-face .cloud-mouth {
    animation: none !important;
    transform: none;
  }
}