/* ============================================================
   FIRSTLINCOLN — Sub-Banner System
   Dark, atmospheric sub-page banners with unique variants
   Inspired by cbwebsitedesign.co.uk & pluralsight.com
   ============================================================ */

/* ============================================================
   BASE SUB-BANNER
   ============================================================ */

.sub-banner {
  position: relative;
  background: #0d1117;
  overflow: hidden;
  padding: 180px 0 80px;
  min-height: 380px;
  display: flex;
  align-items: center;
}

.sub-banner__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Ambient gradient orbs — shared across all variants */
.sub-banner__bg::before,
.sub-banner__bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.sub-banner__bg::before {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(223, 35, 19, 0.08), transparent 70%);
  top: -150px;
  right: -100px;
}

.sub-banner__bg::after {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 122, 255, 0.05), transparent 70%);
  bottom: -120px;
  left: -80px;
}

/* Decorative layer — each variant customises this */
.sub-banner__decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Content */
.sub-banner .auto-container {
  position: relative;
  z-index: 2;
}

.sub-banner__content {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}

/* Breadcrumb */
.sub-banner__breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.sub-banner__breadcrumb a {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color 0.3s ease;
}

.sub-banner__breadcrumb a:hover {
  color: #fff;
}

.sub-banner__breadcrumb .sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 10px;
}

.sub-banner__breadcrumb .current {
  color: var(--theme-color1, #df2313);
}

/* Title */
.sub-banner__title {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 18px;
  letter-spacing: -0.5px;
}

.sub-banner__title .accent {
  background: linear-gradient(135deg, #df2313, #ff6b4a, #df2313);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 6s ease infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 200% center; }
}

/* Description */
.sub-banner__desc {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.5);
  max-width: 600px;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 991px) {
  .sub-banner {
    padding: 160px 0 60px;
    min-height: 320px;
  }
}

@media (max-width: 767px) {
  .sub-banner {
    padding: 130px 0 50px;
    min-height: 280px;
  }
  .sub-banner__desc {
    font-size: 15px;
  }
}


/* ============================================================
   VARIANT 1: GRADIENT ORBS (About page)
   Soft, large gradient blobs with slow drift animation
   ============================================================ */

.sub-banner--orbs .sub-banner__decor::before {
  content: '';
  position: absolute;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 35, 19, 0.12), transparent 70%);
  top: 10%;
  left: 15%;
  filter: blur(60px);
  animation: orbDrift1 12s ease-in-out infinite;
}

.sub-banner--orbs .sub-banner__decor::after {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 140, 255, 0.08), transparent 70%);
  bottom: 5%;
  right: 20%;
  filter: blur(50px);
  animation: orbDrift2 10s ease-in-out infinite;
}

@keyframes orbDrift1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -20px); }
}

@keyframes orbDrift2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-25px, 15px); }
}


/* ============================================================
   VARIANT 2: PULSE RINGS (Contact page)
   Concentric pulsing circles centered behind heading
   ============================================================ */

.sub-banner--rings .sub-banner__decor::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 1px solid rgba(223, 35, 19, 0.1);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: pulseRing 4s ease-out infinite;
}

.sub-banner--rings .sub-banner__decor::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 1px solid rgba(223, 35, 19, 0.08);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: pulseRing 4s ease-out infinite 1.5s;
}

@keyframes pulseRing {
  0% {
    width: 100px;
    height: 100px;
    opacity: 0.6;
  }
  100% {
    width: 700px;
    height: 700px;
    opacity: 0;
  }
}


/* ============================================================
   VARIANT 3: NEURAL DOTS (AI page)
   Scattered dots with subtle glow — neural network feel
   ============================================================ */

