/* Continuous product stories. Only the reserved artwork moves. */
.section-scene {
  position: relative;
  isolation: isolate;
  overflow: clip;
  container-type: inline-size;
  animation-play-state: paused;
}
.section-scene *, .section-scene::before, .section-scene::after,
.section-scene *::before, .section-scene *::after { animation-play-state: inherit; }
body[data-motion="running"] .section-scene[data-in-view="true"] { animation-play-state: running; }
body[data-motion="paused"] .section-scene { animation-play-state: paused; }
.section-scene svg { display: block; width: 100%; height: 100%; }

/* Modules exchange packets, then answer with a large, staggered pop. */
.module-network {
  --network-rise: 57.5px;
  height: 230px;
  margin: 0 0 36px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--ink);
  color: var(--ink);
}
.module-network::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 180px; height: 180px;
  border: 24px solid var(--purple);
  border-radius: 50%;
  opacity: .65;
  transform: translate(-50%, -50%) scale(.8);
  animation-name: section-hub-wave;
  animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: cubic-bezier(.77, 0, .175, 1);
  animation-iteration-count: infinite;
}
.module-network .network-wires,
.case-map .case-wires { position: absolute; inset: 0; fill: none; stroke: var(--cream); stroke-width: 3px; }
.network-wires path, .case-wires path { vector-effect: non-scaling-stroke; }
.network-node {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 66px; height: 66px;
  padding: 15px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 5px 5px 0 var(--cream);
  transform: translate(-50%, -50%);
  animation-name: section-node-pop;
  animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: cubic-bezier(.77, 0, .175, 1);
  animation-iteration-count: infinite;
}
.network-qr { left: 18%; top: 25%; background: var(--orange); }
.network-order { left: 18%; top: 75%; background: var(--lime); animation-delay: .55s; }
.network-hub { left: 50%; top: 50%; width: 82px; height: 82px; padding: 19px; background: var(--cream); animation-delay: 1.1s; }
.network-wallet { left: 82%; top: 25%; background: var(--lime); animation-delay: 2s; }
.network-stock { left: 82%; top: 75%; background: var(--orange); animation-delay: 2.55s; }
.network-packet {
  --packet-y: var(--network-rise);
  position: absolute;
  z-index: 2;
  left: 18%; top: 25%;
  width: 19px; height: 19px;
  margin: -9.5px;
  border: 2px solid var(--ink);
  background: var(--lime);
  opacity: 0;
  animation-name: section-network-packet;
  animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: cubic-bezier(.77, 0, .175, 1);
  animation-iteration-count: infinite;
}
.packet-in-bottom { top: 75%; --packet-y: calc(-1 * var(--network-rise)); animation-delay: .55s; background: var(--orange); }
.packet-out-top { left: 50%; top: 50%; --packet-y: calc(-1 * var(--network-rise)); animation-delay: 1.55s; background: var(--orange); }
.packet-out-bottom { left: 50%; top: 50%; animation-delay: 2.1s; }
@keyframes section-node-pop {
  0%, 10%, 39%, 100% { transform: translate(-50%, -50%) rotate(0) scale(1); }
  14% { transform: translate(-50%, -50%) rotate(-9deg) scale(.9); }
  19% { transform: translate(-50%, -50%) rotate(8deg) scale(1.24); }
  25% { transform: translate(-50%, -50%) rotate(-3deg) scale(1.1); }
}
@keyframes section-hub-wave {
  0%, 17%, 100% { transform: translate(-50%, -50%) scale(.8); opacity: .65; }
  23%, 32% { transform: translate(-50%, -50%) scale(1.35); opacity: 1; }
  48%, 78% { transform: translate(-50%, -50%) scale(.9); opacity: .35; }
}
@keyframes section-network-packet {
  0%, 8% { transform: translate(0, 0) rotate(-15deg) scale(.5); opacity: 0; }
  12% { transform: translate(0, 0) rotate(-15deg) scale(1.1); opacity: 1; }
  31% { transform: translate(32cqw, var(--packet-y)) rotate(75deg) scale(1.25); opacity: 1; }
  36%, 100% { transform: translate(32cqw, var(--packet-y)) rotate(90deg) scale(.5); opacity: 0; }
}

