@layer components {
  .dm-fun-eclipse {
    --bg-color: #09090b;
    --size: 600px;
    width: var(--size);
    height: var(--size);
    position: relative;
    overflow: hidden;

    .layer {
      position: absolute;
      inset: 0;
    }
  
    .layer-1 {
      animation: 30s linear dm-fun-eclipse-rotate infinite;
      transform-origin: 66% 40%;
      background:
        repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,248,176,0.46) 3.96%, rgba(69,168,255,0) 8.33%, rgba(69,168,255,0) 8.33%) 69.5% 37.7% / 17.2% 17.2% no-repeat, 
        radial-gradient(ellipse at 50% 50%, rgba(255,248,176,1) 0%, rgba(69,168,255,0) 47.22%) 74.1% 35.6% / 33.6% 36.6% no-repeat; 
    }
  
    .layer-2 {
      animation: 20s linear dm-fun-eclipse-rotate infinite reverse;
      transform-origin: 66% 40%;
      background:
              radial-gradient(ellipse at 50% 50%, rgba(69,168,255,0) 20%, var(--bg-color) 29%) 77.4% 33.8% / 40% 40% no-repeat, 
              repeating-conic-gradient(from 15deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,248,176,0.51) 2.64%, rgba(69,168,255,0) 5.56%, rgba(69,168,255,0) 5.56%) 69.5% 37.7% / 17.2% 17.2% no-repeat; 
    }
  
    .layer-3 {
      animation: 20s linear dm-fun-eclipse-rotate infinite;
      background:
        repeating-conic-gradient(from 355deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,198,69,0.26) 8.1%, rgba(69,168,255,0) 16.67%, rgba(69,168,255,0) 16.67%) 0 0 / 100% 100% no-repeat; 
    }
  
    .layer-4 {
      animation: 40s linear dm-fun-eclipse-rotate infinite reverse;
      background:
        repeating-conic-gradient(from 355deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,198,69,0.26) 2.86%, rgba(69,168,255,0) 5.88%, rgba(69,168,255,0) 5.88%) 0% 0% / 100% 100% no-repeat; 
    }
  
    .layer-5 {
      animation: 40s linear dm-fun-eclipse-rotate infinite;
      background:
        repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,198,69,0.26) 6.62%, rgba(69,168,255,0) 7.69%, rgba(69,168,255,0) 7.69%) 0% 0% / 100% 100% no-repeat; 
    }
  
    .layer-6 {
      background:
        radial-gradient(ellipse at 50% 50%, rgba(255,248,176,0.27) 0%, rgba(69,168,255,0) 63.54%) 67% 39.3% / 5.8% 5.8% no-repeat, 
        radial-gradient(ellipse at 50% 50%, rgba(69,168,255,0) 40.28%, rgba(255,183,163,0.05) 52.43%, rgba(69,168,255,0) 63.54%) 68% 38.6% / 13% 13% no-repeat, 
        radial-gradient(ellipse at 50% 50%, rgba(255,248,176,0.55) 0%, rgba(69,168,255,0) 63.54%) 66.9% 39.3% / 3.4% 3.4% no-repeat, 
        radial-gradient(ellipse at 50% 50%, rgba(255,248,176,0.2) 0%, rgba(69,168,255,0) 66.67%) 70.7% 36.5% / 25.6% 25.6% no-repeat, 
        radial-gradient(ellipse at 50% 50%, var(--bg-color) 26%, rgba(69,168,255,0) 26.4%) 0% 0% / 100% 100% no-repeat, 
        radial-gradient(ellipse at 50% 50%, rgba(255,212,148,0.04) 0%, rgba(69,168,255,0) 69.79%) 0% 0% / 100% 100% no-repeat, 
        radial-gradient(ellipse at 50% 50%, rgba(255,240,148,0.11) 0%, rgba(69,168,255,0) 52.43%) 0% 0% / 100% 100% no-repeat, 
        radial-gradient(ellipse at 51% 49%, rgba(69,168,255,0) 23.96%, var(--bg-color) 40.63%) 0% 0% / 100% 100% no-repeat, 
        repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 0%, rgba(255,239,69,0.14) 11.04%, rgba(69,168,255,0) 20%, rgba(69,168,255,0) 20%) 0% 0% / 100% 100% no-repeat, 
        radial-gradient(ellipse at 52% 48%, rgba(69,168,255,0) 23.96%, var(--bg-color) 34.03%) 0% 0% / 100% 100% no-repeat, 
        radial-gradient(ellipse at 50% 50%, rgba(255,185,147,0.29) 28%, rgba(69,168,255,0) 30%) 0% 0% / 100% 100% no-repeat; 
    }
  }

  @keyframes dm-fun-eclipse-rotate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
}