.sub-banner--neural {
  background: linear-gradient(160deg, #0d1117 0%, #0f1520 50%, #0d1117 100%);
}

.sub-banner--neural .sub-banner__decor {
  background-image:
    radial-gradient(circle, rgba(223, 35, 19, 0.4) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 80px 80px, 40px 40px;
  background-position: 0 0, 20px 20px;
  opacity: 0.5;
}

.sub-banner--neural .sub-banner__decor::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 35, 19, 0.15), transparent 70%);
  top: 30%;
  left: 25%;
  filter: blur(40px);
  animation: neuralPulse 3s ease-in-out infinite;
}

.sub-banner--neural .sub-banner__decor::after {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 180, 255, 0.1), transparent 70%);
  bottom: 20%;
  right: 30%;
  filter: blur(40px);
  animation: neuralPulse 3s ease-in-out infinite 1.5s;
}

@keyframes neuralPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.15); }
}


/* ============================================================
   VARIANT 4: CLOUD LAYERS (Cloud Solutions page)
   Horizontal layered gradients — cloud strata effect
   ============================================================ */

.sub-banner--cloud {
  background: linear-gradient(180deg, #0d1117 0%, #0f1825 40%, #0d1420 70%, #0d1117 100%);
}

.sub-banner--cloud .sub-banner__decor::before {
  content: '';
  position: absolute;
  width: 120%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 160, 255, 0.15), rgba(223, 35, 19, 0.1), transparent);
  top: 35%;
  left: -10%;
  box-shadow: 0 0 30px rgba(0, 160, 255, 0.08);
  animation: cloudDrift 8s ease-in-out infinite;
}

.sub-banner--cloud .sub-banner__decor::after {
  content: '';
  position: absolute;
  width: 120%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(223, 35, 19, 0.12), rgba(100, 60, 255, 0.08), transparent);
  top: 65%;
  left: -10%;
  box-shadow: 0 0 25px rgba(223, 35, 19, 0.06);
  animation: cloudDrift 8s ease-in-out infinite 3s;
}

@keyframes cloudDrift {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  50% { transform: translateX(40px); opacity: 1; }
}


/* ============================================================
   VARIANT 5: SHIELD GRID (Cybersecurity page)
   Diagonal crosshatch pattern — protection/grid feel
   ============================================================ */

.sub-banner--shield {
  background: linear-gradient(160deg, #0d1117 0%, #0d1520 50%, #0d1117 100%);
}

.sub-banner--shield .sub-banner__decor {
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(223, 35, 19, 0.03) 40px, rgba(223, 35, 19, 0.03) 41px),
    repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(255, 255, 255, 0.015) 40px, rgba(255, 255, 255, 0.015) 41px);
}

.sub-banner--shield .sub-banner__decor::before {
  content: '';
  position: absolute;
  width: 160px;
  height: 160px;
  border: 2px solid rgba(223, 35, 19, 0.08);
  border-radius: 12px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  animation: shieldPulse 5s ease-in-out infinite;
}

.sub-banner--shield .sub-banner__decor::after {
  content: '';
  position: absolute;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(223, 35, 19, 0.04);
  border-radius: 16px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  animation: shieldPulse 5s ease-in-out infinite 2s;
}

@keyframes shieldPulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) rotate(45deg) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1.08); }
}


/* ============================================================
   VARIANT 6: DATA BARS (Data Analytics & BI page)
   Vertical bar chart silhouettes in background
   ============================================================ */

.sub-banner--bars .sub-banner__decor {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  padding: 0 10%;
  opacity: 0.08;
}

