/* ============================================================
   Digital Experts - product collage
   Loaded after de-2026-components.css.

   The home page's look at the back end. Deliberately NOT a
   screenshot and not a tidy grid: overlapping cards at different
   depths, flat brand colour, big display figures, charts drawn as
   SVG. The numbers and the language are the product's real ones;
   the composition has licence.

   COMPOSITION
   The collage is split to match the sentence above it. The LEFT
   cluster is the evidence - what was answered, what people asked
   about, how much was self served, how fast it is growing. The
   RIGHT card is the result - the answer already drafted, waiting
   on a yes. Left is what the platform saw; right is what it did
   about it. The ring straddles the seam so the two halves read as
   one picture rather than two columns.

   LAYOUT
   Cards are absolutely placed as percentages inside an
   aspect-ratio canvas, so the whole thing scales as one image
   rather than reflowing card by card. Overlaps are a few percent:
   enough to read as layered, never enough to bury a headline
   figure. Below 900px the composition cannot survive, so it
   becomes a stack that runs evidence first, answer last.

   MOTION - and why it is built backwards
   The visible, finished state is the DEFAULT. A script adds
   .is-armed, which hides things, and .is-in, which reveals them.
   So if the script never runs, or an IntersectionObserver never
   fires (throttled tab, odd browser, blocked script), the collage
   is simply there. Hiding by default and revealing on scroll
   means one failed observer leaves a blank space where the
   product demo should be. Not worth it for an entrance.
   ============================================================ */

.de-collage {
  position: relative;
  width: 100%;
  aspect-ratio: 1180 / 600;
}

.de-collage > * {
  position: absolute;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(10, 25, 19, 0.18);
  display: flex;
  flex-direction: column;
}

/* Start state, applied by script only. */
.de-collage.is-armed > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms ease, transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.de-collage.is-armed.is-in > * { opacity: 1; transform: none; }
.de-collage.is-armed.is-in > *:nth-child(1) { transition-delay: 0ms; }
.de-collage.is-armed.is-in > *:nth-child(2) { transition-delay: 70ms; }
.de-collage.is-armed.is-in > *:nth-child(3) { transition-delay: 140ms; }
.de-collage.is-armed.is-in > *:nth-child(4) { transition-delay: 210ms; }
.de-collage.is-armed.is-in > *:nth-child(5) { transition-delay: 280ms; }
.de-collage.is-armed.is-in > *:nth-child(6) { transition-delay: 380ms; }

/* --- Placement: evidence left, result right ------------------ */

.de-c-live   { left: 0;   top: 0;   width: 24%; height: 13%; z-index: 6; padding: 0 20px; background: var(--de-white); color: var(--de-green-deep); justify-content: center; border-radius: 16px; }
.de-c-bars   { left: 0;   top: 16%; width: 32%; height: 80%; z-index: 3; padding: 24px 22px; background: var(--de-white); color: var(--de-green-deep); }
.de-c-topics { left: 28%; top: 5%;  width: 21%; height: 55%; z-index: 4; padding: 22px 18px; background: var(--de-gold); color: var(--de-green-deep); }
.de-c-line   { left: 28%; top: 64%; width: 21%; height: 32%; z-index: 4; padding: 20px 18px; background: var(--de-navy); color: var(--de-cream); }
.de-c-ring   { left: 44%; top: 0;   width: 12%; aspect-ratio: 1; z-index: 7; padding: 0; background: var(--de-gold-light); border-radius: 50%; align-items: center; justify-content: center; }
.de-c-act    { left: 54%; top: 8%;  width: 46%; height: 84%; z-index: 5; padding: 30px 30px 28px; background: var(--de-green); color: var(--de-cream); }

/* --- Shared type --------------------------------------------- */

.de-collage .de-c-label {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.de-collage .de-c-fig {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 0.95;
  margin: 12px 0 0;
  letter-spacing: -0.01em;
}

.de-collage .de-c-note {
  font-size: clamp(10.5px, 0.9vw, 12.5px);
  line-height: 1.45;
  margin: 0;
}

/* --- The result card ----------------------------------------- */

.de-collage .de-c-act .de-c-label { color: var(--de-gold-light); }

.de-c-act-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.de-collage .de-c-waiting {
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(238, 232, 222, 0.66);
  margin: 0;
}

.de-collage .de-c-q {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.9vw, 27px);
  line-height: 1.24;
  color: var(--de-cream);
  margin: 18px 0 0;
  max-width: 22ch;
}

.de-collage .de-c-meta {
  font-size: clamp(10.5px, 0.9vw, 12.5px);
  line-height: 1.5;
  color: rgba(238, 232, 222, 0.66);
  margin: 10px 0 0;
}

/* The drafted answer. This is the payoff of the whole section, so
   it gets its own panel rather than sitting as another paragraph:
   the reader should be able to see that words have been written
   for them, not just a task raised. */
