Seven Sins

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Seven Sins</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      overflow: hidden;
      background: linear-gradient(45deg, #1a0033, #330033, #001a33, #003333);
      background-size: 400% 400%;
      animation: gradientShift 15s ease infinite;
      font-family: "Impact", "Arial Black", sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    @keyframes gradientShift {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    .container {
      position: relative;
      text-align: center;
      z-index: 10;
    }

    .line {
      font-size: clamp(3rem, 10vw, 8rem);
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin: 30px 0;
      opacity: 0;
      transform: translateY(30px);
      color: #ffffff;
      text-shadow: 0 0 40px currentColor, 0 5px 10px rgba(0, 0, 0, 0.8);
      transition: all 0.6s ease;
    }

    .line1 {
      animation: fadeInUp 1s 0.3s forwards, colorCycle1 8s infinite;
    }

    .line2 {
      animation: fadeInUp 1s 0.8s forwards, colorCycle2 8s infinite;
    }

    .line3 {
      font-size: clamp(2.5rem, 8vw, 6rem);
      animation: fadeInUp 1s 1.3s forwards, colorCycle3 8s infinite;
    }

    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes colorCycle1 {
      0%, 100% {
        color: #ff0080;
        text-shadow: 0 0 40px #ff0080, 0 5px 10px rgba(0, 0, 0, 0.8);
      }
      33% {
        color: #ff00ff;
        text-shadow: 0 0 40px #ff00ff, 0 5px 10px rgba(0, 0, 0, 0.8);
      }
      66% {
        color: #ff4466;
        text-shadow: 0 0 40px #ff4466, 0 5px 10px rgba(0, 0, 0, 0.8);
      }
    }

    @keyframes colorCycle2 {
      0%, 100% {
        color: #00ffff;
        text-shadow: 0 0 40px #00ffff, 0 5px 10px rgba(0, 0, 0, 0.8);
      }
      33% {
        color: #0099ff;
        text-shadow: 0 0 40px #0099ff, 0 5px 10px rgba(0, 0, 0, 0.8);
      }
      66% {
        color: #00ddff;
        text-shadow: 0 0 40px #00ddff, 0 5px 10px rgba(0, 0, 0, 0.8);
      }
    }

    @keyframes colorCycle3 {
      0%, 100% {
        color: #ffff00;
        text-shadow: 0 0 40px #ffff00, 0 5px 10px rgba(0, 0, 0, 0.8);
      }
      33% {
        color: #ffaa00;
        text-shadow: 0 0 40px #ffaa00, 0 5px 10px rgba(0, 0, 0, 0.8);
      }
      66% {
        color: #ffdd00;
        text-shadow: 0 0 40px #ffdd00, 0 5px 10px rgba(0, 0, 0, 0.8);
      }
    }

    .particles {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    .particle {
      position: absolute;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      opacity: 0.6;
    }

    @keyframes floatParticle {
      0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
      }
      10% {
        opacity: 0.6;
      }
      90% {
        opacity: 0.6;
      }
      100% {
        transform: translateY(-100vh) translateX(var(--drift));
        opacity: 0;
      }
    }

    .glow-orb {
      position: fixed;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.3;
      pointer-events: none;
      z-index: 0;
    }

    .orb1 {
      background: #ff0080;
      top: 20%;
      left: 10%;
      animation: float1 20s ease-in-out infinite;
    }

    .orb2 {
      background: #00ffff;
      top: 60%;
      right: 10%;
      animation: float2 25s ease-in-out infinite;
    }

    .orb3 {
      background: #ffff00;
      bottom: 20%;
      left: 50%;
      animation: float3 30s ease-in-out infinite;
    }

    @keyframes float1 {
      0%, 100% {
        transform: translate(0, 0);
      }
      50% {
        transform: translate(100px, 80px);
      }
    }

    @keyframes float2 {
      0%, 100% {
        transform: translate(0, 0);
      }
      50% {
        transform: translate(-80px, -100px);
      }
    }

    @keyframes float3 {
      0%, 100% {
        transform: translate(0, 0);
      }
      50% {
        transform: translate(-60px, 70px);
      }
    }
  </style>
</head>
<body>
  <div class="glow-orb orb1"></div>
  <div class="glow-orb orb2"></div>
  <div class="glow-orb orb3"></div>

  <div class="particles" id="particles"></div>

  <div class="container">
    <div class="line line1">Seven Sins.</div>
    <div class="line line2">Seven Sacrifices.</div>
    <div class="line line3">No sequels.</div>
  </div>

  <script>
    const particlesContainer = document.getElementById("particles");
    const colors = ["#ff0080", "#00ffff", "#ffff00", "#ff00ff", "#00ff88"];

    function createParticle() {
      const particle = document.createElement("div");
      particle.className = "particle";
      particle.style.left = Math.random() * 100 + "%";
      particle.style.bottom = "-10px";
      particle.style.background = colors[Math.floor(Math.random() * colors.length)];
      particle.style.boxShadow = `0 0 10px ${particle.style.background}`;

      const drift = (Math.random() - 0.5) * 200;
      particle.style.setProperty("--drift", drift + "px");

      const duration = 15 + Math.random() * 10;
      particle.style.animation = `floatParticle ${duration}s linear`;

      particlesContainer.appendChild(particle);

      setTimeout(() => particle.remove(), duration * 1000);
    }

    setInterval(createParticle, 300);

    for (let i = 0; i < 20; i++) {
      setTimeout(createParticle, i * 100);
    }
  </script>
</body>
</html>