/* ==========================================================================
   Juniper Island - Direction 2 Effects CSS
   Glass Morphism, Animations, and Premium Visual Effects
   ========================================================================== */

/* ==========================================================================
   Glass Morphism Components
   ========================================================================== */

.glass-stat-card {
  background: var(--color-white-glass);
  border: 1px solid var(--color-white-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px);
  transition: all var(--transition-fast);
  text-align: center;
  padding: var(--space-lg) var(--space-sm);
}

.glass-stat-card:hover {
  background: var(--color-white-glass-hover);
  border-color: var(--color-white-border-hover);
}

.glass-work-card {
  background: var(--color-white-glass);
  border: 1px solid var(--color-white-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(20px);
  transition: all var(--transition-fast);
  overflow: hidden;
}

.glass-work-card:hover {
  background: var(--color-white-glass-hover);
  border-color: var(--color-white-border-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-glass);
}

.glass-testimonial-card {
  background: var(--color-black-glass);
  border: 1px solid var(--color-white-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(20px);
  transition: all var(--transition-fast);
  padding: var(--space-xl);
}

.glass-testimonial-card:hover {
  background: var(--color-black-glass-hover);
  border-color: var(--color-white-border-hover);
  transform: translateY(-2px);
}

.glass-form-container {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(20px);
}

/* ==========================================================================
   Button Shine Effects
   ========================================================================== */

.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left var(--transition-medium);
}

.btn-shine:hover::before {
  left: 100%;
}

/* ==========================================================================
   Work Item Effects
   ========================================================================== */

.work-item-shine {
  position: relative;
}

.work-item-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.work-item-shine:hover::before {
  opacity: 1;
}

/* ==========================================================================
   Testimonial Quote Gradient
   ========================================================================== */


/* ==========================================================================
   Complex Background Gradients
   ========================================================================== */

.hero-premium-gradient {
  position: relative;
}

.hero-premium-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.02) 0%, transparent 70%),
    radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0.01) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* ==========================================================================
   Premium Animations
   ========================================================================== */

@keyframes subtle-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes gentle-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-2px);
  }
}

/* ==========================================================================
   Interactive State Enhancements
   ========================================================================== */

/* Enhanced glass card interactions */
.glass-stat-card:hover .stat-number-ultra {
  color: var(--color-white);
  transform: scale(1.02);
  transition: all var(--transition-fast);
}

/* Work card image zoom effect */
.glass-work-card .work-image {
  overflow: hidden;
}

.glass-work-card:hover .work-image img {
  transform: scale(1.05);
  transition: transform var(--transition-medium);
}

/* Subtle glow effect for premium elements */
.glass-work-card:hover,
.glass-testimonial-card:hover {
  box-shadow: 
    var(--shadow-glass),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Form focus enhancements */
.form-input-underline:focus {
  border-color: rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Performance Optimizations
   ========================================================================== */

/* GPU acceleration for smooth animations */
.glass-stat-card,
.glass-work-card,
.glass-testimonial-card,
.btn-shine {
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .glass-stat-card,
  .glass-work-card,
  .glass-testimonial-card,
  .btn-shine,
  .work-item-shine {
    transition: none;
  }
  
  .btn-shine::before,
  .work-item-shine::before {
    display: none;
  }
  
  .glass-work-card:hover .work-image img {
    transform: none;
  }
}

/* ==========================================================================
   Backdrop Filter Fallbacks
   ========================================================================== */

/* Fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(20px)) {
  .glass-stat-card {
    background: rgba(255, 255, 255, 0.05);
  }
  
  .glass-work-card {
    background: rgba(255, 255, 255, 0.05);
  }
  
  .glass-testimonial-card {
    background: rgba(0, 0, 0, 0.7);
  }
  
  .glass-form-container {
    background: rgba(255, 255, 255, 0.12);
  }
}