/* Concept 5: one knowledge system, travelled by scrolling. Loaded after concept3.css.
   The graph is a fixed layer behind the page. Dark sections let it through; light ones cover it.
   It is brightest for the four steps and pushed far back behind panels. Applies once the graph runs (.c3-live). */

.c3-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.c3-layer canvas { display: block; width: 100%; height: 100%; }
.c3-layer .c3-tag { position: fixed; }
.c3 > section { position: relative; }

.c3-live .c3-hero { background: transparent; }
.c3-live .c3-hero .ultra { background: transparent; opacity: .34; }
.c3-live .c3-end .ultra { background: transparent; opacity: .42; }
.c3-live .c3-end { background: transparent; }
.c3-live .c3-question, .c3-live .c3-record { background: transparent; }
.c3-live .c3-story { background: none; }

/* panels sit forward of the graph: a little more body so the graph reads as depth behind them */
.c3-live .c3-panel { background: rgba(14,12,48,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.c3-live .c3-half { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.c3-live .c3-decide { background: linear-gradient(120deg, rgba(52,198,244,.16), rgba(100,78,238,.2) 55%, rgba(214,40,77,.16)), rgba(14,12,48,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* the film opens out of the active node behind it */
.c3-live .c3-film .film .film-media { opacity: 0; transform: scale(.9); filter: blur(10px); transition: opacity .9s ease .15s, transform 1.3s var(--ease), filter 1s ease .1s; }
.c3-live .c3-film .film.is-in .film-media { opacity: 1; transform: none; filter: none; }

/* a door to the explorable map on the platform page */
.c3-decide .c3-decide-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.c3-decide .btn-ghost { color: #FFFFFF; border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.05); }
.c3-decide .btn-ghost:hover { border-color: #FFFFFF; background: rgba(255,255,255,.12); }

/* ---------- phones ----------
   home.js adds .c3-phone below 901px. The fixed, travelling layer is switched off; the graph is drawn inside the
   page instead: behind the opening, and in a full-width window above each of the four steps. Sections get their
   own grounds back, and nothing blurs over a moving canvas (expensive on phones). */
.c3-ch-art, .c3-mg { display: none; }
.c3-mg canvas { display: block; width: 100%; height: 100%; }
.c3-mg .c3-tag { position: absolute; }
.c3-phone .c3-layer { display: none; }
.c3-phone .c3-mg { display: block; position: absolute; inset: 0; pointer-events: none; }
.c3-phone .c3-mg-hero { z-index: 1; }
.c3-phone .c3-hero { min-height: max(620px, 100svh); justify-content: flex-end; }
.c3-phone .c3-hero-in { padding-top: 0; padding-bottom: 72px; gap: 20px; }
.c3-phone .c3-hero h1 { font-size: clamp(2.75rem, 12.4vw, 3.6rem); }
.c3-phone .c3-question { background: linear-gradient(180deg, var(--c3-bg), var(--c3-mid) 40%, var(--c3-bg)); }
.c3-phone .c3-story { background: radial-gradient(80% 40% at 50% 30%, rgba(100,78,238,.16), transparent 70%), var(--c3-bg); }
.c3-phone .c3-record { background: linear-gradient(180deg, var(--c3-bg), var(--c3-mid)); }
.c3-phone .c3-end { background: var(--c3-mid); }
.c3-phone .c3-end .ultra { background: #110F3D; opacity: 1; }
.c3-phone .c3-panel, .c3-phone .c3-half, .c3-phone .c3-decide { -webkit-backdrop-filter: none; backdrop-filter: none; }
.c3-phone .c3-film .film .film-media { filter: none; transform: none; transition: opacity .8s ease; }
.c3-phone .c3-stage { display: none; }
.c3-phone .c3-story-grid { display: block; }
.c3-phone .c3-ch { min-height: 0; padding-block: 0 72px; gap: 16px; opacity: 1; }
.c3-phone .c3-ch:last-child { padding-bottom: 8px; }
.c3-phone .c3-ch-art { display: block; position: relative; height: clamp(260px, 44svh, 400px); margin: 0 calc(50% - 50vw) 4px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
.c3-phone .c3-ch h3 { font-size: clamp(2.1rem, 9.4vw, 2.6rem); }
.c3-phone .c3-ch p { font-size: 1.0625rem; }
.c3-phone .c3-story { padding-bottom: 72px; }
.c3-phone .c3-story > .wrap:first-child { margin-bottom: 8px; }
/* tighter rhythm between sections: the big desktop gaps read as empty screens on a phone */
.c3-phone .c3-film { padding-block: 72px 32px; }
.c3-phone .c3-question { padding-block: 64px 72px; }
.c3-phone .c3-halves { margin-top: 56px; }
.c3-phone .c3-story { padding-top: 64px; }
.c3-phone .c3-record { padding-block: 72px; }
.c3-phone .c3-proof { padding-block: 64px; }
.c3-phone .c3-end-in { padding-block: 88px 48px; }
@media (prefers-reduced-motion: reduce) {
  .c3-live .c3-film .film .film-media { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ---------- the homepage's own colour: the full ultra-gradient opens the page ----------
   The platform page opens on deep midnight; the homepage opens bright. The travelling graph is drawn
   over the gradient (the layer sits above the hero's background and below its copy), and every other
   section sits above the graph as before. */
.c3-live .c3-layer { z-index: 1; }
.c3-live .c3 > section:not(.c3-hero), .c3-live .site-footer { z-index: 2; }
.c3-live .site-footer { position: relative; }
.c3-live .c3-hero { isolation: auto; background: transparent; }
.c3-live .c3-hero .ultra { background: #110F3D; opacity: 1; z-index: 0; border-radius: 0 0 var(--r-xl) var(--r-xl); }
.c3-live .c3-hero::after { z-index: 2; border-radius: 0 0 var(--r-xl) var(--r-xl); background: linear-gradient(90deg, rgba(17,15,61,.62) 0%, rgba(17,15,61,.3) 40%, rgba(17,15,61,0) 62%); }
.c3-live .c3-hero-foot { color: rgba(255,255,255,.75); }
@media (max-width: 640px) {
  .c3-live .c3-hero::after { background: linear-gradient(0deg, rgba(17,15,61,.8) 0%, rgba(17,15,61,.35) 60%, rgba(17,15,61,.1) 100%); }
}

/* ---------- Proof stays white in every theme ---------- */
.c3-proof {
  color-scheme: light;
  --bg: #FFFFFF; --bg-2: #F4F3FA; --bg-3: #EAE8F6; --card: #FFFFFF; --card-2: #F8F7FC;
  --ink: #110F3D; --text: #46465C; --muted: #69697F; --line: #DEDCEB; --line-2: #ECEAF5;
  --link: #4F3DD6; --violet-ink: #4F3DD6; --cyan-ink: #0B7AA3; --orange-ink: #A8520B;
  --shadow-sm: 0 1px 2px rgba(17,15,61,.05), 0 4px 14px -6px rgba(17,15,61,.12);
  --shadow: 0 2px 4px rgba(17,15,61,.04), 0 24px 48px -24px rgba(17,15,61,.28);
  --logo-filter: brightness(0) saturate(0) opacity(.82);
  background: #FFFFFF; color: #46465C;
}
.c3 .c3-proof h3 { color: var(--ink); }
.c3-proof .grad-text { background-image: linear-gradient(90deg, #0B7AA3, #644EEE 30%, #D6284D 62%, #E0731A 85%, #0B7AA3); }

/* the film streams from Wistia; its player fills the frame */
.c3 .film-media wistia-player { display: block; width: 100%; height: 100%; }