/**
 * ColorDots Style: Circle-2 (Concave)
 * Version: 1.2.0
 * Date: 2026-02-01 18:05
 * Build: size matters now
 * Changes: Size-dependent borders & shadows, version tag active
 * 
 * Circle-2 Design
 * - Concave circles with PHP-generated gradients
 * - Fine grain texture (l+hero only)
 * - Size-dependent effects (s+m simplified, l+hero full)
 * - Size-dependent borders (s=2px, m=3px, l=5px, hero=8px)
 * - Size-dependent shadows (scaled by size)
 * - onmousedown reveals base color
 * - Zoom effect removed
 * 
 * Gradient Positions:
 * - s/m/l: at 20% 80% (Standard)
 * - hero: at 15% 85% (Extremer concave effect)
 * 
 * Gradient Stops:
 * - s/m: 3-stop (+17%, 0%, -23%)
 * - l/hero: 5-stop (+17%, +8%, 0%, -12%, -23%) at 0%/30%/60%/85%/100%
 * 
 * Changelog v1.2.0:
 * - NEW: Size-dependent borders (s=2px, m=3px, l=5px, hero=8px)
 * - NEW: Size-dependent shadows (scaled distances)
 * - NEW: Version tag activated
 * 
 * Changelog v1.1.0:
 * - NEW: PHP-generated gradients (CSS variables didn't work)
 * - NEW: Grain filter enabled for l+hero
 * - NEW: Size-dependent borders (s=3px, rest=6px)
 * - FIX: Zoom effect removed
 * - FIX: onmousedown shows flat base color
 */

/* VERSION TAG - Visible in Frontend */
.colordot--style-circle-2::after {
  content: '2026-02-01 18:05 – Build: size matters now';
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,0.8);
  color: lime;
  padding: 4px 8px;
  font-size: 11px;
  font-family: monospace;
  border-radius: 3px;
  z-index: 999999;
  pointer-events: none;
}

:root {
  /* Size System */
  --colordot-size-s-fixed: 40px;
  --colordot-size-m-fixed: 75px;
  --colordot-size-l-fixed: 200px;
  --colordot-size-hero-fixed: 400px;
  
  /* Fluid Size Ranges */
  --colordot-size-s-fluid: clamp(32px, 3vw, 40px);
  --colordot-size-m-fluid: clamp(60px, 6vw, 75px);
  --colordot-size-l-fluid: clamp(150px, 15vw, 200px);
  --colordot-size-hero-fluid: clamp(280px, 28vw, 400px);
  
  /* Circle-2 Border - Default */
  --circle2-border-width: 6px;
  --circle2-border-color: oklch(100% 0 0);
  
  /* Grain Opacity */
  --circle2-grain-opacity: 0.5;
  
  /* Version Info */
  --colordots-style: "circle-2";
  --colordots-version: "1.1.0";
  --colordots-build: "2026-01-31";
}

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

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

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

.colordot--style-circle-2 .colordot__base {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  border: var(--circle2-border-width) solid var(--circle2-border-color);
  box-shadow: -12px 12px 16px rgba(0, 0, 0, 0.38); /* Default L */
  transform: translateZ(0);
  backface-visibility: hidden;
  overflow: hidden;
  /* Base has flat color, gradient is in separate layer */
}

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

.colordot--style-circle-2 .colordot__gradient {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  transition: opacity 0.3s ease-in-out;
  border: var(--circle2-border-width) solid var(--circle2-border-color);
  /* Gradient style comes from PHP inline */
}

/* ================================
   Size-Dependent Borders
   ================================ */

/* Borders on both base AND gradient so they stay consistent during fade */

/* Small: 2px border */
.colordot--style-circle-2.colordot--size-s .colordot__base,
.colordot--style-circle-2.colordot--size-s .colordot__gradient {
  border-width: 2px;
}

/* Medium: 3px border */
.colordot--style-circle-2.colordot--size-m .colordot__base,
.colordot--style-circle-2.colordot--size-m .colordot__gradient {
  border-width: 3px;
}

/* Large: 5px border */
.colordot--style-circle-2.colordot--size-l .colordot__base,
.colordot--style-circle-2.colordot--size-l .colordot__gradient {
  border-width: 5px;
}

/* Hero: 8px border */
.colordot--style-circle-2.colordot--hero .colordot__base,
.colordot--style-circle-2.colordot--hero .colordot__gradient {
  border-width: 8px;
}

/* ================================
   Size-Dependent Shadows
   ================================ */

