/* visuals.css — charts and diagrams that show what the page used to explain in paragraphs.
   Everything starts hidden and plays once its block gets the `.in` class (useInView).
   Delays are set inline per element. */

.viz-fade { opacity: 0; transition: opacity .7s cubic-bezier(.22,.61,.36,1); }
.in .viz-fade { opacity: 1; }

.viz-rise { opacity: 0; transform: translateY(10px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.in .viz-rise { opacity: 1; transform: translateY(0); }

/* bars that grow from their start */
.viz-grow-x { transform: scaleX(0); transform-origin: left center; transition: transform 1.1s cubic-bezier(.22,.61,.36,1); }
.in .viz-grow-x { transform: scaleX(1); }
.viz-grow-x-r { transform: scaleX(0); transform-origin: right center; transition: transform 1.1s cubic-bezier(.22,.61,.36,1); }
.in .viz-grow-x-r { transform: scaleX(1); }
.viz-grow-y { transform: scaleY(0); transform-origin: center bottom; transition: transform 1.1s cubic-bezier(.22,.61,.36,1); }
.in .viz-grow-y { transform: scaleY(1); }

/* a line that draws down from the top */
.viz-drop { transform: scaleY(0); transform-origin: center top; transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.in .viz-drop { transform: scaleY(1); }

/* markers that snap into place */
.viz-pop { opacity: 0; transform: scale(.3); transition: opacity .3s ease, transform .55s cubic-bezier(.34,1.56,.64,1); }
.in .viz-pop { opacity: 1; transform: scale(1); }

/* the part of a range that is a spread, not a certainty */
.viz-hatch {
  background-image: repeating-linear-gradient(135deg, rgba(168,97,42,.55) 0 2px, rgba(168,97,42,.08) 2px 7px);
  box-shadow: inset 0 0 0 1px rgba(168,97,42,.55);
}

/* Detection timeline — Pentabeam's dot travels back to where it finds the problem */
.find-dot { transition: left 1.2s cubic-bezier(.65,0,.35,1), opacity .3s ease; }

/* Capability matrix — the detail behind a dot */
.cap-cell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; cursor: default; }
.cap-cell:focus { outline: none; }
.cap-cell:focus-visible { outline: 1px solid var(--c-steel); outline-offset: 2px; }
.cap-tip {
  position: absolute; bottom: calc(100% + 0.375rem); left: 50%; transform: translate(-50%, 4px);
  white-space: nowrap; background: var(--c-paper); color: var(--c-ink);
  font: 500 0.625rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase;
  padding: 0.4375rem 0.5625rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 5;
}
.cap-cell:hover .cap-tip, .cap-cell:focus-visible .cap-tip, .cap-cell:focus .cap-tip { opacity: 1; transform: translate(-50%, 0); }

/* Every photo gets the same light grade, so stand-ins and real shots read as one set */
.photo-grade { filter: saturate(.82) contrast(1.04) sepia(.06); }

/* App card set into a site photo (SiteShot) */
.ss-card {
  background: #fff; border-radius: 0.5rem; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 2.5rem 5rem -1.5rem rgba(0,0,0,.65), 0 1rem 2rem -1rem rgba(0,0,0,.4);
}
.ss-card-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.9rem; background: #f6f5f1; border-bottom: 1px solid #e6e3db; }
.ss-card-logo { height: 0.875rem; width: auto; }
.ss-card-title { font: 500 0.6875rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: #5f5a4e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-card-img { display: block; width: 100%; aspect-ratio: 2.2 / 1; object-fit: cover; object-position: top; }

/* Below 1024px the module stacks: full-width photo, full-width card. From 1024px the photo
   runs off the screen on its outer side and the card leans a little into the gap toward the text. */
.shot-photo { height: clamp(18rem, 56vw, 40rem); }
.shot-card { left: 0; width: 100%; }
.bleed-r, .bleed-l { margin-left: -1.5rem; margin-right: -1.5rem; }
@media (min-width: 768px) {
  .bleed-r, .bleed-l { margin-left: -3rem; margin-right: -3rem; }
}
@media (min-width: 1024px) {
  .shot-photo { height: clamp(18rem, 36vw, 44rem); }
  .shot-card--right { left: -1.5rem; width: 100%; }
  .shot-card--left { left: auto; right: -1.5rem; width: 100%; }
  .bleed-r { margin-left: 0; margin-right: calc(-1 * (max(0px, (100vw - 102.5rem) / 2) + 3rem)); }
  .bleed-l { margin-right: 0; margin-left: calc(-1 * (max(0px, (100vw - 102.5rem) / 2) + 3rem)); }
}

/* Dark section — flips the light theme's colour utilities inside it */
.on-dark {
  background: #12110e; color: #f4f1e8;
  --flow-bg: #1d1b17; --flow-fg: #f4f1e8; --flow-border: rgba(244,241,232,.28);
  --flow-accent: #8fb0d6;
}
.on-dark .text-paper { color: #f4f1e8; }
.on-dark .text-mist { color: #d3cdbf; }
.on-dark .text-fog, .on-dark .label-bp { color: #948e80; }
.on-dark .text-fog2 { color: #b1ab9c; }
.on-dark .text-steel { color: #8fb0d6; }
.on-dark .border-line { border-color: rgba(244,241,232,.12); }
.on-dark .border-line2 { border-color: rgba(244,241,232,.24); }

/* FAQ: native details rows, with a plus that turns into a cross when a row opens */
.faq summary { list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq-icon { transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.faq[open] .faq-icon { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; clip-path: none !important; transform: none !important; transition: none !important; }
  .viz-fade, .viz-rise, .viz-grow-x, .viz-grow-x-r, .viz-grow-y, .viz-drop, .viz-pop, .find-dot, .faq-icon { transition: none !important; }
}