/* Painted environments stay behind the unchanged full-body portraits. */
.crew-portrait-frame:has(>.crew-scene){position:relative;overflow:hidden!important;border-radius:5px!important;box-shadow:0 1px 4px #122d3b20}
.crew-scene{position:absolute;inset:0;z-index:0;display:block;overflow:hidden;pointer-events:none;contain:paint;--scene-rate:1;--scene-strength:.36}
.crew-scene>span{display:block;position:absolute;inset:0;pointer-events:none}
.crew-scene-picture{background:var(--scene-image) center/cover no-repeat;filter:saturate(.86) brightness(.88)}
.scene-lantern-harbor{--scene-image:url('assets/crew/scenes/lantern-harbor.webp')}
.scene-moonlit-deck{--scene-image:url('assets/crew/scenes/moonlit-deck.webp')}
.scene-monsoon-quay{--scene-image:url('assets/crew/scenes/monsoon-quay.webp')}
.scene-coral-terrace{--scene-image:url('assets/crew/scenes/coral-terrace.webp')}
.scene-chart-observatory{--scene-image:url('assets/crew/scenes/chart-observatory.webp')}
.scene-misty-garden{--scene-image:url('assets/crew/scenes/misty-garden.webp')}
.rarity-seasoned .crew-scene{--scene-rate:1.3;--scene-strength:.24}
.rarity-legendary .crew-scene{--scene-strength:.5}
.crew-portrait-frame:has(>.crew-scene)>img{z-index:1;position:relative;filter:drop-shadow(0 3px 3px #04111e80)}
.crew-portrait-frame.rarity-legendary:has(>.crew-scene)::after{content:"";position:absolute;z-index:2;inset:6px;pointer-events:none;border:1px solid #e3d4b05c;border-radius:1px;background:linear-gradient(#ece0c7,#ece0c7) left top/16px 1px no-repeat,linear-gradient(#ece0c7,#ece0c7) left top/1px 16px no-repeat,linear-gradient(#ece0c7,#ece0c7) right bottom/16px 1px no-repeat,linear-gradient(#ece0c7,#ece0c7) right bottom/1px 16px no-repeat;box-shadow:0 0 0 4px #0c20241a}
.motion-harbor .crew-scene-atmosphere,.motion-sea .crew-scene-atmosphere,.motion-stars .crew-scene-atmosphere{inset:-2px;background:var(--scene-image) center/cover no-repeat;mask-image:linear-gradient(transparent 40%,#0009 51%,#000 62%,transparent 77%);opacity:var(--scene-strength);animation:crew-water calc(7s * var(--scene-rate)) ease-in-out infinite alternate}
.motion-harbor .crew-scene-detail{background:radial-gradient(ellipse at 15% 47%,#f9d29b66,transparent 9%),radial-gradient(ellipse at 86% 55%,#f9d29b66,transparent 7%);animation:crew-lantern calc(5s * var(--scene-rate)) ease-in-out infinite alternate;opacity:.3}
.motion-stars .crew-scene-detail{background:radial-gradient(1px 1px at 18% 13%,#fff9dd,transparent),radial-gradient(1px 1px at 76% 23%,#fff9dd,transparent),radial-gradient(1px 1px at 88% 7%,#fff9dd,transparent),radial-gradient(1px 1px at 31% 29%,#fff9dd,transparent);mask-image:linear-gradient(#000 20%,transparent 45%);animation:crew-stars calc(6s * var(--scene-rate)) ease-in-out infinite alternate}
.motion-rain .crew-scene-atmosphere{inset:-24px -5px;background:repeating-linear-gradient(104deg,transparent 0 29px,#d5e4e633 30px,transparent 31px 60px);mask-image:linear-gradient(transparent,#0008 20%,#000 80%,transparent);opacity:var(--scene-strength);animation:crew-rain calc(1.7s * var(--scene-rate)) linear infinite}
.motion-rain .crew-scene-detail,.motion-mist .crew-scene-atmosphere{inset:10% -20% -3%;background:radial-gradient(ellipse at 10% 76%,#c1d5d080,transparent 32%),radial-gradient(ellipse at 90% 87%,#e1e8df80,transparent 38%);opacity:var(--scene-strength);animation:crew-mist calc(13s * var(--scene-rate)) ease-in-out infinite alternate}
.motion-sea .crew-scene-detail{background:radial-gradient(ellipse at 20% 58%,#c3efef4d,transparent 17%),radial-gradient(ellipse at 86% 61%,#e5ffff80,transparent 12%);opacity:var(--scene-strength);animation:crew-water-light calc(6s * var(--scene-rate)) ease-in-out infinite alternate}
.motion-dust .crew-scene-atmosphere{background:linear-gradient(123deg,transparent 5%,#ffe7bb14 20%,transparent 38%);animation:crew-lantern calc(9s * var(--scene-rate)) ease-in-out infinite alternate}
.motion-dust .crew-scene-detail{inset:-12px 0;background:radial-gradient(1px 2px at 15% 23%,#f5e3b3c9,transparent),radial-gradient(1px 2px at 74% 38%,#f5e3b3a3,transparent),radial-gradient(1px 1px at 81% 61%,#f5e3b3c9,transparent),radial-gradient(1px 1px at 27% 70%,#f5e3b3a3,transparent);animation:crew-dust calc(12s * var(--scene-rate)) ease-in-out infinite alternate}
.motion-mist .crew-scene-detail{inset:-15px 0;background:radial-gradient(2px 1px at 11% 31%,#fff8ecb3,transparent),radial-gradient(2px 1px at 88% 58%,#fff8ec99,transparent),radial-gradient(2px 1px at 23% 74%,#fff8ec99,transparent);animation:crew-dust calc(15s * var(--scene-rate)) ease-in-out infinite alternate}
.rarity-seasoned .crew-scene-detail{display:none}
.crew-inline .crew-scene,.crew-inline .crew-portrait-frame::after{display:none!important}
.crew-inline .crew-portrait-frame{box-shadow:none;border-radius:2px!important}
body.paused .crew-scene>span{animation-play-state:paused!important}
.crew-scene:not(.scene-visible)>span,html[data-crew-scenes-hidden] .crew-scene>span{animation-play-state:paused!important}
@keyframes crew-water{from{transform:translate3d(-1px,0,0) scale(1.015);filter:brightness(.95)}to{transform:translate3d(1px,1px,0) scale(1.025);filter:brightness(1.12)}}
@keyframes crew-lantern{from{opacity:.2}to{opacity:.58}}
@keyframes crew-stars{from{opacity:.25}to{opacity:.85}}
@keyframes crew-rain{from{transform:translate3d(0,-10px,0)}to{transform:translate3d(-4px,10px,0)}}
@keyframes crew-mist{from{transform:translate3d(-5%,0,0);opacity:.15}to{transform:translate3d(5%,-1%,0);opacity:.48}}
@keyframes crew-water-light{from{opacity:.15;transform:scaleX(.96)}to{opacity:.38;transform:scaleX(1.04)}}
@keyframes crew-dust{from{transform:translate3d(-2px,8px,0);opacity:.2}to{transform:translate3d(4px,-8px,0);opacity:.65}}
@media(prefers-reduced-motion:reduce){.crew-scene>span{animation:none!important}.crew-scene-detail{opacity:.2}}