/* ======================
RESET
====================== */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

/* ======================
BODY
====================== */
body {
   min-height: 100vh;
   font-family: "Segoe UI", Arial, sans-serif;
   background: radial-gradient(ellipse at bottom, #02030a 0%, #000 100%);
   color: #f8f8f8;
   overflow-x: hidden;
   cursor: none;
}

/* ======================
   CÉU LOTADO DEFINITIVO
====================== */

/* ======================
   CÉU LOTADO REAL
====================== */

.stars,
.stars2,
.stars3 {
   position: fixed;
   top: 0;
   left: 0;
   width: 2px;
   height: 2px;
   background: transparent;
   z-index: -5;
   pointer-events: none;
}

/* camada principal — MUITAS estrelas */
.stars {
   box-shadow:
      2vw 5vh #fff, 4vw 15vh #fff, 6vw 25vh #fff, 8vw 35vh #fff,
      10vw 45vh #fff, 12vw 55vh #fff, 14vw 65vh #fff, 16vw 75vh #fff,
      18vw 85vh #fff, 20vw 95vh #fff,

      22vw 10vh #fff, 24vw 20vh #fff, 26vw 30vh #fff, 28vw 40vh #fff,
      30vw 50vh #fff, 32vw 60vh #fff, 34vw 70vh #fff, 36vw 80vh #fff,
      38vw 90vh #fff,

      40vw 5vh #fff, 42vw 15vh #fff, 44vw 25vh #fff, 46vw 35vh #fff,
      48vw 45vh #fff, 50vw 55vh #fff, 52vw 65vh #fff, 54vw 75vh #fff,
      56vw 85vh #fff, 58vw 95vh #fff,

      60vw 10vh #fff, 62vw 20vh #fff, 64vw 30vh #fff, 66vw 40vh #fff,
      68vw 50vh #fff, 70vw 60vh #fff, 72vw 70vh #fff, 74vw 80vh #fff,
      76vw 90vh #fff,

      78vw 5vh #fff, 80vw 15vh #fff, 82vw 25vh #fff, 84vw 35vh #fff,
      86vw 45vh #fff, 88vw 55vh #fff, 90vw 65vh #fff, 92vw 75vh #fff,
      94vw 85vh #fff, 96vw 95vh #fff,

      1vw 50vh #fff, 3vw 60vh #fff, 5vw 70vh #fff, 7vw 80vh #fff,
      9vw 90vh #fff, 11vw 10vh #fff, 13vw 20vh #fff, 15vw 30vh #fff,
      17vw 40vh #fff, 19vw 50vh #fff,

      21vw 60vh #fff, 23vw 70vh #fff, 25vw 80vh #fff, 27vw 90vh #fff,
      29vw 5vh #fff, 31vw 15vh #fff, 33vw 25vh #fff, 35vw 35vh #fff,
      37vw 45vh #fff, 39vw 55vh #fff;

   animation: estrelasMove 200s linear infinite;
}

/* camada secundária */
.stars2 {
   width: 1px;
   height: 1px;
   opacity: .7;

   box-shadow:
      5vw 10vh #fff, 15vw 20vh #fff, 25vw 30vh #fff, 35vw 40vh #fff,
      45vw 50vh #fff, 55vw 60vh #fff, 65vw 70vh #fff, 75vw 80vh #fff,
      85vw 90vh #fff, 95vw 15vh #fff,

      10vw 85vh #fff, 20vw 75vh #fff, 30vw 65vh #fff, 40vw 55vh #fff,
      50vw 45vh #fff, 60vw 35vh #fff, 70vw 25vh #fff, 80vw 15vh #fff,
      90vw 5vh #fff;

   animation: estrelasMove 300s linear infinite;
}

/* estrelas piscando */
.stars3 {
   width: 1px;
   height: 1px;

   box-shadow:
      8vw 12vh #fff,
      18vw 32vh #fff,
      28vw 52vh #fff,
      38vw 72vh #fff,
      48vw 92vh #fff,
      58vw 22vh #fff,
      68vw 42vh #fff,
      78vw 62vh #fff,
      88vw 82vh #fff;

   animation: piscar 4s infinite alternate;
}

@keyframes estrelasMove {
   from {
      transform: translateY(0);
   }

   to {
      transform: translateY(-100vh);
   }
}

@keyframes piscar {
   from {
      opacity: .3
   }

   to {
      opacity: 1
   }
}

/* ======================
NEBULA
====================== */
.nebula {
   position: fixed;
   inset: 0;
   background:
      radial-gradient(circle at 10% 20%, rgba(140, 120, 255, .25), transparent),
      radial-gradient(circle at 80% 30%, rgba(180, 140, 255, .2), transparent),
      radial-gradient(circle at 50% 70%, rgba(120, 100, 255, .25), transparent),
      radial-gradient(circle at 20% 80%, rgba(200, 150, 255, .2), transparent),
      radial-gradient(circle at 70% 60%, rgba(160, 130, 255, .15), transparent);
   z-index: -1;
}

/* LUA */
.moon {
   position: fixed;
   top: 40px;
   right: 40px;
   width: 120px;
   height: 120px;
   background: radial-gradient(circle at 30% 30%, #fff, #ddd);
   border-radius: 50%;
   box-shadow: 0 0 20px #fff, 0 0 40px #cfd8ff;
   z-index: -1;
}

/* ESTRELA CADENTE */
.shooting-star {
   position: fixed;
   top: 0;
   left: -200px;
   width: 150px;
   height: 2px;
   background: linear-gradient(90deg, white, transparent);
   transform: rotate(25deg);
   animation: shoot 8s linear infinite;
   z-index: -1;
}

@keyframes shoot {
   0% {
      transform: translateX(0) translateY(0) rotate(25deg);
      opacity: 0
   }

   10% {
      opacity: 1
   }

   100% {
      transform: translateX(120vw) translateY(60vh) rotate(25deg);
      opacity: 0
   }
}

/* PARTICULAS */
.magic-particles {
   position: fixed;
   inset: 0;
   background:
      radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, .7), transparent),
      radial-gradient(2px 2px at 70% 60%, rgba(200, 200, 255, .6), transparent),
      radial-gradient(2px 2px at 40% 80%, rgba(180, 180, 255, .6), transparent),
      radial-gradient(2px 2px at 10% 50%, rgba(255, 255, 255, .7), transparent);
   animation: magic 20s linear infinite;
   z-index: -1;
}

