/* Interface motion is separate from Remotion's frame-driven scenes. */
:root{--jc-ease:cubic-bezier(.2,.75,.25,1)}
.jc-assistant-motion{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;transition:opacity .45s!important}
.jc-assistant-motion.jc-has-motion{opacity:1}
.home-hero-art:has(.jc-has-motion) .home-hero-robot-holder,.hero-art:has(.jc-has-motion)>img{visibility:hidden}
body[data-junchi] #panel-home .jc-assistant-motion{top:0;bottom:auto;left:-12%;right:auto;width:124%;height:350px}
.jc-ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:strict}
.jc-ambient i{position:absolute;width:38vw;height:38vw;min-width:300px;min-height:300px;border-radius:50%;background:radial-gradient(ellipse,#658cf210,transparent 67%);animation:jc-drift 18s ease-in-out infinite alternate!important}
.jc-ambient i:first-child{left:14%;top:15%}.jc-ambient i:nth-child(2){right:-8%;bottom:-20%;background:radial-gradient(ellipse,#1acfe112,transparent 67%);animation-delay:-9s}
body[data-junchi] :is(main.work,#content){position:relative}
body[data-junchi] .topbar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent 20%,#7a89ed66 45%,#31d4e990 55%,transparent 80%);background-size:220% 100%;animation:jc-current 8s linear infinite!important}
body[data-junchi] #panel-home .home-hero-v6{background-size:100% 100%,112% auto!important;animation:jc-clouds 18s ease-in-out infinite alternate!important}
body[data-junchi] #panel-home .home-hero-features{border-radius:16px!important;border:1px solid #e1edfc!important;background:#ffffffad!important}
body[data-junchi] #panel-home .home-hero-eyebrow::before,.hero-copy>.eyebrow::before{content:'';display:inline-block;width:6px;height:6px;margin-right:10px;background:#4dc5e2;border-radius:50%;box-shadow:0 0 0 4px #4dc5e21a;animation:jc-signal 3s ease-in-out infinite!important}
body[data-junchi] :is(.home-hero-feature-icon,.mc-ico){animation:jc-icon-breathe 6s ease-in-out infinite!important}
body[data-junchi] .home-hero-feature:nth-child(2n) .home-hero-feature-icon{animation-delay:-3s}
body[data-junchi] :is(.jc-launch,.module-card,.hv-hot-card,.portrait-card,.voice-card,.mode-option),.features>a,.case-grid>article,.cards>.card{transition:translate .28s var(--jc-ease),scale .28s var(--jc-ease),box-shadow .28s,border-color .28s!important}
@media(hover:hover){
 body[data-junchi] :is(.jc-launch,.module-card,.hv-hot-card,.portrait-card,.voice-card,.mode-option):hover,.features>a:hover,.case-grid>article:hover,.cards>.card:hover{translate:0 -5px;box-shadow:0 16px 30px #5d78d41a!important}
 body[data-junchi] .jc-launch:hover svg,.features>a:hover>b,body[data-junchi] .module-card:hover .mc-ico{rotate:-7deg;scale:1.12}
 body[data-junchi] :is(.tab-btn,.p-nav-mod,.p-nav-mini):hover svg,.nav-btn:hover .nav-ico{translate:2px 0;rotate:-5deg}
}
.jc-launch svg,.features>a>b,.nav-ico,.tab-btn svg,.p-nav-mod svg,.p-nav-mini svg{transition:rotate .28s var(--jc-ease),scale .28s var(--jc-ease),translate .28s var(--jc-ease)!important}
body[data-junchi] :is(button,.btn,.primary,.secondary,.nav-btn){transition:translate .22s var(--jc-ease),scale .22s var(--jc-ease),box-shadow .22s,background-color .22s!important}
body[data-junchi] :is(button,.btn):not(:disabled):active,.primary:active,.secondary:active{scale:.975}
body[data-junchi] :is(.btn.primary,.generate-btn,.qh-primary,.home-hero-primary):hover{translate:0 -2px;box-shadow:0 9px 22px #7667e538!important}
body[data-junchi] :is(.dropzone,.upload-zone){transition:border-color .25s,background-color .25s,box-shadow .25s!important}
body[data-junchi] :is(.dropzone,.upload-zone).jc-drag-over{border-color:#7b78ed!important;background:#eeedff!important;box-shadow:inset 0 0 0 2px #777bf233,0 8px 24px #665de914!important}
body[data-junchi] :is(.dropzone,.upload-zone):hover :is(.dz-icon,svg){translate:0 -3px;transition:translate .25s var(--jc-ease)}
.jc-click-wave{position:fixed;z-index:100001;pointer-events:none;width:28px;height:28px;margin:-14px;border:1.5px solid #7a80ed80;border-radius:50%;background:#738aee0c;animation:jc-wave .55s ease-out forwards!important}
body[data-junchi] .spinner{border-color:#dce5ff!important;border-top-color:#7971e9!important;border-right-color:#37c6e0!important;animation:jc-spin 1s linear infinite!important}
body[data-junchi] .status-area{background:linear-gradient(120deg,#fafcff,#f1f4ff);border-radius:14px}
body[data-junchi] .result-box:has(.placeholder){background-image:radial-gradient(ellipse at 50% 65%,#e7efff88,transparent 65%)!important;background-size:140% 140%!important;animation:jc-result-light 10s ease-in-out infinite alternate!important}
body[data-junchi] :is(.placeholder svg,.placeholder .ph-icon,.h2-ico){animation:jc-float-detail 5s ease-in-out infinite!important}
.jc-value-updated{animation:jc-value .75s var(--jc-ease)!important}
body[data-junchi] :is(.running-badge,.console-search).jc-is-busy{animation:jc-pending 2s ease-in-out infinite!important}
.status[data-state=loading]::before{animation:jc-signal 1.4s ease-in-out infinite!important}
.jc-motion-paused *,.jc-motion-paused *::before,.jc-motion-paused *::after{animation-play-state:paused!important}
.jc-motion-static *,.jc-motion-static *::before,.jc-motion-static *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.jc-motion-static .jc-click-wave{display:none}
.jc-motion-preference{display:flex;align-items:center;gap:12px;margin-top:15px;padding:13px 15px;background:#f5f7ff;border:1px solid #dce4f8;border-radius:12px;font-size:13px;color:#547095}
.jc-motion-preference span{display:block}.jc-motion-preference small{display:block;margin-top:5px;color:#8091ab;line-height:1.7}
.jc-motion-preference select{min-width:120px;margin-left:auto}
@keyframes jc-drift{to{translate:70px -40px;scale:1.15}}
@keyframes jc-current{to{background-position:-220% 0}}
@keyframes jc-clouds{from{background-position:0 0,42% 45%}to{background-position:0 0,58% 55%}}
@keyframes jc-signal{50%{box-shadow:0 0 0 7px #4dc5e20c;opacity:.55}}
@keyframes jc-icon-breathe{50%{box-shadow:0 4px 16px #6c83f128}}
@keyframes jc-spin{to{transform:rotate(360deg)}}
@keyframes jc-wave{to{scale:2.4;opacity:0}}
@keyframes jc-value{0%{translate:0 7px;opacity:.45}55%{color:#7866dc}100%{translate:0 0;opacity:1}}
@keyframes jc-pending{50%{box-shadow:0 0 0 4px #7a85ed15}}
@keyframes jc-result-light{to{background-position:70% 70%}}
@keyframes jc-float-detail{50%{translate:0 -3px;opacity:.75}}
@media(max-width:900px){body[data-junchi] #panel-home .jc-assistant-motion{height:300px}}
@media(prefers-reduced-motion:reduce){body.jc-motion-system *,body.jc-motion-system *::before,body.jc-motion-system *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
