@charset "UTF-8";
.glitch {
  position: relative;
}

.glitch > * {
  text-align: inherit;
  line-height: 1;
  word-break: break-all;
}

.glitch > *:before,
.glitch > *:after {
  text-align: inherit;
  width: 100%;
}

/*--------------------------------------------------
    グリッチ1
---------------------------------------------------*/
.gl-1 {
  margin: 0;
}

.gl-1 > * {
  margin: auto;
  text-align: center;
  animation: glitch-skew 5s infinite alternate;
  animation-timing-function: step-end;
}

.gl-1 > *::before, .gl-1 > *::after {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  text-align: center;
  filter: drop-shadow(0 0 transparent);
  background-color: inherit;
}

.gl-1 > *::after {
  animation: gl-1_animation 3.1s infinite alternate;
  animation-timing-function: step-end;
}

@keyframes gl-1_animation {
  0% {
  }
  5% {
    transform: translateX(0.5%);
    clip-path: inset(30% 0 60% 0);
    -webkit-clip-path: inset(30% 0 60% 0);
    text-shadow: -3px 0 .02em lime, 
 -6px 0 .02em #ff00e1;
  }
  10% {
    clip-path: inset(100% 0 100% 0);
    -webkit-clip-path: inset(100% 0 100% 0);
  }
  15% {
    transform: translateX(0.5%);
    clip-path: inset(30% 0 60% 0);
    -webkit-clip-path: inset(30% 0 60% 0);
  }
  18% {
    transform: translateX(1%);
    clip-path: inset(30% 0 60% 0);
    -webkit-clip-path: inset(30% 0 60% 0);
  }
  21% {
    transform: translateX(0.5%);
  }
  24% {
    transform: translateX(4%);
    clip-path: inset(30% 0 60% 0);
    -webkit-clip-path: inset(30% 0 60% 0);
  }
  27% {
    transform: translateX(0.5%);
  }
  29% {
    clip-path: inset(100% 0 100% 0);
    -webkit-clip-path: inset(100% 0 100% 0);
  }
  40% {
    transform: translateX(1%);
    clip-path: inset(60% 0 25% 0);
    -webkit-clip-path: inset(60% 0 25% 0);
    text-shadow: -2px 0 .02em lime, 
 -5px 0 .02em #ff00e1;
  }
  42% {
    clip-path: inset(100% 0 100% 0);
    -webkit-clip-path: inset(100% 0 100% 0);
  }
  50% {
    transform: translateX(3%);
    clip-path: inset(25% 0 70% 0);
    -webkit-clip-path: inset(25% 0 70% 0);
  }
  55% {
    clip-path: inset(100% 0 100% 0);
    -webkit-clip-path: inset(100% 0 100% 0);
  }
  80% {
    transform: translateX(7%);
    text-shadow: 2px 0 .02em lime, 
 -4px 0 .02em #ff00e1;
    clip-path: inset(60% 0 25% 0);
    -webkit-clip-path: inset(60% 0 25% 0);
  }
  83% {
    clip-path: inset(100% 0 100% 0);
    -webkit-clip-path: inset(100% 0 100% 0);
  }
  100% {
    clip-path: inset(100% 0 0 0);
    -webkit-clip-path: inset(100% 0 0 0);
  }
}

/*--------------------------------------------------
    グリッチ2
---------------------------------------------------*/
.gl-2 > *:before,
.gl-2 > *:after {
  content: attr(data-text);
  opacity: 0.8;
  position: absolute;
  top: 0;
  left: 0;
}

.gl-2 > *:before {
  color: #ff00e1;
  z-index: -1;
  animation: gl-2_animation 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}

.gl-2 > *:after {
  color: lime;
  z-index: -2;
  animation: gl-2_animation 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
}

@keyframes gl-2_animation {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-3px, 0px);
    transform: translate(-3px, 0px);
    transform: skewX(10deg);
  }
  40% {
    -webkit-transform: translate(-3px, 0px);
    transform: translate(-3px, 0px);
  }
  60% {
    -webkit-transform: translate(3px, 0px);
    transform: translate(3px, 0px);
  }
  80% {
    -webkit-transform: translate(3px, 0px);
    transform: translate(3px, 0px);
  }
  to {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}

