/* ==========================================================================
   AdWizards Hero Rotator (Webflow Clone)
   ========================================================================== */

/* Headline unification: single-line, centered, consistent metrics
   -------------------------------------------------------------------------- */
.heading-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  white-space: nowrap;
}

.heading-wrapper .home-h1 {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2ch; /* Reduced gap for a tighter look */
  margin: 0;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 0.95;
  font-size: clamp(28px, 5vw, 60px); /* Responsive font size */
}

/* Width-adaptive rotator for headline
   -------------------------------------------------------------------------- */
.rotator-wrap {
  display: inline-block;
  vertical-align: baseline;
  overflow: hidden;
  white-space: nowrap;
  transition: width 320ms cubic-bezier(.2,.8,.2,1);
  text-align: left; /* Align text to the left within the expanding box */
}

/* Visible rotating word
   -------------------------------------------------------------------------- */
.rotator-word {
  display: block;
  will-change: opacity, transform;
  transition: opacity 120ms ease-out, transform 120ms ease-out;
  color: transparent; /* Hide text color to show gradient */
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(135deg, #5c7cff, #e84b7a);
}

/* Off-screen measurer for exact width calculation
   -------------------------------------------------------------------------- */
.rotator-measure {
  position: absolute;
  left: -9999px;
  top: 0;
  white-space: nowrap;
  pointer-events: none;
  visibility: hidden;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 0.95;
  font-size: clamp(28px, 5vw, 60px); /* Match the main H1 font size */
}

/* Hyphenation and word-break safety
   -------------------------------------------------------------------------- */
.rotator-word,
.rotator-measure {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  word-break: keep-all;
}