/* Orbital composition and reveal adapted from annual-2027/web/style.css. */
.cosmic-loading{animation:cosmic-in 440ms ease-out both}
.cosmic-visual{position:relative;isolation:isolate}
.cosmic-loading .animation-stage{width:100%;height:340px;display:grid;place-items:center;position:relative}
.cosmic-loading .orbital{position:relative;width:430px;height:330px;isolation:isolate;transition:transform 1.6s cubic-bezier(.22,.61,.36,1);transform:scale(1.12)}
.cosmic-loading .orbit{position:absolute;width:100%;height:45%;top:27.5%;border:1px solid #e4b9cb9c;border-radius:50%;opacity:1;transform-origin:50% 50%;transition:transform 1.5s cubic-bezier(.22,.61,.36,1),opacity 1s}
.cosmic-loading .orbit i{position:absolute;width:5px;height:5px;left:17%;top:10%;border-radius:50%;background:#fff5ee;box-shadow:0 0 8px #fff,0 0 18px #e6a0b9;opacity:1;transition:opacity 1.3s}
.cosmic-loading .orbit-one{transform:rotate(-25deg)}
.cosmic-loading .orbit-two{transform:rotate(28deg) scale(.95,1.15)}
.cosmic-loading .orbit-three{transform:rotate(-48deg) scale(1.04,.8);opacity:.45}
.cosmic-loading .orbital-glow{position:absolute;inset:6%;background:radial-gradient(ellipse,#d593b140,transparent 64%);opacity:0;transition:opacity 1.6s}
.cosmic-loading .pearl{position:absolute;top:50%;left:50%;width:40px;height:40px;transform:translate(-50%,-50%) scale(.1);border-radius:50%;background:radial-gradient(circle at 32% 27%,#fffaf0 0,#f9e9e4 15%,#c1a395 60%,#8b6c66 100%);box-shadow:0 0 15px #e4b7c5a0;transition:transform 1.5s ease,opacity .8s}
.cosmic-loading .reveal-star{position:absolute;top:50%;left:50%;width:156px;height:156px;filter:drop-shadow(0 0 12px #e6b8c755);transform:translate(-50%,-50%) scale(.3);opacity:0;transition:transform 1.2s ease,opacity .9s}
.cosmic-loading .loader-rose{transition:opacity 1.2s ease,transform 1.6s ease}
.cosmic-loading .progress-track span{width:100%;height:100%;transform:scaleX(0);transform-origin:left;transition:none;will-change:transform}
.cosmic-loading[data-phase=align] .orbital{transform:scale(.9)}
.cosmic-loading:is([data-phase=gather],[data-phase=align]) .orbit-one{animation:cosmic-one 9s linear infinite}
.cosmic-loading:is([data-phase=gather],[data-phase=align]) .orbit-two{animation:cosmic-two 12s linear infinite}
.cosmic-loading:is([data-phase=gather],[data-phase=align]) .orbit-three{animation:cosmic-three 11s linear infinite;opacity:.9}
.cosmic-loading[data-phase=gather] .pearl{animation:cosmic-pearl 1.4s ease-out both}
.cosmic-loading[data-phase=gather] .orbital-glow{animation:cosmic-glow 1.4s ease-out both}
.cosmic-loading[data-phase=align] .pearl{transform:translate(-50%,-50%) scale(1)}
.cosmic-loading[data-phase=align] .orbital-glow{opacity:1}
.cosmic-loading[data-phase=reveal] .orbital{transform:scale(.9)}
.cosmic-loading[data-phase=reveal] .orbit-one{transform:rotate(0) scale(.9,.75)}
.cosmic-loading[data-phase=reveal] .orbit-two{transform:rotate(90deg) scale(.9,.75)}
.cosmic-loading[data-phase=reveal] .orbit-three{opacity:0}
.cosmic-loading[data-phase=reveal] .pearl{opacity:0}
.cosmic-loading[data-phase=reveal] .reveal-star{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cosmic-loading[data-phase=reveal] .orbital-glow{opacity:.7}
.cosmic-loading[data-phase=reveal] .loader-rose{opacity:.08;transform:rotate(-15deg) translateY(10px)}
@keyframes cosmic-one{from{transform:rotate(-25deg) scale(1,.95)}to{transform:rotate(335deg) scale(1,.95)}}
@keyframes cosmic-two{from{transform:rotate(68deg) scale(.98,1.05)}to{transform:rotate(428deg) scale(.98,1.05)}}
@keyframes cosmic-three{from{transform:rotate(-58deg) scale(1.02,1)}to{transform:rotate(-418deg) scale(1.02,1)}}
@keyframes cosmic-pearl{from{transform:translate(-50%,-50%) scale(.1)}to{transform:translate(-50%,-50%) scale(1)}}
@keyframes cosmic-glow{from{opacity:.1}to{opacity:1}}
@keyframes cosmic-in{from{opacity:0}to{opacity:1}}
.result-card{animation:cosmic-in 440ms ease-out both}
@media(max-width:650px){.cosmic-loading .animation-stage{height:290px}.cosmic-loading .orbital{width:290px;height:260px}}
@media(max-width:380px){.cosmic-loading .orbital{width:250px;height:240px}}
@media(prefers-reduced-motion:reduce){.cosmic-loading,.cosmic-loading *,.result-card{animation:none!important;transition:none!important}.cosmic-loading .pearl{transform:translate(-50%,-50%) scale(1)}}
@media(max-width:650px) and (max-height:700px){.loader-page{padding:15px 18px 30px}.cosmic-loading .animation-stage{height:200px}.cosmic-loading .orbital{width:230px;height:190px}.cosmic-loading h1{font-size:26px;margin-bottom:24px}}

/* Keep the calculation screen entirely visual. */
.animation-only .header{display:none}
.animation-only .loader-page{min-height:100svh}
.cosmic-loading .progress-track{margin-top:34px}