/**
 * TRACE master viewport canvas — mesh, copper rays, grid, grain.
 * Linked site-wide; product intro zones opt out via .canvas-intro-shield.
 */
:root {
  /* Trough: same solid as .site-header base (rgb(16, 25, 42)) */
  --viewport: #10192a;
  --mesh-base-trough: #10192a;
  /* Peak: lighter navy wash (previous pulse read) */
  --mesh-base-peak: #1a2e48;
  --mesh-copper-alpha: 0.08;
  --mesh-teal-alpha: 0.06;
}

@property --mesh-base {
  syntax: '<color>';
  inherits: false;
  initial-value: #10192a;
}

@property --mesh-copper-alpha {
  syntax: '<number>';
  inherits: false;
  initial-value: 0.08;
}

@property --mesh-teal-alpha {
  syntax: '<number>';
  inherits: false;
  initial-value: 0.06;
}

/* Viewport trough when canvas layers are absent (no-JS / pre-paint) */
html {
  background-color: var(--viewport, #10192a);
}

/* Let fixed canvas layers supply the viewport color */
body:has(.mesh-bg) {
  background: transparent !important;
  background-color: transparent !important;
}

main,
.wrap,
.shell {
  position: relative;
  z-index: 1;
}

/* Slow breathe: base navy + mesh alphas (no size/opacity jumps) */
@keyframes mesh-pulse {
  0%, 100% {
    --mesh-base: #10192a;
    --mesh-copper-alpha: 0.04;
    --mesh-teal-alpha: 0.028;
  }
  50% {
    --mesh-base: #1a2e48;
    --mesh-copper-alpha: 0.12;
    --mesh-teal-alpha: 0.09;
  }
}

.mesh-bg {
  position: fixed;
  inset: 0;
  z-index: -4;
  background-color: var(--mesh-base, var(--viewport, #10192a));
  background-image:
    radial-gradient(ellipse 85% 70% at 8% 12%, rgba(196, 121, 95, var(--mesh-copper-alpha)) 0%, transparent 58%),
    radial-gradient(ellipse 75% 65% at 92% 88%, rgba(25, 168, 207, var(--mesh-teal-alpha)) 0%, transparent 55%),
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(0, 0, 0, 0.32) 0%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%;
  animation: mesh-pulse 18s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .mesh-bg {
    animation: none;
    --mesh-base: var(--viewport, #10192a);
    --mesh-copper-alpha: 0.08;
    --mesh-teal-alpha: 0.06;
  }
}

.canvas-rays {
  position: fixed;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 78% 62% at 50% 58%, transparent 12%, black 78%);
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 58%, transparent 12%, black 78%);
}

.canvas-rays line {
  stroke-width: 1.25;
}

.grid-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 64px 64px;
}

.canvas-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Full-page bands: mesh + rays show through (cards keep their own surfaces) */
.section-band,
.section-band--soft,
.section-band--base,
.section-band--glow {
  background: transparent;
}

.section-band--base::before,
.section-band--soft::before,
.section-band--glow::before {
  display: none;
}

/* Intro gate: own full-viewport backdrop (no fixed canvas bleed) */
.intro-gate,
.canvas-intro-shield {
  position: relative;
  z-index: 2;
  isolation: isolate;
}

/* Section accent logo — consistent sizing (engage, command, about, contact) */
.trace-section-logo {
  display: block;
  margin: 0 auto clamp(0.75rem, 2vw, 1rem);
  padding: 0;
  line-height: 0;
  text-align: center;
}
.trace-section-logo img {
  display: block;
  height: clamp(2rem, 4.5vw, 2.75rem);
  width: auto;
  margin-inline: auto;
  object-fit: contain;
}
#vibe-check .trace-section-logo {
  margin-top: 0;
  margin-bottom: 0;
}
.about-model > .trace-section-logo {
  margin-bottom: clamp(1rem, 2.5vw, 1.35rem);
}

/* Chrome: static overlays only — master canvas does not show through footer */
.site-footer {
  position: relative;
  z-index: 10;
  isolation: isolate;
  background-color: var(--viewport, #10192a);
}