Super Enhanced
Join Now Button

/* 3D perspective context on body */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: radial-gradient(circle, #667eea, #764ba2);
  font-family: 'Arial', sans-serif;
  overflow: hidden;
  perspective: 1000px;    /* enables 3D child transforms */
}

/* Container — 3D transform-style */
.join-container {
  cursor: pointer;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}
.join-container:hover {
  transform: rotateX(10deg) rotateY(10deg) scale(1.05);
}

svg {
  width: 280px;
  height: 120px;
  filter: drop-shadow(0 5px 20px rgba(0,0,0,0.5));
}

/* ── Background path — SVG path morphing ── */
.background {
  animation: morph 4s infinite ease-in-out;
}

/* ── Text — typewriter → colorCycle → wave (chained) ── */
.text {
  fill: white;
  font-size: 24px;
  font-weight: bold;
  text-anchor: middle;
  animation:
    typewriter 3s steps(8) 1s forwards,    /* char reveal */
    colorCycle 4s infinite 4s,             /* color loop after typewriter */
    wave       2s infinite ease-in-out 4s; /* vertical float after typewriter */
  opacity: 0;
}

/* ── Icon circles — float + bounce simultaneously ── */
.icon {
  fill: #feca57;
  animation:
    float  3s infinite ease-in-out,
    bounce 1s infinite alternate;
}

/* ── Scatter particles ── */
.particles {
  animation: scatter 5s infinite linear;
}

/* ── JavaScript-created confetti elements ── */
.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #ff6b6b, #feca57);
  border-radius: 50%;
  opacity: 0;
  animation: burst 1s ease-out forwards;
  pointer-events: none;
}

/* ═══════════════ @KEYFRAMES ═══════════════ */

/* ① SVG d: path() morphing */
@keyframes morph {
  0%, 100% {
    d: path('M0,60 Q70,10 140,60 T280,60 Q350,110 280,60 T0,60');
  }
  50% {
    d: path('M0,60 Q70,110 140,60 T280,60 Q350,10 280,60 T0,60');
  }
}

/* ② Typewriter — steps() discrete reveal */
@keyframes typewriter { to { opacity: 1; } }

/* ③ Color cycle through SVG fill values */
@keyframes colorCycle {
  0%   { fill: white;   }
  25%  { fill: #feca57; }
  50%  { fill: #ff6b6b; }
  75%  { fill: #667eea; }
  100% { fill: white;   }
}

/* ④ Wave — text float */
@keyframes wave {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-5px); }
}

/* ⑤ Float — icon circles */
@keyframes float {
  0%, 100% { transform: translateY(0);     }
  50%       { transform: translateY(-15px); }
}

/* ⑥ Bounce — icon scale pulse */
@keyframes bounce {
  0%   { transform: scale(1);   }
  100% { transform: scale(1.1); }
}

/* ⑦ Scatter — particles move + rotate */
@keyframes scatter {
  0%   { transform: translate(0, 0) rotate(0deg);       opacity: 1; }
  100% { transform: translate(150px, -80px) rotate(360deg); opacity: 0; }
}

/* ⑧ Burst — confetti explode outward using --x/--y */
@keyframes burst {
  0%   { transform: translate(0, 0) scale(0);                opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(1);  opacity: 0; }
}

/* ── Modal ── */
.modal {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #fff, #f0f0f0);
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.6);
  z-index: 1000;
  text-align: center;
  width: 300px;
  color: #333;
}
.modal.show { display: block; }

/* Progress bar */
.progress-bar {
  width: 100%;
  height: 10px;
  background: #ddd;
  border-radius: 5px;
  overflow: hidden;
  margin: 20px 0;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff6b6b, #feca57);
  width: 0%;
  animation: fill 3s ease-in-out forwards;
}

/* ⑧ Progress fill */
@keyframes fill {
  to { width: 100%; }
}

.modal button {
  margin-top: 12px;
  padding: 8px 20px;
  background: linear-gradient(90deg, #ff6b6b, #feca57);
  border: none;
  border-radius: 8px;
  color: #111;
  font-weight: 700;
  cursor: pointer;
}

const btn   = document.getElementById('joinBtn');
const modal = document.getElementById('joinModal');

btn.addEventListener('click', function(e) {

  // ── Confetti Burst ──────────────────────────────
  // Create 20 confetti DOM elements on each click
  for (let i = 0; i < 20; i++) {
    const confetti = document.createElement('div');
    confetti.className = 'confetti';

    // Random direction via CSS custom properties
    confetti.style.setProperty('--x', `${(Math.random() - 0.5) * 200}px`);
    confetti.style.setProperty('--y', `${(Math.random() - 0.5) * 200}px`);

    // Position confetti at click location
    confetti.style.left = `${e.clientX}px`;
    confetti.style.top  = `${e.clientY}px`;

    document.body.appendChild(confetti);

    // Remove from DOM after animation completes
    setTimeout(() => confetti.remove(), 1000);
  }

  // ── Show Modal ─────────────────────────────────
  modal.classList.add('show');

  // Auto-hide after 3 seconds
  setTimeout(() => {
    modal.classList.remove('show');
  }, 3000);
});

// Manual close via Skip button
function closeModal() {
  modal.classList.remove('show');
}