<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ampoule explosive</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    background: #10131c;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .scene {
    position: relative;
    width: 300px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .bulb {
    position: relative;
    width: 110px;
    height: 150px;
    background: #333944;
    border-radius: 50% 50% 45% 45%;
    border: 4px solid #687080;
    transition: background 0.5s, box-shadow 0.5s;
    z-index: 2;
  }

  .bulb::after {
    content: "";
    position: absolute;
    bottom: -35px;
    left: 30px;
    width: 50px;
    height: 35px;
    background: repeating-linear-gradient(
      to bottom, #858b96 0 4px, #343b48 4px 8px
    );
    border-radius: 3px;
  }

  .bulb.on {
    background: #fff4a8;
    box-shadow:
      0 0 30px #ffe66d,
      0 0 80px #ffca28,
      0 0 150px #ff9800;
  }

  .bulb.flash {
    animation: flicker 0.12s infinite;
  }

  @keyframes flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.12; }
  }

  .bulb.explode {
    animation: explode 0.2s forwards;
  }

  @keyframes explode {
    to {
      transform: scale(2);
      opacity: 0;
      filter: brightness(5);
    }
  }

  .shard {
    position: absolute;
    width: 8px;
    height: 15px;
    background: #d7f5ff;
    box-shadow: 0 0 8px #fff;
    z-index: 3;
    animation: fly 1s ease-out forwards;
  }

  @keyframes fly {
    to {
      transform: translate(var(--x), var(--y)) rotate(720deg);
      opacity: 0;
    }
  }

  .flash-screen {
    position: absolute;
    inset: 0;
    background: white;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
  }

  .flash-screen.boom {
    animation: boom 0.5s ease-out;
  }

  @keyframes boom {
    0% { opacity: 1; }
    100% { opacity: 0; }
  }

  button {
    position: absolute;
    bottom: 15px;
    padding: 12px 24px;
    background: #ffc928;
    border: none;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
  }
</style>
</head>
<body>

<div class="scene" id="scene">
  <div class="bulb" id="bulb"></div>
  <div class="flash-screen" id="flash"></div>
  <button onclick="start()">ALLUMER</button>
</div>

<script>
const bulb = document.getElementById("bulb");
const scene = document.getElementById("scene");
const flash = document.getElementById("flash");

function start() {
  bulb.className = "bulb";
  scene.querySelectorAll(".shard").forEach(e => e.remove());

  // 1. L'ampoule s'allume
  setTimeout(() => {
    bulb.classList.add("on");
  }, 300);

  // 2. Elle commence à clignoter
  setTimeout(() => {
    bulb.classList.add("flash");
  }, 1800);

  // 3. Accélération des clignotements
  setTimeout(() => {
    bulb.style.animationDuration = "0.06s";
  }, 3000);

  // 4. EXPLOSION !
  setTimeout(() => {
    bulb.className = "bulb explode";
    flash.classList.remove("boom");
    void flash.offsetWidth;
    flash.classList.add("boom");

    // Projection des éclats
    for (let i = 0; i < 35; i++) {
      const shard = document.createElement("div");
      shard.className = "shard";

      const angle = Math.random() * Math.PI * 2;
      const distance = 100 + Math.random() * 180;

      shard.style.left = "146px";
      shard.style.top = "175px";
      shard.style.setProperty("--x",
        `${Math.cos(angle) * distance}px`);
      shard.style.setProperty("--y",
        `${Math.sin(angle) * distance}px`);

      scene.appendChild(shard);
    }
  }, 4200);
}
</script>

</body>
</html>