/* A real origin branches out; the caption stays anchored below the map. */
.case-label.case-scene { height: 310px; min-height: 310px; border-radius: 12px; transform: none; }
.case-label.case-scene > p { position: absolute; left: 12px; right: 12px; bottom: 18px; margin: 0; }
.case-map { position: absolute; top: 0; left: 0; right: 0; height: 240px; }
.case-map .case-wires { stroke: var(--ink); stroke-width: 4px; }
.case-origin, .case-business {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 5px 5px 0 var(--ink);
  transform: translate(-50%, -50%);
}
.case-origin { left: 24%; top: 50%; width: 82px; height: 88px; font-size: 48px; background: var(--cream); }
.case-origin::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -14px;
  border: 4px solid var(--lime);
  border-radius: 16px;
  animation-name: section-origin-ring;
  animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: cubic-bezier(.77, 0, .175, 1);
  animation-iteration-count: infinite;
}
.case-business {
  left: 76%; width: 56px; height: 56px; padding: 12px;
  animation-name: section-node-pop;
  animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: cubic-bezier(.77, 0, .175, 1);
  animation-iteration-count: infinite;
}
.business-one { top: 22%; background: var(--lime); animation-delay: 1.3s; }
.business-two { top: 50%; background: var(--purple); color: var(--cream); animation-delay: 2s; }
.business-three { top: 78%; background: var(--cream); animation-delay: 2.7s; }
.case-packet {
  --branch-y: -67.2px;
  position: absolute; z-index: 2;
  left: 24%; top: 50%; width: 19px; height: 19px; margin: -9.5px;
  background: var(--lime); border: 2px solid var(--ink); opacity: 0;
  animation-name: section-case-packet;
  animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: cubic-bezier(.77, 0, .175, 1);
  animation-iteration-count: infinite;
}
.case-packet-two { --branch-y: 0px; animation-delay: .7s; background: var(--purple); }
.case-packet-three { --branch-y: 67.2px; animation-delay: 1.4s; background: var(--cream); }
@keyframes section-origin-ring {
  0%, 7%, 65%, 100% { transform: rotate(0) scale(.85); opacity: .4; }
  12%, 22% { transform: rotate(-8deg) scale(1.15); opacity: 1; }
  39% { transform: rotate(5deg) scale(1); opacity: 1; }
}
@keyframes section-case-packet {
  0%, 5% { transform: translate(0, 0) scale(.5); opacity: 0; }
  8% { transform: translate(0, 0) scale(1); opacity: 1; }
  16% { transform: translate(26cqw, 0) scale(1.2); opacity: 1; }
  23% { transform: translate(26cqw, var(--branch-y)) scale(1.2); opacity: 1; }
  32% { transform: translate(52cqw, var(--branch-y)) rotate(90deg) scale(1.2); opacity: 1; }
  37%, 100% { transform: translate(52cqw, var(--branch-y)) rotate(90deg) scale(.4); opacity: 0; }
}

