/* Luna's living-light identity. All animation stays in transform and opacity. */
.luna-visual{--luna-size:148px;position:relative;isolation:isolate;width:100%;height:165px}
.luna-visual__decoration{position:absolute;inset:0 0 27px;pointer-events:none}
.luna-visual__system{position:absolute;width:var(--luna-size);height:var(--luna-size);left:calc(50% - var(--luna-size)/2);top:calc(50% - var(--luna-size)/2);animation:luna-energy-float 8s ease-in-out infinite;will-change:transform}
.luna-visual__halo{position:absolute;inset:-5px -26px;border-radius:50%;background:radial-gradient(ellipse,#338cff35 0%,#1877f214 37%,transparent 70%);animation:luna-energy-aura 5.6s ease-in-out infinite}
.luna-visual__reaction{position:absolute;inset:0;transform:scale(1);transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.luna-visual__orb{position:absolute;inset:0;filter:drop-shadow(0 0 8px #2795ff38)}
.luna-visual__orb svg{display:block;width:100%;height:100%;overflow:visible}
.luna-visual__ribbon,.luna-visual__core,.luna-visual__flow-lines,.luna-visual__embers{transform-box:view-box;transform-origin:50% 50%}
.luna-visual__ribbon{mix-blend-mode:screen}
.luna-visual__ribbon--one{animation:luna-energy-turn 17s linear infinite}
.luna-visual__ribbon--two{animation:luna-energy-counterturn 22s linear infinite;opacity:.88}
.luna-visual__ribbon--three{animation:luna-energy-turn 29s linear infinite;animation-delay:-10s;opacity:.73}
.luna-visual__core{animation:luna-energy-core 5.6s ease-in-out infinite;mix-blend-mode:screen}
.luna-visual__flow-lines{animation:luna-energy-counterturn 34s linear infinite;opacity:.74}
.luna-visual__embers{animation:luna-energy-embers 7s ease-in-out infinite}
.luna-visual:hover .luna-visual__reaction,.luna-visual:focus-within .luna-visual__reaction{transform:scale(1.055)}
.luna-visual .luna-visual__motion{position:absolute;left:50%;bottom:0;z-index:3;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:25px;padding:5px 10px;transform:translateX(-50%);border:1px solid transparent;border-radius:999px;color:#919eaf;background:transparent;font:inherit;font-size:10px;font-weight:400;line-height:1.2;white-space:nowrap;cursor:pointer}
.luna-visual .luna-visual__motion:hover{color:#d2e8ff;background:#1877f20c}
.luna-visual .luna-visual__motion:focus-visible{outline:2px solid #7bb2ff;outline-offset:2px}
.luna-visual .motion-icon{display:inline-block;width:11px;font-size:11px;text-align:center}

@keyframes luna-energy-float{0%,100%{transform:translateY(4px) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}
@keyframes luna-energy-aura{0%,100%{transform:scale(.92);opacity:.68}50%{transform:scale(1.09);opacity:1}}
@keyframes luna-energy-turn{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes luna-energy-counterturn{from{transform:rotate(35deg)}to{transform:rotate(-325deg)}}
@keyframes luna-energy-core{0%,100%{transform:scale(.91);opacity:.78}50%{transform:scale(1.055);opacity:1}}
@keyframes luna-energy-embers{0%,100%{transform:translateY(2px) scale(.98);opacity:.3}50%{transform:translateY(-3px) scale(1.03);opacity:.8}}

.luna-visual.motion-paused *,
.luna-visual.motion-paused *::before,
.luna-visual.motion-paused *::after{animation-play-state:paused!important}
.luna-visual.motion-paused .luna-visual__reaction{transform:none;transition:none}
@media(max-width:760px){
  .luna-visual{--luna-size:122px;height:120px}
  .luna-visual__decoration{bottom:20px}
  .luna-visual .luna-visual__motion{min-height:20px;padding:2px 9px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .luna-visual *,
  .luna-visual *::before,
  .luna-visual *::after{animation:none!important;transition:none!important;will-change:auto}
  .luna-visual .luna-visual__motion{display:none}
  .luna-visual .luna-visual__reaction{transform:none!important}
  .luna-visual__ribbon--two{transform:rotate(35deg)}
  .luna-visual__ribbon--three{transform:rotate(124deg)}
}