/* Slicewrite text effects. Opt in with data-fx="<name>" on any element. */

/* glitch: two aria-hidden layers, sliced by clip-path and offset in colour,
   shown only during short bursts driven by fx.js. */
.fx-glitch{position:relative;display:inline-block}
.fx-glitch-layer{
  position:absolute;inset:0;pointer-events:none;user-select:none;opacity:0;
  color:var(--accent);
}
.fx-glitch-b{color:rgb(255 255 255 / .9);mix-blend-mode:screen}
.fx-glitch.is-glitching .fx-glitch-layer{opacity:1}
.fx-glitch.is-glitching .fx-glitch-a{animation:fx-glitch-a .42s steps(1) both}
.fx-glitch.is-glitching .fx-glitch-b{animation:fx-glitch-b .42s steps(1) both}
.fx-glitch.is-glitching .fx-glitch-text{animation:fx-glitch-jolt .42s steps(1) both}

/* grid traces: a canvas layer aligned to the host's shared grid tokens. */
.fx-grid-traces-host{position:relative;isolation:isolate}
.fx-grid-traces-canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;
  pointer-events:none;mix-blend-mode:screen;
}

@keyframes fx-glitch-a{
  0%  {clip-path:inset(4% 0 82% 0);transform:translate(-4px,-1px)}
  14% {clip-path:inset(38% 0 42% 0);transform:translate(5px,1px)}
  28% {clip-path:inset(70% 0 12% 0);transform:translate(-6px,0)}
  42% {clip-path:inset(20% 0 65% 0);transform:translate(3px,2px)}
  56% {clip-path:inset(55% 0 30% 0);transform:translate(-2px,-2px)}
  70% {clip-path:inset(8% 0 76% 0);transform:translate(6px,0)}
  84% {clip-path:inset(46% 0 40% 0);transform:translate(-3px,1px)}
  100%{clip-path:inset(0 0 100% 0);transform:none}
}
@keyframes fx-glitch-b{
  0%  {clip-path:inset(62% 0 20% 0);transform:translate(4px,1px)}
  14% {clip-path:inset(10% 0 78% 0);transform:translate(-5px,-1px)}
  28% {clip-path:inset(30% 0 50% 0);transform:translate(6px,0)}
  42% {clip-path:inset(76% 0 8% 0);transform:translate(-3px,-2px)}
  56% {clip-path:inset(16% 0 70% 0);transform:translate(2px,2px)}
  70% {clip-path:inset(50% 0 34% 0);transform:translate(-6px,0)}
  84% {clip-path:inset(4% 0 88% 0);transform:translate(3px,-1px)}
  100%{clip-path:inset(0 0 100% 0);transform:none}
}
@keyframes fx-glitch-jolt{
  0%,100%{transform:none}
  28%{transform:translate(1px,0)}
  56%{transform:translate(-1px,0)}
}

@media(prefers-reduced-motion:reduce){
  .fx-grid-traces-canvas{display:none}
  .fx-glitch .fx-glitch-layer,.fx-glitch .fx-glitch-text{animation:none!important;opacity:0}
  .fx-glitch .fx-glitch-text{opacity:1}
}