/* Efectos de Filtro CRT */
body {
  position: relative;
  overflow: hidden;
}

/* Efecto base CRT - agrega líneas de escaneo */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.25) 50%
  );
  background-size: 100% 4px;
  z-index: 2;
  pointer-events: none;
}

/* Brillo de pantalla */
body::after {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}

/* Curvatura de pantalla y efecto viñeta - más pronunciada */
.crt-overlay {
  position: fixed;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.2) 60%,
    rgba(0, 0, 0, 0.6) 100%
  );
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 15px rgba(120, 255, 240, 0.2) inset;
  transform: perspective(800px) rotateX(5deg);
  border-radius: 50% / 5%;
}

/* Efecto distorsión de pantalla - curvatura más pronunciada */
#crt-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform-style: preserve-3d;
  transform-origin: center center;
  overflow: hidden;
  pointer-events: none;
}

/* Distorsión de pantalla */
#crt-wrapper::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: 
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(0, 0, 0, 0.05) 100%
    );
  pointer-events: none;
  border-radius: 50%;
  transform: perspective(800px) rotateX(5deg);
}

/* Desplazamiento RGB - Aberración cromática mejorada */
.crt-rgb-shift {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  opacity: 0.15;
  background: 
    linear-gradient(to right, rgba(255, 0, 0, 0.5), transparent 20%),
    linear-gradient(to left, rgba(0, 0, 255, 0.5), transparent 20%);
  animation: rgb-shift 3s alternate infinite;
}

/* Aberración cromática adicional para texto y bordes */
.aberration-text {
  position: relative;
  text-shadow: 
    -1.5px 0 2px rgba(255, 0, 0, 0.7),
    1.5px 0 2px rgba(0, 255, 255, 0.7);
  color: rgba(255, 255, 255, 0.95);
  z-index: 2;
}

/* Efecto de texto con aberración para todos los textos */
h1, h2, h3, h4, h5, p, a, label, input {
  text-shadow: 
    -1px 0 1px rgba(255, 0, 0, 0.5),
    1px 0 1px rgba(0, 255, 255, 0.5);
}

/* Efecto de degradado horizontal */
.horizontal-lines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    180deg,
    transparent,
    transparent 1px,
    rgba(0, 0, 0, 0.05) 1px,
    rgba(0, 0, 0, 0.05) 2px
  );
  opacity: 0.7;
  pointer-events: none;
  z-index: 3;
  animation: horizontal-scan 10s linear infinite;
}

/* Animaciones */
@keyframes flicker {
  0% {
    opacity: 0.1;
  }
  2% {
    opacity: 0.05;
  }
  5% {
    opacity: 0.17;
  }
  9% {
    opacity: 0.1;
  }
  70% {
    opacity: 0.05;
  }
  80% {
    opacity: 0.13;
  }
  100% {
    opacity: 0.08;
  }
}

@keyframes rgb-shift {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-0.5px);
  }
  75% {
    transform: translateX(0.5px);
  }
}

/* Animación para el efecto de degradado horizontal */
@keyframes horizontal-scan {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100px);
  }
}

/* Efecto de parpadeo de pantalla */
body {
  animation: screen-flicker 6s infinite;
}

@keyframes screen-flicker {
  0% {
    opacity: 1;
  }
  1% {
    opacity: 0.8;
  }
  2% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  56% {
    opacity: 0.9;
  }
  57% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  93% {
    opacity: 0.8;
  }
  94% {
    opacity: 1;
  }
}

/* Efecto de pantalla curvada adicional */
body, html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.curved-effect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1;
  pointer-events: none;
  border-radius: 30% / 10%;
  box-shadow: 
    0 0 30px rgba(0, 0, 0, 0.7) inset,
    0 0 20px rgba(10, 200, 255, 0.1);
  transform: scale(1.1);
}

/* Efecto de desenfoque de movimiento */
.motion-blur {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  animation: motion-blur-anim 8s ease-in-out infinite;
}

@keyframes motion-blur-anim {
  0%, 100% {
    opacity: 0;
    filter: blur(0);
  }
  5%, 15% {
    opacity: 0.2;
    filter: blur(2px);
  }
  45%, 55% {
    opacity: 0.1;
    filter: blur(1px);
  }
  85%, 95% {
    opacity: 0.15;
    filter: blur(1.5px);
  }
}

/* Efecto de ghosting/imagen persistente */
.ghosting-effect {
  animation: ghosting 8s ease-in-out infinite;
}

