1/**
  2 * Problem Section - Split Screen Comparison
  3 * Interactive before/after comparison with angled divider
  4 */
  5
  6/* Subtle grid background for the container */
  7.split-container::before {
  8  content: '';
  9  position: absolute;
 10  inset: 0;
 11  background-image:
 12    linear-gradient(var(--color-mist) 1px, transparent 1px),
 13    linear-gradient(90deg, var(--color-mist) 1px, transparent 1px);
 14  background-size: 20px 20px;
 15  opacity: 0.3;
 16  pointer-events: none;
 17}
 18
 19/* Hover hint */
 20.split-container::after {
 21  content: '← Drag →';
 22  position: absolute;
 23  bottom: 12px;
 24  left: 50%;
 25  transform: translateX(-50%);
 26  font-size: 0.625rem;
 27  font-weight: 600;
 28  letter-spacing: 0.1em;
 29  text-transform: uppercase;
 30  color: var(--color-ash);
 31  background: var(--color-paper);
 32  padding: 4px 12px;
 33  border-radius: 4px;
 34  opacity: 0.8;
 35  transition: opacity 0.3s ease;
 36  z-index: 10;
 37}
 38
 39.split-container:hover::after {
 40  opacity: 0;
 41}
 42
 43/* Hover state for impeccable card */
 44.split-after .impeccable-card {
 45  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
 46}
 47
 48/* Entry animation for the divider */
 49@keyframes splitEntry {
 50  from {
 51    opacity: 0;
 52    transform: translateX(-50%) skewX(-10deg) scaleY(0.8);
 53  }
 54  to {
 55    opacity: 1;
 56    transform: translateX(-50%) skewX(-10deg) scaleY(1);
 57  }
 58}
 59
 60.split-divider {
 61  animation: splitEntry 0.6s var(--ease-out) 0.3s backwards;
 62}
 63
 64/* Labels hover states */
 65.split-label-item {
 66  transition: color var(--duration-fast) var(--ease-out);
 67  cursor: default;
 68}
 69
 70.split-label-item:hover {
 71  color: var(--color-text);
 72}
 73
 74.split-label-item[data-point="after"]:hover .split-label-dot--accent {
 75  transform: scale(1.3);
 76}
 77
 78.split-label-dot {
 79  transition: transform var(--duration-fast) var(--ease-spring);
 80}
 81
 82/* Floating corner badges */
 83.split-badge {
 84  position: absolute;
 85  top: 10px;
 86  font-size: 0.625rem;
 87  font-weight: 600;
 88  letter-spacing: 0.08em;
 89  text-transform: uppercase;
 90  padding: 3px 8px;
 91  border-radius: 3px;
 92  z-index: 5;
 93  pointer-events: none;
 94}
 95
 96.split-badge--before {
 97  left: 10px;
 98  color: var(--color-ash);
 99  background: var(--color-paper);
100  border: 1px solid var(--color-mist);
101}
102
103.split-badge--after {
104  right: 10px;
105  color: var(--color-paper);
106  background: var(--color-accent);
107}
108
109/* Mobile adjustments */
110@media (hover: none) {
111  .split-container::after {
112    content: '← Swipe →';
113  }
114}
115
116@media (max-width: 600px) {
117  .split-label {
118    font-size: 0.5625rem;
119    padding: 4px 10px;
120  }
121}