/* Shared, optional motion layer. All document content stays visible without JS. */
:root { --motion-ease: cubic-bezier(.2,0,0,1); --motion-accent: #287e85; }
.reading-progress { position:fixed;inset:0 0 auto;height:3px;z-index:30;pointer-events:none;background:linear-gradient(90deg,#287e85,#68b6be);transform:scaleX(0);transform-origin:left; }
.motion-hero {position:relative;isolation:isolate;}
.motion-hero > :not(.motion-orbit) {position:relative;z-index:1;}
.motion-orbit {position:absolute;width:190px;height:150px;right:0;top:-16px;color:#216e78;opacity:1;pointer-events:none;z-index:0;overflow:visible;}
.motion-orbit .orbit-ring {fill:none;stroke:currentColor;stroke-width:1.2;opacity:.58;}
.motion-orbit .orbit-path {transform-origin:100px 80px;animation:orbit-drift 22s ease-in-out infinite;animation-play-state:paused;}
.motion-orbit .orbit-path:nth-of-type(2) {animation-duration:29s;animation-direction:reverse;}
.motion-orbit .orbit-core {fill:#f0faf9;stroke:currentColor;stroke-width:1.2;}
.motion-orbit .orbit-word {fill:#18535f;font:700 17px system-ui,-apple-system,sans-serif;letter-spacing:.3px;}
.type-letter {opacity:1;}
.motion-running .motion-inview .orbit-path {animation-play-state:running;}
@keyframes orbit-drift {0%,100%{transform:rotate(-12deg)}50%{transform:rotate(28deg)}}
.motion-running .integration-arrow::before {content:'';position:absolute;left:-2px;top:0;width:5px;height:7px;border-radius:4px;background:#318d94;box-shadow:0 0 7px #318d9444;animation:flow-packet 4.8s var(--motion-ease) infinite;animation-play-state:paused;opacity:0;}
.motion-running .integration-diagram.motion-inview .integration-arrow::before {animation-play-state:running;}
.integration-arrow:nth-of-type(4)::before {animation-delay:1.6s;}
@keyframes flow-packet {0%{transform:translateY(-2px);opacity:0}12%{opacity:1}32%{transform:translateY(20px);opacity:0}100%{transform:translateY(20px);opacity:0}}
.motion-running .integration-diagram.motion-inview .integration-sdk {animation:sdk-breathe 4.8s var(--motion-ease) infinite;}
@keyframes sdk-breathe {0%,18%,65%,100%{border-color:#b6bec7;box-shadow:0 0 0 0 #287e8500}32%,42%{border-color:#5c9ba1;box-shadow:0 0 0 4px #287e8509}}
.motion-enabled nav a,.motion-enabled .copy,.motion-enabled summary,.motion-enabled .codebox,.motion-enabled td,.motion-enabled .mindmap-branch {transition:background-color 160ms var(--motion-ease),border-color 160ms var(--motion-ease),box-shadow 220ms var(--motion-ease),transform 180ms var(--motion-ease);}
.motion-enabled nav a:hover {background:#eef5f7;transform:translateX(2px);}
.motion-enabled tbody tr:hover td {background:#f1f7f8;}
.motion-enabled .mindmap-branch:hover,.motion-enabled .mindmap-branch:focus-within {background:#f4f8f9;}
.motion-enabled .codebox:hover,.motion-enabled .codebox:focus-within {border-color:#9bb8bf;box-shadow:0 3px 14px #193c4a06;}
.motion-enabled .copy:active {transform:scale(.96);}
.motion-enabled summary:hover {color:#20777c;}
.motion-enabled #copy-status {transition:opacity 180ms var(--motion-ease),transform 240ms var(--motion-ease);transform:translateY(8px);}
.motion-enabled #copy-status.visible {transform:translateY(0);}
/* Parameter chips: the sweep stays behind the readable, stationary text. */
.integration-inputs {background:#fbfdff;border-color:#aabfcf;}
.integration-inputs dl {align-items:start;}
.integration-inputs dt {padding-top:4px;}
.integration-inputs dd {display:flex;flex-wrap:wrap;gap:6px;}
.input-tag {position:relative;isolation:isolate;display:inline-flex;align-items:center;overflow:hidden;max-width:100%;padding:3px 8px;border:1px solid #c2d2e1;border-radius:6px;background:linear-gradient(120deg,#e8f1fc,#edf7f4);color:#243f59;font-size:11px;font-weight:550;line-height:1.65;box-shadow:0 1px 2px #1f45600a;}
.input-tag-text {position:relative;z-index:1;}
.input-tag::after {content:'';position:absolute;inset:-20% -40%;z-index:0;pointer-events:none;background:linear-gradient(110deg,transparent 16%,#f4a8bc88 30%,#edc58588 40%,#a4d9b988 50%,#95c8f588 60%,#c2aff088 70%,transparent 84%);transform:translateX(-110%);animation:parameter-shine 5.6s cubic-bezier(.45,0,.55,1) infinite;animation-delay:var(--shine-delay,0s);animation-play-state:paused;}
.motion-running .integration-diagram.motion-inview .input-tag::after {animation-play-state:running;}
@keyframes parameter-shine {0%{transform:translateX(-110%)}82%,100%{transform:translateX(110%)}}
@media(min-width:1000px){.motion-hero{padding-right:175px}.motion-hero > p:last-child{max-width:760px}}
@media(min-width:768px) and (max-width:999px){.motion-orbit{width:135px;height:120px;top:0}.motion-hero{padding-right:140px}}
@media(max-width:767px){.motion-orbit{position:relative;display:block;width:150px;height:110px;top:0;margin:0 0 0 auto}}
/* Keep the existing dependency-only mobile view of the client documentation. */
@media(max-width:767px),(hover:none) and (pointer:coarse){body:has(.mobile-dependency) > .reading-progress{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.type-letter{opacity:1!important}}
@media print{.motion-orbit,.reading-progress{display:none!important}*,*::before,*::after{animation:none!important;transition:none!important}.type-letter{opacity:1!important}}
