/* Clearway / a display surface, then the work inside it. */
.cj-journey { --cj-ease:cubic-bezier(.16,1,.3,1); }
.footer .legal .cj-motion-preference{font:inherit;color:inherit;background:transparent;border:1px solid #66706a;border-radius:3px;padding:10px 13px;min-height:44px;cursor:pointer}
.footer .legal .cj-motion-preference:focus-visible{outline:2px solid #df782d;outline-offset:4px}
.footer .legal .cj-motion-preference:disabled{cursor:default;opacity:.8}
/* Playback chrome follows the section, independently of the screen palette. */
body.sys-n main :is(.ni-dark,.lx-dark,.dark) .cm-controls,
body.sys-n main :is(.ni-dark,.lx-dark,.dark) .cm-controls :is(.cm-caption,.cm-play,.cm-inspect){color:#d8ded7!important;opacity:1}
body.sys-n main :is(.ni-dark,.lx-dark,.dark) .cm-controls :is(.cm-play,.cm-inspect){border-color:#7a847c!important}
.cj-stage { --cj-light:221,232,218; position:relative; isolation:isolate; }
.cj-stage[data-cj-kind="writeup"] { --cj-light:174,208,190; }
.cj-stage[data-cj-kind="shotgun"] { --cj-light:207,229,150; }
.cj-stage[data-cj-kind="construction"] { --cj-light:97,129,100; }
.cj-stage[data-cj-kind="steady"] { --cj-light:112,175,154; }
.cj-stage[data-cj-kind="mailroom"] { --cj-light:182,137,74; }
/* The light occupies the rim only. No glare crosses interface text. */
.cj-stage-light { position:absolute; z-index:3; inset:0; pointer-events:none; overflow:hidden; border-radius:inherit; }
.cj-stage-light::before { content:""; position:absolute; inset:0 auto auto 0; height:1px; width:36%; background:linear-gradient(90deg,transparent,rgba(var(--cj-light),.85),transparent); transform:translateX(-120%); opacity:0; animation:cj-rim 13s var(--cj-ease) infinite; animation-play-state:paused; }
.cj-stage[data-cj-running="true"] > .cj-stage-light::before { animation-play-state:running; }
@keyframes cj-rim { 0%,8% { transform:translateX(-120%); opacity:0; } 14% { opacity:.85; } 38% { transform:translateX(340%); opacity:0; } 100% { transform:translateX(340%); opacity:0; } }
/* Artworks have enough depth to read as an object, never enough to warp type. */
@media(min-width:901px) and (hover:hover) and (pointer:fine) {
 .cj-art-stage > .ar-canvas { perspective:1600px; overflow:visible; }
 .cj-art-stage > .ar-canvas > .ar-art { transform:rotateX(1.4deg) rotateY(-1.3deg) scale(.989); transform-origin:50% 50%; transition:transform 650ms var(--cj-ease); }
 .cj-art-stage[data-cj-kind="shotgun"] > .ar-canvas > .ar-art { transform:rotateX(1.4deg) rotateY(1.3deg) scale(.989); }
 .cj-art-stage[data-cj-kind="steady"] > .ar-canvas > .ar-art { transform:rotateX(1.2deg) rotateY(-1.8deg) scale(.985); }
 .cj-art-stage:is(:hover,:focus-within,[data-cj-running="false"]) > .ar-canvas > .ar-art { transform:none; }
}
/* WriteUp: the input is quiet; the prepared quote receives the light. */
.cj-art-stage .ap-quote-result { position:relative; }
.cj-art-stage .ap-quote-result::after { content:""; position:absolute; top:0; right:0; width:2px; height:31%; border-radius:2px; background:#aacdb9; opacity:0; transform:translateY(0); animation:cj-quote-handoff 10s var(--cj-ease) infinite; animation-play-state:paused; pointer-events:none; }
@keyframes cj-quote-handoff { 0%,14% { opacity:0;transform:translateY(0); } 23%,36% { opacity:.65;transform:translateY(0); } 58% { opacity:.5;transform:translateY(180%); } 68%,100% { opacity:0;transform:translateY(190%); } }
/* Shotgun: follow a vehicle to its handover, without moving its status or data. */
.cj-art-stage .ap-vehicle-list > article { position:relative; }
.cj-art-stage .ap-vehicle-list > article::after { content:""; position:absolute; bottom:0; left:0; height:1px; width:100%; background:#c8dba0; transform:scaleX(0); transform-origin:left; opacity:0; animation:cj-vehicle-route 11s var(--cj-ease) infinite; animation-play-state:paused; pointer-events:none; }
.cj-art-stage .ap-vehicle-list > article:nth-child(2)::after { animation-delay:1.1s; }
@keyframes cj-vehicle-route { 0%,12% { transform:scaleX(0);opacity:0; } 18% { opacity:.6; } 38%,50% { transform:scaleX(1);opacity:.6; } 66%,100% { transform:scaleX(1);opacity:0; } }
/* Construction: attention passes between owners, not identical floating cards. */
.cj-art-stage .ap-person > header { position:relative; }
.cj-art-stage .ap-person > header::after { content:""; position:absolute; inset:auto 12px 0; height:2px; background:#789379; transform:scaleX(.08); transform-origin:left; opacity:0; animation:cj-owner-pass 12s var(--cj-ease) infinite; animation-play-state:paused; pointer-events:none; }
.cj-art-stage .ap-person:nth-child(2) > header::after { animation-delay:1.8s; }
.cj-art-stage .ap-person:nth-child(3) > header::after { animation-delay:3.6s; }
@keyframes cj-owner-pass { 0%,8% { opacity:0;transform:scaleX(.08); } 17%,25% { opacity:.65;transform:scaleX(1); } 39%,100% { opacity:0;transform:scaleX(1); } }
/* Steady's existing trace carries the future view. Keep its values stationary. */
.cj-art-stage .ap-forecast .ar-trace { animation-duration:12s; }
.cj-art-stage .ap-forecast-area { transform-origin:center bottom; animation:cj-forecast-depth 12s var(--cj-ease) infinite; animation-play-state:paused; }
@keyframes cj-forecast-depth { 0%,10% { opacity:.35; } 30%,70% { opacity:1; } 88%,100% { opacity:.35; } }
/* New pseudo-element animations explicitly share the incumbent art control. */
.cj-art-stage[data-cj-running="true"] :is(.ap-quote-result,.ap-vehicle-list > article,.ap-person > header)::after { animation-play-state:running; }
.cj-art-stage[data-cj-running="false"] :is(.ap-quote-result,.ap-vehicle-list > article,.ap-person > header)::after { animation-play-state:paused; }
/* Keyboard reading gets the same still plane as pointer reading. */
.cj-art-stage:focus-within .cj-stage-light::before,
.cj-art-stage:focus-within :is(.ap-quote-result,.ap-vehicle-list > article,.ap-person > header)::after { animation-play-state:paused; }
/* Global pause is also a CSS fail-safe, even between observer callbacks. */
html[data-solva-motion="paused"] .cj-stage-light::before,
html[data-solva-motion="paused"] .cj-art-stage :is(.ap-quote-result,.ap-vehicle-list > article,.ap-person > header)::after,
body.solva-motion-paused .cj-stage-light::before,
body.solva-motion-paused .cj-art-stage :is(.ap-quote-result,.ap-vehicle-list > article,.ap-person > header)::after { animation-play-state:paused!important; }
html[data-solva-motion="paused"] .cj-art-stage > .ar-canvas > .ar-art,
body.solva-motion-paused .cj-art-stage > .ar-canvas > .ar-art { transform:none!important; transition:none!important; }
/* Touch keeps crisp, flat surfaces and quieter, less frequent light. */
@media(max-width:900px),(hover:none) {
 .cj-stage-light::before { animation-duration:17s; opacity:0; }
 .cj-art-stage .ap-quote-result::after { width:1px; }
 .cj-art-stage .ap-person > header::after { height:1px; }
}
@media(prefers-reduced-motion:reduce) {
 .cj-stage-light::before,
 .cj-art-stage :is(.ap-quote-result,.ap-vehicle-list > article,.ap-person > header)::after { animation:none!important; opacity:0!important; }
 .cj-art-stage > .ar-canvas > .ar-art { transform:none!important; transition:none!important; }
 .cj-art-stage .ap-forecast-area { animation:none!important; opacity:1!important; }
}

/* Interior stories: follow the relationship that each screen is explaining. */
.cj-art-stage .ra-chart .ra-trace { animation-duration:12s; }
.cj-art-stage[data-cj-kind="rooftop"] .ra-bottom { position:relative; }
.cj-art-stage[data-cj-kind="rooftop"] .ra-bottom::after { content:""; position:absolute; left:0; top:-1px; width:100%; height:1px; background:#c46735; transform:scaleX(0); transform-origin:left; opacity:0; animation:cj-source-route 12s var(--cj-ease) infinite; animation-play-state:paused; pointer-events:none; }
@keyframes cj-source-route { 0%,50% { transform:scaleX(0);opacity:0; } 57% { opacity:.65; } 76%,86% { transform:scaleX(1);opacity:.65; } 98%,100% { transform:scaleX(1);opacity:0; } }
.cj-art-stage .ra-lane { position:relative; }
.cj-art-stage .ra-lane::after { content:""; position:absolute; width:6px; height:6px; border-radius:50%; top:14px; right:10px; background:var(--ra-accent,#bf6b32); opacity:0; transform:scale(.65); animation:cj-crm-handoff 12s var(--cj-ease) infinite; animation-play-state:paused; pointer-events:none; }
.cj-art-stage .ra-lane:nth-child(2)::after { animation-delay:2.1s; }
.cj-art-stage .ra-lane:nth-child(3)::after { animation-delay:4.2s; }
@keyframes cj-crm-handoff { 0%,8% { opacity:0;transform:scale(.65); } 17%,25% { opacity:.7;transform:scale(1); } 39%,100% { opacity:0;transform:scale(1); } }
.cj-art-stage :is(.ra-person-row,.ra-folders > span,.ra-folder-head) { position:relative; }
.cj-art-stage :is(.ra-person-row,.ra-folders > span,.ra-folder-head)::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#648376; transform:scaleX(.08); transform-origin:left; opacity:0; animation:cj-owner-pass 12s var(--cj-ease) infinite; animation-play-state:paused; pointer-events:none; }
.cj-art-stage :is(.ra-person-row,.ra-folders > span):nth-child(2)::after { animation-delay:1.8s; }
.cj-art-stage :is(.ra-person-row,.ra-folders > span):nth-child(3)::after { animation-delay:3.6s; }
.cj-art-stage[data-cj-running="true"] :is(.ra-bottom,.ra-lane,.ra-person-row,.ra-folders > span,.ra-folder-head)::after { animation-play-state:running; }
.cj-art-stage[data-cj-running="false"] :is(.ra-bottom,.ra-lane,.ra-person-row,.ra-folders > span,.ra-folder-head)::after { animation-play-state:paused; }
html[data-solva-motion="paused"] .cj-art-stage :is(.ra-bottom,.ra-lane,.ra-person-row,.ra-folders > span,.ra-folder-head)::after,
body.solva-motion-paused .cj-art-stage :is(.ra-bottom,.ra-lane,.ra-person-row,.ra-folders > span,.ra-folder-head)::after { animation-play-state:paused!important; }
@container(max-width:460px) { .cj-art-stage .ra-lane::after { top:12px;right:5px;width:4px;height:4px; } }
@media(prefers-reduced-motion:reduce) {
 .cj-art-stage :is(.ra-bottom,.ra-lane,.ra-person-row,.ra-folders > span,.ra-folder-head)::after { animation:none!important;opacity:0!important; }
}
/* Authored task scenes: one sequence per product, carried by existing controls. */
/* Retire ambient rim and row sweeps where the task itself now directs attention. */
.cj-art-stage:is([data-cj-kind="writeup"],[data-cj-kind="shotgun"])>.cj-stage-light,
.cj-art-stage .ap-quote-result::after,
.cj-art-stage .ap-vehicle-list>article::after{display:none}
[data-art-scene="writeup"] .ap-quote-paper{animation:cj-quote-document 14s var(--cj-ease,cubic-bezier(.16,1,.3,1)) infinite;animation-play-state:paused}
[data-art-scene="writeup"] .ap-quote-input>.ap-quote-field:first-child{animation:cj-quote-field 14s ease infinite;animation-play-state:paused}
[data-art-scene="writeup"] .ap-costing>div::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:#4d7856;opacity:0;transform:scaleX(0);transform-origin:left;animation:cj-costing-line 14s var(--cj-ease,cubic-bezier(.16,1,.3,1)) infinite;animation-play-state:paused}
[data-art-scene="writeup"] .ap-costing>div:nth-child(2)::after{animation-delay:.55s}
[data-art-scene="writeup"] .ap-costing>div:nth-child(3)::after{animation-delay:1.1s}
[data-art-scene="writeup"] .ap-costing>div:nth-child(4)::after{animation-delay:1.65s}
@keyframes cj-quote-document{0%,12%,100%{transform:none}28%,70%{transform:translateY(-4px) rotate(-.5deg)}86%{transform:none}}
@keyframes cj-quote-field{0%,8%,52%,100%{background:#22262f}16%,30%{background:#353d43}}
@keyframes cj-costing-line{0%,17%{opacity:0;transform:scaleX(0)}23%{opacity:.8}32%,57%{opacity:.8;transform:scaleX(1)}72%,100%{opacity:0;transform:scaleX(1)}}
[data-art-scene="shotgun"] .ap-day-traveller{animation:cj-key-journey 15s var(--cj-ease,cubic-bezier(.16,1,.3,1)) infinite;animation-play-state:paused}
[data-art-scene="shotgun"] .ap-day-line>i{animation:cj-day-distance 15s var(--cj-ease,cubic-bezier(.16,1,.3,1)) infinite;animation-play-state:paused}
[data-art-scene="shotgun"] .ap-vehicle-list>article:first-child .ap-plate{animation:cj-vehicle-focus 15s ease infinite;animation-play-state:paused}
@keyframes cj-key-journey{0%,8%{transform:translateX(0);opacity:1}29%,53%{transform:translateX(50%);opacity:1}76%,88%{transform:translateX(100%);opacity:1}94%{transform:translateX(100%);opacity:0}95%{transform:translateX(0);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes cj-day-distance{0%,8%{transform:scaleX(0);opacity:.8}29%,53%{transform:scaleX(.5);opacity:1}76%,88%{transform:scaleX(1);opacity:1}94%,100%{transform:scaleX(1);opacity:0}}
@keyframes cj-vehicle-focus{0%,20%,78%,100%{background:transparent}33%,58%{background:#30452a}}
/* Interior Rooftop keeps the overview and source relationship legible. The
   approved first homepage scene and its dome are outside these selectors. */
.ra-scene[data-art-scene="rooftop"] .ra-department-grid>div{animation:cj-department-focus 16s ease infinite;animation-play-state:paused}
.ra-scene[data-art-scene="rooftop"] .ra-department-grid>div:nth-child(2){animation-delay:2.4s}
.ra-scene[data-art-scene="rooftop"] .ra-department-grid>div:nth-child(3){animation-delay:4.8s}
.ra-scene[data-art-scene="rooftop"] .ra-department-grid>div:nth-child(4){animation-delay:7.2s}
@keyframes cj-department-focus{0%,4%,26%,100%{background:transparent}10%,18%{background:#e4e1d4}}
[data-art-scene][data-ar-running="true"] :is(.ap-quote-paper,.ap-quote-input>.ap-quote-field:first-child,.ap-day-traveller,.ap-day-line>i,.ap-vehicle-list>article:first-child .ap-plate,.ra-department-grid>div),
[data-art-scene][data-ar-running="true"] .ap-costing>div::after{animation-play-state:running}
[data-art-scene]:not([data-ar-running="true"]) .ap-costing>div::after,
[data-art-scene]:focus-within .ap-costing>div::after{animation-play-state:paused!important}
html[data-solva-motion="paused"] [data-art-scene] .ap-costing>div::after,
body.solva-motion-paused [data-art-scene] .ap-costing>div::after{animation-play-state:paused!important}
/* A still scene is a complete drawing, not a half-finished animation. */
[data-art-scene]:not([data-ar-running="true"]) .ap-quote-paper{transform:none}
@media(max-width:900px),(hover:none){[data-art-scene="writeup"] .ap-quote-paper{animation:none!important;transform:none!important}}
@media(prefers-reduced-motion:reduce){
 [data-art-scene] :is(.ap-quote-paper,.ap-quote-input>.ap-quote-field:first-child,.ap-day-traveller,.ap-day-line>i,.ap-vehicle-list>article:first-child .ap-plate,.ra-department-grid>div){animation:none!important}
 [data-art-scene] .ap-costing>div::after{animation:none!important;opacity:0!important}
 [data-art-scene] .ap-quote-paper{transform:none!important}
}