/* Celerity — architectural atmosphere. Load after brand / creative styles.
   Opt in with body.spatial-site; data-spatial-page tunes the light direction.
   All decoration is CSS, static, empty and non-interactive. Scene rendering,
   content layout, navigation and motion controls belong to their own layers. */

body.spatial-site {
  --spatial-bg-indigo: 113, 129, 255;
  --spatial-bg-cyan: 85, 216, 255;
  --spatial-bg-light-x: 88%;
  --spatial-bg-light-y: 16%;
  --spatial-bg-counter-x: 4%;
  --spatial-bg-angle: 150deg;
  --spatial-bg-grid: 72px;
  --spatial-bg-gutter: max(.65rem, calc((100% - 1180px) / 2 - 2rem));
  --spatial-bg-strength: .72;
  isolation: isolate;
  overflow-x: clip;
  background-color: var(--ink, #070a10);
}

/* Different chapters share a palette but have their own light composition. */
body.spatial-site[data-spatial-page="home"] {
  --spatial-bg-light-x: 79%;
  --spatial-bg-light-y: 28%;
  --spatial-bg-strength: .86;
}

body.spatial-site:is([data-spatial-page="solutions"], [data-spatial-page="services"]) {
  --spatial-bg-angle: 120deg;
  --spatial-bg-light-x: 94%;
  --spatial-bg-grid: 64px;
}

body.spatial-site:is([data-spatial-page*="workflow"], [data-spatial-page*="integration"], [data-spatial-page*="crm"]) {
  --spatial-bg-angle: 120deg;
  --spatial-bg-light-y: 6%;
  --spatial-bg-grid: 64px;
}

body.spatial-site:is([data-spatial-page*="receptionist"], [data-spatial-page*="customer-support"], [data-spatial-page*="messaging"]) {
  --spatial-bg-light-x: 96%;
  --spatial-bg-counter-x: 18%;
  --spatial-bg-angle: 150deg;
}

body.spatial-site:is([data-spatial-page="method"], [data-spatial-page*="dashboard"], [data-spatial-page*="ai-agents"]) {
  --spatial-bg-light-x: 73%;
  --spatial-bg-light-y: 0%;
  --spatial-bg-grid: 80px;
}

body.spatial-site:is([data-spatial-page="about"], [data-spatial-page="founder"], [data-spatial-page="contact"], [data-spatial-page="privacy"], [data-spatial-page="terms"]) {
  --spatial-bg-light-x: 100%;
  --spatial-bg-counter-x: 0%;
  --spatial-bg-strength: .5;
  --spatial-bg-grid: 88px;
}

/* Fixed, bounded underlay; no transform/filter on body to trap sticky or
   fixed navigation. Existing header/main/footer z-indices remain authoritative. */
body.spatial-site::before,
body.spatial-site::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

body.spatial-site::before {
  background:
    radial-gradient(ellipse at 86% 9%, rgba(var(--spatial-bg-indigo), .14), transparent 57%),
    radial-gradient(ellipse at 0% 77%, rgba(var(--spatial-bg-cyan), .055), transparent 49%),
    linear-gradient(90deg, rgba(var(--spatial-bg-indigo), .035) 1px, transparent 1px) 50% 0 / var(--spatial-bg-grid) var(--spatial-bg-grid),
    linear-gradient(rgba(var(--spatial-bg-indigo), .028) 1px, transparent 1px) 50% 0 / var(--spatial-bg-grid) var(--spatial-bg-grid);
}

/* Registration rails live outside the 1180px content measure. Their ticks
   are geometry, not invented labels or generated accessibility content. */
body.spatial-site::after {
  background:
    linear-gradient(rgba(var(--spatial-bg-indigo), .15), rgba(var(--spatial-bg-cyan), .055)) left var(--spatial-bg-gutter) top / 1px 100% no-repeat,
    linear-gradient(rgba(var(--spatial-bg-cyan), .11), rgba(var(--spatial-bg-indigo), .07)) right var(--spatial-bg-gutter) top / 1px 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 95px, rgba(var(--spatial-bg-indigo), .2) 95px 96px) left var(--spatial-bg-gutter) top / 7px 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 95px, rgba(var(--spatial-bg-cyan), .16) 95px 96px) right var(--spatial-bg-gutter) top / 7px 100% no-repeat;
  -webkit-mask-image: linear-gradient(transparent 4rem, #000 12rem, #000 78%, transparent 100%);
  mask-image: linear-gradient(transparent 4rem, #000 12rem, #000 78%, transparent 100%);
}

/* A section owns its background stacking context. Negative decoration sits
   above its background and below every content child, including plain text.
   Clip just these surfaces; never clip main, header, dropdowns or footer. */
body.spatial-site :is(main > section, .page-intro, .solution-section) {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background-color: rgba(7, 10, 16, .88);
  background-image:
    radial-gradient(ellipse at var(--spatial-bg-light-x) var(--spatial-bg-light-y), rgba(var(--spatial-bg-indigo), .105), transparent 57%),
    radial-gradient(ellipse at var(--spatial-bg-counter-x) 100%, rgba(var(--spatial-bg-cyan), .04), transparent 46%),
    linear-gradient(180deg, rgba(9, 14, 23, .12), rgba(7, 10, 16, .36));
  background-repeat: no-repeat;
}

/* Reset old ring / grid pseudo-element geometry before painting the new
   full-section field, including the mobile intro and signal-section rings. */
body.spatial-site :is(main > section, .page-intro, .solution-section)::before,
body.spatial-site :is(main > section, .page-intro, .solution-section)::after {
  content: "";
  position: absolute;
  display: block;
  inset: 0;
  z-index: -1;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  transform: none;
  pointer-events: none;
  user-select: none;
  opacity: var(--spatial-bg-strength);
  -webkit-mask-image: none;
  mask-image: none;
}

/* Three grid scales give a drawn, engineered finish. The opaque left scrim
   is part of the background itself, leaving the primary reading area quiet. */
body.spatial-site :is(main > section, .page-intro, .solution-section)::before {
  background-image:
    linear-gradient(90deg, rgba(7, 10, 16, .96), rgba(7, 10, 16, .72) 38%, transparent 76%),
    linear-gradient(rgba(var(--spatial-bg-indigo), .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--spatial-bg-indigo), .07) 1px, transparent 1px),
    linear-gradient(rgba(var(--spatial-bg-cyan), .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--spatial-bg-cyan), .025) 1px, transparent 1px),
    radial-gradient(circle, rgba(185, 194, 255, .24) .8px, transparent 1.2px);
  background-size:
    100% 100%,
    var(--spatial-bg-grid) var(--spatial-bg-grid),
    var(--spatial-bg-grid) var(--spatial-bg-grid),
    calc(var(--spatial-bg-grid) / 4) calc(var(--spatial-bg-grid) / 4),
    calc(var(--spatial-bg-grid) / 4) calc(var(--spatial-bg-grid) / 4),
    calc(var(--spatial-bg-grid) * 2) calc(var(--spatial-bg-grid) * 2);
  background-position: 0 0, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 17%, #000 78%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 17%, #000 78%, transparent);
}

