/* ========== Section Backgrounds — Aurora Mesh + Circuit System ========== */

/* ═══ ① Ticker → Data Stream ═══ */
.ticker-section {
  background: linear-gradient(180deg, var(--bg-secondary), var(--bg-tertiary));
  position: relative;
  overflow: hidden;
}

.ticker-stream {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ticker-stream__line {
  position: absolute;
  height: 1px;
  width: 40%;
  border-radius: 1px;
  opacity: 0;
  animation: lcStreamFlow linear infinite;
}

.ticker-stream__line--1 { top: 15%; animation-duration: 8s; animation-delay: 0s; }
.ticker-stream__line--2 { top: 35%; animation-duration: 12s; animation-delay: -3s; }
.ticker-stream__line--3 { top: 55%; animation-duration: 10s; animation-delay: -6s; }
.ticker-stream__line--4 { top: 75%; animation-duration: 14s; animation-delay: -2s; }
.ticker-stream__line--5 { top: 25%; animation-duration: 9s; animation-delay: -5s; }
.ticker-stream__line--6 { top: 65%; animation-duration: 11s; animation-delay: -8s; }

.ticker-stream__line--1 { background: linear-gradient(90deg, transparent, rgba(var(--accent-primary-rgb), 0.5), transparent); }
.ticker-stream__line--2 { background: linear-gradient(90deg, transparent, rgba(var(--accent-sky-rgb), 0.4), transparent); }
.ticker-stream__line--3 { background: linear-gradient(90deg, transparent, rgba(var(--accent-violet-rgb), 0.35), transparent); }
.ticker-stream__line--4 { background: linear-gradient(90deg, transparent, rgba(var(--accent-emerald-rgb), 0.3), transparent); }
.ticker-stream__line--5 { background: linear-gradient(90deg, transparent, rgba(var(--accent-cyan-rgb), 0.3), transparent); }
.ticker-stream__line--6 { background: linear-gradient(90deg, transparent, rgba(var(--accent-primary-rgb), 0.4), transparent); }

.ticker-section > .ticker-label,
.ticker-section > .ticker {
  position: relative;
  z-index: 1;
}

/* ═══ ② Metrics → Circuit Backbone ═══ */
.metrics-grid {
  position: relative;
}

.metrics-grid::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(var(--accent-primary-rgb), 0.15) 15%,
    rgba(var(--accent-sky-rgb), 0.12) 50%,
    rgba(var(--accent-primary-rgb), 0.15) 85%,
    transparent);
  z-index: 0;
}

.metrics-grid::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 8px;
  transform: translateY(-50%);
  background-image:
    radial-gradient(circle at 16.5%, var(--accent-primary) 2px, transparent 3px),
    radial-gradient(circle at 50%, var(--accent-sky) 2px, transparent 3px),
    radial-gradient(circle at 83.5%, var(--accent-primary) 2px, transparent 3px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.5;
  z-index: 0;
}

.metric {
  position: relative;
  z-index: 1;
}

.metric::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: clamp(6rem, 14vw, 12rem);
  font-weight: var(--weight-black);
  color: var(--text-primary);
  opacity: 0.025;
  white-space: nowrap;
  pointer-events: none;
  z-index: -1;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.metric:nth-child(1)::after { content: '10+'; }
.metric:nth-child(3)::after { content: '100%'; }
.metric:nth-child(5)::after { content: '0'; }

/* ═══ ③ Abilities → Accent Zones ═══ */
#abilities {
  position: relative;
  overflow: hidden;
}

#abilities::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 30% 40% at 20% 30%, rgba(var(--accent-emerald-rgb), 0.06), transparent 60%),
    radial-gradient(ellipse 25% 35% at 75% 25%, rgba(var(--accent-sky-rgb), 0.05), transparent 60%),
    radial-gradient(ellipse 25% 35% at 80% 65%, rgba(var(--accent-violet-rgb), 0.05), transparent 60%),
    radial-gradient(ellipse 35% 30% at 30% 75%, rgba(var(--accent-cyan-rgb), 0.04), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

#abilities::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(var(--accent-primary-rgb), 0.04) 1px, transparent 1.5px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent 90%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

#abilities > .container {
  position: relative;
  z-index: 1;
}

