/* Cauldron Ideations · Ideas in Motion. All styles belong to this graphic. */
.hero-graphic.ci-motion,
[data-cauldron-motion].ci-motion {
  --ci-motion-paper: #f4f0e9;
  --ci-motion-muted: #aba8a1;
  position: relative;
  display: block;
  isolation: isolate;
  overflow: hidden;
  /* Leave the outer field open to the page charcoal; only the center plate is black. */
  background: transparent;
  color: var(--ci-motion-paper);
  touch-action: pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent;
}

.ci-motion .ci-motion__canvas,
.ci-motion .ci-motion__fallback,
.ci-motion .ci-motion__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ci-motion .ci-motion__canvas,
.ci-motion .ci-motion__fallback {
  display: block;
  pointer-events: none;
}

.ci-motion .ci-motion__logo {
  position: absolute;
  z-index: 1;
  left: var(--ci-motion-logo-x, 50%);
  top: var(--ci-motion-logo-y, 50%);
  width: var(--ci-motion-logo-size, 55%);
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
  /* Keep the opaque black source field aligned with the central black plate.
     This makes the visual compositing and alpha-only fluid occlusion match. */
  mix-blend-mode: normal;
}

.ci-motion .ci-motion__input {
  z-index: 4;
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: crosshair;
  touch-action: pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent;
}

.ci-motion .ci-motion__input:focus-visible {
  outline: 1px solid var(--ci-motion-paper);
  outline-offset: -6px;
}

.ci-motion .ci-motion__label {
  position: absolute;
  z-index: 2;
  left: 26px;
  top: 25px;
  margin: 0;
  color: var(--ci-motion-paper);
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
  line-height: 1.3;
  pointer-events: none;
}

.ci-motion .ci-motion__edition {
  position: absolute;
  z-index: 2;
  right: 26px;
  top: 25px;
  color: #85837e;
  font: 400 10px/1.3 "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .08em;
  pointer-events: none;
}

.ci-motion .ci-motion__hint {
  position: absolute;
  z-index: 2;
  right: 26px;
  bottom: 25px;
  left: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--ci-motion-muted);
  font: 400 10px/1.4 "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .10em;
  pointer-events: none;
}

.ci-motion .ci-motion__engine-cue {
  position: absolute;
  z-index: 3;
  right: 26px;
  bottom: 51px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ci-motion-paper);
  font: 500 9px/1 "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .13em;
  pointer-events: none;
}

.ci-motion .ci-motion__beat-mark {
  display: inline-flex;
  align-items: end;
  gap: 2px;
  height: 10px;
}

.ci-motion .ci-motion__beat-mark i {
  display: block;
  width: 2px;
  height: 5px;
  background: currentColor;
  opacity: .45;
  transform: scaleY(calc(.72 + var(--ci-engine-pump, 0) * .32 + var(--ci-engine-hump, 0) * .36));
  transform-origin: bottom;
  transition: transform 90ms linear, opacity 150ms linear;
}