/* This illustration is independent from the native, stable FAQ controls. */
.faq-visual { height: 240px; max-width: 400px; margin-top: 26px; color: var(--ink); }
.faq-question, .faq-answer, .faq-resolved { position: absolute; z-index: 2; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.faq-question {
  left: 9%; top: 22px; width: 118px; height: 134px; padding: 22px;
  border-radius: 18px 18px 3px 18px; background: var(--orange);
  transform: rotate(-8deg);
  animation-name: section-question;
  animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: cubic-bezier(.77, 0, .175, 1);
  animation-iteration-count: infinite;
}
.faq-question svg { fill: none; stroke: currentColor; stroke-width: 7px; stroke-linecap: round; }
.faq-question circle { fill: currentColor; stroke: none; }
.faq-answer {
  right: 8%; top: 91px; width: 166px; height: 102px; padding: 23px;
  border-radius: 18px 18px 18px 3px; background: var(--purple);
  animation-name: section-answer;
  animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: cubic-bezier(.77, 0, .175, 1);
  animation-iteration-count: infinite;
}
.faq-answer i { display: block; height: 7px; background: var(--cream); margin-bottom: 11px; transform-origin: left; }
.faq-answer i:nth-child(2) { width: 80%; }
.faq-answer i:nth-child(3) { width: 55%; }
.faq-resolved {
  right: 4%; bottom: 12px; display: grid; place-items: center; width: 68px; height: 68px; padding: 14px;
  background: var(--lime); border-radius: 50%;
  animation-name: section-answer-check;
  animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: cubic-bezier(.77, 0, .175, 1);
  animation-iteration-count: infinite;
}
.faq-connector { position: absolute; left: 17%; right: 9%; top: 55%; height: 5px; background: var(--ink); transform: rotate(18deg); }
@keyframes section-question {
  0%, 9%, 85%, 100% { transform: rotate(-8deg) scale(1); }
  15% { transform: rotate(9deg) scale(1.15); }
  22%, 70% { transform: rotate(-3deg) scale(.91); }
}
@keyframes section-answer {
  0%, 15%, 100% { transform: translateX(24px) rotate(8deg) scale(.8); opacity: .55; }
  23%, 69% { transform: translateX(0) rotate(-5deg) scale(1.08); opacity: 1; }
  79% { transform: translateX(0) rotate(3deg) scale(1); opacity: 1; }
}
@keyframes section-answer-check {
  0%, 24%, 100% { transform: rotate(-35deg) scale(.55); opacity: 0; }
  31% { transform: rotate(12deg) scale(1.23); opacity: 1; }
  38%, 74% { transform: rotate(-5deg) scale(1); opacity: 1; }
  84% { transform: rotate(15deg) scale(.8); opacity: 0; }
}

/* A large geometric signature has its own cell, away from the contact links. */
.contact-inner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 32px; }
.contact-inner > :not(.contact-mark) { grid-column: 1; justify-self: start; }
.contact-inner h2 { font-size: clamp(48px, 6vw, 92px); }
.contact-mark { grid-column: 2; grid-row: 1 / 6; align-self: center; width: 100%; height: 360px; }
.contact-orbit {
  position: absolute; left: 50%; top: 50%; width: 230px; height: 230px;
  border: 4px solid var(--ink); border-radius: 24px;
  transform: translate(-50%, -50%) rotate(25deg);
  animation-name: section-orbit;
  animation-duration: 12s;
  animation-timing-function: cubic-bezier(.77, 0, .175, 1);
  animation-iteration-count: infinite;
}
.orbit-two { width: 205px; height: 205px; border-color: var(--cream); border-width: 12px; animation-direction: reverse; animation-delay: -3s; }
.contact-emblem {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  display: grid; place-items: center; width: 150px; height: 150px; padding: 33px;
  color: var(--ink); background: var(--lime); border: 4px solid var(--ink); border-radius: 20px;
  box-shadow: 9px 9px 0 var(--ink); overflow: hidden;
  transform: translate(-50%, -50%) rotate(-8deg);
  animation-name: section-contact-emblem;
  animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: cubic-bezier(.77, 0, .175, 1);
  animation-iteration-count: infinite;
}
.contact-emblem::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cream); opacity: 0;
  animation-name: section-emblem-color;
  animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: cubic-bezier(.77, 0, .175, 1);
  animation-iteration-count: infinite;
}
.contact-satellite {
  position: absolute; z-index: 3; display: grid; place-items: center;
  width: 70px; height: 70px; padding: 16px; background: var(--purple); color: var(--cream);
  border: 3px solid var(--ink); border-radius: 12px; box-shadow: 5px 5px 0 var(--ink);
  animation-name: section-node-pop;
  animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: cubic-bezier(.77, 0, .175, 1);
  animation-iteration-count: infinite;
}
.satellite-one { left: 20%; top: 22%; animation-delay: .5s; }
.satellite-two { left: 81%; top: 79%; background: var(--cream); color: var(--ink); animation-delay: 2.5s; }
@keyframes section-orbit {
  0%, 9% { transform: translate(-50%, -50%) rotate(25deg) scale(.85); }
  16%, 37% { transform: translate(-50%, -50%) rotate(115deg) scale(1); }
  45%, 64% { transform: translate(-50%, -50%) rotate(205deg) scale(.85); }
  72%, 92% { transform: translate(-50%, -50%) rotate(295deg) scale(1); }
  100% { transform: translate(-50%, -50%) rotate(385deg) scale(.85); }
}
@keyframes section-contact-emblem {
  0%, 8%, 100% { transform: translate(-50%, -50%) rotate(-8deg) scale(.9); }
  14%, 32% { transform: translate(-50%, -50%) rotate(9deg) scale(1.2); }
  39%, 66% { transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
  74%, 88% { transform: translate(-50%, -50%) rotate(5deg) scale(1.15); }
}
@keyframes section-emblem-color {
  0%, 11%, 70%, 100% { opacity: 0; }
  18%, 58% { opacity: 1; }
}

.site-footer { padding-bottom: max(110px, calc(92px + env(safe-area-inset-bottom))); }
.footer-signal { grid-column: 1 / -1; height: 100px; color: var(--ink); }
.footer-track { position: absolute; left: 12%; right: 12%; top: 50%; height: 4px; margin-top: -2px; background: var(--purple); }
.footer-token {
  position: absolute; z-index: 2; top: 50%; width: 58px; height: 58px; padding: 14px;
  background: var(--lime); border: 3px solid var(--cream); border-radius: 10px;
  transform: translate(-50%, -50%);
  animation-name: section-node-pop;
  animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: cubic-bezier(.77, 0, .175, 1);
  animation-iteration-count: infinite;
}
.token-one { left: 12%; }
.token-two { left: 38%; background: var(--orange); animation-delay: 1.2s; }
.token-three { left: 64%; background: var(--cream); animation-delay: 2.4s; }
.token-four { left: 88%; background: var(--purple); color: var(--cream); animation-delay: 3.6s; }
.footer-packet {
  position: absolute; left: 12%; top: 50%; width: 28px; height: 28px; margin: -14px;
  background: var(--lime); border: 2px solid var(--cream); opacity: 0;
  animation-name: section-footer-packet;
  animation-duration: var(--lower-motion-cycle, 6s);
  animation-timing-function: cubic-bezier(.77, 0, .175, 1);
  animation-iteration-count: infinite;
}
@keyframes section-footer-packet {
  0%, 5% { transform: translateX(0) rotate(0); opacity: 0; }
  9% { transform: translateX(0) rotate(0); opacity: 1; }
  78% { transform: translateX(76cqw) rotate(360deg); opacity: 1; }
  85%, 100% { transform: translateX(76cqw) rotate(360deg); opacity: 0; }
}

@media (max-width: 1050px) and (min-width: 700px) {
  .contact-inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 14px; }
  .contact-mark { height: 300px; }
  .contact-orbit { width: 185px; height: 185px; }
  .orbit-two { width: 160px; height: 160px; }
  .contact-emblem { width: 116px; height: 116px; padding: 25px; }
  .contact-satellite { width: 56px; height: 56px; padding: 12px; }
}
@media (max-width: 699px) {
  .module-network { --network-rise: 45px; height: 180px; margin-bottom: 28px; }
  .module-network::before { width: 110px; height: 110px; border-width: 16px; }
  .network-node { width: 46px; height: 46px; padding: 9px; border-width: 2px; box-shadow: 3px 3px 0 var(--cream); }
  .network-hub { width: 60px; height: 60px; padding: 13px; }
  .network-packet { width: 15px; height: 15px; margin: -7.5px; }
  .case-label.case-scene { height: 300px; min-height: 300px; }
  .case-origin { width: 66px; height: 72px; font-size: 40px; }
  .case-business { width: 50px; height: 50px; padding: 10px; }
  .faq-visual { height: 220px; margin-top: 22px; }
  .faq-question { left: 7%; width: 102px; height: 116px; padding: 18px; }
  .faq-answer { right: 7%; top: 84px; width: 150px; height: 96px; padding: 21px; }
  .faq-resolved { width: 58px; height: 58px; padding: 12px; }
  .contact-inner { grid-template-columns: minmax(0, 1fr); }
  .contact-inner h2 { font-size: clamp(49px, 11vw, 65px); }
  .contact-mark { grid-column: 1; grid-row: auto; height: 280px; margin-top: 26px; }
  .contact-orbit { width: 200px; height: 200px; }
  .orbit-two { width: 177px; height: 177px; }
  .contact-emblem { width: 132px; height: 132px; padding: 28px; }
  .contact-satellite { width: 60px; height: 60px; padding: 13px; }
  .satellite-one { left: 22%; top: 24%; }
  .satellite-two { left: 78%; top: 76%; }
  .footer-signal { height: 84px; }
  .footer-token { width: 44px; height: 44px; padding: 9px; border-width: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  body:not([data-motion-opt-in="true"]) .section-scene *,
  body:not([data-motion-opt-in="true"]) .section-scene::before,
  body:not([data-motion-opt-in="true"]) .section-scene::after,
  body:not([data-motion-opt-in="true"]) .section-scene *::before,
  body:not([data-motion-opt-in="true"]) .section-scene *::after { animation-name: none !important; }
  body:not([data-motion-opt-in="true"]) .faq-answer { opacity: 1; transform: rotate(-5deg); }
  body:not([data-motion-opt-in="true"]) .faq-resolved { opacity: 1; transform: none; }
}