.de-c-draft {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(238, 232, 222, 0.10);
  border: 1px solid rgba(238, 232, 222, 0.20);
}

.de-collage .de-c-draft-lab {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--de-gold-light);
  margin: 0 0 9px;
}

.de-collage .de-c-draft p {
  font-size: clamp(11.5px, 0.98vw, 13.5px);
  line-height: 1.6;
  color: rgba(238, 232, 222, 0.92);
  margin: 0;
}

.de-c-btns { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: auto; padding-top: 20px; }

.de-c-btn {
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  padding: 11px 19px;
  background: var(--de-gold);
  color: var(--de-green-deep);
  white-space: nowrap;
}

.de-c-btn.is-ghost { background: transparent; color: var(--de-cream); border: 1px solid rgba(238, 232, 222, 0.38); }

.de-collage .de-c-btn-note {
  font-size: 10.5px;
  color: rgba(238, 232, 222, 0.55);
  margin: 0 0 0 4px;
}

/* --- Bars card ------------------------------------------------ */

.de-collage .de-c-bars .de-c-label { color: var(--text-muted); }
.de-collage .de-c-bars .de-c-note { color: var(--text-muted); margin-top: 14px; }

.de-c-bars-wrap { display: flex; align-items: flex-end; gap: 7px; flex: 1; margin-top: 18px; min-height: 0; }

.de-c-bar { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; }

.de-c-bar-track {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: flex-end;
  background: rgba(21, 71, 52, 0.09);
  border-radius: 999px;
  overflow: hidden;
  min-height: 0;
}

.de-c-bar-fill { width: 100%; background: var(--de-green-mid); border-radius: 999px; transform-origin: bottom; }
.de-c-bar.is-peak .de-c-bar-fill { background: var(--de-gold); }

.de-collage.is-armed .de-c-bar-fill {
  transform: scaleY(0);
  transition: transform 780ms cubic-bezier(0.22, 1, 0.36, 1);
}

.de-collage.is-armed.is-in .de-c-bar-fill { transform: scaleY(1); }
.de-collage.is-armed.is-in .de-c-bar:nth-child(1) .de-c-bar-fill { transition-delay: 240ms; }
.de-collage.is-armed.is-in .de-c-bar:nth-child(2) .de-c-bar-fill { transition-delay: 300ms; }
.de-collage.is-armed.is-in .de-c-bar:nth-child(3) .de-c-bar-fill { transition-delay: 360ms; }
.de-collage.is-armed.is-in .de-c-bar:nth-child(4) .de-c-bar-fill { transition-delay: 420ms; }
.de-collage.is-armed.is-in .de-c-bar:nth-child(5) .de-c-bar-fill { transition-delay: 480ms; }
.de-collage.is-armed.is-in .de-c-bar:nth-child(6) .de-c-bar-fill { transition-delay: 540ms; }
.de-collage.is-armed.is-in .de-c-bar:nth-child(7) .de-c-bar-fill { transition-delay: 600ms; }

.de-collage .de-c-bar em {
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
}

/* --- Topics card, doughnut ------------------------------------ */

.de-collage .de-c-topics .de-c-label { color: rgba(14, 47, 35, 0.66); }

.de-c-dough { width: 100%; max-width: 108px; margin: 12px auto 0; }
.de-c-dough svg { display: block; width: 100%; height: auto; transform: rotate(-90deg); }

.de-c-dough circle { fill: none; stroke-width: 15; }
.de-c-dough circle.s1 { stroke-dasharray: 24 100; }
.de-c-dough circle.s2 { stroke-dasharray: 19 100; }
.de-c-dough circle.s3 { stroke-dasharray: 15 100; }
.de-c-dough circle.s4 { stroke-dasharray: 42 100; }

.de-collage.is-armed .de-c-dough circle {
  stroke-dasharray: 0 100;
  transition: stroke-dasharray 900ms cubic-bezier(0.22, 1, 0.36, 1) 320ms;
}

.de-collage.is-armed.is-in .de-c-dough circle.s1 { stroke-dasharray: 24 100; }
.de-collage.is-armed.is-in .de-c-dough circle.s2 { stroke-dasharray: 19 100; }
.de-collage.is-armed.is-in .de-c-dough circle.s3 { stroke-dasharray: 15 100; }
.de-collage.is-armed.is-in .de-c-dough circle.s4 { stroke-dasharray: 42 100; }

.de-c-legend { display: grid; gap: 6px; margin-top: auto; padding-top: 12px; }

.de-c-leg { display: flex; align-items: center; gap: 7px; font-size: clamp(10px, 0.88vw, 12px); }
.de-c-leg i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.de-collage .de-c-leg span { color: rgba(14, 47, 35, 0.8); }
.de-collage .de-c-leg b { margin-left: auto; font-weight: 600; color: var(--de-green-deep); }

