/* =========================================================================
   SITE CANVAS — shared full-site animated gradient backdrop.
   The live site is static HTML rather than React, so this file provides
   the visual system and site-canvas.js mounts the fixed backdrop layer.
   ========================================================================= */

:root {
  --page-bg: #e7e7e7;
  --hero-stage-bg: transparent;
  --paper: #ffffff;
  --bg: transparent;
  --cream: #ffffff;
}

html,
body {
  background: transparent !important;
}

body.home-hero,
body.home-hero.hero-stage-media-on {
  background: transparent !important;
}

body.home-page {
  --home-page-bg: var(--page-bg);
  --clients-bg: var(--page-bg);
}

.site-bg-fixed {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: var(--page-bg) !important;
}

body.home-page .site-bg-fixed {
  background: var(--home-page-bg) !important;
}

/* The V5 organism journey sits above this continuous field and below its copy. */
body.organism-journey-active .site-bg-fixed {
  background: var(--home-page-bg, #e7e7e7) !important;
}

/* Shared paint — light canvas behind portfolio; services pin uses studio-field. */
body.site-work-svc-backdrop,
body.site-work-svc-backdrop .site-bg-work-services {
  background: var(--home-page-bg, #e7e7e7);
  background-image: none;
}

body.site-work-svc-backdrop #services > .pin-spacer,
body.site-work-svc-backdrop #services .svc-pin {
  background: var(--home-page-bg, #e7e7e7);
  background-image: none;
}

/* Pinned solid backdrop for portfolio → services. Content scrolls over this layer only. */
.site-bg-work-services {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* This layer starts beneath the portfolio transition. Give it the same
     canvas colour even while transparent so no unpainted white frame can show
     through as the work backdrop takes over from the numbers scene. */
  background: var(--home-page-bg, #e7e7e7);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.85s step-end;
}

.site-bg-work-services.is-live {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

/* Keep the base canvas painted until the matching work/services layer has
   finished its fade. Both use the same colour, so retaining it removes the
   old blank frame without changing the intended backdrop. */
body.site-work-svc-backdrop .site-bg-fixed {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Portfolio keeps its own surface; services stay transparent over the shared canvas. */
body.site-work-svc-backdrop #work {
  isolation: auto;
  background: transparent !important;
  background-image: none !important;
}

body.site-work-svc-backdrop #work > .pin-spacer {
  background: transparent !important;
}

body.site-work-svc-backdrop #services {
  isolation: auto;
  background: transparent !important;
  background-image: none !important;
}

body.site-work-svc-backdrop #services {
  margin-top: 0 !important;
}

/* Keep the Clients wrapper transparent so its pale surface does not appear
   before the rising sheet. The sheet itself remains opaque for legibility. */
body.site-work-svc-backdrop #clients {
  position: relative;
  z-index: 8;
  background: transparent !important;
}

body.site-work-svc-backdrop .cli-rise-panel {
  background: var(--clients-bg, #f9f9f9) !important;
}

/* Keep testimonials attached to the clients page during the overlap handoff.
   The normal negative top pull makes the section feel like it reappears as the
   page continues forward, so remove that only on the desktop backdrop path
   until reach is about to enter. */
body.site-work-svc-backdrop .testimonials { margin-top: 0; }

body.site-work-svc-backdrop #services .svc-hero-slide--intro,
body.site-work-svc-backdrop #services .svc-showcase,
body.site-work-svc-backdrop #services .svc-carousel,
body.site-work-svc-backdrop #services .svc-hero-slide,
body.site-work-svc-backdrop #services .svc-scene {
  background: transparent !important;
  background-image: none !important;
}

/* Services has exactly one line system: the 1px gaps between cells. The
   showcase no longer paints a second grid overlay or cell-level borders. */
body.site-work-svc-backdrop #services .svc-grid {
  background-color: rgba(16, 16, 16, 0.14) !important;
  background-image: none !important;
  border: 0 !important;
  gap: 1px !important;
  padding: 0 !important;
}

body.site-work-svc-backdrop #services .svc-pin {
  contain: none;
}

body.site-work-svc-backdrop #services .svc-scene-media,
body.site-work-svc-backdrop #services .svc-scene-wash,
body.site-work-svc-backdrop #services .svc-grid-lines {
  display: none !important;
}

body.site-work-svc-backdrop #services .svc-grid-box,
body.site-work-svc-backdrop #services .svc-grid-box--ghost,
body.site-work-svc-backdrop #services .svc-grid-box--shadow,
body.site-work-svc-backdrop #services .svc-grid-box--accent {
  background: rgba(255, 255, 255, 0.20) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  color: #101010;
  text-shadow: none !important;
}

.site-bg-fixed canvas {
  display: none !important;
}

.hero-gl-stage,
.hero-gl-stage.is-stage-active,
.hero-stage-bg,
body.hero-stage-media-on .hero-stage-bg {
  background: transparent !important;
}

/* Hide empty placeholders only — CMS hero media removes [hidden] and sets
   body.hero-stage-media-on; a blanket display:none here blocked live uploads. */
body:not(.hero-stage-media-on) .hero-stage-bg video,
body:not(.hero-stage-media-on) .hero-stage-bg img {
  display: none !important;
}

body.hero-stage-media-on .hero-stage-bg img:not([hidden]),
body.hero-stage-media-on .hero-stage-bg video:not([hidden]) {
  display: block !important;
}

/* Keep hero copy dark against the lighter gradient backdrop. */
#top,
.hero-gl-stage {
  --hero-fg: #10121a !important;
  --hero-fg-dim: #6e7385 !important;
  --hero-fg-soft: #1a1d29 !important;
  --hero-ink: #10121a !important;
  --hero-ink-dim: #6e7385 !important;
}

@media (prefers-reduced-motion: reduce) {
  .cli-rise-panel {
    will-change: auto;
    box-shadow: none;
  }

  .site-bg-fixed {
    -webkit-animation: none;
    -moz-animation: none;
    animation: none;
    background-position: 51% 0%;
  }

  body.site-work-svc-backdrop,
  body.site-work-svc-backdrop .site-bg-work-services,
  body.site-work-svc-backdrop #work > .pin-spacer,
  body.site-work-svc-backdrop #services > .pin-spacer,
  body.site-work-svc-backdrop #services .svc-pin {
    background-attachment: scroll;
  }

  .site-bg-work-services {
    transition: none;
  }
}