/* ==========================================================================
   Frankenstein — The Gap Section
   Background animation styles (dead-end lines with labels)
   ========================================================================== */

/* ------- Gap section overrides ------- */
.gap-section {
  overflow: hidden;
}

.gap-section .section-inner {
  max-width: 640px;
  z-index: 2;
}

/* ------- Copy entrance animations ------- */
.gap-section .gap-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 32px 0;
  display: block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .9s ease .05s, transform .9s ease .05s;
}

.gap-section .gap-h2 {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0 0 40px 0;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1s ease .15s, transform 1s ease .15s;
}

.gap-section .gap-body p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(15px, 1.1vw, 16px);
  line-height: 1.7;
  color: rgba(232, 228, 220, 0.70);
  margin: 0 0 20px 0;
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1s ease, transform 1s ease;
  max-width: none;
}

.gap-section .gap-body p:last-child {
  margin-bottom: 0;
}

.gap-section .gap-body p:nth-child(1) { transition-delay: .28s; }
.gap-section .gap-body p:nth-child(2) { transition-delay: .40s; }
.gap-section .gap-body p:nth-child(3) { transition-delay: .52s; }

.gap-section.gap-visible .gap-eyebrow,
.gap-section.gap-visible .gap-h2,
.gap-section.gap-visible .gap-body p {
  opacity: 1;
  transform: translateY(0);
}

/* ------- Background animation layer ------- */
.gap-bg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.gap-bg-layer svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* SVG primitives rendered per spawn */
.gap-spawn {
  will-change: opacity;
}

.gap-spawn line,
.gap-spawn polyline,
.gap-spawn path {
  fill: none;
  stroke: rgba(232, 228, 220, 1);
  stroke-width: 0.75;
  vector-effect: non-scaling-stroke;
  stroke-linecap: butt;
}

.gap-spawn text {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  fill: rgba(232, 228, 220, 1);
  letter-spacing: 0.04em;
}

.gap-spawn .gap-x-mark {
  stroke-width: 0.9;
}

.gap-spawn .gap-arrow {
  stroke-width: 0.75;
}

/* Mobile tweaks */
@media (max-width: 767px) {
  .gap-section {
    padding: 96px 20px;
  }
  .gap-spawn text {
    font-size: 9px;
  }
  .gap-section .gap-h2 {
    font-size: clamp(26px, 7vw, 34px);
  }
}

/* Reduced motion — static fallback */
@media (prefers-reduced-motion: reduce) {
  .gap-section .gap-eyebrow,
  .gap-section .gap-h2,
  .gap-section .gap-body p {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}