/* Rolodex word in the hero support line: "…restructure your best <ideas|essays|…>".
   The animated slot is decorative (aria-hidden); the full list lives in the visually
   hidden span for screen readers. Without JS the line reads "…your best ideas". */

.bw-word-spin__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* clip-path, not overflow: hidden — overflow moves an inline-block's baseline to its
   bottom edge, which is what pushed the word below the rest of the line. With clip-path
   the slot keeps the word's own text baseline, so it sits exactly on the sentence line
   whatever the paragraph's line-height is. */
.bw-hero-support-copy .bw-word-spin__slot {
  display: inline-block;
  position: relative;
  clip-path: inset(0);
  text-align: left;
  white-space: nowrap;
  perspective: 500px;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--color-accent, #a6cde7);
  font-weight: 600;
  line-height: inherit;
}

/* A touch over the sentence size: at 1:1 the lighter accent color reads smaller.
   Specificity + !important needed to beat sales-page-font-scale's
   "#__next * { font-size: inherit !important }". */
html.bw-sales-page-branch-writing.sales-page-font-scale #__next .bw-word-spin__slot {
  font-size: 1.1em !important;
}

.bw-hero-support-copy .bw-word-spin__word {
  line-height: inherit;
}

.bw-hero-support-copy .bw-word-spin__word {
  display: inline-block;
  white-space: nowrap;
}

.bw-hero-support-copy .bw-word-spin__word.is-entering {
  transform-origin: 50% 100%;
  animation: bwWordSpinIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bw-hero-support-copy .bw-word-spin__word.is-leaving {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 50% 0%;
  animation: bwWordSpinOut 0.5s cubic-bezier(0.5, 0, 0.75, 0.4) both;
}

.bw-hero-support-copy .bw-word-spin__measure {
  position: absolute;
  left: -9999px;
  top: 0;
  visibility: hidden;
}

@keyframes bwWordSpinIn {
  from {
    transform: translateY(135%) rotateX(-45deg);
    opacity: 0;
  }
  to {
    transform: translateY(0) rotateX(0);
    opacity: 1;
  }
}

@keyframes bwWordSpinOut {
  from {
    transform: translateY(0) rotateX(0);
    opacity: 1;
  }
  to {
    transform: translateY(-135%) rotateX(45deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bw-hero-support-copy .bw-word-spin__word.is-entering,
  .bw-hero-support-copy .bw-word-spin__word.is-leaving {
    animation: none;
  }
}