/* ═══ ④ How-It-Works → Blueprint Process ═══ */
.section--flow {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary));
}

.section--flow::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--accent-sky-rgb), 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-sky-rgb), 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black, transparent 95%);
  pointer-events: none;
  z-index: 0;
  animation: lcBlueprintShift 60s linear infinite;
}

.section--flow::after {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(
    180deg,
    rgba(var(--accent-primary-rgb), 0.12) 0,
    rgba(var(--accent-primary-rgb), 0.12) 8px,
    transparent 8px,
    transparent 20px
  );
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

.section--flow > .container {
  position: relative;
  z-index: 1;
}

.flow-item {
  position: relative;
}

.flow-item::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: clamp(8rem, 18vw, 16rem);
  font-weight: var(--weight-black);
  color: var(--text-primary);
  opacity: 0.02;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
  letter-spacing: var(--tracking-tight);
}

.flow-item:not(.flow-item--right)::before {
  right: -2%;
  text-align: right;
}

.flow-item--right::before {
  left: -2%;
}

.flow-item:nth-child(1)::before { content: '01'; }
.flow-item:nth-child(2)::before { content: '02'; }
.flow-item:nth-child(3)::before { content: '03'; }
.flow-item:nth-child(4)::before { content: '04'; }

.flow-item__visual,
.flow-item__body {
  position: relative;
  z-index: 1;
}

/* ═══ ⑤ Showcase → Terminal Atmosphere ═══ */
#showcase {
  position: relative;
  overflow: hidden;
}

#showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 20px,
    rgba(var(--accent-primary-rgb), 0.025) 20px,
    rgba(var(--accent-primary-rgb), 0.025) 22px,
    transparent 22px,
    transparent 38px,
    rgba(var(--accent-sky-rgb), 0.02) 38px,
    rgba(var(--accent-sky-rgb), 0.02) 39px,
    transparent 39px,
    transparent 55px,
    rgba(var(--accent-primary-rgb), 0.015) 55px,
    rgba(var(--accent-primary-rgb), 0.015) 58px
  );
  mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, black, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, black, transparent 95%);
  pointer-events: none;
  z-index: 0;
}

#showcase::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 120px;
  background: linear-gradient(180deg,
    rgba(var(--accent-primary-rgb), 0.04) 0%,
    transparent 100%);
  pointer-events: none;
  z-index: 0;
  animation: lcScanline 8s ease-in-out infinite;
}

#showcase > .container {
  position: relative;
  z-index: 1;
}

/* ═══ ⑥ CTA → Beacon Pulse ═══ */
.cta-section--wide {
  position: relative;
  overflow: hidden;
}

.cta-section--wide::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(var(--accent-primary-rgb), 0.08) 0%,
    rgba(var(--accent-primary-rgb), 0.03) 30%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: lcBeaconGlow 4s ease-in-out infinite;
}

.cta-band__pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid rgba(var(--accent-primary-rgb), 0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: lcBeaconPulse 4s ease-out infinite;
}

.cta-band__pulse--2 { animation-delay: 1.3s; }
.cta-band__pulse--3 { animation-delay: 2.6s; }

/* ═══ Light Theme Adjustments ═══ */
.light .ticker-section {
  background: linear-gradient(180deg, var(--bg-secondary), var(--bg-tertiary));
}

.light .section--flow {
  background: linear-gradient(180deg, var(--bg-tertiary), var(--bg-secondary));
}

.light .metric::after {
  opacity: 0.03;
}

.light .flow-item::before {
  opacity: 0.03;
}

/* ═══ Reduced Motion ═══ */
@media (prefers-reduced-motion: reduce) {
  .ticker-stream__line,
  .section--flow::before,
  #showcase::after,
  .cta-section--wide::before,
  .cta-band__pulse {
    animation: none !important;
  }
  .ticker-stream__line { opacity: 0.3; }
  .cta-band__pulse { display: none; }
}