body {
  font-family: Arial, sans-serif;
  background: #000;
  overflow-x: hidden;
}

.main {
  height: 500vh;
  font-family: Arial, sans-serif;
  background: #000;
  overflow-x: hidden;
}

.reel {
  position: relative;
  height: 100vh;
}

.stage {
  position: absolute;
  right: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgb(26, 21, 21);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}

#eyeContainer {
  position: relative;
  width: 500px;
  height: 300px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

#eyeball {
  position: relative;
  width: 450px;
  height: 260px;
  background: #fff;
  border-radius: 50% 50%;
  overflow: hidden;
  z-index: 1;
  clip-path: path('M0,120 C0,120 112,0 225,0 C338,0 450,120 450,120 C450,120 338,240 225,240 C112,240 0,120 0,120 Z');
  background: linear-gradient(to bottom right, #ff8c00, #ff0080);
}

#eyeInner {
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 1;
}

#iris {
  position: absolute;
  width: 220px;
  height: 220px;
  background: #F1223B;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

#pupil {
  width: 50px;
  height: 50px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-radius 0.5s ease;
}

#pupilLetter {
  font-size: 60px;
  font-weight: 900;
  color: #fff;
  opacity: 0;
  transform: scale(0.5);
}

#eyelidTop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, #ff8c00, #ff0080);
  z-index: 10;
  border-radius: 0 0 50% 50% / 0 0 135% 135%;
  transform-origin: top;
}

#brand {
  position: absolute;
  text-align: center;
  color: #fff;
  opacity: 0;
  z-index: 30;
  transform: translateY(30px);
}

#brand h1 {
  font-size: 80px;
  letter-spacing: 15px;
  margin-bottom: 10px;
}

.outline-text {
  -webkit-text-stroke: 1.5px #ffffff;
  color: transparent;
  font-family: 'Arial Black', sans-serif;
  letter-spacing: 5px;
}

.glowing-outline-text {
  font-family: 'Arial Black', sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 5px;
  background: linear-gradient(90deg, #ff0080, #ff8c00, #40e0d0, #9932cc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 4px transparent;
  color: #0f0d0e;
  filter: drop-shadow(0 0 10px rgba(255, 0, 128, 0.6)) drop-shadow(0 0 20px rgba(64, 224, 208, 0.4));
  background-size: 200% auto;
  animation: shine 5s linear infinite;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

.interactive-p {
  letter-spacing: 5px;
  line-height: 1.6;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 250px;
}

.char {
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
  cursor: default;
}

.char:hover {
  transform: translateY(-5px) scale(1.2);
  color: #ff0080;
  text-shadow: 0 0 10px #ff0080;
}

/* Universe Section Styles */
.universe-reel {
  height: 100vh;
  position: relative;
  background: #000;
  overflow: hidden;
}

#auroraCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.8;
}

#universeContent {
  position: absolute;
  left: 10%;
  z-index: 20;
}

.uni-title {
  font-size: 5rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  margin-bottom: 20px;
}

.red-text {
  color: #ff1f3c;
  text-shadow: 0 0 20px rgba(255, 31, 60, 0.6);
}

.uni-p {
  color: #ffffff;
  font-size: 1.2rem;
  max-width: 400px;
}

#solarSystem {
  position: absolute;
  bottom: -40%;
  left: 35%;
  transform: translateX(-50%) rotateX(65deg);
  transform-style: preserve-3d;
  width: 800px;
  height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.central-star {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, #ff1f3c 0%, #8b0000 60%, #000 100%);
  border-radius: 50%;
  transform: rotateX(-65deg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 15;
  box-shadow: 0 0 80px #ff1f3c;
  color: #fff;
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
  position: relative;
}

.star-label {
  font-size: 0.75rem;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.8);
}

.orbit-ring {
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transform: scale(0);
  transform-style: preserve-3d;
}

#orbit1 {
  width: 350px;
  height: 350px;
}

#orbit2 {
  width: 550px;
  height: 550px;
}

#orbit3 {
  width: 750px;
  height: 750px;
}

.planet {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  cursor: pointer;
  transition: box-shadow 0.3s;
}

.planet:hover {
  box-shadow: 0 0 50px rgba(255, 255, 255, 0.8) !important;
}

#orbit1 .planet:nth-child(1) {
  background: radial-gradient(circle at 30% 30%, #00d4ff, #0066ff, #6600ff);
  box-shadow: 0 0 30px rgba(0, 100, 255, 1), 0 0 50px rgba(0, 100, 255, 0.6);
}

