Hide the circle inside other div and make the line curve

Question

I want to make my #line fully curve like an arch and I am trying to hide the sun after it crosses the line but my code isn't working. I tried to make its visibility hidden but it's not working.

body {
  background-color : rgb(22, 19, 20);
  }
#sun {
  background-color          : orange;
  top                       : 45%;
  height                    : 100px;
  width                     : 14%;
  position                  : relative;
  left                      : 39%;
  border-radius             : 50%;
  box-shadow                : 5px 5px 10px 5px red;
  animation-name            : sunset;
  animation-duration        : 5s;
  animation-timing-function : linear;
  animation-iteration-count : infinite;
  }
#line {
  width            : 50%;
  position         : relative;
  top              : 50%;
  left             : 23%;
  height           : 10px;
  border-radius    : 3px 10px 3px;
  background-color : rgb(65, 183, 212);
  }
@keyframes sunset {
  0%   { top : 47%; }
  25%  { top : 49%; }
  75%  { top : 50%; }
  100% { top : 53%; visibility : hidden; }
  }
#h{
  display  : block;
  position : fixed;
  z-index  : 2;
  height   : 200px;
  top      : 50%;
  left     : 23%;
  }

<div id="sun" > </div>
<div id="line"> </div>
<div id="h"   > </div>

Answer 1

Here is a simple hack:

1. Add border top to your #line with width of 10px and color of your choice.
2. Increase the height of #line from 10px to something like 500px and width to 700px. (As per your preferences)
3. Apply black background color to #line.
4. For curving the line use border-radius 50%

*This will work if you're sure that background will remain black, else you'll have to update bg-color using JS.

#line {
  position: relative;
  top: 50%;
  left: 23%;
  height: 500px;
  width: 700px;
  border-radius: 50%;
  border-top: 10px solid #30c4d8;
  background-color: rgb(22 19 20);
}