@charset "utf-8";

@keyframes rgb-shift-r {
    0% { transform: translate(1.2%, 0.1%); }
    2% { transform: translate(-0.8%, -0.3%); }
    4% { transform: translate(0.5%, 0.4%); }
    6% { transform: translate(-1.5%, -0.1%); }
    8% { transform: translate(1.9%, 0.2%); }
    10% { transform: translate(-0.2%, -0.4%); }
    12% { transform: translate(0.8%, 0.3%); }
    14% { transform: translate(-1.1%, 0.1%); }
    16% { transform: translate(0.3%, -0.2%); }
    18% { transform: translate(-0.7%, 0.4%); }
    20%, 100% { transform: none; }
  }
  
  @keyframes rgb-shift-g {
    0% { transform: translate(-1.4%, 0.2%); }
    2% { transform: translate(0.9%, -0.1%); }
    4% { transform: translate(-0.3%, 0.3%); }
    6% { transform: translate(1.6%, -0.4%); }
    8% { transform: translate(-0.1%, 0.1%); }
    10% { transform: translate(1.2%, -0.3%); }
    12% { transform: translate(-1.8%, 0.4%); }
    14% { transform: translate(0.5%, -0.2%); }
    16% { transform: translate(-0.9%, 0.1%); }
    18% { transform: translate(1.4%, -0.4%); }
    20%, 100% { transform: none; }
  }
  
  @keyframes rgb-shift-b {
    0% { transform: translate(0.6%, -0.3%); }
    2% { transform: translate(-1.2%, 0.4%); }
    4% { transform: translate(1.8%, -0.1%); }
    6% { transform: translate(-0.5%, 0.2%); }
    8% { transform: translate(1.1%, -0.4%); }
    10% { transform: translate(-1.9%, 0.3%); }
    12% { transform: translate(0.4%, -0.2%); }
    14% { transform: translate(-0.8%, 0.1%); }
    16% { transform: translate(1.3%, -0.3%); }
    18% { transform: translate(-1.5%, 0.4%); }
    20%, 100% { transform: none; }
  }
  
  @keyframes glitch-before {
    0% { clip-path: polygon(0% 12%, 100% 12%, 100% 18%, 0% 18%); transform: translate(2%, 0.4%); }
    2% { clip-path: polygon(0% 45%, 100% 45%, 100% 52%, 0% 52%); transform: translate(-5%, -0.2%); }
    4% { clip-path: polygon(0% 82%, 100% 82%, 100% 88%, 0% 88%); transform: translate(7%, 0.1%); }
    6% { clip-path: polygon(0% 20%, 100% 20%, 100% 25%, 0% 25%); transform: translate(-3%, 0.3%); }
    8% { clip-path: polygon(0% 5%, 100% 5%, 100% 12%, 0% 12%); transform: translate(4%, -0.4%); }
    10% { clip-path: polygon(0% 60%, 100% 60%, 100% 68%, 0% 68%); transform: translate(-6%, 0.2%); }
    12% { clip-path: polygon(0% 33%, 100% 33%, 100% 40%, 0% 40%); transform: translate(1%, -0.1%); }
    14% { clip-path: polygon(0% 75%, 100% 75%, 100% 82%, 0% 82%); transform: translate(-4%, 0.4%); }
    16% { clip-path: polygon(0% 18%, 100% 18%, 100% 22%, 0% 22%); transform: translate(8%, -0.3%); }
    18% { clip-path: polygon(0% 50%, 100% 50%, 100% 58%, 0% 58%); transform: translate(-2%, 0.1%); }
    20%, 100% { clip-path: none; transform: none; }
  }
  
  /* @keyframes glitch-after {
    0% { clip-path: polygon(0% 65%, 100% 65%, 100% 72%, 0% 72%); transform: translate(-3%, -0.1%); }
    2% { clip-path: polygon(0% 10%, 100% 10%, 100% 15%, 0% 15%); transform: translate(6%, 0.4%); }
    4% { clip-path: polygon(0% 88%, 100% 88%, 100% 95%, 0% 95%); transform: translate(-1%, -0.3%); }
    6% { clip-path: polygon(0% 40%, 100% 40%, 100% 48%, 0% 48%); transform: translate(5%, 0.2%); }
    8% { clip-path: polygon(0% 22%, 100% 22%, 100% 29%, 0% 29%); transform: translate(-7%, -0.4%); }
    10% { clip-path: polygon(0% 55%, 100% 55%, 100% 60%, 0% 60%); transform: translate(2%, 0.1%); }
    12% { clip-path: polygon(0% 12%, 100% 12%, 100% 19%, 0% 19%); transform: translate(-4%, 0.3%); }
    14% { clip-path: polygon(0% 78%, 100% 78%, 100% 85%, 0% 85%); transform: translate(3%, -0.2%); }
    16% { clip-path: polygon(0% 30%, 100% 30%, 100% 35%, 0% 35%); transform: translate(-6%, 0.4%); }
    18% { clip-path: polygon(0% 45%, 100% 45%, 100% 53%, 0% 53%); transform: translate(1%, -0.1%); }
    20%, 100% { clip-path: none; transform: none; }
  } */
  
  .glitch {
    background:url(../images/sinhome.webp) #000 no-repeat center;
    background-size: cover;
    height: 100vh;
    position: relative;
    overflow: hidden;
    filter: brightness(0.8) contrast(1.2);
  }
  /* .glitch::after */
  .glitch::before,
  .glitch .channel {
    background: inherit;
    background-size: cover;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .glitch::before {
    animation: glitch-before 3s linear infinite alternate both;
    content: "";
  }
  
  /* .glitch::after {
    animation: glitch-after 3s linear infinite alternate both;
    content: "";
  } */
  
  .glitch .channel {
    mix-blend-mode: screen;
  }
  
  .glitch .channel::before {
    bottom: 0;
    content: "";
    display: block;
    mix-blend-mode: multiply;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
  }
  
  .glitch .r {
    animation: rgb-shift-r 3s steps(1, jump-end) infinite alternate both;
  }
  
  .glitch .r::before {
    background: #f00;
  }
  
  .glitch .g {
    animation: rgb-shift-g 3s steps(1, jump-end) infinite alternate both;
  }
  
  .glitch .g::before {
    background: #0f0;
  }
  
  .glitch .b {
    animation: rgb-shift-b 3s steps(1, jump-end) infinite alternate both;
  }
  
  .glitch .b::before {
    background: #00f;
  }
  /* .glitch::after,  */
  .glitch::before,
  .glitch .channel {
    animation-delay: -3s; 
  }