#orbit1 .planet:nth-child(2) {
  background: radial-gradient(circle at 30% 30%, #00ffcc, #0099ff, #0066cc);
  box-shadow: 0 0 30px rgba(0, 200, 255, 1), 0 0 50px rgba(0, 200, 255, 0.6);
}

#orbit1 .planet:nth-child(3) {
  background: radial-gradient(circle at 30% 30%, #cc00ff, #6600cc, #330099);
  box-shadow: 0 0 30px rgba(150, 0, 255, 1), 0 0 50px rgba(150, 0, 255, 0.6);
}

#orbit2 .planet:nth-child(1) {
  background: radial-gradient(circle at 30% 30%, #ffcc00, #ff6600, #ff0066);
  box-shadow: 0 0 30px rgba(255, 100, 0, 1), 0 0 50px rgba(255, 100, 0, 0.6);
}

#orbit2 .planet:nth-child(2) {
  background: radial-gradient(circle at 30% 30%, #ffdd00, #ffaa00, #ff6600);
  box-shadow: 0 0 30px rgba(255, 170, 0, 1), 0 0 50px rgba(255, 170, 0, 0.6);
}

#orbit2 .planet:nth-child(3) {
  background: radial-gradient(circle at 30% 30%, #00ccff, #0066ff, #0033cc);
  box-shadow: 0 0 30px rgba(0, 150, 255, 1), 0 0 50px rgba(0, 150, 255, 0.6);
}

#orbit3 .planet:nth-child(1) {
  background: radial-gradient(circle at 30% 30%, #00ffaa, #00cc88, #009966);
  box-shadow: 0 0 30px rgba(0, 200, 150, 1), 0 0 50px rgba(0, 200, 150, 0.6);
}

#orbit3 .planet:nth-child(2) {
  background: radial-gradient(circle at 30% 30%, #ff0099, #cc0066, #990033);
  box-shadow: 0 0 30px rgba(255, 0, 100, 1), 0 0 50px rgba(255, 0, 100, 0.6);
}

#orbit3 .planet:nth-child(3) {
  background: radial-gradient(circle at 30% 30%, #ff00ff, #cc00cc, #990099);
  box-shadow: 0 0 30px rgba(255, 0, 255, 1), 0 0 50px rgba(255, 0, 255, 0.6);
}

#orbit3 .planet:nth-child(4) {
  background: radial-gradient(circle at 30% 30%, #ffaa00, #ff6600, #ff3300);
  box-shadow: 0 0 30px rgba(255, 100, 0, 1), 0 0 50px rgba(255, 100, 0, 0.6);
}

#orbit1 .planet:nth-child(1) {
  top: -20px;
  left: 50%;
  margin-left: -20px;
}

#orbit1 .planet:nth-child(2) {
  bottom: -20px;
  left: 50%;
  margin-left: -20px;
}

#orbit1 .planet:nth-child(3) {
  top: 50%;
  left: -20px;
  margin-top: -20px;
}

#orbit2 .planet:nth-child(1) {
  top: -20px;
  left: 50%;
  margin-left: -20px;
}

#orbit2 .planet:nth-child(2) {
  bottom: -20px;
  left: 50%;
  margin-left: -20px;
}

#orbit2 .planet:nth-child(3) {
  top: 50%;
  right: -20px;
  margin-top: -20px;
}

#orbit3 .planet:nth-child(1) {
  top: 8%;
  left: 15%;
}

#orbit3 .planet:nth-child(2) {
  top: 8%;
  right: 15%;
}

#orbit3 .planet:nth-child(3) {
  bottom: 8%;
  left: 15%;
}

#orbit3 .planet:nth-child(4) {
  bottom: 8%;
  right: 15%;
}

#labelContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 11;
}

.planet-label {
  position: absolute;
  font-family: 'Exo 2', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.7;

  /* Simple clean white text with a soft depth shadow */
  color: rgba(220, 230, 255, 0.78);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);

  /* No background, no border, no box */
  background: none;
  border: none;
  padding: 0;

  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Hover — subtle bright glow, no box */
.planet-label.hovered {
  color: #ffffff;
  text-shadow:
    0 0 12px rgba(120, 200, 255, 0.9),
    0 0 30px rgba(120, 200, 255, 0.45),
    0 1px 8px rgba(0, 0, 0, 0.9);
}

.data-badge {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%) rotateX(-65deg);
  background: rgba(0, 150, 255, 1);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.5s;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(0, 150, 255, 0.5);
}

.central-star.show-badge .data-badge {
  opacity: 1;
}