.sub-banner--bars .sub-banner__decor::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 8%;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(0deg, rgba(223, 35, 19, 0.08) 30%, transparent 30%) 0% 100% / 3% 100% no-repeat,
    linear-gradient(0deg, rgba(223, 35, 19, 0.06) 55%, transparent 55%) 5% 100% / 3% 100% no-repeat,
    linear-gradient(0deg, rgba(223, 35, 19, 0.1) 40%, transparent 40%) 10% 100% / 3% 100% no-repeat,
    linear-gradient(0deg, rgba(0, 140, 255, 0.06) 70%, transparent 70%) 15% 100% / 3% 100% no-repeat,
    linear-gradient(0deg, rgba(223, 35, 19, 0.05) 45%, transparent 45%) 20% 100% / 3% 100% no-repeat,
    linear-gradient(0deg, rgba(0, 140, 255, 0.08) 60%, transparent 60%) 25% 100% / 3% 100% no-repeat,
    linear-gradient(0deg, rgba(223, 35, 19, 0.07) 35%, transparent 35%) 30% 100% / 3% 100% no-repeat,
    linear-gradient(0deg, rgba(0, 140, 255, 0.05) 80%, transparent 80%) 35% 100% / 3% 100% no-repeat,
    linear-gradient(0deg, rgba(223, 35, 19, 0.09) 50%, transparent 50%) 40% 100% / 3% 100% no-repeat,
    linear-gradient(0deg, rgba(0, 140, 255, 0.07) 65%, transparent 65%) 45% 100% / 3% 100% no-repeat,
    linear-gradient(0deg, rgba(223, 35, 19, 0.06) 42%, transparent 42%) 50% 100% / 3% 100% no-repeat,
    linear-gradient(0deg, rgba(0, 140, 255, 0.09) 75%, transparent 75%) 55% 100% / 3% 100% no-repeat,
    linear-gradient(0deg, rgba(223, 35, 19, 0.08) 38%, transparent 38%) 60% 100% / 3% 100% no-repeat,
    linear-gradient(0deg, rgba(0, 140, 255, 0.06) 58%, transparent 58%) 65% 100% / 3% 100% no-repeat,
    linear-gradient(0deg, rgba(223, 35, 19, 0.1) 48%, transparent 48%) 70% 100% / 3% 100% no-repeat,
    linear-gradient(0deg, rgba(0, 140, 255, 0.08) 85%, transparent 85%) 75% 100% / 3% 100% no-repeat,
    linear-gradient(0deg, rgba(223, 35, 19, 0.05) 52%, transparent 52%) 80% 100% / 3% 100% no-repeat,
    linear-gradient(0deg, rgba(0, 140, 255, 0.07) 62%, transparent 62%) 85% 100% / 3% 100% no-repeat,
    linear-gradient(0deg, rgba(223, 35, 19, 0.08) 44%, transparent 44%) 90% 100% / 3% 100% no-repeat;
  animation: barsRise 3s ease-out forwards;
}

@keyframes barsRise {
  0% { opacity: 0; transform: scaleY(0); transform-origin: bottom; }
  100% { opacity: 1; transform: scaleY(1); transform-origin: bottom; }
}


/* ============================================================
   VARIANT 7: PIPELINE FLOW (DevOps page)
   Horizontal flowing dashed lines — CI/CD pipeline feel
   ============================================================ */

.sub-banner--pipeline .sub-banner__decor::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 1px;
  top: 40%;
  left: -50%;
  background: repeating-linear-gradient(90deg,
    rgba(223, 35, 19, 0.2) 0px,
    rgba(223, 35, 19, 0.2) 20px,
    transparent 20px,
    transparent 35px
  );
  animation: pipelineFlow 4s linear infinite;
}

.sub-banner--pipeline .sub-banner__decor::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 1px;
  top: 62%;
  left: -50%;
  background: repeating-linear-gradient(90deg,
    rgba(0, 160, 255, 0.15) 0px,
    rgba(0, 160, 255, 0.15) 15px,
    transparent 15px,
    transparent 30px
  );
  animation: pipelineFlow 5s linear infinite 1s;
}

@keyframes pipelineFlow {
  0% { transform: translateX(0); }
  100% { transform: translateX(35px); }
}


/* ============================================================
   VARIANT 8: GRADIENT WAVE (Machine Learning page)
   Wavy gradient band — model training/loss curve feel
   ============================================================ */

