.story-ring{inset:0;pointer-events:none;position:absolute}.story-ring.static{background:linear-gradient(135deg,var(--color-primary),var(--color-accent))}.story-ring.viewed{background:var(--color-muted)}.story-ring.comet,.story-ring.spin{animation:storyRingSpin 3s linear infinite;inset:-50%;will-change:transform}.story-ring.comet{animation-duration:2.4s}.story-ring.spin{background:conic-gradient(var(--color-primary),var(--color-accent),var(--color-primary))}.story-ring.comet{background:conic-gradient(from 0deg,var(--color-primary),var(--color-accent) 35%,var(--color-surface) 50%,var(--color-accent) 65%,var(--color-primary))}@keyframes storyRingSpin{to{transform:rotate(1turn)}}@property --story-progress{syntax:"<percentage>";initial-value:0%;inherits:false}.story-ring.draw{animation:storyRingDraw .9s ease-out both;background:conic-gradient(from -90deg,var(--color-primary),var(--color-accent) var(--story-progress),color-mix(in srgb,var(--color-primary) 16%,transparent) var(--story-progress))}@keyframes storyRingDraw{0%{--story-progress:0%}to{--story-progress:100%}}@media(prefers-reduced-motion:reduce){.story-ring.comet,.story-ring.spin{animation:none;background:linear-gradient(135deg,var(--color-primary),var(--color-accent));inset:0}}