/* The architecture section of snapshot-v2 (section #s0 of video.html): v1's opening from the sources on, with the
   figure as live SVG (assets/intro/architecture.html, inlined, ids prefixed "ar-") instead of the PNG and its cut-out
   zones, so each part can fade on its own while the source cards still shrink onto it. intro-v2.js adds the step
   classes: .i-sources (0), .i-arch (1), .z-store (2), .z-app (3), .z-agent (4), .z-web (5), .z-checks (6),
   .i-whole (7), .i-handoff (8), and lights the figure's parts. Steps back show the end state at once (.instant). */

.intro { background: #F2F3EF; }
.intro .i-lens { position: absolute; inset: 0; transform-origin: 0 0; }
.intro.instant *, .intro.instant *::before, .intro.instant *::after {
  animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; }

/* ---- step 0: the sources, over the hook's map ---- */
.i-dim { position: absolute; inset: 0; background: rgba(244, 245, 246, .86); opacity: 0; transition: opacity .6s; }
.intro.i-sources .i-dim { opacity: 1; }
.i-src { left: calc(135px + var(--i) * 575px); top: 330px; width: 500px; height: 330px; padding: 40px 40px 36px;
  display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(40px); z-index: 2;
  transition: opacity .5s, transform .55s cubic-bezier(.2, .8, .3, 1); }
.i-src .i-bar { width: 72px; height: 10px; border-radius: 5px; background: var(--c); }
.i-src .i-name { font: 600 44px/1.1 var(--display); margin-top: 8px; }
.i-src .i-from { font: 400 24px/1.2 var(--ui); color: var(--muted); }
.i-src .i-lack { margin-top: auto; font: 600 27px/1.3 var(--ui); color: var(--ink); padding-top: 18px; border-top: 1px solid var(--rule); }
.intro.i-sources .i-src { opacity: 1; transform: none; transition-delay: calc(1.3s + var(--i) * .25s); }
/* The line above the cards comes first; the line below them comes last. */
.i-lead { position: absolute; left: 0; right: 0; top: 196px; text-align: center; font: 600 54px/1.2 var(--display); color: var(--ink);
  opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .6s cubic-bezier(.2, .8, .3, 1); z-index: 2; }
.intro.i-sources .i-lead { opacity: 1; transform: none; transition-delay: .3s; }
.intro.i-arch .i-lead { opacity: 0; transition-delay: 0s; }
.i-none { position: absolute; left: 0; right: 0; top: 740px; text-align: center; font: 600 38px/1.3 var(--ui); color: var(--ink);
  opacity: 0; transition: opacity .6s; }
.intro.i-sources .i-none { opacity: 1; transition-delay: 2.6s; }

/* ---- step 1: the sources shrink onto the figure's sources; the figure comes up, the rest of it dimmed ---- */
.i-fig { position: absolute; left: 146px; top: 20px; width: 2960px; height: 1890px; transform: scale(.55); transform-origin: 0 0;
  opacity: 0; transition: opacity .7s ease; z-index: 3; pointer-events: none; }
.i-fig::before { content: ""; position: absolute; inset: -300px -400px; background: #fff; }
.i-fig > svg { position: absolute; left: 0; top: 0; width: 2960px; height: 1890px; display: block; }
/* Each part of the figure fades on its own (intro-v2.js sets its opacity). */
#ar-arch > [id] { transition: opacity .5s ease; }
.intro.instant #ar-arch > [id] { transition: none; }
.intro.i-arch .i-fig { opacity: 1; transition-delay: .2s; }
.intro.i-arch .i-src { z-index: 4; transition: left .9s cubic-bezier(.6, 0, .25, 1), top .9s cubic-bezier(.6, 0, .25, 1),
  width .9s cubic-bezier(.6, 0, .25, 1), height .9s cubic-bezier(.6, 0, .25, 1), padding .9s, opacity .35s ease .8s; opacity: 0; }
.intro.i-arch .i-src > * { opacity: 0; transition: opacity .25s; }
/* Targets: the figure's source cards (viewBox 30,190 250x135; 30,345 250x120; 30,485 250x163) at 2x, then 0.55 from (146, 20). */
.intro.i-arch #i-src-permits { left: 179px; top: 229px; width: 275px; height: 148.5px; padding: 0; }
.intro.i-arch #i-src-notices { left: 179px; top: 399.5px; width: 275px; height: 132px; padding: 0; }
.intro.i-arch #i-src-listings { left: 179px; top: 553.5px; width: 275px; height: 179.3px; padding: 0; }
.intro.i-arch .i-none { opacity: 0; transition-delay: 0s; }
/* The dimming layer sits outside the camera, above the figure: clear it once the figure is fully up. */
.intro.i-arch .i-dim { opacity: 0; transition: opacity .3s ease 1s; }

/* ---- step 8: into the map box, which becomes the map the demo starts on ---- */
#i-handoff { position: absolute; inset: 0; z-index: 8; opacity: 0; transition: opacity .7s ease; }
.intro.i-handoff #i-handoff { opacity: 1; transition-delay: .75s; }

/* Keep every part of a slide hidden while another slide is showing (the demo's map layers set their own visibility,
   which showed them over the hook after a jump back). */
.slide:not(.is-active), .slide:not(.is-active) * { visibility: hidden !important; }