/* =========================================================
   FIT TEXT (Elementor Heading) – no flicker
   - Put class: .fit-text on the HEADING widget (wrapper)
   - Center container is the constraint (600px)
========================================================= */

.fit-text .elementor-heading-title {
  display: inline-block;
  white-space: nowrap; /* respects <br>, prevents extra wrapping */
  max-width: 100%;
  line-height: 0.95;

  /* prevent flash before JS sets fitted size */
  visibility: hidden;
}

.fit-text.is-fitted .elementor-heading-title {
  visibility: visible;
}

/* FLICKER LINKS */

/* Always-on “loads weird” per-letter flicker for Elementor headings/links
   Apply class: flicker-hover on the Elementor widget wrapper (like you have)
*/

.flicker-hover { 
  display: inline-block; 
}

.flicker-hover .elementor-heading-title a{
  display: inline-block;
  text-decoration: none;
}

/* Each character span */
.flicker-hover .flicker-char{
  display: inline-block;
  will-change: transform, opacity;

  /* ALWAYS ON */
  animation-name: flicker-load;
  animation-timing-function: steps(2, end);
  animation-iteration-count: infinite;
  animation-duration: var(--flicker-dur, 0.35s);
  animation-delay: var(--flicker-delay, 0ms);
}

/* No color change, just subtle redraw/jitter */
@keyframes flicker-load{
  0%   { opacity: 1;   transform: translate(0); }
  10%  { opacity: .9;  transform: translate(0.2px, -0.1px); }
  22%  { opacity: .55; transform: translate(-0.25px, 0.12px); }
  35%  { opacity: 1;   transform: translate(0); }
  55%  { opacity: .8;  transform: translate(0.15px, 0.18px); }
  75%  { opacity: 1;   transform: translate(0); }
  100% { opacity: 1;   transform: translate(0); }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .flicker-hover .flicker-char{ animation: none !important; }
}