.gallery-slider {
  background: #000000;
  padding: 50px 20px 100px;
  position: relative;
  overflow: hidden;
}

.gallery-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.gallery-slider-title {
  font-family: 'Avenir Next W1G', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
}

.gallery-header-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.gallery-nav-btn {
  font-family: 'Avenir Next W1G', sans-serif;
  font-weight: 300;
  font-size: 64px;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: opacity 0.3s ease;
}

.gallery-nav-btn:hover {
  opacity: 0.7;
}

.gallery-nav-btn:active {
  opacity: 0.5;
}

.gallery-swiper {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 0;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.glitch-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
}

.glitch-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.8s ease;
}

.photo1 {
  z-index: 1;
  filter: grayscale(0%);
}

.photo2 {
  z-index: 2;
  opacity: 0;
  filter: grayscale(0%);
  animation-fill-mode: forwards;
}

.glitch-container:hover .photo2 {
  animation: transition-glitch 1.2s ease-out 0.3s forwards;
}

.glitch-container:hover .photo1 {
  animation: glitch-animation 1.2s ease-out forwards;
  opacity: 0;
}

.photo1 {
  animation-fill-mode: forwards;
}

.photo2 {
  transition: opacity 0.01s;
}

@keyframes glitch-animation {
  0% {
    transform: translate(0);
    filter: grayscale(0%) brightness(1);
    opacity: 1;
  }
  5% {
    transform: translate(-2px, -2px);
    filter: grayscale(20%) brightness(1.2);
  }
  10% {
    transform: translate(2px, 2px);
    filter: grayscale(40%) brightness(1.3);
  }
  15% {
    transform: translate(-2px, 0);
    filter: grayscale(60%) brightness(1.1);
  }
  20% {
    transform: translate(2px, -2px);
    filter: grayscale(80%) brightness(1.4);
  }
  25% {
    transform: translate(-1px, 1px);
    filter: grayscale(90%) brightness(1.2);
  }
  30% {
    transform: translate(-4px, -4px);
    filter: grayscale(100%) brightness(0.9) contrast(1.5);
  }
  35% {
    transform: translate(4px, 4px);
    filter: grayscale(100%) brightness(1.1) contrast(1.3);
  }
  40% {
    transform: translate(-5px, 0);
    filter: grayscale(100%) brightness(1.2) contrast(1.4);
  }
  45% {
    transform: translate(5px, -5px);
    filter: grayscale(100%) brightness(0.8) contrast(1.6);
  }
  50% {
    transform: translate(0, 5px);
    filter: grayscale(100%) brightness(1.3) contrast(1.3);
  }
  55% {
    transform: translate(-6px, 6px);
    filter: grayscale(100%) brightness(1.1) contrast(1.5);
  }
  60% {
    transform: translate(6px, 0);
    filter: grayscale(100%) brightness(1.2) contrast(1.4);
  }
  65% {
    transform: translate(-4px, -4px);
    filter: grayscale(100%) brightness(1) contrast(1.5);
  }
  70% {
    transform: translate(4px, 4px);
    filter: grayscale(100%) brightness(1.3) contrast(1.3);
  }
  75% {
    transform: translate(-3px, 3px);
    filter: grayscale(100%) brightness(1.1) contrast(1.4);
  }
  80% {
    transform: translate(3px, -3px);
    filter: grayscale(100%) brightness(1.2) contrast(1.3);
  }
  85% {
    transform: translate(-2px, -2px);
    filter: grayscale(100%) brightness(1) contrast(1.5);
  }
  90% {
    transform: translate(2px, 2px);
    filter: grayscale(100%) brightness(1.1) contrast(1.4);
  }
  95% {
    transform: translate(-1px, 1px);
    filter: grayscale(100%) brightness(1.2);
    opacity: 0.5;
  }
  100% {
    transform: translate(0);
    filter: grayscale(100%) brightness(1);
    opacity: 0;
  }
}

