/*
  FTN Platform Website — Heritage Layer System (v1.6 Caribbean Executive Identity pass).

  Near-invisible technical-diagram backgrounds — bathymetry, compass roses, survey marks,
  radar/satellite geometry, isobars, broadcast waveforms, editorial grids, guilloché engraving.
  These are not illustrations or hero graphics — they are discovered over time, not advertised.
  One shared mechanism, many page-specific SVGs (authored inline per page, matching the
  homepage's existing hand-drawn motif pattern rather than a new asset-loading approach).

  Every heritage layer is purely decorative: aria-hidden, never carries content, never
  intercepts pointer events, never affects layout (absolutely positioned within a container
  the page already establishes as position:relative + overflow:hidden).
*/

.heritage-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: var(--heritage-opacity);
}

.heritage-layer--on-dark {
  opacity: var(--heritage-opacity-on-dark);
}

.heritage-layer svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Line color: inherits from context. Light surfaces draw in black/graphite; dark surfaces
   draw in white/silver. Each page's inline SVG sets stroke="currentColor" and the container
   sets `color`, so one shared rule works everywhere rather than per-page overrides. */
.heritage-layer {
  color: var(--color-black);
}

.heritage-layer--on-dark {
  color: var(--color-white);
}

/* Reduced-motion respecting: any animated heritage layer (radar sweep, drifting current lines,
   constellation drift, waveform breathing) is opted into motion only when the visitor hasn't
   asked for less of it. Individual page CSS defines the @keyframes; this just gates them. */
@media (prefers-reduced-motion: reduce) {
  .heritage-layer * {
    animation: none !important;
  }
}

/* Subtle, slow, purposeful motion (v1.6 pass) — each one noticed subconsciously, never a
   focal animation. Only active under no-preference; the reduced-motion rule above already
   disables all of these unconditionally. */
@media (prefers-reduced-motion: no-preference) {
  .hl-drift {
    animation: hl-drift 40s ease-in-out infinite;
  }

  .hl-pulse {
    animation: hl-pulse 6s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }

  .hl-twinkle {
    animation: hl-twinkle 5s ease-in-out infinite;
  }

  .hl-twinkle:nth-child(2) { animation-delay: 0.6s; }
  .hl-twinkle:nth-child(3) { animation-delay: 1.4s; }
  .hl-twinkle:nth-child(4) { animation-delay: 2.1s; }

  .hl-sweep {
    animation: hl-sweep 18s ease-in-out infinite;
  }
}

@keyframes hl-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(14px); }
}

@keyframes hl-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.6; }
}

@keyframes hl-twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes hl-sweep {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}