.characters{position:absolute;inset:0;pointer-events:none}
.character{position:absolute;bottom:13%;transition:translate 2.8s ease-out;will-change:translate}
.character img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 15px #0d386430);transform-origin:50% 90%;will-change:transform}
.accretia{left:2%;width:35%;height:73%;translate:calc(var(--mx,0px)*.25) calc(var(--my,0px)*.15)}
.bellato{left:33%;width:32%;height:64%;bottom:12%;z-index:2;translate:calc(var(--mx,0px)*.55) calc(var(--my,0px)*.35)}
.cora{right:2%;width:35%;height:74%;translate:calc(var(--mx,0px)*.4) calc(var(--my,0px)*.25)}
.accretia img{animation:sentinel-idle 12s ease-in-out -3s infinite}
.bellato img{animation:knight-idle 10s ease-in-out -2s infinite;mask-image:url("/rf-ph-bellato-matched-mask-opt-20261015.webp");mask-mode:luminance;mask-size:contain;mask-position:center bottom;mask-repeat:no-repeat}
.cora img{animation:caster-float 14s ease-in-out -4s infinite}
@keyframes sentinel-idle{0%,100%{transform:translateY(4px) rotate(-.4deg)}50%{transform:translateY(-8px) rotate(.4deg)}}
@keyframes knight-idle{0%,100%{transform:translateY(5px) rotate(.5deg)}50%{transform:translateY(-10px) rotate(-.5deg)}}
@keyframes caster-float{0%,100%{transform:translateY(6px) rotate(-.6deg)}50%{transform:translateY(-14px) rotate(.6deg)}}
.paused .character img{animation-play-state:paused}.paused .character{translate:0 0}
.world{filter:saturate(1.04) brightness(1.05);transition:transform 3s ease-out}
header{padding:26px 4%;gap:24px}nav{gap:clamp(18px,2.4vw,36px)}.brand>span{font-size:clamp(25px,2.4vw,38px)}
.hero-copy,.actions{z-index:3}.hero-copy{left:5%;bottom:10%;max-width:57%}
.hero-copy h1{font-size:clamp(50px,5.1vw,86px);line-height:.98;letter-spacing:-2px}
.hero-copy p{font-size:clamp(14px,1.15vw,18px);letter-spacing:2px;margin-top:18px}
.actions{right:5%;bottom:10%;gap:14px}
.atmosphere{background:linear-gradient(0deg,#061a3bf5 0%,#102c50b5 14%,transparent 39%,transparent 80%,#17366044)}
.sky-caption{display:none}.motion{z-index:4;left:18px;bottom:62px}
@media(max-width:1100px){.hero-copy h1{font-size:5.6vw}.actions{right:4%}.download{width:300px;font-size:18px}.brand>span{font-size:26px}nav{gap:17px}.accretia{left:-1%;width:38%}.cora{right:-1%;width:38%}.bellato{left:32%;width:34%}}
@media(max-width:820px){header{flex-wrap:wrap;justify-content:space-between;padding:20px 5%;gap:15px}nav{order:3;width:100%;justify-content:center;gap:clamp(16px,4vw,32px);margin-top:0}nav button,nav a{font-size:12px}.hero-copy{max-width:none;bottom:25%;left:5%}.hero-copy h1{font-size:clamp(44px,7vw,66px)}.actions{left:0;right:0;bottom:8%;gap:12px}.accretia,.cora{height:59%;bottom:29%}.bellato{height:51%;bottom:28%}}
@media(max-width:520px){.hero{min-height:820px}.brand>span{font-size:23px;letter-spacing:2px}.brand small{font-size:10px;letter-spacing:4px}.login{min-width:96px}nav{gap:0;justify-content:space-between}.accretia{left:-12%;width:49%;height:50%;bottom:34%}.cora{right:-11%;width:48%;height:51%;bottom:34%}.bellato{left:29%;width:42%;height:44%;bottom:33%}.hero-copy{left:0;right:0;bottom:26%;text-align:center}.hero-copy h1{font-size:clamp(39px,9.4vw,49px);letter-spacing:-1.5px}.hero-copy p{font-size:13px;letter-spacing:1px;margin:14px 0 0}.actions{bottom:8%;gap:13px}.atmosphere{background:linear-gradient(0deg,#061a3bf5 0%,#102c50ba 28%,transparent 55%,#17366044)}footer{letter-spacing:1.5px}.motion{bottom:48px}}
@media(prefers-reduced-motion:reduce){.character,.world{transition:none;translate:0 0}.hero:not(.motion-enabled) .character img{animation:none}}