/* ============================================================
   word-cycle.css
   Electric word-swap for the 3ap hero subheading.
   Pair with word-cycle.jquery.js (requires jQuery 3.x).
   ============================================================ */

.word-cycle{
  /* the electric accent — change here or via data-electric="" */
  --wc-electric: #59A5FF;
  --wc-electric-2: #FF597B;

  position: relative;
  display: inline-block;
  vertical-align: baseline;
  width: 0;                       /* set by JS to the current word's width */
  overflow: visible;
  text-align: left;
  transition: width .46s cubic-bezier(.7, 0, .2, 1);
}

/* the visible word */
.word-cycle .wc-word{
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: inherit;                 /* inherits your subheading colour */
  will-change: transform, filter, opacity;
}

/* RGB-split ghosts (only visible during a swap) */
.word-cycle .wc-word::before,
.word-cycle .wc-word::after{
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
}
.word-cycle .wc-word::before{ color: var(--wc-electric); }
.word-cycle .wc-word::after { color: var(--wc-electric-2); }

/* ---- crackle-out: the outgoing word tears apart ---- */
.word-cycle .wc-word.wc-crackle{
  animation: wc-crackle var(--wc-out, 280ms) steps(1, end) forwards;
}
.word-cycle .wc-word.wc-crackle::before{ animation: wc-splitA var(--wc-out, 280ms) steps(1, end) forwards; }
.word-cycle .wc-word.wc-crackle::after { animation: wc-splitB var(--wc-out, 280ms) steps(1, end) forwards; }

@keyframes wc-crackle{
  0%   { opacity: 1;   transform: translate(0,0);                          filter: none;            clip-path: inset(0 0 0 0); }
  18%  { opacity: 1;   transform: translate(calc(var(--wc-amp) * -1), 0);  filter: brightness(2.4); clip-path: inset(38% 0 28% 0); }
  34%  { opacity: .85; transform: translate(var(--wc-amp), 0);                                       clip-path: inset(8% 0 62% 0); }
  52%  { opacity: 1;   transform: translate(calc(var(--wc-amp) * -.6), 0); filter: brightness(3);   clip-path: inset(70% 0 4% 0); }
  70%  { opacity: .4;  transform: translate(var(--wc-amp), 0);                                       clip-path: inset(20% 0 44% 0); }
  100% { opacity: 0;   transform: translate(0,0);                          filter: brightness(4);   clip-path: inset(46% 0 46% 0); }
}
@keyframes wc-splitA{
  0%  { opacity: 0;  transform: translate(0,0); }
  20% { opacity: .9; transform: translate(calc(var(--wc-amp) * -1.6), -2px); }
  55% { opacity: .7; transform: translate(calc(var(--wc-amp) * -2.2),  2px); }
  100%{ opacity: 0;  transform: translate(calc(var(--wc-amp) * -3),    0); }
}
@keyframes wc-splitB{
  0%  { opacity: 0;  transform: translate(0,0); }
  20% { opacity: .9; transform: translate(calc(var(--wc-amp) * 1.6),  2px); }
  55% { opacity: .7; transform: translate(calc(var(--wc-amp) * 2.2), -2px); }
  100%{ opacity: 0;  transform: translate(calc(var(--wc-amp) * 3),    0); }
}

/* ---- resolve-in: scramble settles with a flicker + faint split ---- */
.word-cycle .wc-word.wc-resolve{ animation: wc-resolve var(--wc-in, 540ms) linear forwards; }
.word-cycle .wc-word.wc-resolve::before{ opacity: .55; transform: translate(calc(var(--wc-amp) * -.5), 0); animation: wc-resolveSplit var(--wc-in, 540ms) linear forwards; }
.word-cycle .wc-word.wc-resolve::after { opacity: .55; transform: translate(calc(var(--wc-amp) *  .5), 0); animation: wc-resolveSplit var(--wc-in, 540ms) linear forwards; }

@keyframes wc-resolve{
  0%  { opacity: 1; filter: brightness(2.8); }
  10% { opacity: .45; }
  18% { opacity: 1; filter: brightness(1.8); }
  30% { opacity: .7; }
  44% { opacity: 1; filter: none; }
  100%{ opacity: 1; filter: none; }
}
@keyframes wc-resolveSplit{
  0%  { opacity: .7; }
  70% { opacity: .25; }
  100%{ opacity: 0; transform: translate(0,0); }
}

/* ---- AI emphasis: electric colour + glow while it rests ---- */
.word-cycle .wc-word.wc-ai{
  color: var(--wc-electric);
  text-shadow:
    0 0 18px color-mix(in srgb, var(--wc-electric) 55%, transparent),
    0 0 42px color-mix(in srgb, var(--wc-electric) 30%, transparent);
  animation: wc-aiPulse 2.4s ease-in-out infinite;
}
@keyframes wc-aiPulse{
  0%, 100% { text-shadow: 0 0 16px color-mix(in srgb, var(--wc-electric) 50%, transparent), 0 0 38px color-mix(in srgb, var(--wc-electric) 24%, transparent); }
  50%      { text-shadow: 0 0 26px color-mix(in srgb, var(--wc-electric) 75%, transparent), 0 0 60px color-mix(in srgb, var(--wc-electric) 40%, transparent); }
}

/* ---- offscreen measurer (matches the word's font automatically) ---- */
.word-cycle .wc-measure{
  position: absolute;
  left: -9999px; top: 0;
  white-space: nowrap;
  visibility: hidden;
  pointer-events: none;
}

/* ---- electric sparks ---- */
.word-cycle .wc-sparks{
  position: absolute;
  left: 50%; top: 50%;
  width: 1px; height: 1px;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
}
.word-cycle .wc-sparks.wc-on{ animation: wc-sparkFlash 260ms ease-out forwards; }
@keyframes wc-sparkFlash{
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  60%  { opacity: .8; }
  100% { opacity: 0; }
}
.word-cycle .wc-sparks polyline{
  fill: none;
  stroke: var(--wc-electric);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px var(--wc-electric));
}

@media (prefers-reduced-motion: reduce){
  .word-cycle .wc-word.wc-ai{ animation: none; }
}