/* CPS Generated Patterns & Utilities */

/* Subtle dot grid pattern for sections */
.pattern-dots {
  background-image: radial-gradient(circle, rgba(8, 33, 63, .06) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Brand pattern tile for section backgrounds */
.pattern-brand {
  background-image: url('/assets/img/brand-pattern.jpg');
  background-size: 624px;
}

.pattern-brand-dark {
  background-image: url('/assets/img/brand-pattern.jpg');
  background-size: 624px;
  background-color: var(--cps-navy);
}

/* Gradient accent bar */
.accent-bar {
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: var(--cps-teal);
}

.accent-bar-gold {
  background: var(--cps-gold);
}

/* Teal gradient background */
.bg-gradient-teal {
  background: linear-gradient(135deg, var(--cps-teal) 0%, var(--cps-teal-700) 100%);
}

/* Navy gradient background */
.bg-gradient-navy {
  background: linear-gradient(135deg, var(--cps-navy) 0%, var(--cps-navy-900) 100%);
}

/* Soft glow behind elements */
.glow-teal {
  position: relative;
}

.glow-teal::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, rgba(24, 167, 167, .18) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}

/* Micro-interaction for links */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  transition: gap .2s ease;
}

.link-arrow:hover {
  gap: 10px;
}

/* Scroll hint animation */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.scroll-hint {
  animation: bounce 2s ease-in-out infinite;
}