/* LOG369: continuous visible-section motion, original blue enamel artwork. */
.ro-cinema{position:relative;isolation:isolate}.ro-cinema-light{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;border-radius:inherit;contain:paint}.ro-cinema-light i{position:absolute;width:440px;height:440px;max-width:85%;border-radius:50%;opacity:.6;animation:ro-light-drift 12s ease-in-out infinite alternate;animation-delay:var(--cinema-phase,0s);animation-play-state:paused;background:radial-gradient(circle,#458dff26,transparent 68%);transform-origin:center}.ro-cinema-light i:nth-child(1){left:-9%;top:3%}.ro-cinema-light i:nth-child(2){right:-8%;bottom:-10%;animation-duration:16s;animation-direction:alternate-reverse;background:radial-gradient(circle,#3b50ff20,transparent 68%)}.ro-cinema-light i:nth-child(3){width:200px;height:200px;right:14%;top:12%;border:1px solid #2c61ff18;background:transparent;animation-name:ro-orbit;animation-duration:20s}
.ro-cinema-active>.ro-cinema-light i{animation-play-state:running}
@keyframes ro-light-drift{0%{transform:translate3d(-7%,-8%,0) scale(.85);opacity:.35}50%{opacity:.85}100%{transform:translate3d(30%,18%,0) scale(1.3);opacity:.5}}
@keyframes ro-orbit{0%{transform:translate3d(0,0,0) rotateX(58deg) rotate(-30deg) scale(.85)}50%{transform:translate3d(-35px,25px,0) rotateX(48deg) rotate(150deg) scale(1.1)}100%{transform:translate3d(0,0,0) rotateX(58deg) rotate(330deg) scale(.85)}}
/* The hero already runs its 3D stars and actual-app video. */
.hero-frame>.ro-cinema-light i:nth-child(3),.range-frame>.ro-cinema-light i:nth-child(3){display:none}
#appearance .ro-theme-comparison{animation:ro-screen-float 9s ease-in-out infinite;animation-play-state:paused;transform-origin:center}
#appearance.ro-cinema-active .ro-theme-comparison{animation-play-state:running}
#appearance:has(#theme-reveal:active) .ro-theme-comparison,#appearance:has(#theme-reveal:focus-visible) .ro-theme-comparison{animation-play-state:paused}
@keyframes ro-screen-float{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -8px;rotate:.25deg}}
#features>.ro-cinema-light i{width:650px;height:500px}.gallery-controls button svg{transition:translate .25s}.gallery-controls button:hover svg{translate:3px 0}.gallery-controls button:first-child:hover svg{translate:-3px 0}
.studio-story>.ro-cinema-light i{background:radial-gradient(circle,#4e64ff30,transparent 65%);opacity:.85}.studio-green>.ro-cinema-light i{background:radial-gradient(circle,#20b88430,transparent 65%)}.studio-story .studio-plaque{animation:ro-plaque-float 5s ease-in-out infinite;animation-play-state:paused}.studio-story.ro-cinema-active .studio-plaque{animation-play-state:running}@keyframes ro-plaque-float{50%{translate:0 -7px}}
/* Blue device bodies remain stable enough to read; individual pieces gently move. */
.rn-pc-object{animation:ro-pc-hover 5s ease-in-out infinite;animation-play-state:paused}.rn-router-object{animation:ro-router-hover 6s ease-in-out infinite;animation-play-state:paused}.rn-moving :is(.rn-pc-object,.rn-router-object){animation-play-state:running}.rn-policy-token{filter:drop-shadow(0 3px 5px #113b8e40)}
@keyframes ro-pc-hover{50%{transform:translateY(-5px)}}@keyframes ro-router-hover{50%{transform:translateY(-8px)}}
.rn-budget-icon svg{animation:ro-budget-breathe 4s ease-in-out infinite;animation-play-state:paused}.rn-moving .rn-budget-icon svg{animation-play-state:running}@keyframes ro-budget-breathe{50%{transform:scale(1.08)}}
/* Three purposeful looped illustrations: scan, review, recover. */
.ro-step-art{width:76px;height:76px;display:grid;place-items:center;background:linear-gradient(135deg,#367aff,#204bdf);color:#dceeff;border-radius:23px;margin:0 0 23px;box-shadow:inset 0 2px 0 #a6cdff88,0 12px 25px #2449bf22;animation:ro-step-hover 6s ease-in-out infinite;animation-play-state:paused}.ro-step-art svg{width:49px;height:49px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.ro-icon-scan{stroke:#88eaff;animation:ro-scan 3s ease-in-out infinite;animation-play-state:paused}.ro-icon-tune{fill:#295af1;animation:ro-tune 4s ease-in-out infinite;animation-play-state:paused}.ro-icon-undo{transform-origin:32px 32px;animation:ro-undo 6s ease-in-out infinite;animation-play-state:paused}.ls-control-steps article:nth-child(2) .ro-step-art{animation-delay:-2s;background:linear-gradient(135deg,#647cff,#4642d7)}.ls-control-steps article:nth-child(3) .ro-step-art{animation-delay:-4s;background:linear-gradient(135deg,#138fbd,#1959d2)}
.ro-cinema-active :is(.ro-step-art,.ro-icon-scan,.ro-icon-tune,.ro-icon-undo){animation-play-state:running}
@keyframes ro-step-hover{50%{transform:translateY(-7px) rotate(-4deg)}}@keyframes ro-scan{50%{transform:translateY(14px)}}@keyframes ro-tune{50%{transform:translateX(5px)}}@keyframes ro-undo{0%,20%,100%{transform:rotate(0)}60%,80%{transform:rotate(-25deg)}}
.ls-plan{position:relative;isolation:isolate;overflow:hidden}.ls-plan::after{content:"";position:absolute;pointer-events:none;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 15%,#8bc9ff18 45%,transparent 62%);transform:translateX(-100%);animation:ro-plan-light 9s ease-in-out infinite;animation-play-state:paused}.ls-plan-blue::after{background:linear-gradient(115deg,transparent 15%,#ffffff18 45%,transparent 62%);animation-delay:-4s}#pricing.ro-cinema-active .ls-plan::after{animation-play-state:running}@keyframes ro-plan-light{0%,15%{transform:translateX(-100%)}70%,100%{transform:translateX(100%)}}
.pc-plan-list li::before{animation:ro-check-pop 6s ease-in-out infinite;animation-play-state:paused}#pricing.ro-cinema-active .pc-plan-list li::before{animation-play-state:running}.pc-plan-list li:nth-child(2)::before{animation-delay:.3s}.pc-plan-list li:nth-child(3)::before{animation-delay:.6s}.pc-plan-list li:nth-child(4)::before{animation-delay:.9s}@keyframes ro-check-pop{0%,65%,100%{transform:scale(1)}75%{transform:scale(1.18)}}
#faq>.ro-cinema-light i{opacity:.35}#faq summary>span{transition:transform .35s cubic-bezier(.2,1.6,.4,1);display:inline-block}#faq details[open] summary>span{transform:rotate(45deg)}#faq details[open] p{animation:ro-answer-in .35s ease both}@keyframes ro-answer-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.ls-finale>.ro-cinema-light{z-index:0}.ls-finale>.ls-wrap{position:relative;z-index:1}.ls-finale>.ro-cinema-light i{width:650px;height:650px;background:radial-gradient(circle,#8bbcff45,transparent 68%)}.ls-finale>.ro-cinema-light i:nth-child(3){width:300px;height:300px;background:transparent;border-color:#b5d4ff50}.ls-final-link{transition:text-shadow .3s}.ls-final-link:hover{text-shadow:0 5px 25px #2d78ff44}
@media(max-width:760px){.ro-cinema-light i{width:280px;height:280px}.ro-step-art{width:61px;height:61px;border-radius:18px;margin-bottom:18px}.ro-step-art svg{width:42px;height:42px}.ro-cinema-light i:nth-child(3){width:120px;height:120px}#appearance .ro-theme-comparison{rotate:0deg!important}}
@media(prefers-reduced-motion:reduce){html:not(.ls-motion-on) :is(.ro-cinema-light i,.ro-step-art,.ro-icon-scan,.ro-icon-tune,.ro-icon-undo,.rn-pc-object,.rn-router-object,.rn-budget-icon svg,.studio-plaque,.ro-theme-comparison,.ls-plan::after,.pc-plan-list li::before){animation:none}}

/* Explicit flow keeps the new illustrations out of the previous numbered grid. */
.ls-home .ls-control-steps article{display:flex;flex-direction:column;align-items:flex-start;position:relative;gap:12px;min-width:0}.ls-control-steps article>span{position:absolute;right:2px;top:29px;padding:0;color:#576c91;font-weight:700}.ls-home .ls-control-steps h3{margin:0;max-width:100%;line-height:1.15}.ls-home .ls-control-steps p{margin:0;max-width:340px}.ls-control-steps .ro-step-art{margin-bottom:12px;flex:none}

/* The comparison stays still; only its reveal edge moves. */
#appearance .ro-theme-comparison{animation:none;translate:none;rotate:none}