@keyframes transition-glitch {
  0% {
    transform: translate(0);
    filter: grayscale(100%) brightness(1.5) contrast(1.4);
    opacity: 0;
  }
  15% {
    transform: translate(-2px, -2px);
    filter: grayscale(100%) brightness(1.6) contrast(1.5);
    opacity: 0.1;
  }
  25% {
    transform: translate(2px, 2px);
    filter: grayscale(100%) brightness(1.4) contrast(1.6);
    opacity: 0.2;
  }
  35% {
    transform: translate(-4px, 0);
    filter: grayscale(100%) brightness(1.7) contrast(1.5);
    opacity: 0.3;
  }
  45% {
    transform: translate(4px, -4px);
    filter: grayscale(100%) brightness(1.3) contrast(1.7);
    opacity: 0.5;
  }
  55% {
    transform: translate(0, 4px);
    filter: grayscale(100%) brightness(1.6) contrast(1.6);
    opacity: 0.65;
  }
  65% {
    transform: translate(-6px, 6px);
    filter: grayscale(100%) brightness(1.5) contrast(1.8);
    opacity: 0.8;
  }
  75% {
    transform: translate(6px, 0);
    filter: grayscale(100%) brightness(1.4) contrast(1.5);
    opacity: 0.9;
  }
  85% {
    transform: translate(-8px, -8px);
    filter: grayscale(100%) brightness(1.4) contrast(1.7);
    opacity: 0.95;
  }
  90% {
    transform: translate(8px, 8px);
    filter: grayscale(100%) brightness(1.6) contrast(1.5);
    opacity: 1;
  }
  95% {
    transform: translate(4px, 4px);
    filter: grayscale(70%) brightness(1.3) contrast(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(0);
    filter: grayscale(0%) brightness(1) contrast(1);
    opacity: 1;
  }
}

.glitch-container:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0;
  z-index: 3;
  pointer-events: none;
  animation: scan 1.2s ease-out forwards;
}

@keyframes scan {
  0% {
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  }
  20% {
    box-shadow: 0 0 40px rgba(255, 255, 255, 1);
  }
  40% {
    box-shadow: 0 0 50px rgba(255, 255, 255, 1.2);
  }
  60% {
    box-shadow: 0 0 35px rgba(255, 255, 255, 1);
  }
  80% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
  }
  90% {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
  }
  100% {
    box-shadow: 0 0 0px rgba(255, 255, 255, 0);
  }
}

.glitch-container:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255, 255, 255, 0.1) 2px,
    rgba(255, 255, 255, 0.1) 4px
  );
  z-index: 4;
  pointer-events: none;
  animation: flicker 1.2s ease-out forwards;
}

@keyframes flicker {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  20% {
    opacity: 1;
  }
  30% {
    opacity: 0.3;
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 0.4;
  }
  80% {
    opacity: 1;
  }
  85% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.3;
  }
  95% {
    opacity: 0.1;
  }
  100% {
    opacity: 0;
  }
}

.static-noise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZmlsdGVyIGlkPSJub2lzZSI+Cgk8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC45IiBudW1P.Y3RhdmVzPSI0IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIj4KICA8L2ZlVHVyYnVsZW5jZT4KICA8L2ZpbHRlcj4KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjbm9pc2UpIiBvcGFjaXR5PSIwLjA0Ii8+Cjwvc3ZnPg==');
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: overlay;
  animation: noise 1.2s ease-out forwards;
}

@keyframes noise {
  0%,
  100% {
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  30% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.4;
  }
  70% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.2;
  }
}

@keyframes glitch-animation-reverse {
  0% {
    transform: translate(0);
    filter: grayscale(0%) brightness(1);
    opacity: 0;
  }
  5% {
    transform: translate(-1px, 1px);
    filter: grayscale(5%) brightness(1);
    opacity: 0.5;
  }
  10% {
    transform: translate(1px, -1px);
    filter: grayscale(15%) brightness(1.05);
    opacity: 0.6;
  }
  15% {
    transform: translate(-2px, -2px);
    filter: grayscale(30%) brightness(1.1) contrast(1);
    opacity: 0.7;
  }
  20% {
    transform: translate(2px, 2px);
    filter: grayscale(50%) brightness(1.2) contrast(1);
    opacity: 0.75;
  }
  25% {
    transform: translate(-3px, 3px);
    filter: grayscale(70%) brightness(1.3) contrast(1.1);
    opacity: 0.8;
  }
  30% {
    transform: translate(3px, -3px);
    filter: grayscale(90%) brightness(1.4) contrast(1.2);
    opacity: 0.85;
  }
  35% {
    transform: translate(-4px, -4px);
    filter: grayscale(100%) brightness(1.5) contrast(1.3);
    opacity: 0.9;
  }
  40% {
    transform: translate(4px, 4px);
    filter: grayscale(100%) brightness(1.3) contrast(1.4);
    opacity: 0.85;
  }
  45% {
    transform: translate(-6px, 6px);
    filter: grayscale(100%) brightness(1.4) contrast(1.5);
    opacity: 0.9;
  }
  50% {
    transform: translate(6px, 0);
    filter: grayscale(100%) brightness(1.2) contrast(1.4);
    opacity: 0.8;
  }
  55% {
    transform: translate(-5px, 0);
    filter: grayscale(100%) brightness(0.8) contrast(1.6);
    opacity: 0.85;
  }
  60% {
    transform: translate(5px, -5px);
    filter: grayscale(100%) brightness(1.3) contrast(1.3);
    opacity: 0.9;
  }
  65% {
    transform: translate(0, 5px);
    filter: grayscale(100%) brightness(1.2) contrast(1.4);
    opacity: 0.85;
  }
  70% {
    transform: translate(-4px, 4px);
    filter: grayscale(100%) brightness(1.1) contrast(1.3);
    opacity: 0.9;
  }
  75% {
    transform: translate(-4px, -4px);
    filter: grayscale(100%) brightness(0.9) contrast(1.5);
    opacity: 0.95;
  }
  80% {
    transform: translate(2px, -2px);
    filter: grayscale(80%) brightness(1.4);
    opacity: 1;
  }
  85% {
    transform: translate(-2px, 0);
    filter: grayscale(60%) brightness(1.1);
    opacity: 1;
  }
  90% {
    transform: translate(2px, 2px);
    filter: grayscale(40%) brightness(1.3);
    opacity: 1;
  }
  95% {
    transform: translate(-2px, -2px);
    filter: grayscale(20%) brightness(1.2);
    opacity: 1;
  }
  100% {
    transform: translate(0);
    filter: grayscale(0%) brightness(1);
    opacity: 1;
  }
}

