/* Enhanced animation styles for browser mockup */

/* Improved blur overlay with smoother animation */
.blur-overlay {
  border-radius: 8px !important;
  transition: opacity 0.4s ease, visibility 0.4s ease, width 0.5s cubic-bezier(0.19, 1, 0.22, 1), height 0.5s cubic-bezier(0.19, 1, 0.22, 1) !important;
  box-shadow: 0 0 0 rgba(99, 102, 241, 0) !important;
}

/* Active selection state */
.blur-overlay.selection-active {
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.3), 0 0 20px rgba(99, 102, 241, 0.15) !important;
  animation: selection-glow 2s infinite ease-in-out !important;
}

/* Completed selection state */
.blur-overlay.selection-complete {
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.3), 0 4px 12px rgba(99, 102, 241, 0.2) !important;
  animation: selection-complete-pulse 3s infinite ease-in-out !important;
}

.dark-mode .blur-overlay.selection-complete {
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.4), 0 4px 12px rgba(99, 102, 241, 0.3) !important;
}

/* Improved blur selection */
.blur-selection {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  background-color: rgba(99, 102, 241, 0.08) !important;
  transition: backdrop-filter 0.5s ease, -webkit-backdrop-filter 0.5s ease, background-color 0.5s ease !important;
  border-radius: inherit !important;
  animation: pulse-selection 2s infinite ease-in-out !important;
}

.dark-mode .blur-selection {
  background-color: rgba(99, 102, 241, 0.18) !important;
}

/* Enhanced resize handles */
.blur-handle {
  width: 10px !important;
  height: 10px !important;
  background-color: white !important;
  border: 2px solid var(--color-primary) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 8px rgba(99, 102, 241, 0.5) !important;
  opacity: 0 !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, background-color 0.3s ease !important;
  z-index: 11 !important;
}

.blur-handle.top-left {
  top: -5px !important;
  left: -5px !important;
}

.blur-handle.top-right {
  top: -5px !important;
  right: -5px !important;
}

.blur-handle.bottom-right {
  bottom: -5px !important;
  right: -5px !important;
}

.blur-handle.bottom-left {
  bottom: -5px !important;
  left: -5px !important;
}

.blur-overlay.selection-complete .blur-handle {
  opacity: 1 !important;
  animation: pulse-handle 2s infinite ease-in-out !important;
  transform: scale(1) !important;
}

.dark-mode .blur-handle {
  background-color: var(--color-bg-alt) !important;
  border-color: var(--color-primary-light) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 8px rgba(99, 102, 241, 0.6) !important;
}

.dark-mode .blur-overlay.selection-complete .blur-handle {
  animation: pulse-handle-dark 2s infinite ease-in-out !important;
}

/* Enhanced animations */
@keyframes pulse-handle {
  0%, 100% {
    transform: scale(1);
    background-color: white;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 8px rgba(99, 102, 241, 0.5);
  }
  50% {
    transform: scale(1.3);
    background-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 12px rgba(99, 102, 241, 0.8);
  }
}

@keyframes pulse-handle-dark {
  0%, 100% {
    transform: scale(1);
    background-color: var(--color-bg-alt);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 8px rgba(99, 102, 241, 0.6);
  }
  50% {
    transform: scale(1.3);
    background-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 12px rgba(99, 102, 241, 0.9);
  }
}

@keyframes selection-glow {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.3), 0 0 10px rgba(99, 102, 241, 0.2);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.4), 0 0 20px rgba(99, 102, 241, 0.4);
  }
}

@keyframes selection-complete-pulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.3), 0 4px 12px rgba(99, 102, 241, 0.2);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.5), 0 4px 20px rgba(99, 102, 241, 0.4);
  }
}

@keyframes pulse-selection {
  0%, 100% {
    background-color: rgba(99, 102, 241, 0.08);
  }
  50% {
    background-color: rgba(99, 102, 241, 0.12);
  }
}

/* Borderless blur styling */
.borderless-blur {
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  background-color: rgba(99, 102, 241, 0.04) !important;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

.dark-mode .borderless-blur {
  background-color: rgba(99, 102, 241, 0.08) !important;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15) !important;
}

/* ExampleSite text blur (no border or resize handles) */
.borderless-text-blur {
  border: none !important;
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.2) !important;
  animation: text-blur-pulse 3s infinite ease-in-out !important;
}

.dark-mode .borderless-text-blur {
  box-shadow: 0 0 18px rgba(99, 102, 241, 0.25) !important;
  background-color: rgba(99, 102, 241, 0.1) !important;
}

@keyframes text-blur-pulse {
  0%, 100% {
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.2);
    background-color: rgba(99, 102, 241, 0.04);
  }
  50% {
    box-shadow: 0 0 18px rgba(99, 102, 241, 0.3);
    background-color: rgba(99, 102, 241, 0.08);
  }
}

.dark-mode .borderless-text-blur {
  animation: text-blur-pulse-dark 3s infinite ease-in-out !important;
}

@keyframes text-blur-pulse-dark {
  0%, 100% {
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.25);
    background-color: rgba(99, 102, 241, 0.1);
  }
  50% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
    background-color: rgba(99, 102, 241, 0.15);
  }
}