/* FITfactory v78: dynamic, infinitely repeated neon swipe across the homepage creed. */

.brand-creed-swipe-v78 h2 span[data-swipe-text] {
  position:relative;
  display:inline-block;
  isolation:isolate;
}

.brand-creed-swipe-v78 h2 span[data-swipe-text]::after {
  position:absolute;
  z-index:1;
  inset:0;
  color:transparent;
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  content:attr(data-swipe-text);
}

@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .brand-creed-swipe-v78 h2 span[data-swipe-text]::after {
    background-image:linear-gradient(
      104deg,
      transparent 0%,
      transparent 36%,
      rgba(255,215,255,.3) 43%,
      #fff 49%,
      #fff 52%,
      #c7fff4 56%,
      rgba(250,168,255,.48) 61%,
      transparent 69%,
      transparent 100%
    );
    background-repeat:no-repeat;
    background-size:265% 100%;
    background-position:170% 50%;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    filter:
      drop-shadow(0 0 2px rgba(255,255,255,.98))
      drop-shadow(0 0 8px rgba(255,225,255,.92))
      drop-shadow(0 0 17px rgba(240,108,255,.74));
    will-change:background-position,opacity;
    animation:ff-creed-word-swipe-v78 6.4s cubic-bezier(.3,.02,.24,1) infinite;
    animation-delay:var(--ff-creed-swipe-delay-v78,0s);
  }

  .brand-creed-swipe-v78 h2 span:nth-child(1)::after {
    --ff-creed-swipe-delay-v78:0s;
  }

  .brand-creed-swipe-v78 h2 span:nth-child(2)::after {
    --ff-creed-swipe-delay-v78:.38s;
  }

  .brand-creed-swipe-v78 h2 span:nth-child(3)::after {
    --ff-creed-swipe-delay-v78:.76s;
  }
}

@keyframes ff-creed-word-swipe-v78 {
  0%,2% {
    background-position:170% 50%;
    opacity:0;
  }

  4% {
    opacity:.42;
  }

  14% {
    opacity:1;
  }

  25% {
    background-position:-70% 50%;
    opacity:.98;
  }

  29%,100% {
    background-position:-70% 50%;
    opacity:0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .brand-creed-swipe-v78 h2 span[data-swipe-text]::after {
    animation:none;
    opacity:0;
    will-change:auto;
  }
}

@media (forced-colors:active) {
  .brand-creed-swipe-v78 h2 span[data-swipe-text]::after {
    display:none;
  }
}

@media print {
  .brand-creed-swipe-v78 h2 span[data-swipe-text]::after {
    display:none;
  }
}