/* ══ Rotating gradient accent word ═══════════════════════════════════
   Standalone version of the homepage hero's .hn-accent effect, for
   headings that are not part of the hero slide machinery. The homepage
   copy is driven by the mode cycle (window.__hnCycleMs, slide changes);
   this one simply loops on its own interval.

   Markup comes from views/partials/accent-words.ejs and is paired with
   public/js/accent-words.js. Used on the contact and careers heroes.

   The wrap is an inline-grid so every variant is stacked in the same
   cell: the slot's width is locked to the longest word and the rest of
   the heading never reflows as the word changes. */
.ent-accent-wrap {
  display: inline-grid;
  grid-template-columns: 1fr;
  text-align: left;
  vertical-align: bottom;
}

.ent-accent {
  grid-area: 1 / 1;
  display: inline-block;
  background: linear-gradient(110deg, #0096c7 0%, #4aaa57 35%, #f77f00 55%, #0096c7 80%, #4aaa57 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: entAccentShimmer 5s linear infinite;
  opacity: 0;
  transform: translateY(0.35em);
  filter: blur(6px);
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.42s ease;
  pointer-events: none;
}
.ent-accent.is-active  { opacity: 1; transform: translateY(0);        filter: blur(0); }
.ent-accent.is-leaving { opacity: 0; transform: translateY(-0.35em);  filter: blur(6px); }

@keyframes entAccentShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Reduced motion: no shimmer, no blur-lift. The first word simply sits
   there; the JS also stops rotating (see accent-words.js). */
@media (prefers-reduced-motion: reduce) {
  .ent-accent {
    animation: none;
    transition: none;
    filter: none;
    transform: none;
  }
}