/* ==========================================================================
   DOT PATTERN - GLOBAL
   A reusable component for creating a field of dots that fades out in one direction.

   Usage:
   Add `.dots-base` to a container along with one pattern class:
   - .dots-base .dots-grid      → Creates a classic square grid pattern.
   - .dots-base .dots-staggered → Creates a diagonal/staggered lattice pattern.

   Customization:
   The pattern's appearance is controlled by CSS custom properties.
   These are set on `.dots-base` but can be overridden on any element.

   Masking:
   The fade effect is created by composing two masks via intersection:
   1. A linear-gradient mask to limit the total 'span' of the pattern.
   2. A second linear-gradient to create the 'fade' effect within that span.

   Browser Compatibility:
   - Chromium/Firefox: `mask-composite: intersect`
   - Safari/WebKit:    `-webkit-mask-composite: source-in`

   ==========================================================================
   --dot-angle: Options & Examples
   ==========================================================================
   The `linear-gradient` function's angle can be defined using degrees or
   directional keywords. It defines the direction of both the pattern's strip
   and its fade. The angle starts from the bottom and rotates clockwise.

   Degree Values:
   - 0deg   = bottom → top (upwards)
   - 90deg  = left   → right (rightwards)
   - 180deg = top    → bottom (downwards)
   - 270deg = right  → left (leftwards)
   - 45deg  = bottom-left → top-right (diagonal upwards-right)
   - -45deg = bottom-right → top-left (diagonal upwards-left)

   Directional Keywords:
   Use the `to` keyword followed by a side or corner.
   - `to top`         → Same as 0deg (bottom → top)
   - `to right`       → Same as 90deg (left → right)
   - `to bottom`      → Same as 180deg (top → bottom)
   - `to left`        → Same as 270deg (right → left)
   - `to top right`   → bottom-left → top-right
   - `to bottom left` → top-right → bottom-left

   Note: Degree values offer more precise control for any angle in a full circle.
   ========================================================================== */


/* =========================================
   BASE CLASS
   Holds all shared logic and variables for the patterns.
   This prevents code duplication.
   ========================================= */
.dots-base {
  position: relative;
  overflow: hidden;
}

/* --- Quick Overrides: Copy/Paste this block to override settings per element. --- */
.dots-base {
  --dot-color: var(--primary-light-trans-20); /* Color of the dots (use rgba for opacity) */
  --dot-gap: 36px;                         /* Spacing between dots; smaller = denser */
  --dot-radius: 3px;                       /* Size of the dots (radius) */
  --dot-z: -1;                              /* Z-index for the pattern layer */

  --dot-pattern-span: 40%;                 /* Total length of the dot strip (as % of container) */
  --dot-fade: 50%;                         /* Fade cutoff point (0–100%); 100% = no fade */
  --dot-angle: 90deg;                      /* Direction of the pattern strip and fade */
}

/* All patterns share the same pseudo-element and masking logic */
.dots-base::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: var(--dot-z);

  /* --- MASK: Span Limiter + Directional Fade (shared by all patterns) --- */
  mask-image:
    linear-gradient(var(--dot-angle), #000 0, #000 var(--dot-pattern-span), transparent var(--dot-pattern-span)),
    linear-gradient(var(--dot-angle), #000 var(--dot-fade), transparent);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(var(--dot-angle), #000 0, #000 var(--dot-pattern-span), transparent var(--dot-pattern-span)),
    linear-gradient(var(--dot-angle), #000 var(--dot-fade), transparent);
  -webkit-mask-composite: source-in;
}


/* =========================================
   PATTERN: GRID
   Adds the grid texture to the base.
   Usage: `<div class="dots-base dots-grid"></div>`
   ========================================= */
.dots-grid::before {
  /* --- BACKGROUND: Dot Texture --- */
  background:
    radial-gradient(circle, var(--dot-color) var(--dot-radius),
      transparent calc(var(--dot-radius) + 0.1px))
    0 0 / var(--dot-gap) var(--dot-gap);
}


/* =========================================
   PATTERN: STAGGERED (DIAGONAL)
   Adds the staggered texture to the base.
   Usage: `<div class="dots-base dots-staggered"></div>`
   ========================================= */
.dots-staggered::before {
  /* --- BACKGROUND: Dot Texture --- */
  background:
    radial-gradient(circle, var(--dot-color) var(--dot-radius),
      transparent calc(var(--dot-radius) + 0.1px)) 0 0 / var(--dot-gap) var(--dot-gap),
    radial-gradient(circle, var(--dot-color) var(--dot-radius),
      transparent calc(var(--dot-radius) + 0.1px))
      calc(var(--dot-gap)/2) calc(var(--dot-gap)/2) / var(--dot-gap) var(--dot-gap);
}