/**
 * ============================================================
 * SWIMMING POOL LANE BACKGROUND - Pure CSS
 * ============================================================
 * Creates a multi-lane swimming pool effect using only CSS
 * No images, no SVG, no canvas - just gradients
 * 
 * Effect breakdown:
 * - Vertical white bands = lane ropes/dividers
 * - Horizontal repeating lines = water surface ripples
 * - Scales automatically with screen size
 * 
 * To use: Apply .swim-lanes-bg class to any container
 * or use the body styles when swimming theme is active
 * ============================================================
 */

/* Swimming pool lane pattern - applied when swimming theme is active */
html[data-color="swimming"] body {
  background-color: #0A2540;
  background-image:
    /* Vertical lane dividers (lane ropes) */
    linear-gradient(
      90deg,
      rgba(255,255,255,0.12) 0%,
      rgba(255,255,255,0.12) 1.5%,
      transparent 1.5%,
      transparent 16.5%,
      rgba(255,255,255,0.12) 16.5%,
      rgba(255,255,255,0.12) 18%,
      transparent 18%,
      transparent 33%,
      rgba(255,255,255,0.12) 33%,
      rgba(255,255,255,0.12) 34.5%,
      transparent 34.5%,
      transparent 49.5%,
      rgba(211,47,47,0.25) 49.5%,
      rgba(211,47,47,0.25) 50.5%,
      transparent 50.5%,
      transparent 65.5%,
      rgba(255,255,255,0.12) 65.5%,
      rgba(255,255,255,0.12) 67%,
      transparent 67%,
      transparent 82%,
      rgba(255,255,255,0.12) 82%,
      rgba(255,255,255,0.12) 83.5%,
      transparent 83.5%,
      transparent 98.5%,
      rgba(255,255,255,0.12) 98.5%,
      rgba(255,255,255,0.12) 100%
    ),
    /* Horizontal water ripples */
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.03),
      rgba(255,255,255,0.03) 1px,
      transparent 1px,
      transparent 6px
    );
  background-size: 100% 100%;
  background-attachment: fixed;
}

/* Light theme variant - inverted pool effect */
html[data-theme="light"][data-color="swimming"] body {
  background-color: #EAF6FF;
  background-image:
    /* Vertical lane dividers */
    linear-gradient(
      90deg,
      rgba(10,37,64,0.1) 0%,
      rgba(10,37,64,0.1) 1.5%,
      transparent 1.5%,
      transparent 16.5%,
      rgba(10,37,64,0.1) 16.5%,
      rgba(10,37,64,0.1) 18%,
      transparent 18%,
      transparent 33%,
      rgba(10,37,64,0.1) 33%,
      rgba(10,37,64,0.1) 34.5%,
      transparent 34.5%,
      transparent 49.5%,
      rgba(211,47,47,0.2) 49.5%,
      rgba(211,47,47,0.2) 50.5%,
      transparent 50.5%,
      transparent 65.5%,
      rgba(10,37,64,0.1) 65.5%,
      rgba(10,37,64,0.1) 67%,
      transparent 67%,
      transparent 82%,
      rgba(10,37,64,0.1) 82%,
      rgba(10,37,64,0.1) 83.5%,
      transparent 83.5%,
      transparent 98.5%,
      rgba(10,37,64,0.1) 98.5%,
      rgba(10,37,64,0.1) 100%
    ),
    /* Horizontal water ripples */
    repeating-linear-gradient(
      0deg,
      rgba(10,37,64,0.04),
      rgba(10,37,64,0.04) 1px,
      transparent 1px,
      transparent 6px
    );
  background-size: 100% 100%;
  background-attachment: fixed;
}

/* Animated water shimmer effect (subtle) */
@keyframes swim-shimmer {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.95;
  }
}

html[data-color="swimming"] body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse at 30% 20%, rgba(234,246,255,0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(234,246,255,0.03) 0%, transparent 40%);
  pointer-events: none;
  z-index: -1;
  animation: swim-shimmer 4s ease-in-out infinite;
}

html[data-theme="light"][data-color="swimming"] body::before {
  background: 
    radial-gradient(ellipse at 30% 20%, rgba(10,37,64,0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(10,37,64,0.02) 0%, transparent 40%);
}