/* Small: Distance × 0.3, Opacity reduced by 1/3 */
.colordot--style-circle-2.colordot--size-s .colordot__base {
  box-shadow: -4px 4px 5px rgba(0, 0, 0, 0.25);
}

/* Medium: Distance × 0.5 */
.colordot--style-circle-2.colordot--size-m .colordot__base {
  box-shadow: -6px 6px 8px rgba(0, 0, 0, 0.38);
}

/* Large: Base (× 1.0) - already set as default */
.colordot--style-circle-2.colordot--size-l .colordot__base {
  box-shadow: -12px 12px 16px rgba(0, 0, 0, 0.38);
}

/* Hero: Distance × 1.2 */
.colordot--style-circle-2.colordot--hero .colordot__base {
  box-shadow: -14px 14px 19px rgba(0, 0, 0, 0.38);
}

/* ================================
   Gradients: PHP-Generated Inline
   ================================ */

/* Gradients werden von PHP generiert und als inline style eingefügt */
/* Keine CSS-basierte Gradient-Definition mehr nötig */

/* ================================
   Fine Grain Texture (l + hero only)
   ================================ */

/* Grain Layer für Small (TEST - coarse grain) */
.colordot--style-circle-2.colordot--size-s .colordot__base::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  filter: url(#colordot-grain-coarse);
  mix-blend-mode: multiply;
  opacity: 0.3; /* TEST: Try 0.2, 0.3, 0.4 */
  pointer-events: none;
  z-index: 2;
}

/* Grain Layer für Medium (TEST - coarse grain) */
.colordot--style-circle-2.colordot--size-m .colordot__base::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  filter: url(#colordot-grain-coarse);
  mix-blend-mode: multiply;
  opacity: 0.4; /* TEST: Try 0.2, 0.3, 0.4 */
  pointer-events: none;
  z-index: 2;
}

/* Grain Layer für Large */
.colordot--style-circle-2.colordot--size-l .colordot__base::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  filter: url(#colordot-grain-fine);
  mix-blend-mode: multiply;
  opacity: var(--circle2-grain-opacity);
  pointer-events: none;
  z-index: 2;
}

/* Grain Layer für Hero */
.colordot--style-circle-2.colordot--hero .colordot__base::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  filter: url(#colordot-grain-fine);
  mix-blend-mode: multiply;
  opacity: var(--circle2-grain-opacity);
  pointer-events: none;
  z-index: 2;
}

/* ================================
   onmousedown Effect - Reveal Base Color
   ================================ */

/* Fade out gradient on mousedown to reveal flat color underneath */
.colordot--style-circle-2:active .colordot__gradient,
.colordot--style-circle-2 .colordot__gradient:active {
  opacity: 0;
}

/* No transition on base needed - it's always flat color */

/* ================================
   SVG Grain Filter
   ================================ */

/* Fine Grain Filter wird via PHP in den Head eingefügt wenn circle-2 verwendet wird */

/* ================================
   Dark Mode
   ================================ */

@media (prefers-color-scheme: dark) {
  .colordot--style-circle-2 .colordot__base {
    /* Shadows bleiben größenabhängig, werden nur minimal verstärkt */
  }
  
  .colordot--style-circle-2.colordot--size-s .colordot__base {
    box-shadow: -4px 4px 5px rgba(0, 0, 0, 0.33); /* Dark mode: slightly stronger */
  }
  
  .colordot--style-circle-2.colordot--size-m .colordot__base {
    box-shadow: -6px 6px 8px rgba(0, 0, 0, 0.5);
  }
  
  .colordot--style-circle-2.colordot--size-l .colordot__base {
    box-shadow: -12px 12px 16px rgba(0, 0, 0, 0.5);
  }
  
  .colordot--style-circle-2.colordot--hero .colordot__base {
    box-shadow: -14px 14px 19px rgba(0, 0, 0, 0.5);
  }
}

/* ================================
   OKLCH Fallback
   ================================ */

@supports not (background: oklch(0.5 0.1 120)) {
  .colordot--style-circle-2 .colordot__base {
    /* Falls back to inline background hex from PHP */
    background: var(--colordot-hex-fallback, #ccc) !important;
  }
  
  .colordot--style-circle-2 .colordot__base::before {
    display: none;
  }
}

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

@media print {
  .colordot--style-circle-2 .colordot__base::before {
    /* Grain kann auf Papier komisch aussehen */
    opacity: 0.2;
  }
  
  .colordot--style-circle-2 .colordot__base {
    box-shadow: none;
    border: 1px solid oklch(50% 0 0);
  }
}