.splitting .char,.splitting .word{
  display:inline-block;opacity:0;transform:translateY(8px);filter:blur(3px)
}
.splitting.in .char,.splitting.in .word{
  animation:charDecay .55s ease forwards
}
@keyframes charDecay{
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
.split-decay .word{animation:wordDecay .9s ease forwards}
@keyframes wordDecay{
  0%{opacity:0;transform:translateY(12px);filter:blur(4px)}
  40%{opacity:.6;filter:blur(1px)}
  100%{opacity:1;transform:translateY(0);filter:blur(0)}
}

/* hover distortion via CSS: no webgl dependency */
.glitch-hover{
  position:relative;overflow:hidden
}
.glitch-hover img{
  transition:filter .3s,transform .3s
}
.glitch-hover:hover img{
  filter:contrast(1.2) brightness(1.05) saturate(.7) hue-rotate(8deg) blur(.4px);
  transform:scale(1.03)
}
.glitch-hover::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:repeating-linear-gradient(90deg,transparent 0,transparent 2px,rgba(255,255,255,.04) 2px,rgba(255,255,255,.04) 4px),repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(0,0,0,.1) 2px,rgba(0,0,0,.1) 4px)
}
.glitch-hover:hover::after{opacity:1}
@media(max-width:640px){
  .glitch-hover:hover img{transform:none}
}

/* ambient fade pulse for statement text */
.splitting[data-splitting] .char{animation-delay:calc(var(--char-index) * 15ms)}

/* vhs tape effect — no transform, no shake */
@keyframes chunkA{
  0%,100%{transform:translateX(0);opacity:0}
  15%{transform:translateX(4px);opacity:.7;filter:hue-rotate(25deg) saturate(1.4)}
  30%{transform:translateX(-2px);opacity:.4}
  45%{opacity:0}
}
@keyframes chunkB{
  0%,100%{transform:translateX(0);opacity:0}
  25%{transform:translateX(-5px);opacity:.6;filter:invert(.12) contrast(1.2)}
  40%{transform:translateX(3px);opacity:.3}
  55%{opacity:0}
}
.art-thumb,.hero{position:relative;overflow:hidden}
.art-thumb::before,.art-thumb::after,.hero::before,.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:var(--img);background-size:cover;background-position:center;
  opacity:0
}
.art-thumb::before,.hero::before{
  clip-path:inset(0 0 66% 0);
  animation:chunkA 2.5s ease-in-out infinite
}
.art-thumb::after,.hero::after{
  clip-path:inset(66% 0 0 0);
  animation:chunkB 2.5s ease-in-out infinite .4s
}
.art-thumb:hover::before,.art-thumb:hover::after,
.hero:hover::before,.hero:hover::after{
  opacity:1
}
.art-thumb:hover img,.hero:hover img{
  animation:vhs 1.5s ease-in-out infinite
}
@keyframes vhs{
  0%,100%{filter:contrast(1.05) brightness(1.02) saturate(1.05) blur(.3px)}
  30%{filter:contrast(1.15) brightness(.95) saturate(1.2) hue-rotate(10deg)}
  60%{filter:contrast(.9) brightness(1.05) saturate(.8) hue-rotate(-8deg)}
}
.art-thumb,.hero{
  position:relative;overflow:hidden
}
/* scanlines */
.art-thumb::after,.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,0,.12) 1px,rgba(0,0,0,.12) 2px)
}
/* tracking bar */
.art-thumb::before,.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(transparent 40%,rgba(255,255,255,.04) 40%,rgba(255,255,255,.04) 60%,transparent 60%);
  background-size:100% 300%;
  animation:trackBar 7s linear infinite;
  mix-blend-mode:overlay
}
@keyframes trackBar{
  0%{background-position:0 -100%;opacity:0}
  8%{opacity:.5}
  18%{opacity:0}
  100%{background-position:0 200%;opacity:0}
}