/**
 * RepSkills.ai - Netwrix Brand Grid System
 *
 * Implements the 4-layer grid/gradient visual system from Netwrix brand guidelines:
 * 1. Background color layer
 * 2. Gradient shapes layer (max 3 shapes)
 * 3. Blur layer (background color at 1% opacity with background blur effect)
 * 4. Grid layer on top (stroke matches background, 1-2px weight)
 *
 * Reference: netwrix-brand-cheat-sheet.pdf
 */

/* Grid Container - Apply to elements that need the visual system */
.grid-background {
  position: relative;
  overflow: hidden;
}

/* Layer 1: Background Color */
.grid-background::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-nightwatch);
  z-index: var(--z-base);
}

/* Layer 2: Gradient Shapes */
.grid-gradient-shapes {
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-base) + 1);
  pointer-events: none;
}

.gradient-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.6;
}

.gradient-shape-1 {
  width: 500px;
  height: 500px;
  top: -100px;
  right: -100px;
  background: radial-gradient(circle, var(--color-vigilant-blue) 0%, transparent 70%);
}

.gradient-shape-2 {
  width: 400px;
  height: 400px;
  bottom: -50px;
  left: -50px;
  background: radial-gradient(circle, var(--color-beacon-green) 0%, transparent 70%);
}

.gradient-shape-3 {
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--color-signal-yellow) 0%, transparent 70%);
}

/* Layer 3: Blur Effect */
.grid-blur-layer {
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-base) + 2);
  background-color: rgba(35, 26, 64, 0.01); /* Nightwatch at 1% opacity */
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  pointer-events: none;
}

/* Layer 4: Grid Pattern */
.grid-pattern {
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-base) + 3);
  background-image:
    linear-gradient(var(--color-nightwatch) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-nightwatch) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.3;
  pointer-events: none;
}

/* Micro-grid variant (smaller cells) */
.grid-pattern-micro {
  background-size: 20px 20px;
  opacity: 0.2;
}

/* Content Layer - Must be above all visual layers */
.grid-content {
  position: relative;
  z-index: calc(var(--z-base) + 10);
}

/* Pre-composed Grid Background Utilities */
.bg-grid-dark {
  background-color: var(--color-nightwatch);
  position: relative;
}

.bg-grid-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(252, 250, 245, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(252, 250, 245, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}

.bg-grid-light {
  background-color: var(--color-access-white);
  position: relative;
}

.bg-grid-light::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(35, 26, 64, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 26, 64, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}

/* Gradient Background Variants */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--color-nightwatch) 0%, var(--color-vigilant-blue) 100%);
}

.bg-gradient-success {
  background: linear-gradient(135deg, var(--color-nightwatch) 0%, var(--color-beacon-green) 100%);
}

.bg-gradient-warning {
  background: linear-gradient(135deg, var(--color-nightwatch) 0%, var(--color-signal-yellow) 100%);
}

/* Animated Gradient (subtle movement) */
@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.bg-gradient-animated {
  background: linear-gradient(
    -45deg,
    var(--color-nightwatch),
    var(--color-vigilant-blue),
    var(--color-beacon-green),
    var(--color-nightwatch)
  );
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}