@keyframes ghosting {
  0%, 100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
    filter: opacity(1);
  }
  10% {
    opacity: 0.9;
    transform: translateX(1px) translateY(0);
    filter: opacity(0.95);
  }
  20% {
    transform: translateX(-1px) translateY(0);
  }
  30% {
    transform: translateX(0) translateY(1px);
  }
  40% {
    filter: opacity(0.9);
  }
  50% {
    transform: translateX(0) translateY(-1px);
    filter: opacity(1);
  }
  60% {
    opacity: 0.95;
    transform: translateX(1px) translateY(1px);
  }
  70% {
    opacity: 0.9;
    transform: translateX(-1px) translateY(-1px);
  }
  80% {
    filter: opacity(0.85);
  }
  90% {
    opacity: 0.95;
  }
}

/* Efecto fantasma para texto e imágenes */
.block, h1, h2, h3, h4, a, img, input {
  position: relative;
}

.block::after, h1::after, h2::after, h3::after, h4::after, a::after, img::after, input::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  pointer-events: none;
  animation: text-ghost 10s infinite;
}

@keyframes text-ghost {
  0%, 100% {
    transform: translateX(0);
    opacity: 0;
  }
  25% {
    transform: translateX(2px);
    opacity: 0.1;
  }
  50% {
    transform: translateX(0);
    opacity: 0.05;
  }
  75% {
    transform: translateX(-2px);
    opacity: 0.1;
  }
}

/* Respuesta para dispositivos pequeños */
@media (max-width: 768px) {
  body::before {
    background-size: 100% 2px;
  }
  
  .crt-rgb-shift {
    opacity: 0.04;
  }
  
  .curved-effect {
    border-radius: 20% / 5%;
  }
  
  .motion-blur, .horizontal-lines {
    opacity: 0.5;
  }
}

/* Efectos de Filtro CRT */
body {
  position: relative;
  overflow: hidden;
}

/* Efecto base CRT - agrega líneas de escaneo */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.25) 50%
  );
  background-size: 100% 4px;
  z-index: 2;
  pointer-events: none;
}

/* Brillo de pantalla */
body::after {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}

/* Curvatura de pantalla y efecto viñeta - más pronunciada */
.crt-overlay {
  position: fixed;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.2) 60%,
    rgba(0, 0, 0, 0.6) 100%
  );
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 15px rgba(120, 255, 240, 0.2) inset;
  transform: perspective(800px) rotateX(5deg);
  border-radius: 50% / 5%;
}

/* Efecto distorsión de pantalla - curvatura más pronunciada */
#crt-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform-style: preserve-3d;
  transform-origin: center center;
  overflow: hidden;
  pointer-events: none;
}

/* Distorsión de pantalla */
#crt-wrapper::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: 
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(0, 0, 0, 0.05) 100%
    );
  pointer-events: none;
  border-radius: 50%;
  transform: perspective(800px) rotateX(5deg);
}

/* Desplazamiento RGB - Aberración cromática mejorada */
.crt-rgb-shift {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  opacity: 0.15;
  background: 
    linear-gradient(to right, rgba(255, 0, 0, 0.5), transparent 20%),
    linear-gradient(to left, rgba(0, 0, 255, 0.5), transparent 20%);
  animation: rgb-shift 3s alternate infinite;
}

/* Aberración cromática adicional para texto y bordes */
.aberration-text {
  position: relative;
  text-shadow: 
    -1.5px 0 2px rgba(255, 0, 0, 0.7),
    1.5px 0 2px rgba(0, 255, 255, 0.7);
  color: rgba(255, 255, 255, 0.95);
  z-index: 2;
}

/* Efecto de texto con aberración para todos los textos */
h1, h2, h3, h4, h5, p, a, label, input {
  text-shadow: 
    -1px 0 1px rgba(255, 0, 0, 0.5),
    1px 0 1px rgba(0, 255, 255, 0.5);
}

/* Efecto de degradado horizontal */
.horizontal-lines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    180deg,
    transparent,
    transparent 1px,
    rgba(0, 0, 0, 0.05) 1px,
    rgba(0, 0, 0, 0.05) 2px
  );
  opacity: 0.7;
  pointer-events: none;
  z-index: 3;
  animation: horizontal-scan 10s linear infinite;
}

/* Animaciones */
@keyframes flicker {
  0% {
    opacity: 0.1;
  }
  2% {
    opacity: 0.05;
  }
  5% {
    opacity: 0.17;
  }
  9% {
    opacity: 0.1;
  }
  70% {
    opacity: 0.05;
  }
  80% {
    opacity: 0.13;
  }
  100% {
    opacity: 0.08;
  }
}

@keyframes rgb-shift {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-0.5px);
  }
  75% {
    transform: translateX(0.5px);
  }
}

/* Animación para el efecto de degradado horizontal */
@keyframes horizontal-scan {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100px);
  }
}

/* Efecto de parpadeo de pantalla */
body {
  animation: screen-flicker 6s infinite;
}

