/**
 * Gallery Effects
 * Efeitos visuais para a galeria de imagens
 */

/* Container da galeria com borda animada */
.gallery-container {
  position: relative;
}

/* Borda animada com ondulações */
.gallery-blob {
  position: absolute;
  inset: -4px;
  z-index: 5;
  pointer-events: none;
}

.gallery-blob svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.15));
}

.gallery-blob path {
  fill: none;
  stroke: url(#gallery-gradient);
  stroke-width: 3;
  stroke-linecap: round;
}

/* Animação de morphing da borda */
@keyframes blob-morph {
  0%, 100% {
    d: path("M200,50 C280,50 350,120 350,200 C350,280 280,350 200,350 C120,350 50,280 50,200 C50,120 120,50 200,50");
  }
  25% {
    d: path("M200,45 C290,60 355,115 345,200 C340,285 275,355 200,345 C115,340 45,285 55,200 C60,115 110,55 200,45");
  }
  50% {
    d: path("M200,55 C275,45 345,125 355,200 C345,275 285,345 200,355 C125,345 55,275 45,200 C55,125 125,55 200,55");
  }
  75% {
    d: path("M200,48 C285,55 352,118 348,200 C345,282 278,352 200,348 C118,345 48,282 52,200 C55,118 115,55 200,48");
  }
}

/* Gradiente animado da borda */
@keyframes gradient-rotate {
  0% { --angle: 0deg; }
  100% { --angle: 360deg; }
}

/* Efeito de brilho pulsante - tons de cinza */
.gallery-glow {
  position: absolute;
  inset: -20px;
  z-index: 4;
  border-radius: 50%;
  background: radial-gradient(circle, 
    rgba(148, 163, 184, 0.15) 0%, 
    rgba(100, 116, 139, 0.1) 40%,
    transparent 70%
  );
  animation: glow-pulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glow-pulse {
  0%, 100% { 
    opacity: 0.4; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.7; 
    transform: scale(1.02);
  }
}

/* Container de imagens com máscara orgânica animada */
.gallery-images {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%; /* Galeria redonda */
}

/* Slides da galeria */
.city-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Overlay sutil */
.gallery-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}

/* Partículas flutuantes - tons de cinza */
.gallery-particles {
  position: absolute;
  inset: -30px;
  z-index: 6;
  pointer-events: none;
  overflow: visible;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(100, 116, 139, 0.6);
  border-radius: 50%;
  opacity: 0;
  animation: particle-float 8s ease-in-out infinite;
}

.particle:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
.particle:nth-child(2) { left: 80%; top: 15%; animation-delay: 1s; }
.particle:nth-child(3) { left: 90%; top: 60%; animation-delay: 2s; }
.particle:nth-child(4) { left: 15%; top: 75%; animation-delay: 3s; }
.particle:nth-child(5) { left: 50%; top: 5%; animation-delay: 0.5s; }
.particle:nth-child(6) { left: 85%; top: 85%; animation-delay: 1.5s; }
.particle:nth-child(7) { left: 5%; top: 50%; animation-delay: 2.5s; }
.particle:nth-child(8) { left: 60%; top: 90%; animation-delay: 3.5s; }

@keyframes particle-float {
  0%, 100% {
    opacity: 0;
    transform: translate(0, 0) scale(0);
  }
  15% {
    opacity: 0.5;
    transform: translate(0, 0) scale(1);
  }
  50% {
    opacity: 0.3;
    transform: translate(8px, -15px) scale(0.7);
  }
  85% {
    opacity: 0.1;
    transform: translate(-3px, -30px) scale(0.4);
  }
}

/* Anel sonar - pulso delicado */
.gallery-ring {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: 50%;
  pointer-events: none;
  border: 1px solid rgba(148, 163, 184, 0.68);
  animation: sonar-pulse 4s ease-out infinite;
  opacity: 0;
}

/* Segundo anel sonar - defasado */
.gallery-ring-inner {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: 50%;
  pointer-events: none;
  border: 1px solid rgba(148, 163, 184, 0.68);
  animation: sonar-pulse 4s ease-out infinite;
  animation-delay: 1.3s;
  opacity: 0;
}

/* Terceiro anel sonar - maior defasagem */
.gallery-ring::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.68);
  animation: sonar-pulse 4s ease-out infinite;
  animation-delay: 2.6s;
  opacity: 0;
}

@keyframes sonar-pulse {
  0% {
    transform: scale(1);
    opacity: 0.75;
    border-color: rgba(100, 116, 139, 0.75);
  }
  50% {
    opacity: 0.45;
    border-color: rgba(148, 163, 184, 0.55);
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
    border-color: rgba(203, 213, 225, 0.25);
  }
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .gallery-ring,
  .gallery-ring-inner,
  .gallery-ring::before {
    border-width: 1px;
  }
  
  .particle {
    width: 3px;
    height: 3px;
  }
  
  .gallery-glow {
    inset: -10px;
  }
  
  @keyframes sonar-pulse {
    0% {
      transform: scale(1);
      opacity: 0.6;
    }
    50% {
      opacity: 0.35;
    }
    100% {
      transform: scale(1.25);
      opacity: 0;
    }
  }
}