@charset "UTF-8";
.intro-heading {
  --outer-width: calc(100% - var(--scrollbar-width, 0px));
  --inner-width: calc((var(--outer-width) - var(--wp--custom--layout--wide)) / 2);
  position: relative;
  box-sizing: border-box;
  width: var(--outer-width);
  padding: 0 max(var(--wp--custom--layout--page-margin), var(--inner-width));
}
.intro-heading.alignfull {
  padding-left: var(--wp--custom--layout--page-margin);
  padding-right: var(--wp--custom--layout--page-margin);
  width: 100%;
}

.intro-heading__title {
  font-weight: 1000;
  font-family: var(--wp--preset--font-family--alt-text);
  font-size: var(--wp--preset--font-size--huge);
  line-height: 1.05;
  margin: 0;
}

.intro-heading__main,
.intro-heading__tagline {
  display: block;
}

.intro-heading__tagline {
  overflow: hidden;
}

/* --------------------------------------------------------------------
 * JS-enhanced animation — CSS transitions port (formerly GSAP).
 *
 * JS adds .intro-heading--js to the block to opt in. Without JS (or
 * with prefers-reduced-motion), taglines render visibly via base styles.
 *
 * States on .intro-heading--js:
 *   .is-ready     → entry fade-in fires (opacity + translateY)
 *   .is-collapsed → collapsible taglines clamp to max-height:0 + fade
 *
 * JS sets `--tagline-h` on each collapsible tagline so max-height can
 * animate between 0 and the measured natural height.
 * ------------------------------------------------------------------ */
.intro-heading--js .intro-heading__tagline {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.intro-heading--js.is-ready .intro-heading__tagline {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered entry — matches the old GSAP 0.15s stagger. Up to 6 taglines. */
.intro-heading--js.is-ready .intro-heading__tagline[data-index="0"] {
  transition-delay: 0s;
}

.intro-heading--js.is-ready .intro-heading__tagline[data-index="1"] {
  transition-delay: 0.15s;
}

.intro-heading--js.is-ready .intro-heading__tagline[data-index="2"] {
  transition-delay: 0.3s;
}

.intro-heading--js.is-ready .intro-heading__tagline[data-index="3"] {
  transition-delay: 0.45s;
}

.intro-heading--js.is-ready .intro-heading__tagline[data-index="4"] {
  transition-delay: 0.6s;
}

.intro-heading--js.is-ready .intro-heading__tagline[data-index="5"] {
  transition-delay: 0.75s;
}

/* Collapse — only taglines after the first animate to height:0. */
.intro-heading--js .intro-heading__tagline:not([data-index="0"]) {
  max-height: var(--tagline-h, 10em);
  transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease;
}

.intro-heading--js.is-collapsed .intro-heading__tagline:not([data-index="0"]) {
  max-height: 0;
  opacity: 0;
  transform: translateY(-20px);
  /* All collapse together — reset any entry stagger delay. */
  transition-delay: 0s;
}

.intro-heading__highlight {
  color: var(--wp--preset--color--primary);
}

.intro-heading__toggle {
  position: absolute;
  right: 0;
  bottom: 20px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.intro-heading__toggle.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.intro-heading__toggle.is-open .intro-heading__toggle-icon {
  transform: rotate(-45deg);
}
.intro-heading__toggle:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

.intro-heading__toggle-icon {
  width: 35px;
  height: 35px;
  transition: transform 0.3s var(--ease-out, ease);
}

@media (prefers-reduced-motion: reduce) {
  .intro-heading__tagline:not([data-index="0"]) {
    display: none;
  }
  .intro-heading__toggle {
    opacity: 1;
    pointer-events: auto;
  }
}
.editor-styles-wrapper .intro-heading__tagline {
  opacity: 1 !important;
  height: auto !important;
}
/*# sourceMappingURL=style.css.map */