/* "High Comedy." floats like a cloud: the heading drifts up/down with a soft sway, a hazy cream cloud breathes behind it.
   Runs on the h2 itself; the masked line reveal (mask-text-reveal.js) only animates the inner lines, so nothing collides. */
.next-show__title { position: relative; isolation: isolate; display: inline-block;
  animation: hc-float 7s ease-in-out 1.4s infinite; will-change: transform, translate;
  translate: 0 var(--hc-y, 0px);
  text-shadow: 0 0 22px rgba(251, 237, 224, .28), 0 10px 30px rgba(0, 0, 0, .35); }

/* the cloud: overlapping soft puffs, blurred, slowly breathing and drifting */
.next-show__title::before {
  content: ""; position: absolute; z-index: -1; left: -18%; right: -18%; top: -22%; bottom: -26%; pointer-events: none;
  background:
    radial-gradient(closest-side at 22% 58%, rgba(251, 237, 224, .30), transparent),
    radial-gradient(closest-side at 42% 34%, rgba(251, 237, 224, .34), transparent),
    radial-gradient(closest-side at 62% 52%, rgba(251, 237, 224, .30), transparent),
    radial-gradient(closest-side at 80% 38%, rgba(251, 237, 224, .26), transparent),
    radial-gradient(closest-side at 50% 72%, rgba(244, 215, 185, .22), transparent);
  background-size: 46% 70%, 48% 74%, 46% 70%, 40% 64%, 70% 60%;
  background-repeat: no-repeat;
  background-position: 0% 50%, 30% 10%, 60% 40%, 100% 20%, 50% 100%;
  filter: blur(22px); opacity: var(--hc-haze, .9);
  animation: hc-cloud 9s ease-in-out infinite;
}
/* a few wisps rising off the cloud */
.next-show__title::after {
  content: ""; position: absolute; z-index: -1; left: 30%; top: -30%; width: 40%; height: 60%; pointer-events: none;
  background:
    radial-gradient(closest-side at 30% 70%, rgba(251, 237, 224, .22), transparent),
    radial-gradient(closest-side at 65% 40%, rgba(251, 237, 224, .18), transparent);
  filter: blur(16px); animation: hc-wisp 6s ease-in-out infinite;
}

@keyframes hc-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  25%      { transform: translateY(-10px) rotate(.6deg); }
  50%      { transform: translateY(-16px) rotate(1.2deg); }
  75%      { transform: translateY(-6px) rotate(-.4deg); }
}
@keyframes hc-cloud {
  0%, 100% { transform: translateX(0) scale(1); }
  50%      { transform: translateX(14px) scale(1.06); }
}
@keyframes hc-wisp {
  0%   { transform: translateY(20px) scale(.9); opacity: 0; }
  40%  { opacity: .9; }
  100% { transform: translateY(-40px) scale(1.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .next-show__title, .next-show__title::before, .next-show__title::after { animation: none; }
}