/**
 * ColorDots Style: Circle-1 (Convex)
 * Version: 2.2.1
 * Date: 2026-02-03
 * Build: Paused breathing on mousedown
 * 
 * Circle-1 Design
 * - Convex circles with PHP-generated gradients (top-right light source)
 * - Permanent breathing animation (all sizes)
 * - Hover intensifies breathing
 * - Mousedown pauses breathing + reveals base color
 * - No border (minimal aesthetic)
 * - No grain (focus on pure color)
 * 
 * Gradient Position: 70% 30% (top-right)
 * Gradient Stops: 5-stop (+20%, +10%, 0%, -12%, -25%)
 * 
 * Changelog v2.2.1:
 * - NEW: Breathing pauses on mousedown (animation-play-state: paused)
 * 
 * Changelog v2.2.0:
 * - REBUILT: Based on working Circle-2 pattern
 * - FIX: Gradient layer positioning (added inset: 0)
 * - FIX: Mousedown selector (proper :active targeting)
 * - KEPT: Breathing animation (permanent + hover)
 * - REMOVED: Border, grain, shadows
 */

:root {
  /* Circle-1 specific variables */
  --circle1-breathing-duration: 12s;
  --circle1-breathing-scale: 1.02;
  --circle1-breathing-hover-duration: 7s;
  --circle1-breathing-hover-scale: 1.05;
}

/* ================================
   Circle Shape
   ================================ */

.colordot--style-circle-1 {
  border-radius: 50%;
}

/* ================================
   Base Dot Styling
   ================================ */

.colordot--style-circle-1 .colordot__base {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  border: none; /* No border for C1 */
  box-shadow: none; /* No shadow for C1 */
  transform: translateZ(0);
  backface-visibility: hidden;
  overflow: hidden;
  
  /* Permanent breathing animation */
  animation: colordot-breathe var(--circle1-breathing-duration) ease-in-out infinite;
  will-change: transform;
}

/* ================================
   Gradient Layer
   ================================ */

.colordot--style-circle-1 .colordot__gradient {
  position: absolute;
  inset: 0; /* ← CRITICAL: Full coverage */
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.1s ease-out;
  transform: translateZ(0);
  backface-visibility: hidden;
  /* Background gradient comes from PHP inline */
}

/* ================================
   Breathing Animation
   ================================ */

@keyframes colordot-breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(var(--circle1-breathing-scale));
  }
}

@keyframes colordot-breathe-intense {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(var(--circle1-breathing-hover-scale));
  }
}

/* Hover: Intensified breathing */
.colordot--style-circle-1 .colordot__base:hover {
  animation: colordot-breathe-intense var(--circle1-breathing-hover-duration) ease-in-out infinite;
}

/* ================================
   Mousedown Effect - Reveal Base Color + Pause Breathing
   ================================ */

/* Pause breathing animation on mousedown */
.colordot--style-circle-1 .colordot__base:active {
  animation-play-state: paused;
}

/* Also trigger on parent active state */
.colordot--style-circle-1:active .colordot__base {
  animation-play-state: paused;
}

/* Fade out gradient on mousedown */
.colordot--style-circle-1 .colordot__base:active .colordot__gradient {
  opacity: 0;
}

/* Alternative: Also trigger on parent active state */
.colordot--style-circle-1:active .colordot__gradient {
  opacity: 0;
}

/* ================================
   No Grain (C1 stays pure)
   ================================ */

/* C1 has no grain texture - focus on pure color */

/* ================================
   Accessibility: Reduced Motion
   ================================ */

@media (prefers-reduced-motion: reduce) {
  .colordot--style-circle-1 .colordot__base {
    animation: none;
    transform: none;
  }
  
  .colordot--style-circle-1 .colordot__gradient {
    transition: none;
  }
}

/* ================================
   Print Styles
   ================================ */

@media print {
  .colordot--style-circle-1 .colordot__base {
    animation: none;
    transform: none;
  }
  
  .colordot--style-circle-1 .colordot__gradient {
    display: none; /* Print only flat color */
  }
}