@keyframes screen-flicker {
  0% {
    opacity: 1;
  }
  1% {
    opacity: 0.8;
  }
  2% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  56% {
    opacity: 0.9;
  }
  57% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  93% {
    opacity: 0.8;
  }
  94% {
    opacity: 1;
  }
}

/* Efecto de pantalla curvada adicional */
body, html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.curved-effect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1;
  pointer-events: none;
  border-radius: 30% / 10%;
  box-shadow: 
    0 0 30px rgba(0, 0, 0, 0.7) inset,
    0 0 20px rgba(10, 200, 255, 0.1);
  transform: scale(1.1);
}

/* Efecto de desenfoque de movimiento */
.motion-blur {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  animation: motion-blur-anim 8s ease-in-out infinite;
}

@keyframes motion-blur-anim {
  0%, 100% {
    opacity: 0;
    filter: blur(0);
  }
  5%, 15% {
    opacity: 0.2;
    filter: blur(2px);
  }
  45%, 55% {
    opacity: 0.1;
    filter: blur(1px);
  }
  85%, 95% {
    opacity: 0.15;
    filter: blur(1.5px);
  }
}

/* Efecto de ghosting/imagen persistente */
.ghosting-effect {
  animation: ghosting 8s ease-in-out infinite;
}

@keyframes ghosting {
  0%, 100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
    filter: opacity(1);
  }
  10% {
    opacity: 0.9;
    transform: translateX(1px) translateY(0);
    filter: opacity(0.95);
  }
  20% {
    transform: translateX(-1px) translateY(0);
  }
  30% {
    transform: translateX(0) translateY(1px);
  }
  40% {
    filter: opacity(0.9);
  }
  50% {
    transform: translateX(0) translateY(-1px);
    filter: opacity(1);
  }
  60% {
    opacity: 0.95;
    transform: translateX(1px) translateY(1px);
  }
  70% {
    opacity: 0.9;
    transform: translateX(-1px) translateY(-1px);
  }
  80% {
    filter: opacity(0.85);
  }
  90% {
    opacity: 0.95;
  }
}

/* Efecto fantasma para texto e imágenes */
.block, h1, h2, h3, h4, a, img, input {
  position: relative;
}

.block::after, h1::after, h2::after, h3::after, h4::after, a::after, img::after, input::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  pointer-events: none;
  animation: text-ghost 10s infinite;
}

@keyframes text-ghost {
  0%, 100% {
    transform: translateX(0);
    opacity: 0;
  }
  25% {
    transform: translateX(2px);
    opacity: 0.1;
  }
  50% {
    transform: translateX(0);
    opacity: 0.05;
  }
  75% {
    transform: translateX(-2px);
    opacity: 0.1;
  }
}

/* Respuesta para dispositivos pequeños */
@media (max-width: 768px) {
  body::before {
    background-size: 100% 2px;
  }
  
  .crt-rgb-shift {
    opacity: 0.04;
  }
  
  .curved-effect {
    border-radius: 20% / 5%;
  }
  
  .motion-blur, .horizontal-lines {
    opacity: 0.5;
  }
}
/* Efectos de Filtro CRT */
body {
  position: relative;
  overflow: hidden;
}

/* Efecto base CRT - agrega líneas de escaneo */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.25) 50%
  );
  background-size: 100% 4px;
  z-index: 2;
  pointer-events: none;
}

/* Brillo de pantalla */
body::after {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}

/* Curvatura de pantalla y efecto viñeta - más pronunciada */
.crt-overlay {
  position: fixed;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.2) 60%,
    rgba(0, 0, 0, 0.6) 100%
  );
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 15px rgba(120, 255, 240, 0.2) inset;
  transform: perspective(800px) rotateX(5deg);
  border-radius: 50% / 5%;
}

/* Efecto distorsión de pantalla - curvatura más pronunciada */
#crt-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform-style: preserve-3d;
  transform-origin: center center;
  overflow: hidden;
  pointer-events: none;
}

/* Distorsión de pantalla */
#crt-wrapper::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: 
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(0, 0, 0, 0.05) 100%
    );
  pointer-events: none;
  border-radius: 50%;
  transform: perspective(800px) rotateX(5deg);
}

/* Desplazamiento RGB - Aberración cromática mejorada */
.crt-rgb-shift {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
  opacity: 0.15;
  background: 
    linear-gradient(to right, rgba(255, 0, 0, 0.5), transparent 20%),
    linear-gradient(to left, rgba(0, 0, 255, 0.5), transparent 20%);
  animation: rgb-shift 3s alternate infinite;
}

