/* 실사 빛 영상 + 기존 구름 원화. 효과를 그리지 않으며, 마스크는 캐릭터 아래 가장자리 처리에만 쓴다. */
.rb-scene{position:relative;isolation:isolate;width:100%;height:100%;min-height:inherit;overflow:hidden;background:#0c1720;color:#f5edda;font-family:var(--font-sans, sans-serif)}
.rb-scene *{box-sizing:border-box}
.rb-world,.rb-sky,.rb-beam,.rb-beam-still,.rb-beam-video,.rb-daybreak{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rb-world{overflow:hidden}
.rb-sky{object-fit:cover;object-position:center bottom;filter:brightness(.57) saturate(.65);transform:scale(1.04)}
.rb-beam{mix-blend-mode:screen;opacity:0;transform-origin:50% 0}
.rb-beam-still,.rb-beam-video{display:block;object-fit:cover;filter:brightness(2.1);max-width:none}
.rb-beam-video{opacity:0}
.rb-beam-video.rb-video-ready{opacity:1}
.rb-traveller{position:absolute;left:50%;top:39%;width:43%;max-width:190px;transform:translate(-50%,0);transform-origin:50% 50%}
.rb-sway{width:100%;line-height:0}
.rb-sway>.av{position:relative;display:block;width:100%;height:auto;aspect-ratio:4/5;overflow:visible;background:transparent;border:0;border-radius:0}
/* 몸통이 있는 파츠만 아래 25%를 지운다. 타원 셀카의 턱은 마스크 없이 유지한다. */
.rb-sway .av-parts{position:absolute;inset:0;width:100%;height:100%;display:block;-webkit-mask-image:linear-gradient(to bottom,#000 75%,transparent 100%);mask-image:linear-gradient(to bottom,#000 75%,transparent 100%)}
.rb-sway .av-parts img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;max-width:none}
.rb-sway .av-photo{display:block;width:100%;height:100%;object-fit:cover;border-radius:48% 48% 43% 43%;overflow:hidden}
.rb-sway>img{display:block;width:100%;height:auto}
.rb-cloud{position:absolute;display:block;width:154%;max-width:none;pointer-events:none;opacity:0}
.rb-cloud-back{left:-48%;top:-13%;filter:grayscale(.6) brightness(1.5)}
.rb-cloud-front{right:-65%;top:8%;transform:rotate(180deg);filter:grayscale(.75) brightness(2)}
.rb-daybreak{background:#faf7ed;opacity:0}
.rb-cloud-last{width:155%;left:-30%;bottom:-9%;transform:rotate(180deg);filter:grayscale(1) sepia(.25) brightness(1.8);opacity:0}
.rb-heading{position:absolute;top:max(36px,6%);left:0;width:100%;text-align:center;opacity:.85}
.rb-heading>span{display:block;font:500 22px/1.4 var(--font-solmoe,serif);color:#cfb782}
.rb-heading>p{margin:5px 0 0;font:400 12px/1.5 var(--font-sans,sans-serif);letter-spacing:.24em}
.rb-intro{position:absolute;top:72%;left:20px;right:20px;text-align:center}
.rb-intro>p{margin:0;font:500 29px/1.4 var(--font-solmoe,serif);letter-spacing:0}
.rb-intro>small{display:block;margin-top:13px;color:#b9b6a8;font:400 12px/1.5 var(--font-sans,sans-serif)}
.rb-farewell{position:absolute;left:22px;right:22px;top:38%;text-align:center;color:#332d22;opacity:0}
.rb-farewell-label{margin:0 0 25px;font:400 13px/1.6 var(--font-sans,sans-serif);letter-spacing:.06em;opacity:0}
.rb-farewell h2{margin:0;font:500 clamp(28px,8vw,36px)/1.55 var(--font-solmoe,serif);letter-spacing:0;opacity:0}
.rb-name{display:inline-block;max-width:100%;overflow-wrap:anywhere}
.rb-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.rb-running .rb-sky{animation:rb-sky-rise 7s both}
.rb-running .rb-beam{animation:rb-light 7s both}
.rb-running .rb-traveller{animation:rb-rise 7s both}
.rb-running .rb-sway{animation:rb-sway 1.7s ease-in-out infinite,rb-whiten 7s both}
.rb-running .rb-cloud-back{animation:rb-cloud-back 7s both}
.rb-running .rb-cloud-front{animation:rb-cloud-front 7s both}
.rb-running .rb-daybreak{animation:rb-daybreak 7s both}
.rb-running .rb-cloud-last{animation:rb-last-cloud 7s both}
.rb-running .rb-heading{animation:rb-heading 7s both}
.rb-running .rb-intro{animation:rb-intro 7s both}
.rb-running .rb-farewell{opacity:1}
.rb-running .rb-farewell-label{animation:rb-label 7s both}
.rb-running .rb-farewell h2{animation:rb-farewell 7s both}
@keyframes rb-sky-rise{0%,16%{transform:scale(1.04);filter:brightness(.57) saturate(.65)}55%{opacity:1;filter:brightness(.9) saturate(.5)}80%,100%{transform:translateY(16%) scale(1.5);opacity:0}}
@keyframes rb-light{0%,9%{opacity:0;transform:translateY(-45%) scaleY(.6)}27%{opacity:.85;transform:translateY(0) scaleY(1)}58%,75%{opacity:1}93%,100%{opacity:0}}
@keyframes rb-rise{0%,20%{transform:translate(-50%,0) scale(1);opacity:1}35%{transform:translate(-50%,-10%) scale(.98)}49%{transform:translate(-49%,-47%) scale(.88);opacity:1}64%{transform:translate(-52%,-126%) scale(.61);opacity:.9}77%,100%{transform:translate(-50%,-240%) scale(.28);opacity:0}}
@keyframes rb-sway{0%,100%{rotate:-2deg}50%{rotate:2deg}}
@keyframes rb-whiten{0%,21%{filter:brightness(1) saturate(.8)}40%{filter:brightness(1.7) saturate(.4)}62%,100%{filter:brightness(4) saturate(0)}}
@keyframes rb-cloud-back{0%,23%{opacity:0;translate:0 -40%}43%{opacity:.85}77%,100%{opacity:0;translate:0 200%}}
@keyframes rb-cloud-front{0%,35%{opacity:0;translate:0 -20%}58%{opacity:.9}83%,100%{opacity:0;translate:0 230%}}
@keyframes rb-daybreak{0%,53%{opacity:0}79%,100%{opacity:1}}
@keyframes rb-last-cloud{0%,78%{opacity:0;translate:0 8%}100%{opacity:.3;translate:0 0}}
@keyframes rb-heading{0%,18%{opacity:.85}34%,100%{opacity:0}}
@keyframes rb-intro{0%,24%{opacity:1}38%,100%{opacity:0}}
@keyframes rb-label{0%,77%{opacity:0}86%,100%{opacity:1}}
@keyframes rb-farewell{0%,86%{opacity:0;translate:0 8px}100%{opacity:1;translate:0 0}}
.rb-finished .rb-sky,.rb-finished .rb-beam,.rb-finished .rb-traveller,.rb-finished .rb-heading,.rb-finished .rb-intro{display:none}
.rb-finished .rb-daybreak,.rb-finished .rb-farewell,.rb-finished .rb-farewell-label,.rb-finished .rb-farewell h2{opacity:1}
.rb-finished .rb-cloud-last{opacity:.3}
@media(prefers-reduced-motion:reduce){.rb-scene *{animation:none!important}.rb-sky,.rb-beam,.rb-traveller,.rb-heading,.rb-intro{display:none}.rb-daybreak,.rb-farewell,.rb-farewell-label,.rb-farewell h2{opacity:1}.rb-cloud-last{opacity:.3}}