@keyframes transition-glitch-reverse {
  0% {
    transform: translate(0);
    filter: grayscale(0%) brightness(1) contrast(1);
    opacity: 1;
  }
  10% {
    transform: translate(1px, -1px);
    filter: grayscale(5%) brightness(1) contrast(1);
    opacity: 1;
  }
  20% {
    transform: translate(-1px, 1px);
    filter: grayscale(15%) brightness(1.05) contrast(1);
    opacity: 0.95;
  }
  30% {
    transform: translate(2px, 2px);
    filter: grayscale(30%) brightness(1.1) contrast(1);
    opacity: 0.9;
  }
  40% {
    transform: translate(-2px, -2px);
    filter: grayscale(50%) brightness(1.2) contrast(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(3px, -3px);
    filter: grayscale(70%) brightness(1.3) contrast(1.1);
    opacity: 0.6;
  }
  60% {
    transform: translate(-3px, 3px);
    filter: grayscale(90%) brightness(1.4) contrast(1.2);
    opacity: 0.4;
  }
  70% {
    transform: translate(4px, 4px);
    filter: grayscale(100%) brightness(1.5) contrast(1.3);
    opacity: 0.3;
  }
  80% {
    transform: translate(-4px, -4px);
    filter: grayscale(100%) brightness(1.3) contrast(1.4);
    opacity: 0.2;
  }
  90% {
    transform: translate(2px, -2px);
    filter: grayscale(100%) brightness(1.2) contrast(1.3);
    opacity: 0.1;
  }
  100% {
    transform: translate(0);
    filter: grayscale(100%) brightness(1.5) contrast(1.4);
    opacity: 0;
  }
}

.glitch-container:not(:hover) .photo1 {
  animation: glitch-animation-reverse 1.2s ease-out forwards;
}

.glitch-container:not(:hover) .photo2 {
  animation: transition-glitch-reverse 1.2s ease-out forwards;
}

.gallery-swiper .swiper-button-next,
.gallery-swiper .swiper-button-prev {
  display: none;
}

@media screen and (max-width: 1024px) {
  .gallery-slider {
    padding: 40px 15px 80px;
  }

  .gallery-swiper {
    max-width: 1200px;
    padding: 30px 0;
  }
}

@media screen and (max-width: 768px) {
  .gallery-slider {
    padding: 30px 15px 60px;
  }

  .gallery-header {
    gap: 15px;
  }

  .gallery-slider-title {
    font-size: 14px;
  }

  .gallery-nav-btn {
    font-size: 48px;
  }

  .gallery-nav-btn img {
    width: 40px;
    height: auto;
  }

  .gallery-swiper {
    padding: 20px 0;
  }

  .glitch-container {
    aspect-ratio: 16 / 10;
  }
}

@media screen and (max-width: 480px) {
  .gallery-slider {
    padding: 20px 10px 40px;
  }

  .gallery-header {
    gap: 10px;
  }

  .gallery-slider-title {
    font-size: 13px;
  }

  .gallery-nav-btn {
    font-size: 36px;
  }

  .gallery-nav-btn img {
    width: 32px;
  }

  .glitch-container {
    aspect-ratio: 16 / 11;
  }
}