<!DOCTYPE html>
<html lang="ml">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="download.jpeg">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>🎭 MAWA 🎶</title>
  <style>
    body {
      margin: 0;
      background-color: #000;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      color: #ffc107;
      font-family: Arial, sans-serif;
    }

    img {
      width: 300px;
      border-radius: 12px;
      box-shadow: 0 0 20px #ffcc00;
    }

    @media (max-width: 500px) {
      img {
        width: 90%;
      }
      .caption {
        font-size: 1.2rem;
      }
    }

    .caption {
      font-size: 1.5rem;
      font-weight: bold;
      text-align: center;
      color: #ffcc00;
      text-shadow: 0 0 8px #ffcc00, 0 0 15px #ff9900;
      display: inline-block; /* allow natural wrapping */
      white-space: normal;
      margin-top: 20px;
    }

    .word {
      display: inline-block; /* keep words together */
      margin: 0 4px; /* space between words */
    }

    .letter {
      display: inline-block;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.5s forwards;
      color: #ffcc00;
      text-shadow: 0 0 4px #ffcc00, 0 0 10px #ff9900;
    }

    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </style>

  <script>
    // Redirect after 5 seconds
    setTimeout(() => {
      window.location.href = "home.php";
    }, 5000);

    window.onload = () => {
      const text = "Ragalaya Sandhya - Public Reality Show 2026–27";
      const captionDiv = document.querySelector('.caption');
      captionDiv.innerHTML = ''; // Clear existing content

      const words = text.split(' ');
      let letterIndex = 0;

      words.forEach((word, wIdx) => {
        const wordSpan = document.createElement('span');
        wordSpan.classList.add('word');

        [...word].forEach(char => {
          const letterSpan = document.createElement('span');
          letterSpan.textContent = char;
          letterSpan.classList.add('letter');
          letterSpan.style.animationDelay = `${letterIndex * 0.05}s`;
          wordSpan.appendChild(letterSpan);
          letterIndex++;
        });

        captionDiv.appendChild(wordSpan);

        // Add space after word except last
        if (wIdx !== words.length - 1) {
          captionDiv.appendChild(document.createTextNode('\u00A0'));
          letterIndex++; // keep timing consistent for spaces
        }
      });
    };
  </script>
</head>
<body>

  <img src="5395eedb-b7a1-4b01-b553-de63182ec8c8.jpg" alt="Ragalaya Sandhya - Public Reality Show 2026-27">
  <div class="caption"></div>

</body>
</html>