@keyframes magic {
   from {
      transform: translateY(0)
   }

   to {
      transform: translateY(-50px)
   }
}

/* CONTAINER */
.container {
   max-width: 1100px;
   margin: 50px auto;
   padding: 30px 40px;
   border-radius: 15px;
   background: rgba(86, 75, 240, .75);
   backdrop-filter: blur(10px);
   box-shadow: 0 15px 35px rgba(0, 0, 0, .35);
}

/* HEADER */
.header {
   text-align: center;
   margin-bottom: 25px;
}

.main-title {
   font-size: 42px;
   margin-bottom: 10px;
}

.main-paragraph {
   font-style: italic;
   opacity: .9;
}

/* IMAGENS */
.featured-image,
.img-bold {
   text-align: center;
   margin: 25px 0;
}

.featured-image img,
.img-bold img {
   width: 100%;
   max-width: 700px;
   border-radius: 12px;
   box-shadow:
      0 0 25px rgba(180, 140, 255, .15),
      0 0 50px rgba(140, 120, 255, .1);
}

/* TEXTO */
.bold {
   font-weight: bold;
   font-style: italic;
}

/* CITAÇÃO */
.quote-container {
   background: rgba(255, 255, 255, .1);
   padding: 15px 20px;
   border-left: 5px solid #ffd700;
   margin: 25px 0;
   border-radius: 8px;
}

/* BOTÃO */
.moreinfo-container a {
   display: inline-block;
   margin-top: 15px;
   padding: 10px 18px;
   background: #ffd700;
   color: #000;
   text-decoration: none;
   border-radius: 8px;
   font-weight: bold;
   transition: .3s;
}

.moreinfo-container a:hover {
   background: #ffea00;
   transform: scale(1.05);
}

/* CURSOR */
.magic-cursor {
   position: fixed;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   pointer-events: none;
   background: radial-gradient(circle, #fff, #caa6ff);
   box-shadow: 0 0 8px #fff, 0 0 15px #caa6ff, 0 0 25px #9f7cff;
   transform: translate(-50%, -50%);
   z-index: 9999;
}

/* ======================
   ANIMAÇÃO SORAKA
====================== */

.featured-image img,
.img-bold img {
   animation: sorakaFloat 6s ease-in-out infinite;
   transition: transform .4s ease, box-shadow .4s ease, filter .4s ease;
}

/* flutuação */
@keyframes sorakaFloat {
   0% {
      transform: translateY(0px);
   }

   50% {
      transform: translateY(-10px);
   }

   100% {
      transform: translateY(0px);
   }
}

/* hover mágico */
.featured-image img:hover,
.img-bold img:hover {
   transform: scale(1.03) translateY(-5px);
   box-shadow: 0 20px 40px rgba(180, 140, 255, .4);
   filter: brightness(1.05) saturate(1.1);
}