/* --- Line card ------------------------------------------------ */

.de-collage .de-c-line .de-c-label { color: rgba(238, 232, 222, 0.6); }
.de-collage .de-c-line .de-c-fig { color: var(--de-cream) !important; margin-top: 8px; }
.de-collage .de-c-line .de-c-note { color: rgba(238, 232, 222, 0.7); margin-top: 6px; }

.de-c-spark { margin-top: auto; width: 100%; }
.de-c-spark svg { display: block; width: 100%; height: auto; overflow: visible; }

.de-c-spark polyline {
  fill: none;
  stroke: var(--de-gold-light);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.de-collage.is-armed .de-c-spark polyline {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1200ms ease 380ms;
}

.de-collage.is-armed.is-in .de-c-spark polyline { stroke-dashoffset: 0; }

/* --- Live pill ------------------------------------------------ */

.de-c-live-row { display: flex; align-items: baseline; gap: 9px; }

.de-collage .de-c-live .de-c-label { color: var(--text-muted); margin-bottom: 6px; }

.de-collage .de-c-live-num {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1;
  color: var(--de-green-deep);
  margin: 0;
}

.de-collage .de-c-live-txt { font-size: clamp(10px, 0.86vw, 12px); color: var(--text-muted); margin: 0; }

.de-c-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2FA36B;
  flex: none;
  box-shadow: 0 0 0 0 rgba(47, 163, 107, 0.55);
  animation: de-c-pulse 2.4s ease-out infinite;
}

@keyframes de-c-pulse {
  70%  { box-shadow: 0 0 0 9px rgba(47, 163, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 163, 107, 0); }
}

/* --- Ring ----------------------------------------------------- */

.de-c-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.de-c-ring-track { fill: none; stroke: rgba(14, 47, 35, 0.16); stroke-width: 9; }

.de-c-ring-val {
  fill: none;
  stroke: var(--de-green-deep);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 81 100;
}

.de-collage.is-armed .de-c-ring-val {
  stroke-dasharray: 0 100;
  transition: stroke-dasharray 1100ms cubic-bezier(0.22, 1, 0.36, 1) 420ms;
}

.de-collage.is-armed.is-in .de-c-ring-val { stroke-dasharray: 81 100; }

.de-c-ring-in { position: relative; text-align: center; z-index: 1; }

.de-collage .de-c-ring-fig {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.7vw, 24px);
  line-height: 1;
  color: var(--de-green-deep);
  margin: 0;
}

.de-collage .de-c-ring-lab {
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(14, 47, 35, 0.6);
  margin: 3px 0 0;
}

/* --- Caption under the collage -------------------------------- */

.de-collage-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 28px;
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
}

/* --- Reduced motion ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .de-collage.is-armed > *,
  .de-collage.is-armed .de-c-bar-fill,
  .de-collage.is-armed .de-c-dough circle,
  .de-collage.is-armed .de-c-spark polyline,
  .de-collage.is-armed .de-c-ring-val { transition: none; opacity: 1; transform: none; }
  .de-collage.is-armed .de-c-bar-fill { transform: scaleY(1); }
  .de-collage.is-armed .de-c-dough circle.s1 { stroke-dasharray: 24 100; }
  .de-collage.is-armed .de-c-dough circle.s2 { stroke-dasharray: 19 100; }
  .de-collage.is-armed .de-c-dough circle.s3 { stroke-dasharray: 15 100; }
  .de-collage.is-armed .de-c-dough circle.s4 { stroke-dasharray: 42 100; }
  .de-collage.is-armed .de-c-spark polyline { stroke-dashoffset: 0; }
  .de-collage.is-armed .de-c-ring-val { stroke-dasharray: 81 100; }
  .de-c-dot { animation: none; }
}

/* --- Stacked fallback: evidence first, answer last ------------ */

@media (max-width: 900px) {
  .de-collage { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .de-collage > * {
    position: static;
    width: auto;
    height: auto;
    inset: auto;
    aspect-ratio: auto;
    padding: 22px 20px;
    border-radius: 18px;
  }
  .de-c-live   { grid-column: 1 / -1; order: 1; padding: 18px 20px; }
  .de-c-bars   { grid-column: 1 / -1; order: 2; min-height: 250px; }
  .de-c-topics { order: 3; }
  .de-c-ring   { order: 4; border-radius: 18px; aspect-ratio: auto; min-height: 160px; position: relative; }
  .de-c-line   { grid-column: 1 / -1; order: 5; }
  .de-c-act    { grid-column: 1 / -1; order: 6; padding: 24px 22px; }
  .de-c-ring svg { position: relative; width: 108px; height: 108px; margin: 0 auto; inset: auto; }
  .de-c-ring-in { position: absolute; }
}

@media (max-width: 560px) {
  .de-collage { grid-template-columns: 1fr; }
}