/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  height: 100vh;
  background: linear-gradient(180deg, #0a0a0a, #111);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  perspective: 1000px;
}

/* Scene container */
.scene {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Fixed center text */
.fixed-text {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(3rem, 8vw, 6rem); /* responsive font */
  font-weight: 900;
  background: linear-gradient(90deg, #FF9933, #FFFFFF, #138808);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 10px #FF9933,
    0 0 20px #FFFFFF,
    0 0 30px #138808;
  z-index: 100;
  text-align: center;
}

/* Ribbons */
.ribbon {
  position: absolute;
  width: clamp(15px, 3vw, 30px); /* responsive width */
  height: clamp(150px, 30vh, 250px); /* responsive height */
  border-radius: 20px;
  transform-style: preserve-3d;
  animation: float 6s ease-in-out infinite;
  clip-path: polygon(0 0, 100% 10%, 90% 90%, 10% 100%);
}

/* Ribbons colors and positions */
.saffron { background: linear-gradient(#FF9933, #FFB84D); left: 15%; top: 25%; }
.white   { background: linear-gradient(#FFFFFF, #DDDDDD); left: 45%; top: 45%; }
.green   { background: linear-gradient(#138808, #28A745); left: 75%; top: 20%; }

/* Ribbon float animation */
@keyframes float {
  0% { transform: rotateY(0deg) rotateX(0deg) translateY(0px); }
  50% { transform: rotateY(180deg) rotateX(180deg) translateY(-8vh); } /* responsive translate */
  100% { transform: rotateY(360deg) rotateX(360deg) translateY(0px); }
}

/* Fireworks canvas */
#fireworks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Independence Day Text */
.independence-text {
  font-size: clamp(3rem, 8vw, 6rem); /* responsive */
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: linear-gradient(90deg, #FF9933, #FFFFFF, #138808);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 10px #FF9933,
    0 0 20px #FFFFFF,
    0 0 30px #138808,
    0 0 40px #FF9933,
    0 0 60px #FFFFFF;
  animation: neonGlow 60s ease-in-out infinite alternate;
  perspective: 500px;
}

/* Subtle 3D glow behind text */
.independence-text::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #FF9933, #FFFFFF, #138808);
  filter: blur(25px);
  opacity: 0.5;
  z-index: -1;
}

/* Neon glow animation */
@keyframes neonGlow {
  0% {
    text-shadow:
      0 0 5px #FF9933,
      0 0 10px #FFFFFF,
      0 0 15px #138808;
    transform: scale(1);
  }
  25% {
    text-shadow:
      0 0 15px #FF9933,
      0 0 25px #FFFFFF,
      0 0 20px #138808;
    transform: scale(1.05);
  }
  50% {
    text-shadow:
      0 0 25px #FF9933,
      0 0 40px #FFFFFF,
      0 0 30px #138808;
    transform: scale(1.08);
  }
  75% {
    text-shadow:
      0 0 20px #FF9933,
      0 0 35px #FFFFFF,
      0 0 25px #138808;
    transform: scale(1.05);
  }
  100% {
    text-shadow:
      0 0 10px #FF9933,
      0 0 20px #FFFFFF,
      0 0 15px #138808;
    transform: scale(1);
  }
}

/* Responsive adjustments for small screens */
@media (max-width: 768px) {
  .ribbon { height: 20vh; }
  .fixed-text, .independence-text { font-size: clamp(2rem, 10vw, 4rem); }
}

@media (max-width: 480px) {
  .ribbon { height: 15vh; width: 15px; }
  .fixed-text, .independence-text { font-size: clamp(1.5rem, 12vw, 3rem); }
}