/* Broad 30-degree planes with crisp hairline edges; no image, faux object,
   perspective transform or oversized blurred texture. Marks stay in padding. */
body.spatial-site :is(main > section, .page-intro, .solution-section)::after {
  background:
    linear-gradient(90deg, transparent 24%, rgba(7, 10, 16, .55) 38%, rgba(7, 10, 16, .24) 58%, transparent 83%),
    linear-gradient(var(--spatial-bg-angle), transparent 52%, rgba(var(--spatial-bg-indigo), .13) 52%, rgba(var(--spatial-bg-indigo), .13) calc(52% + 1px), rgba(var(--spatial-bg-indigo), .034) calc(52% + 1px), rgba(var(--spatial-bg-indigo), .008) 63%, transparent 63%),
    linear-gradient(var(--spatial-bg-angle), transparent 72%, rgba(var(--spatial-bg-cyan), .1) 72%, rgba(var(--spatial-bg-cyan), .1) calc(72% + 1px), rgba(var(--spatial-bg-cyan), .016) calc(72% + 1px), transparent 84%),
    linear-gradient(30deg, transparent 76%, rgba(var(--spatial-bg-indigo), .065) 76%, rgba(var(--spatial-bg-indigo), .065) calc(76% + 1px), transparent calc(76% + 1px)),
    linear-gradient(90deg, rgba(var(--spatial-bg-indigo), .5), rgba(var(--spatial-bg-cyan), .3), transparent) right 1.5rem top 1.25rem / clamp(4rem, 13%, 11rem) 1px no-repeat,
    linear-gradient(rgba(var(--spatial-bg-cyan), .3), rgba(var(--spatial-bg-cyan), .3)) right 1.5rem top 1.05rem / 1px .45rem no-repeat,
    linear-gradient(90deg, rgba(var(--spatial-bg-indigo), .25), transparent) left 1.5rem bottom 1.25rem / 3rem 1px no-repeat;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), #000 22%, #000 65%, transparent);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .8), #000 22%, #000 65%, transparent);
}

/* Alternate atmosphere through long pages without a repeating full-screen
   motif. Surface chapters retain the darker panel hierarchy from the brand. */
