.pulsar { --beam-length: clamp(150px, 32vw, 480px); }
.pulsar-infall { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.pulsar-infall i { position: absolute; left: -1px; top: -1px; width: 2px; height: 2px; border-radius: 50%; background: #dbeeff; box-shadow: 0 0 5px #8fcaff, 0 0 12px #608fff77; opacity: 0; }
.pulsar.charging .pulsar-infall { opacity: 1; }
.pulsar.charging .pulsar-infall i { animation: absorb-light var(--travel) cubic-bezier(.55,.05,.85,.5) var(--lag) both; }
.pulsar.charging .pulsar-core { animation: gather-core 6.5s ease-in both; }
.pulsar.charging .pulsar-halo { animation: gather-halo 6.5s ease-in both; }
.pulsar.charging .pulsar-arm::before { animation: gather-beam 6.5s ease-in both; }
@keyframes absorb-light { 0% { opacity: 0; transform: rotate(var(--orbit)) translateX(var(--radius)) scale(.4); } 24% { opacity: .6; } 75% { opacity: .9; } 100% { opacity: 0; transform: rotate(calc(var(--orbit) + 55deg)) translateX(3px) scale(.7); } }
@keyframes gather-core { from { transform: scale(1); filter: brightness(1); } to { transform: scale(1.7); filter: brightness(2.3); box-shadow: 0 0 9px #fff, 0 0 24px #b1dfff, 0 0 45px #639aff99; } }
@keyframes gather-halo { from { transform: scale(1); opacity: .7; } to { transform: scale(1.65); opacity: 1; filter: brightness(2); } }
@keyframes gather-beam { from { opacity: .24; } to { opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .pulsar.charging .pulsar-infall i, .pulsar.charging .pulsar-core, .pulsar.charging .pulsar-halo, .pulsar.charging .pulsar-arm::before { animation: none; } }
.pulsar::after { left: -150px; top: -1px; width: 300px; height: 2px; border: 0; border-radius: 0; background: linear-gradient(90deg, transparent, #5e8eff44 25%, #d8eaff 49%, #fff 50%, #d8eaff 51%, #5e8eff44 75%, transparent); box-shadow: 0 0 9px #679dff55; transform: rotate(90deg); }
.pulsar-halo { width: 210px; height: 210px; left: -105px; top: -105px; background: radial-gradient(circle, #e4f4ff66 0, #a4d8ff2e 3%, #488bf514 13%, #1b46be08 32%, transparent 68%); }
.pulsar-arm::before { top: -1px; height: 2px; background: linear-gradient(90deg, #fff, #d4edff 8%, #729fff99 38%, transparent 95%); opacity: .24; clip-path: none; filter: drop-shadow(0 0 3px #8ebaff); }
.pulsar-arm::after { content: ''; position: absolute; left: -2px; top: -26px; width: 115%; height: 52px; background: radial-gradient(ellipse at 0 50%, #daf0ff55 0, #659cff30 15%, #325ddb14 42%, transparent 72%); clip-path: polygon(0 47%, 100% 0, 100% 100%, 0 53%); filter: blur(3px); opacity: .15; transform-origin: left center; }
.pulsar-pulse { top: -3px; width: clamp(70px, 12vw, 180px); height: 6px; border-radius: 0; background: linear-gradient(90deg, transparent, #609dff44 25%, #b9e3ffbb 72%, #fff 89%, #daf3ff 94%, transparent); clip-path: polygon(0 50%, 87% 20%, 100% 50%, 87% 80%); filter: drop-shadow(0 0 5px #a6d4ff); }
.pulsar.burst .pulsar-pulse { animation: cinematic-pulse 4.5s linear both; }
.pulsar.burst .pulsar-core { animation: cinematic-core 4.5s ease-in-out both; }
.pulsar.burst .pulsar-halo { animation: cinematic-halo 4.5s ease-in-out both; }
.pulsar.burst .pulsar-arm::before { animation: cinematic-beam 4.5s ease-out both; }
.pulsar.burst .pulsar-arm::after { animation: cinematic-haze 4.5s ease-out both; }
.pulsar.burst::after { animation: cinematic-lens 4.5s ease-out both; }
@keyframes cinematic-pulse { 0%, 22% { opacity: 0; transform: translateX(-25px) scale(.25, 1); } 26% { opacity: 1; transform: translateX(0) scale(.8, 3); } 39% { opacity: 1; } 58%, 100% { opacity: 0; transform: translateX(calc(var(--beam-length) * 2.8)) scale(3.5, 2); } }
@keyframes cinematic-core { 0% { transform: scale(1.7); filter: brightness(2.3); } 20% { transform: scale(1.9); filter: brightness(3); } 26% { transform: scale(3.6); filter: brightness(5); box-shadow: 0 0 12px #fff, 0 0 28px #b8e4ff, 0 0 55px #649fff; } 43% { transform: scale(2); filter: brightness(2.2); } 100% { transform: scale(1); filter: brightness(1); } }
@keyframes cinematic-halo { 0% { transform: scale(1.65); opacity: 1; filter: brightness(2); } 20% { transform: scale(1.8); opacity: 1; } 27% { transform: scale(3.8); opacity: 1; filter: brightness(4); } 50% { transform: scale(4.6); opacity: .65; filter: brightness(2); } 85% { transform: scale(5.2); opacity: .08; } 100% { transform: scale(1); opacity: .7; filter: brightness(1); } }
@keyframes cinematic-beam { 0%, 100% { opacity: .24; transform: scale(1); } 20% { opacity: .6; transform: scale(.7, 1); } 26% { opacity: 1; transform: scale(2.8, 4); filter: drop-shadow(0 0 12px #caeeff) drop-shadow(0 0 24px #659cff); } 42% { opacity: 1; transform: scale(2.6, 2.5); } 75% { opacity: .45; transform: scale(1.8, 1.3); } }
@keyframes cinematic-haze { 0%, 100% { opacity: .15; transform: scale(1); } 26% { opacity: 1; transform: scale(2.8, 3.5); filter: blur(4px) brightness(3); } 50% { opacity: .8; transform: scale(3, 4.5); filter: blur(6px) brightness(2); } 85% { opacity: .15; transform: scale(3.2, 5); } }
@keyframes cinematic-lens { 0%, 20%, 100% { opacity: 0; transform: rotate(90deg) scaleX(.3); } 26% { opacity: 1; transform: rotate(90deg) scaleX(2.8); filter: drop-shadow(0 0 7px #a8d6ff); } 50% { opacity: .35; transform: rotate(90deg) scaleX(2); } }
.pulsar-shock { position: absolute; left: -80px; top: -80px; width: 160px; height: 160px; opacity: 0; border-radius: 50%; background: radial-gradient(ellipse, transparent 54%, #6baaff11 60%, #cdefff88 63%, #8bbaff22 66%, transparent 73%); transform: scale(.1); }
.pulsar.burst .pulsar-shock { animation: blast-shock 4.5s ease-out both; }
@keyframes blast-shock { 0%, 22% { opacity: 0; transform: scale(.1); } 26% { opacity: .85; transform: scale(.45, .25); } 50% { opacity: .3; transform: scale(3.3, 1.8); } 85%, 100% { opacity: 0; transform: scale(5.5, 3); } }
@media (prefers-reduced-motion: reduce) { .pulsar.burst .pulsar-shock { animation: none; } }
@media (prefers-reduced-motion: reduce) { .pulsar.burst .pulsar-pulse, .pulsar.burst .pulsar-core, .pulsar.burst .pulsar-halo, .pulsar.burst .pulsar-arm::before, .pulsar.burst .pulsar-arm::after, .pulsar.burst::after { animation: none; } }