/* ================================================
   ORGANIC — biotech/ecotech "living" layer: wavy section
   seams, ambient always-on gradient drift (cheap CSS
   alternative to the WebGL fluid sim, used on pages that
   don't carry the full hero showcase), and bioluminescent
   glow for the elements meant to draw the eye.
   Loaded on every page alongside the other stylesheets.
   ================================================ */

/* --- Organic wave divider (SVG), used at dark→light section seams --- */
.nc-wave-divider {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3;
  line-height: 0; pointer-events: none;
}
.nc-wave-divider svg { display: block; width: 100%; height: 64px; }
.nc-wave-divider path { fill: var(--color-surface); }

/* --- Ambient gradient drift — always subtly moving, no interaction needed.
   Host element needs position:relative + overflow:hidden (.nc-ambient-host). --- */
/* z-index:0 (not just position:relative) is required here — without an
   explicit z-index, position:relative does NOT create a new stacking
   context, so the z-index:-1 child below would escape this element
   entirely and paint behind the page's own body background instead of
   just behind this host's content. */
.nc-ambient-host { position: relative; z-index: 0; overflow: hidden; }
.nc-ambient-bg {
  /* z-index:-1 (not 0) so it paints behind the host's normal-flow,
     non-positioned content without needing to touch that content's CSS —
     a positioned z-index:0 sibling would otherwise paint ON TOP of
     static in-flow content per the CSS stacking-order spec. */
  position: absolute; inset: -15%; z-index: -1; pointer-events: none;
  /* Explicit circle radii (not the "farthest-corner" default) — on a wide
     hero section the default sizing spreads the color so thin across the
     whole element that, combined with blur + opacity, it becomes invisible. */
  background:
    radial-gradient(circle 420px at 28% 38%, var(--bio-violet-400) 0%, transparent 70%),
    radial-gradient(circle 380px at 76% 62%, var(--bio-green-400) 0%, transparent 70%);
  filter: blur(50px);
  opacity: 0.55;
  animation: nc-drift 20s ease-in-out infinite;
}
@keyframes nc-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(4%, -6%) scale(1.08); }
  66% { transform: translate(-5%, 4%) scale(1.03); }
}

/* --- Bioluminescent glow, used sparingly: primary CTAs + the one
   package card meant to draw the eye — not applied to every card.
   Targets existing button classes directly (including .svc-pkg-cta,
   which home.js/services.js render from data/services.json) so no
   markup/template changes are needed to opt them in. --- */
.home-btn-primary, .nc-cta, .svc-pkg-cta, .contact-submit, .home-cta-btn, .svc-cta-btn--primary {
  transition: box-shadow var(--duration-base) var(--ease-out), background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.home-btn-primary:hover, .nc-cta:hover, .svc-pkg-cta:hover, .contact-submit:hover, .home-cta-btn:hover, .svc-cta-btn--primary:hover {
  box-shadow: 0 0 24px 4px oklch(58% 0.27 316 / 0.45), 0 0 48px 14px oklch(69% 0.26 139 / 0.22);
}

/* The featured package card (svc-pkg-card--featured, rendered by
   home.js/services.js from data/services.json) gets the pulse directly —
   no template change needed, this class already exists on it. */
.svc-pkg-card--featured {
  animation: nc-pulse-glow 4.5s ease-in-out infinite;
  /* z-index:0 (not just position:relative, already set on .svc-pkg-card)
     so the faceted corner below is contained to THIS card's own stacking
     context instead of escaping to a wider one — same fix as
     .nc-ambient-host above. */
  z-index: 0;
}
/* Faceted "cut ice" corner — the cold-climate answer to soft/organic
   biotech cell patterns: a single sharp facet instead of a blobby
   texture, echoing hexagonal ice-crystal geometry (design doc §8.3)
   without needing a full tessellating pattern that risks visible seams. */
.svc-pkg-card--featured::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, var(--bio-green-400) 0%, var(--glacial-blue-500) 55%, var(--bio-violet-400) 100%);
  clip-path: polygon(100% 0%, 100% 100%, 28% 0%);
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
}

@keyframes nc-pulse-glow {
  0%, 100% { box-shadow: 0 0 18px 2px oklch(58% 0.27 316 / 0.22); }
  50% { box-shadow: 0 0 34px 8px oklch(58% 0.27 316 / 0.38), 0 0 50px 14px oklch(69% 0.26 139 / 0.18); }
}
.nc-glow-pulse { animation: nc-pulse-glow 4.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .nc-ambient-bg { animation: none; }
  .nc-glow-pulse { animation: none; box-shadow: 0 0 18px 2px oklch(58% 0.27 316 / 0.22); }
}