/* SCENE */
 .scene {
   width: 100%;
   height: 100vh;
   position: relative;
   overflow: hidden;
   background:
     radial-gradient(ellipse at center bottom,
       rgba(120, 150, 255, 0.25) 0%,
       rgba(30, 40, 110, 0.6) 35%,
       rgba(10, 15, 40, 0.9) 60%,
       #02030a 100%);
 }

 /* CONTENT */
 .content {
   position: absolute;
   top: 40%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
   width: 80%;
   color: white;
 }

 h1 {
   font-size: 64px;
   font-weight: 700;
   line-height: 1.1;
 }

 /* GRADIENT TEXT */
 .top {
   background: linear-gradient(to bottom, #ffffff, #9fb4ff);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   opacity: 0.7;
 }

 .bottom {
   background: linear-gradient(to bottom, #ffffff, #dfe9ff);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }

 p {
   margin-top: 20px;
   color: #cfd6ff;
   font-size: 16px;
   opacity: 0.8;
 }

 /* STARS */
 .stars::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   background-image:
     radial-gradient(2px 2px at 10% 20%, #fff, transparent),
     radial-gradient(1.5px 1.5px at 80% 30%, #fff, transparent),
     radial-gradient(2px 2px at 60% 70%, #fff, transparent),
     radial-gradient(1.5px 1.5px at 30% 60%, #fff, transparent);
   opacity: .9;
 }

 /* GRAIN */
 .grain {
   position: absolute;
   width: 100%;
   height: 100%;
   background: repeating-linear-gradient(0deg,
       rgba(255, 255, 255, 0.015),
       rgba(255, 255, 255, 0.015) 1px,
       transparent 1px,
       transparent 2px);
   mix-blend-mode: overlay;
 }

 /* HORIZON */
 .horizon {
   position: absolute;
   bottom: 50px;
   width: 100%;
   height: 60%;
 }

 /* ===== GLOW LAYERS ===== */

 /* CORE (strong white center) */
 .glow-core {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 90%;
   background: radial-gradient(ellipse at center bottom,
       rgba(255, 255, 255, 1) 0%,
       rgba(255, 255, 255, 1) 8%,
       rgba(240, 245, 255, 0.95) 15%,
       rgba(180, 210, 255, 0.7) 30%,
       rgba(120, 150, 255, 0.4) 50%,
       transparent 75%);
   filter: blur(12px);
   opacity: 0;
   animation: glowPulse 3s ease-in-out forwards;
   animation-delay: 0.8s;
 }

 /* MID */
 .glow-mid {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 130%;
   background: radial-gradient(ellipse at center bottom,
       rgba(120, 150, 255, 0.6) 0%,
       rgba(80, 110, 255, 0.35) 35%,
       rgba(60, 90, 220, 0.2) 55%,
       transparent 80%);
   filter: blur(40px);
   opacity: 0;
   animation: glowPulse 3s ease-in-out forwards;
   animation-delay: 1s;
 }

 /* WIDE */
 .glow-wide {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 200%;
   background: radial-gradient(ellipse at center bottom,
       rgba(80, 110, 255, 0.25) 0%,
       rgba(50, 80, 200, 0.15) 45%,
       transparent 85%);
   filter: blur(80px);
   opacity: 0;
   animation: glowPulse 3s ease-in-out forwards;
   animation-delay: 1.2s;
 }

 /* ===== LINE (FIRST) ===== */
 .line {
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%) scaleX(0.6);
   width: 78%;
   height: 2px;
   background: linear-gradient(to right,
       transparent,
       #ffffff,
       #ffffff,
       #ffffff,
       transparent);
   box-shadow:
     0 0 60px #ffffff,
     0 0 160px #9fc2ff,
     0 0 300px rgba(120, 150, 255, 1);
   opacity: 0;
   animation: flickerLine 3s ease-out forwards;
   animation-delay: .5s;
   transform: translateX(-50%) scaleX(1);
 }

 /* ===== ANIMATIONS ===== */

 /* LINE FIRST */
 @keyframes flickerLine {
   0% {
     opacity: 0;
     /* transform: translateX(-50%) scaleX(0.3); */
   }

   20% {
     opacity: 0.4;
   }

   40% {
     opacity: 0;
   }

   60% {
     opacity: 1;
     /* transform: translateX(-50%) scaleX(1.05); */
   }

   80% {
     opacity: 1;
   }

   100% {
     opacity: 1;
     /* transform: translateX(-50%) scaleX(1); */
   }
 }

 /* GLOW AFTER */
 @keyframes glowPulse {
   0% {
     opacity: 0;
   }

   30% {
     opacity: 0.4;
   }

   60% {
     opacity: 1;
   }

   80% {
     opacity: 0.7;
   }

   100% {
     opacity: 0.9;
   }
 }