/**
 * Problem Section - The Clarity Lens
 * Interactive before/after comparison
 */

/* Additional lens styles that need complex CSS */

.lens-container {
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
}

/* Subtle grid background for the lens container */
.lens-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(var(--color-mist) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-mist) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.5;
  pointer-events: none;
}

/* Lens glow effect */
.lens-circle::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--color-accent-dim) 0%,
    transparent 70%
  );
  opacity: 0.5;
  pointer-events: none;
}

/* Pulsing animation for the lens when idle */
@keyframes lensGlow {
  0%, 100% {
    box-shadow: 
      0 0 0 4px var(--color-accent-dim),
      0 20px 60px rgba(0,0,0,0.15);
  }
  50% {
    box-shadow: 
      0 0 0 8px var(--color-accent-dim),
      0 20px 80px rgba(0,0,0,0.2);
  }
}

.lens-container:not(:hover) .lens-circle {
  animation: lensGlow 3s ease-in-out infinite;
}

/* Smooth transitions when hovering */
.lens-container:hover .lens-circle {
  transition: left 0.05s linear, top 0.05s linear;
}

.lens-container:hover .lens-after {
  transition: clip-path 0.05s linear;
}

/* Mobile: tap to reveal */
@media (hover: none) {
  .lens-label {
    display: none;
  }
  
  .lens-circle::after {
    content: 'Tap & Drag';
    position: absolute;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    background: var(--color-paper);
    padding: 4px 12px;
    border-radius: 4px;
    white-space: nowrap;
  }
}

/* Hover state for impeccable card inside lens */
.lens-after .impeccable-card {
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

/* Entry animation for the lens */
@keyframes lensEntry {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.lens-circle {
  animation: lensEntry 0.6s var(--ease-out) 0.3s backwards;
}

/* Labels hover states */
.lens-label-item {
  transition: color var(--duration-fast) var(--ease-out);
  cursor: default;
}

.lens-label-item:hover {
  color: var(--color-text);
}

.lens-label-item[data-point="after"]:hover .lens-label-dot--accent {
  transform: scale(1.3);
}

.lens-label-dot {
  transition: transform var(--duration-fast) var(--ease-spring);
}