/* Per-letter hover lift for every site-level H1/H2.
   The word wrapper preserves normal line wrapping; individual letters animate. */
.gp-letter-hover-heading .gp-letter-word {
  display: inline-block;
  white-space: nowrap;
  vertical-align: baseline;
}

.gp-letter-hover-heading .gp-heading-char {
  display: inline-block;
  position: relative;
  transform: translateY(0);
  transform-origin: 50% 100%;
  transition: transform 200ms cubic-bezier(.2, .7, .2, 1), color 200ms ease;
  will-change: transform;
}

.gp-letter-hover-heading .gp-heading-char:hover {
  transform: translateY(-5px);
  color: #ff0076;
}

/* Keep the animation usable with keyboard focus where headings are focusable. */
.gp-letter-hover-heading:focus-visible .gp-heading-char {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .gp-letter-hover-heading .gp-heading-char,
  .gp-letter-hover-heading .gp-heading-char:hover {
    transition: color 120ms ease;
    transform: none;
    will-change: auto;
  }
}

/* Let a hovered letter lift beyond the original word-mask edge on the homepage. */
.split-word-mask:hover {
  overflow: visible;
  position: relative;
  z-index: 3;
}

/* ==========================================================================
   Entrance reveal (see js/text-animations.js)
   Words stay hidden only while the heading is waiting to scroll into view.
   The class is added by JS, so with JS off or reduced motion on, text is visible.
   ========================================================================== */
.gp-reveal-pending .gp-letter-word {
  opacity: 0;
}

/* ==========================================================================
   Re-enable heading motion on pages using body.site-effects-clean.
   That stylesheet applies a blanket `transition/animation: none` and
   `main *:hover { transform: none }` (all !important), which silently disabled
   the letter-hover effect. These selectors are more specific, so they win.
   ========================================================================== */
body.site-effects-clean .gp-letter-hover-heading .gp-heading-char {
  transition: transform 200ms cubic-bezier(.2, .7, .2, 1), color 200ms ease !important;
}

body.site-effects-clean .gp-letter-hover-heading .gp-heading-char:hover {
  transform: translateY(-5px) !important;
  color: #ff0076 !important;
}

@media (prefers-reduced-motion: reduce) {
  body.site-effects-clean .gp-letter-hover-heading .gp-heading-char {
    transition: color 120ms ease !important;
  }
  body.site-effects-clean .gp-letter-hover-heading .gp-heading-char:hover {
    transform: none !important;
  }
}