/*--------------------------------------------------
    グリッチ3
---------------------------------------------------*/
.gl-3 > * {
  animation: glitch-anim2 1s infinite alternate;
}

.gl-3 > *:before,
.gl-3 > *:after {
  content: attr(data-text);
  opacity: 1;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.gl-3 > *:before {
  left: -2px;
  overflow: hidden;
  animation: gl-3_animation 5s infinite alternate;
  z-index: -1;
  -webkit-clip-path: inset(0 0 60% 0);
  clip-path: inset(0 0 60% 0);
}

.gl-3 > *:after {
  left: 2px;
  overflow: hidden;
  animation: gl-3_animation2 5s infinite alternate;
  z-index: -2;
  -webkit-clip-path: inset(40% 0 0 0);
  clip-path: inset(40% 0 0 0);
}

@keyframes gl-3_animation {
  0% {
    -webkit-clip-path: inset(0 0 90% 0);
    clip-path: inset(0 0 90% 0);
  }
  29% {
    -webkit-clip-path: inset(0 0 90% 0);
    clip-path: inset(0 0 90% 0);
  }
  30% {
    -webkit-clip-path: inset(0 0 70% 0);
    clip-path: inset(0 0 70% 0);
  }
  60% {
    -webkit-clip-path: inset(0 0 40% 0);
    clip-path: inset(0 0 40% 0);
  }
  80% {
    -webkit-clip-path: inset(0 0 45% 0);
    clip-path: inset(0 0 45% 0);
  }
  to {
    -webkit-clip-path: inset(0 0 15% 0);
    clip-path: inset(0 0 15% 0);
  }
}

@keyframes gl-3_animation2 {
  0% {
    -webkit-clip-path: inset(10% 0 0 0);
    clip-path: inset(10% 0 0 0);
  }
  29% {
    -webkit-clip-path: inset(10% 0 0 0);
    clip-path: inset(10% 0 0 0);
  }
  30% {
    -webkit-clip-path: inset(30% 0 0 0);
    clip-path: inset(30% 0 0 0);
  }
  60% {
    -webkit-clip-path: inset(60% 0 0 0);
    clip-path: inset(60% 0 0 0);
  }
  80% {
    -webkit-clip-path: inset(55% 0 0 0);
    clip-path: inset(55% 0 0 0);
  }
  to {
    -webkit-clip-path: inset(85% 0 0 0);
    clip-path: inset(85% 0 0 0);
  }
}

/*--------------------------------------------------
    グリッチ4
---------------------------------------------------*/
.gl-4 > * {
  animation: glitch-skew_subtle .3s infinite alternate;
}

.gl-4 > *:before,
.gl-4 > *:after {
  content: attr(data-text);
  opacity: 1;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.gl-4 > *:before {
  left: -2px;
  overflow: hidden;
  animation: gl-4_animation 2s infinite alternate;
  z-index: -1;
  transform: scaleX(1.2);
  animation-timing-function: step-end;
  text-shadow: -4px 0 .02em lime, 
 -8px 0 .02em #ff00e1;
}

.gl-4 > *:after {
  left: 2px;
  animation: gl-4_animation2 7s infinite;
  z-index: -2;
  opacity: 1;
  text-shadow: -4px 0 .02em lime, 
 -8px 0 .02em #ff00e1;
  transform: scaleX(1.5);
  -webkit-clip-path: inset(20% 0 78% 0);
  clip-path: inset(20% 0 78% 0);
}

@keyframes gl-4_animation {
  3%, 33%, 36%, 63%, 81%, 84% {
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
  }
  0% {
    -webkit-clip-path: inset(10% 0 80% 0);
    clip-path: inset(10% 0 80% 0);
    transform: scaleX(1.1);
  }
  30% {
    -webkit-clip-path: inset(30% 0 60% 0);
    clip-path: inset(30% 0 60% 0);
    transform: scaleX(0.5);
  }
  35% {
    -webkit-clip-path: inset(30% 0 60% 0);
    clip-path: inset(30% 0 60% 0);
    transform: scaleX(0.5);
  }
  60% {
    -webkit-clip-path: inset(60% 0 30% 0);
    clip-path: inset(60% 0 30% 0);
    transform: scaleX(1.5);
  }
  80% {
    -webkit-clip-path: inset(55% 0 30% 0);
    clip-path: inset(55% 0 30% 0);
  }
  83% {
    -webkit-clip-path: inset(55% 0 10% 0);
    clip-path: inset(55% 0 10% 0);
    transform: scaleY(1.1);
  }
  to {
    -webkit-clip-path: inset(85% 0 0 0);
    clip-path: inset(85% 0 0 0);
  }
}

@keyframes gl-4_animation2 {
  0% {
    -webkit-clip-path: inset(20% 0 82% 0);
    clip-path: inset(20% 0 82% 0);
  }
  39% {
    -webkit-clip-path: inset(20% 0 82% 0);
    clip-path: inset(20% 0 82% 0);
  }
  40% {
    -webkit-clip-path: inset(20% 0 78% 0);
    clip-path: inset(20% 0 78% 0);
  }
  to {
    -webkit-clip-path: inset(96% 0 2% 0);
    clip-path: inset(96% 0 2% 0);
  }
}

/*--------------------------------------------------
    グリッチ5
---------------------------------------------------*/
.gl-5 > * {
  animation: transform 2s steps(10) infinite, glitch 3.2s infinite;
  animation-timing-function: step-end;
}

.gl-5 > *:before,
.gl-5 > *:after {
  content: attr(data-text);
  opacity: 1;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.gl-5 > *:before {
  left: -4px;
  display: none;
  animation: gl-4_animation 2s infinite alternate-reverse;
  z-index: -1;
  animation-timing-function: step-end;
  transform: scaleX(1.5);
  opacity: 0.5;
}

.gl-5 > *:after {
  display: none;
  left: 5px;
  animation: gl-5_animation2 .3s infinite;
  animation-timing-function: step-end;
  z-index: -2;
  opacity: 1;
  transform: scaleX(1.2);
}

@keyframes gl-5_animation {
  0% {
    transform: skew(0deg, 0deg);
  }
  40% {
    transform: skew(1deg, 1deg);
  }
  to {
    transform: skew(0deg, 0deg);
  }
}

@keyframes gl-5_animation2 {
  1%, 21%, 41%, 61%, 81% {
    -webkit-clip-path: inset(100% 0 100% 0);
    clip-path: inset(100% 0 100% 0);
  }
  0% {
    -webkit-clip-path: inset(10% 0 56% 0);
    clip-path: inset(10% 0 56% 0);
  }
  20% {
    -webkit-clip-path: inset(20% 0 78% 0);
    clip-path: inset(20% 0 78% 0);
  }
  40% {
    -webkit-clip-path: inset(80% 0 19% 0);
    clip-path: inset(80% 0 19% 0);
  }
  60% {
    -webkit-clip-path: inset(50% 0 48% 0);
    clip-path: inset(50% 0 48% 0);
  }
  80% {
    -webkit-clip-path: inset(46% 0 10% 0);
    clip-path: inset(46% 0 10% 0);
  }
  to {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}

/*--------------------------------------------------
    グリッチ6
---------------------------------------------------*/
.gl-6 > * {
  animation: 
  glitch-skew_subtle .4s infinite alternate,
  gl-2_animation 3s infinite,
  gl-6_animation .8s reverse;
  animation-timing-function: step-end;
}

.gl-6 > *:before,
.gl-6 > *:after {
  content: attr(data-text);
  opacity: 1;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.gl-6 > *:before {
  left: -2px;
  overflow: hidden;
  animation: gl-6_animation2 .2s infinite alternate;
  z-index: -1;
}

.gl-6 > *:after {
  left: 2px;
  animation: gl-6_animation3 .2s infinite alternate;
  z-index: -2;
  opacity: 1;
}

@keyframes gl-6_animation {
  0% {
    transform: scale(1,1);
  }
  70%,79%,88% {
    transform: scale(1.3,1.3);
  }
  72%,82%,96% {
    transform: scale(1.2,2);
  }
  85% {
    transform: scale(2.5,3.5);
  }
  to {
    transform: scale(2,0.2);
  }
}

@keyframes gl-6_animation2 {
  0% {
    -webkit-clip-path: inset(0 0 90% 0);
    clip-path: inset(0 0 90% 0);
  }
  29% {
    -webkit-clip-path: inset(0 0 90% 0);
    clip-path: inset(0 0 90% 0);
  }
  30% {
    -webkit-clip-path: inset(0 0 70% 0);
    clip-path: inset(0 0 70% 0);
  }
  60% {
    -webkit-clip-path: inset(0 0 40% 0);
    clip-path: inset(0 0 40% 0);
  }
  80% {
    -webkit-clip-path: inset(0 0 45% 0);
    clip-path: inset(0 0 45% 0);
  }
  to {
    -webkit-clip-path: inset(0 0 15% 0);
    clip-path: inset(0 0 15% 0);
  }
}

@keyframes gl-6_animation3 {
  0% {
    -webkit-clip-path: inset(10% 0 0 0);
    clip-path: inset(10% 0 0 0);
  }
  29% {
    -webkit-clip-path: inset(10% 0 0 0);
    clip-path: inset(10% 0 0 0);
  }
  30% {
    -webkit-clip-path: inset(30% 0 0 0);
    clip-path: inset(30% 0 0 0);
  }
  60% {
    -webkit-clip-path: inset(60% 0 0 0);
    clip-path: inset(60% 0 0 0);
  }
  80% {
    -webkit-clip-path: inset(55% 0 0 0);
    clip-path: inset(55% 0 0 0);
  }
  to {
    -webkit-clip-path: inset(85% 0 0 0);
    clip-path: inset(85% 0 0 0);
  }
}

/*--------------------------------------------------
  グリッチ7
---------------------------------------------------*/
.gl-7 > * {
  visibility: none;
}

.gl-7 > *:before,
.gl-7 > *:after {
  content: attr(data-text);
  opacity: 0.8;
  position: absolute;
  top: 0;
  left: 0;
}

.gl-7 > *:before {
  opacity: 0.3;
  z-index: -1;
  animation: gl-7_animation 0.5s infinite;
 animation-timing-function: step-end;
}

.gl-7 > *:after {
  color: #56D555;
  z-index: -2;
  animation: gl-1_animation 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
}

@keyframes gl-7_animation {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-10px, 0px);
    transform: translate(-10px, 0px);
    transform: skewX(10deg);
  }
  40% {
    -webkit-transform: translate(-33px, 0px);
    transform: translate(-33px, 0px);
  }
  60% {
    -webkit-transform: translate(3px, 0px);
    transform: translate(3px, 0px);
  }
  80% {
    -webkit-transform: translate(3px, 0px);
    transform: translate(3px, 0px);
  }
  to {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}

/*--------------------------------------------------
    汎用
---------------------------------------------------*/
@keyframes glitch-anim2 {
  0% {
    clip: rect(93px, 9999px, 15px, 0);
    transform: skew(0.41deg);
  }
  5% {
    clip: rect(25px, 9999px, 6px, 0);
    transform: skew(0.24deg);
  }
  10% {
    clip: rect(9px, 9999px, 53px, 0);
    transform: skew(0.55deg);
  }
  15% {
    clip: rect(66px, 9999px, 22px, 0);
    transform: skew(0.74deg);
  }
  20% {
    clip: rect(79px, 9999px, 38px, 0);
    transform: skew(0.16deg);
  }
  25% {
    clip: rect(7px, 9999px, 39px, 0);
    transform: skew(0.04deg);
  }
  30% {
    clip: rect(12px, 9999px, 75px, 0);
    transform: skew(0.92deg);
  }
  35% {
    clip: rect(89px, 9999px, 68px, 0);
    transform: skew(0.72deg);
  }
  40% {
    clip: rect(45px, 9999px, 67px, 0);
    transform: skew(0.29deg);
  }
  45% {
    clip: rect(35px, 9999px, 61px, 0);
    transform: skew(0.31deg);
  }
  50% {
    clip: rect(35px, 9999px, 60px, 0);
    transform: skew(0.14deg);
  }
  55% {
    clip: rect(93px, 9999px, 88px, 0);
    transform: skew(0.14deg);
  }
  60% {
    clip: rect(53px, 9999px, 7px, 0);
    transform: skew(0.04deg);
  }
  65% {
    clip: rect(63px, 9999px, 27px, 0);
    transform: skew(0.39deg);
  }
  70% {
    clip: rect(48px, 9999px, 34px, 0);
    transform: skew(0.2deg);
  }
  75% {
    clip: rect(28px, 9999px, 70px, 0);
    transform: skew(0.01deg);
  }
  80% {
    clip: rect(34px, 9999px, 19px, 0);
    transform: skew(0.94deg);
  }
  85% {
    clip: rect(12px, 9999px, 100px, 0);
    transform: skew(0.41deg);
  }
  90% {
    clip: rect(85px, 9999px, 100px, 0);
    transform: skew(0.13deg);
  }
  95% {
    clip: rect(62px, 9999px, 18px, 0);
    transform: skew(0.65deg);
  }
  100% {
    clip: rect(34px, 9999px, 96px, 0);
    transform: skew(0.6deg);
  }
}

@keyframes glitch-skew {
  0% {
    transform: skew(2deg);
  }
  10% {
    transform: skew(5deg);
  }
  20% {
    transform: skew(4deg);
  }
  30% {
    transform: skew(4deg);
  }
  40% {
    transform: skew(-1deg);
  }
  50% {
    transform: skew(0deg);
  }
  60% {
    transform: skew(2deg);
  }
  70% {
    transform: skew(3deg);
  }
  80% {
    transform: skew(5deg);
  }
  90% {
    transform: skew(-3deg);
  }
  100% {
    transform: skew(-4deg);
  }
}

@keyframes glitch-skew_subtle {
  0% {
    transform: skew(0deg);
  }
  10% {
    transform: skew(-1deg);
  }
  20% {
    transform: skew(-1deg);
  }
  30% {
    transform: skew(0deg);
  }
  40% {
    transform: skew(-1deg);
  }
  50% {
    transform: skew(-2deg);
  }
  60% {
    transform: skew(-4deg);
  }
  70% {
    transform: skew(-4deg);
  }
  80% {
    transform: skew(-1deg);
  }
  90% {
    transform: skew(0deg);
  }
  100% {
    transform: skew(-2deg);
  }
}

@keyframes glitch {
  45% {
    filter: none;
  }
  46% {
    filter: url(/web/20240526002425im_/https://sid.ethz.ch/debian/this/glitch.css#dist-01);
  }
  47% {
    filter: url(/web/20240526002425im_/https://sid.ethz.ch/debian/this/glitch.css#dist-02);
  }
  48% {
    filter: url(/web/20240526002425im_/https://sid.ethz.ch/debian/this/glitch.css#dist-03);
  }
  50% {
    filter: none;
  }
  95% {
    filter: none;
  }
  96% {
    filter: url(/web/20240526002425im_/https://sid.ethz.ch/debian/this/glitch.css#dist-02);
  }
  97% {
    filter: url(/web/20240526002425im_/https://sid.ethz.ch/debian/this/glitch.css#dist-04);
  }
}

@keyframes transform {
  0% {
    transform: translate(-5%, -5%) skew(-10deg) scale(1.05);
  }
  1% {
    transform: none;
  }
  88% {
    transform: none;
  }
  89% {
    transform: translate(5%, 10%) scale(1.05);
  }
  90% {
    transform: none;
  }
}

/*--------------------------------------------------
    IE/Edge hack
---------------------------------------------------*/
@media all and (-ms-high-contrast: none) {
  .glitch > *:before,
  .glitch > *:after {
    display: none;
  }
}