.sub-banner--wave {
  background: linear-gradient(170deg, #0d1117 0%, #10141e 50%, #0d1117 100%);
}

.sub-banner--wave .sub-banner__decor::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 150px;
  top: 45%;
  left: -50%;
  background: linear-gradient(90deg,
    transparent,
    rgba(223, 35, 19, 0.06),
    rgba(100, 60, 255, 0.04),
    rgba(0, 180, 255, 0.05),
    rgba(223, 35, 19, 0.06),
    transparent
  );
  border-radius: 50%;
  transform: rotate(-3deg);
  filter: blur(20px);
  animation: waveFloat 8s ease-in-out infinite;
}

.sub-banner--wave .sub-banner__decor::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 100px;
  top: 55%;
  left: -50%;
  background: linear-gradient(90deg,
    transparent,
    rgba(0, 180, 255, 0.04),
    rgba(223, 35, 19, 0.05),
    rgba(100, 60, 255, 0.03),
    transparent
  );
  border-radius: 50%;
  transform: rotate(2deg);
  filter: blur(15px);
  animation: waveFloat 8s ease-in-out infinite 3s;
}

@keyframes waveFloat {
  0%, 100% { transform: translateX(0) rotate(-3deg); }
  50% { transform: translateX(60px) rotate(2deg); }
}


/* ============================================================
   VARIANT 9: CIRCUIT BOARD (Software Delivery page)
   Right-angle trace lines — circuit board pattern
   ============================================================ */

.sub-banner--circuit {
  background: linear-gradient(160deg, #0d1117 0%, #0e1420 50%, #0d1117 100%);
}

.sub-banner--circuit .sub-banner__decor {
  background-image:
    linear-gradient(0deg, rgba(223, 35, 19, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(223, 35, 19, 0.04) 1px, transparent 1px);
  background-size: 50px 50px;
}

.sub-banner--circuit .sub-banner__decor::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(223, 35, 19, 0.35);
  box-shadow:
    50px 50px 0 rgba(0, 140, 255, 0.25),
    150px -50px 0 rgba(223, 35, 19, 0.2),
    250px 100px 0 rgba(100, 60, 255, 0.2),
    -100px 80px 0 rgba(0, 180, 255, 0.2),
    -200px -30px 0 rgba(223, 35, 19, 0.15),
    350px 30px 0 rgba(0, 140, 255, 0.2),
    -50px 150px 0 rgba(100, 60, 255, 0.15);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: circuitBlink 3s ease-in-out infinite;
}

@keyframes circuitBlink {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}


/* ============================================================
   VARIANT 10: CODE BRACKETS (Web & Mobile Dev page)
   Floating < / > bracket decorations
   ============================================================ */

.sub-banner--code .sub-banner__decor::before {
  content: '</>';
  position: absolute;
  font-family: 'Courier New', monospace;
  font-size: 180px;
  font-weight: 700;
  color: rgba(223, 35, 19, 0.03);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  letter-spacing: 20px;
  white-space: nowrap;
}

.sub-banner--code .sub-banner__decor::after {
  content: '{ }';
  position: absolute;
  font-family: 'Courier New', monospace;
  font-size: 120px;
  font-weight: 700;
  color: rgba(0, 140, 255, 0.025);
  top: 25%;
  right: 10%;
  transform: rotate(-8deg);
}


/* ============================================================
   VARIANT 11: SERVICES OVERVIEW (Services listing page)
   Multiple small floating icons feel — kept minimal
   ============================================================ */

.sub-banner--services {
  background: linear-gradient(150deg, #0d1117 0%, #12151f 50%, #0d1117 100%);
}

.sub-banner--services .sub-banner__decor::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(223, 35, 19, 0.06);
  border-radius: 50%;
  top: 50%;
  left: 20%;
  transform: translate(-50%, -50%);
}

.sub-banner--services .sub-banner__decor::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1px solid rgba(0, 140, 255, 0.04);
  border-radius: 50%;
  top: 40%;
  right: 15%;
  transform: translate(50%, -50%);
}