body.spatial-site main > section:nth-of-type(3n + 2) {
  --spatial-bg-light-x: 103%;
  --spatial-bg-light-y: 72%;
  --spatial-bg-angle: 120deg;
}

body.spatial-site main > section:nth-of-type(3n + 3) {
  --spatial-bg-light-x: 60%;
  --spatial-bg-light-y: 0%;
  --spatial-bg-angle: 150deg;
}

body.spatial-site :is(.section--method, .section--ink, .section--surface, .solution-section--ink, .solutions-preview) {
  background-color: #0a101b;
}

/* More light at the opening and close; type remains on the ink side. */
body.spatial-site :is(.hero, .page-intro, .solutions-hero, .solution-hero) {
  background-image:
    radial-gradient(ellipse at var(--spatial-bg-light-x) 24%, rgba(var(--spatial-bg-indigo), .18), transparent 60%),
    radial-gradient(ellipse at 100% 84%, rgba(var(--spatial-bg-cyan), .075), transparent 46%),
    linear-gradient(105deg, #070a10 8%, rgba(7, 10, 16, .93) 36%, rgba(9, 14, 23, .4));
}

body.spatial-site .closing {
  --spatial-bg-strength: .58;
  background-color: #0a101a;
  background-image:
    radial-gradient(ellipse at 96% 110%, rgba(var(--spatial-bg-indigo), .2), transparent 57%),
    linear-gradient(120deg, rgba(7, 10, 16, .9) 27%, rgba(var(--spatial-bg-cyan), .025));
}

/* Footer has a quiet finish and an opaque backing for its small text. */
body.spatial-site > footer {
  background-color: #05080d;
  background-image:
    linear-gradient(90deg, transparent, rgba(var(--spatial-bg-indigo), .25), rgba(var(--spatial-bg-cyan), .12), transparent),
    radial-gradient(ellipse at 90% 0%, rgba(var(--spatial-bg-indigo), .045), transparent 58%);
  background-size: 100% 1px, 100% 100%;
  background-repeat: no-repeat;
}

@media (max-width: 980px) {
  body.spatial-site {
    --spatial-bg-gutter: .55rem;
  }

  body.spatial-site::after {
    opacity: .5;
  }

  body.spatial-site :is(main > section, .page-intro, .solution-section)::before {
    opacity: .48;
  }
}

@media (max-width: 700px) {
  /* The stacked layout gives copy the full width. Keep structure visible at
     the right edge with lower contrast and omit the secondary fine grid. */
  body.spatial-site::after {
    display: none;
  }

  body.spatial-site :is(main > section, .page-intro, .solution-section) {
    --spatial-bg-grid: 56px;
    --spatial-bg-light-x: 115%;
    --spatial-bg-counter-x: -20%;
  }

  body.spatial-site :is(main > section, .page-intro, .solution-section)::before {
    background-image:
      linear-gradient(90deg, rgba(7, 10, 16, .94), rgba(7, 10, 16, .72) 55%, transparent),
      linear-gradient(rgba(var(--spatial-bg-indigo), .075) 1px, transparent 1px),
      linear-gradient(90deg, rgba(var(--spatial-bg-indigo), .075) 1px, transparent 1px);
    background-size: 100% 100%, var(--spatial-bg-grid) var(--spatial-bg-grid), var(--spatial-bg-grid) var(--spatial-bg-grid);
    opacity: .58;
  }

  body.spatial-site :is(main > section, .page-intro, .solution-section)::after {
    opacity: .38;
  }
}

/* Static by default. Keep these scoped to this stylesheet's decoration so
   pause/reduced-motion cannot hide a section or alter a Three.js surface. */
:is(body.spatial-site.motion-paused, .motion-paused body.spatial-site)::before,
:is(body.spatial-site.motion-paused, .motion-paused body.spatial-site)::after,
:is(body.spatial-site.motion-paused, .motion-paused body.spatial-site) :is(main > section, .page-intro, .solution-section)::before,
:is(body.spatial-site.motion-paused, .motion-paused body.spatial-site) :is(main > section, .page-intro, .solution-section)::after {
  animation: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  body.spatial-site::before,
  body.spatial-site::after,
  body.spatial-site :is(main > section, .page-intro, .solution-section)::before,
  body.spatial-site :is(main > section, .page-intro, .solution-section)::after {
    animation: none;
    transition: none;
  }
}

@media (forced-colors: active) {
  body.spatial-site::before,
  body.spatial-site::after,
  body.spatial-site :is(main > section, .page-intro, .solution-section)::before,
  body.spatial-site :is(main > section, .page-intro, .solution-section)::after {
    display: none;
  }
}