/* ============================================================
   NeuAnalytics 2026, Geometric Pattern System
   Forward Arrow Triad, Brand Guide v3.0 Section 08
   ============================================================ */

/* ---- Forward Arrow SVG Pattern ---- */
/* The Forward Arrow (extracted from the logo's negative space) as a repeating
   geometric pattern. Arrows alternate direction in 2x2 blocks creating a
   houndstooth-inspired pattern. Opacity gradient from center to edges. */

.pattern-arrows {
  position: relative;
}

.pattern-arrows::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M15 5 L25 15 L15 25 Z' fill='%230498FE' opacity='0.06'/%3E%3Cpath d='M45 5 L35 15 L45 25 Z' fill='%230498FE' opacity='0.04'/%3E%3Cpath d='M15 35 L25 45 L15 55 Z' fill='%230498FE' opacity='0.04'/%3E%3Cpath d='M45 35 L35 45 L45 55 Z' fill='%230498FE' opacity='0.06'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

.pattern-arrows > * {
  position: relative;
  z-index: 1;
}

/* Pattern intensity variations */
.pattern-arrows--subtle::before {
  opacity: 0.5;
}

.pattern-arrows--medium::before {
  opacity: 0.75;
}

.pattern-arrows--strong::before {
  opacity: 1;
}

/* ---- Gradient Background Sections ---- */
.bg-gradient-primary {
  background: var(--gradient-primary);
}

.bg-gradient-tech {
  background: var(--gradient-tech);
}

.bg-gradient-dark {
  background: var(--gradient-dark);
}

.bg-midnight {
  background-color: var(--midnight);
}

.bg-deep-navy {
  background-color: var(--deep-navy);
}

.bg-ice {
  background-color: var(--ice);
}

/* ---- Section backgrounds with pattern ---- */
.section-dark {
  background-color: var(--bg-primary);
  position: relative;
}

.section-alt {
  background-color: var(--bg-secondary);
  position: relative;
}

/* Section hero, no pattern overlay (Concept D: clean & minimal) */
.section-hero {
  position: relative;
  overflow: hidden;
}

/* ---- Decorative gradient line ---- */
/* Brand Guide v3.0 Section 21, Gradient Accent Line System */
.gradient-line {
  height: 2px;
  background: var(--gradient-primary);
  border: none;
  margin: var(--space-12) 0;
}

.gradient-line--tech {
  background: var(--gradient-tech);
}

.gradient-line--thin {
  height: 1px;
}

.gradient-line--top {
  margin-bottom: var(--space-8);
  margin-top: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(4, 152, 254, 0.30) 15%,
    rgba(4, 152, 254, 1.00) 35%,
    rgba(4, 152, 254, 1.00) 65%,
    rgba(4, 152, 254, 0.30) 85%,
    transparent 100%);
}

/* ---- Decorative floating arrows (for hero/feature sections) ---- */
.floating-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 20px solid var(--neu-blue);
  opacity: 0.08;
  transform: rotate(-90deg);
  pointer-events: none;
}

.floating-arrow--lg {
  border-left-width: 20px;
  border-right-width: 20px;
  border-bottom-width: 32px;
}

.floating-arrow--sm {
  border-left-width: 8px;
  border-right-width: 8px;
  border-bottom-width: 14px;
}

/* ---- Light theme pattern adjustments ---- */
[data-theme="light"] .pattern-arrows::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M15 5 L25 15 L15 25 Z' fill='%230498FE' opacity='0.04'/%3E%3Cpath d='M45 5 L35 15 L45 25 Z' fill='%230498FE' opacity='0.025'/%3E%3Cpath d='M15 35 L25 45 L15 55 Z' fill='%230498FE' opacity='0.025'/%3E%3Cpath d='M45 35 L35 45 L45 55 Z' fill='%230498FE' opacity='0.04'/%3E%3C/svg%3E");
}

[data-theme="light"] .section-hero {
  background: linear-gradient(135deg, var(--deep-navy), var(--midnight));
}

[data-theme="light"] .section-alt {
  background-color: var(--ice);
}