/* RelayEngine - Engine-Wide Effects & Interactive Utilities */

/* Progressive Image Blur-Up Loading Effects */
.progressive-image-container {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 100%;
}

/* Default state when loading <img>: blurred instantly without transition INTO blur */
.img-blur-loading {
  filter: blur(4px);
  transform: scale(1.03);
  transition: none !important;
  will-change: filter, transform;
}

/* State when loaded: transitions FROM blur TO clear in 0.2s */
.img-blur-loaded {
  filter: blur(0px) !important;
  transform: scale(1) !important;
  transition: filter 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Background Progressive Layer - Isolated behind text content */
.bg-progressive-host {
  position: relative !important;
  overflow: hidden;
}

.bg-progressive-host > * {
  position: relative;
  z-index: 1;
}

.bg-progressive-layer {
  position: absolute;
  top: -12px;
  left: -12px;
  right: -12px;
  bottom: -12px;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center center;
  will-change: filter, background-image;
}

/* Background Blur States (Applied ONLY to .bg-progressive-layer, keeping text crisp) */
.bg-blur-loading {
  filter: blur(4px);
  transition: none !important;
}

.bg-blur-loaded {
  filter: blur(0px) !important;
  transition: filter 0.2s ease-in-out, background-image 0.2s ease-in-out !important;
}

/* Micro-Animations & Glow Effects */
@keyframes enginePulse {
  0% {
    box-shadow: 0 0 0 0 var(--primary-glow);
  }

  70% {
    box-shadow: 0 0 0 10px var(--primary-glow-pulse);
  }

  100% {
    box-shadow: 0 0 0 0 var(--primary-glow-pulse);
  }
}

.engine-pulse {
  animation: enginePulse 2s infinite;
}

/* Glassmorphism & Shimmer */
.glass-effect {
  background: var(--color-bg-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(var(--backdrop-glass-blur));
  border: 1px solid var(--border-glass);
}

.shimmer-effect {
  position: relative;
  overflow: hidden;
}

.shimmer-effect::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    var(--shimmer-start) 0%,
    var(--shimmer-mid) 20%,
    var(--shimmer-peak) 60%,
    var(--shimmer-start) 100%
  );
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}