.ci-motion .ci-motion__beat-mark i:nth-child(2) { height: 9px; opacity: calc(.5 + var(--ci-engine-heat, 0) * .5); }
.ci-motion .ci-motion__beat-mark i:nth-child(3) { height: 7px; }
.ci-motion[data-engine-state="running"] .ci-motion__engine-cue { color: #ffb135; }
.ci-motion[data-engine-held="true"] .ci-motion__engine-cue { color: #ffd26a; }
.ci-motion[data-engine-state="compressing"] .ci-motion__engine-status { color: #ffb135; }

.ci-motion .ci-motion__engine-status {
  position: absolute;
  z-index: 3;
  top: 43px;
  left: 26px;
  max-width: calc(100% - 8rem);
  margin: 0;
  color: var(--ci-motion-muted);
  font: 500 9px/1.25 "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .115em;
  pointer-events: none;
}

.ci-motion[data-engine-state="running"] .ci-motion__engine-status { color: #ffae2e; }

.ci-motion .ci-motion__mute {
  position: absolute;
  z-index: 5;
  top: 32px;
  right: 15px;
  min-width: 64px;
  min-height: 36px;
  margin: 0;
  padding: 11px 0;
  border: 0;
  color: var(--ci-motion-muted);
  background: transparent;
  font: 500 9px/1.2 "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .11em;
  text-align: right;
  cursor: pointer;
}

.ci-motion .ci-motion__mute:hover,
.ci-motion .ci-motion__mute:focus-visible { color: var(--ci-motion-paper); }

.ci-motion .ci-motion__mute:focus-visible { outline: 1px solid var(--ci-motion-paper); outline-offset: 4px; }

.ci-motion .ci-motion__signature {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ci-motion-paper);
}

.ci-motion .ci-motion__signature::before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 0;
  background: currentColor;
}

.ci-motion .ci-motion__touch-hint { display: none; }
.ci-motion .ci-motion__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ci-motion[data-motion-reduced="true"] .ci-motion__gesture-hint { visibility: hidden; }
.ci-motion[data-motion-compact="true"] .ci-motion__gesture-hint { font-size: 8px; letter-spacing: .05em; }
.ci-motion[data-motion-compact="true"] .ci-motion__label,
.ci-motion[data-motion-compact="true"] .ci-motion__edition,
.ci-motion[data-motion-compact="true"] .ci-motion__hint { font-size: 10px; letter-spacing: .08em; }
.ci-motion[data-motion-compact="true"] .ci-motion__label { top: 21px; left: 20px; }
.ci-motion[data-motion-compact="true"] .ci-motion__edition { top: 21px; right: 20px; }
.ci-motion[data-motion-compact="true"] .ci-motion__hint { right: 20px; bottom: 20px; left: 20px; }
.ci-motion[data-motion-compact="true"] .ci-motion__engine-cue { right: 20px; bottom: 45px; font-size: 8px; letter-spacing: .09em; }
.ci-motion[data-motion-compact="true"] .ci-motion__engine-status { top: 39px; left: 20px; max-width: calc(100% - 7rem); font-size: 8px; letter-spacing: .09em; }
.ci-motion[data-motion-compact="true"] .ci-motion__mute { top: 40px; right: 20px; font-size: 8px; }

@media (hover: none), (pointer: coarse) {
  .ci-motion .ci-motion__mouse-hint { display: none; }
  .ci-motion .ci-motion__touch-hint { display: inline; }
  .ci-motion .ci-motion__input { cursor: auto; }
}

/* The simulation remains one document-space canvas, but its canvas mask is
   limited to geometric planes. Type is clipped by the browser from the original
   DOM glyphs, which keeps the font shaper's kerning and physical-pixel AA. */
.ci-fluid-world {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  pointer-events: none;
  z-index: 9;
}

/* Source-faithful SVG luminance masks become the stable normal-motion
   paint path at initial layout. Texture frames update beneath that same mask;
   they never trigger a PNG/SVG or DOM/SVG visibility handoff during ignition,
   recession, or dry return. */
.ci-motion .ci-motion__native-logo,
.wordmark .ci-native-header-logo {
  position: absolute;
  z-index: 1;
  display: block;
  overflow: visible;
  pointer-events: none;
  user-select: none;
  opacity: 0;
}
.wordmark.ci-native-logo-owner { position: relative; }
.ci-motion.ci-motion--native-logo-ready .ci-motion__native-logo,
.ci-motion.ci-motion--native-clip-active .ci-motion__native-logo,
body.ci-native-fluid-baseline .wordmark .ci-native-header-logo,
body.ci-native-fluid-active .wordmark .ci-native-header-logo { opacity: 1; }
.ci-motion.ci-motion--native-logo-ready .ci-motion__logo,
.ci-motion.ci-motion--native-clip-active .ci-motion__logo,
body.ci-native-fluid-baseline .wordmark > img,
body.ci-native-fluid-active .wordmark > img { opacity: 0; }

.ci-native-word { display: inline-block; }

/* The lower background colour is the original computed ink. A transparent
   document-space lava frame sits above it, then native background-clip:text
   applies glyph coverage exactly once. Start a project CTA controls are never
   assigned this class, so their white paper/border always stay untouched. */
body.ci-native-fluid-baseline .ci-native-fluid-text:not(.ci-native-fluid-work),
body.ci-native-fluid-active .ci-native-fluid-text:not(.ci-native-fluid-work) {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-color: var(--ci-native-fluid-base) !important;
  background-image: var(--ci-native-fluid-image) !important;
  background-repeat: no-repeat !important;
  background-origin: border-box !important;
  background-size: var(--ci-native-fluid-world-width) var(--ci-native-fluid-world-height) !important;
  background-position: var(--ci-native-fluid-x) var(--ci-native-fluid-y) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
}
/* WORK keeps its true dark fill. The static border proof intentionally warms
   only the browser-native outline; live patterned stroke follows after this
   edge gate, never a Canvas text redraw. */
body.ci-native-fluid-baseline .ci-native-fluid-work,
body.ci-native-fluid-active .ci-native-fluid-work,
body.ci-native-work-outline-active .ci-native-fluid-work {
  color: var(--ci-native-work-fill) !important;
  -webkit-text-fill-color: var(--ci-native-work-fill) !important;
  -webkit-text-stroke-color: transparent !important;
  text-stroke-color: transparent !important;
}
/* The outlined word keeps its original black DOM fill. A document-space SVG
   strokes the real word once with the shared fluid pattern, avoiding Canvas
   text metrics and avoiding a second white outline at the AA edge. */
.ci-native-work-stroke-world {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
}
body.ci-native-fluid-baseline .ci-native-work-stroke-world,
body.ci-native-fluid-active .ci-native-work-stroke-world,
body.ci-native-work-outline-active .ci-native-work-stroke-world { opacity: 1; }
.ci-native-baseline-probe {
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  vertical-align: baseline !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
/* The solid query is an edge-only proof: its WORK outline remains an actual
   native CSS stroke so it can be compared directly with the cold DOM state. */
body.ci-native-fluid-solid-test .ci-native-fluid-work {
  -webkit-text-stroke-color: var(--ci-native-work-stroke) !important;
  text-stroke-color: var(--ci-native-work-stroke) !important;
}
body.ci-native-fluid-solid-test .ci-native-work-stroke-world { opacity: 0; }

@media print, (forced-colors: active) {
  body.ci-native-fluid-baseline .ci-native-fluid-text:not(.ci-native-fluid-work),
body.ci-native-fluid-active .ci-native-fluid-text:not(.ci-native-fluid-work) {
    color: var(--ci-native-fluid-base) !important;
    -webkit-text-fill-color: var(--ci-native-fluid-base) !important;
    background-color: transparent !important;
    background-image: none !important;
  }
  body.ci-native-fluid-baseline .ci-native-fluid-work,
  body.ci-native-fluid-active .ci-native-fluid-work,
  body.ci-native-work-outline-active .ci-native-fluid-work {
    -webkit-text-stroke-color: var(--ci-native-work-stroke) !important;
    text-stroke-color: var(--ci-native-work-stroke) !important;
  }
  body.ci-native-fluid-baseline .ci-native-work-stroke-world,
  body.ci-native-fluid-active .ci-native-work-stroke-world,
  body.ci-native-work-outline-active .ci-native-work-stroke-world,
  .ci-motion.ci-motion--native-logo-ready .ci-motion__native-logo,
  body.ci-native-fluid-active .ci-motion__native-logo,
  body.ci-native-fluid-baseline .ci-motion__native-logo,
  body.ci-native-fluid-active .wordmark .ci-native-header-logo,
  body.ci-native-fluid-baseline .wordmark .ci-native-header-logo { display: none !important; }
  .ci-motion.ci-motion--native-logo-ready .ci-motion__logo,
  body.ci-native-fluid-active .ci-motion__logo,
  body.ci-native-fluid-baseline .ci-motion__logo,
  body.ci-native-fluid-active .wordmark > img,
  body.ci-native-fluid-baseline .wordmark > img { opacity: 1 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ci-motion .ci-motion__beat-mark i { transition: none; }
}

@media (max-width: 720px) {
  /* Give the artwork its full paired-column width and keep one legible touch
     instruction below it. The control surface itself remains the full area. */
  .hero-graphic[data-cauldron-motion].ci-motion { overflow: visible; }
  .hero-graphic[data-cauldron-motion].ci-motion .ci-motion__label { top: 8px; left: 8px; font-size: 8px; }
  .hero-graphic[data-cauldron-motion].ci-motion .ci-motion__edition { display: none; }
  .hero-graphic[data-cauldron-motion].ci-motion .ci-motion__mute { top: 2px; right: 4px; min-width: 48px; min-height: 44px; padding: 0; font-size: 8px; }
  .hero-graphic[data-cauldron-motion].ci-motion .ci-motion__hint { right: 0; bottom: -1.4rem; left: calc(-56.25% - .25rem); justify-content: center; }
  .hero-graphic[data-cauldron-motion].ci-motion .ci-motion__signature { display: none; }
  .hero-graphic[data-cauldron-motion].ci-motion .ci-motion__gesture-hint { font-size: 10px; letter-spacing: .02em; text-align: center; }
  .ci-motion .ci-motion__mouse-hint { display: none; }
  .ci-motion .ci-motion__touch-hint { display: inline; }
}