/* Aberración cromática adicional para texto y bordes */
.aberration-text {
  position: relative;
  text-shadow: 
    -1.5px 0 2px rgba(255, 0, 0, 0.7),
    1.5px 0 2px rgba(0, 255, 255, 0.7);
  color: rgba(255, 255, 255, 0.95);
  z-index: 2;
}

/* Efecto de texto con aberración para todos los textos */
h1, h2, h3, h4, h5, p, a, label, input {
  text-shadow: 
    -1px 0 1px rgba(255, 0, 0, 0.5),
    1px 0 1px rgba(0, 255, 255, 0.5);
}

/* Efecto de degradado horizontal */
.horizontal-lines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    180deg,
    transparent,
    transparent 1px,
    rgba(0, 0, 0, 0.05) 1px,
    rgba(0, 0, 0, 0.05) 2px
  );
  opacity: 0.7;
  pointer-events: none;
  z-index: 3;
  animation: horizontal-scan 10s linear infinite;
}

/* Animaciones */
@keyframes flicker {
  0% {
    opacity: 0.1;
  }
  2% {
    opacity: 0.05;
  }
  5% {
    opacity: 0.17;
  }
  9% {
    opacity: 0.1;
  }
  70% {
    opacity: 0.05;
  }
  80% {
    opacity: 0.13;
  }
  100% {
    opacity: 0.08;
  }
}

@keyframes rgb-shift {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-0.5px);
  }
  75% {
    transform: translateX(0.5px);
  }
}

/* Animación para el efecto de degradado horizontal */
@keyframes horizontal-scan {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100px);
  }
}

/* Efecto de parpadeo de pantalla */
body {
  animation: screen-flicker 6s infinite;
}

@keyframes screen-flicker {
  0% {
    opacity: 1;
  }
  1% {
    opacity: 0.8;
  }
  2% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  56% {
    opacity: 0.9;
  }
  57% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  93% {
    opacity: 0.8;
  }
  94% {
    opacity: 1;
  }
}

/* Efecto de pantalla curvada adicional */
body, html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.curved-effect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1;
  pointer-events: none;
  border-radius: 30% / 10%;
  box-shadow: 
    0 0 30px rgba(0, 0, 0, 0.7) inset,
    0 0 20px rgba(10, 200, 255, 0.1);
  transform: scale(1.1);
}

/* Efecto de desenfoque de movimiento */
.motion-blur {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  animation: motion-blur-anim 8s ease-in-out infinite;
}

@keyframes motion-blur-anim {
  0%, 100% {
    opacity: 0;
    filter: blur(0);
  }
  5%, 15% {
    opacity: 0.2;
    filter: blur(2px);
  }
  45%, 55% {
    opacity: 0.1;
    filter: blur(1px);
  }
  85%, 95% {
    opacity: 0.15;
    filter: blur(1.5px);
  }
}

/* Efecto de ghosting/imagen persistente */
.ghosting-effect {
  animation: ghosting 8s ease-in-out infinite;
}

@keyframes ghosting {
  0%, 100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
    filter: opacity(1);
  }
  10% {
    opacity: 0.9;
    transform: translateX(1px) translateY(0);
    filter: opacity(0.95);
  }
  20% {
    transform: translateX(-1px) translateY(0);
  }
  30% {
    transform: translateX(0) translateY(1px);
  }
  40% {
    filter: opacity(0.9);
  }
  50% {
    transform: translateX(0) translateY(-1px);
    filter: opacity(1);
  }
  60% {
    opacity: 0.95;
    transform: translateX(1px) translateY(1px);
  }
  70% {
    opacity: 0.9;
    transform: translateX(-1px) translateY(-1px);
  }
  80% {
    filter: opacity(0.85);
  }
  90% {
    opacity: 0.95;
  }
}

/* Efecto fantasma para texto e imágenes */
.block, h1, h2, h3, h4, a, img, input {
  position: relative;
}

.block::after, h1::after, h2::after, h3::after, h4::after, a::after, img::after, input::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  pointer-events: none;
  animation: text-ghost 10s infinite;
}

@keyframes text-ghost {
  0%, 100% {
    transform: translateX(0);
    opacity: 0;
  }
  25% {
    transform: translateX(2px);
    opacity: 0.1;
  }
  50% {
    transform: translateX(0);
    opacity: 0.05;
  }
  75% {
    transform: translateX(-2px);
    opacity: 0.1;
  }
}

/* Respuesta para dispositivos pequeños */
@media (max-width: 768px) {
  body::before {
    background-size: 100% 2px;
  }
  
  .crt-rgb-shift {
    opacity: 0.04;
  }
  
  .curved-effect {
    border-radius: 20% / 5%;
  }
  
  .motion-blur, .horizontal-lines {
    opacity: 0.5;
  }
}