Stunning Cancel
Button

/* Centered layout with purple/indigo gradient backdrop */
body {
  margin: 0;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Segoe UI', sans-serif;
  overflow: hidden;
  position: relative;
}

/* ── Cancel Button Base ───────────────────────────────── */
.cancel-btn {
  position: relative;
  padding: 18px 48px;
  font-size: 20px;
  font-weight: bold;
  color: white;
  background: transparent;              /* ghost style by default */
  border: 3px solid rgba(255, 255, 255, 0.6);
  border-radius: 50px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 2px;
  overflow: hidden;                     /* clips the ::before shine */
  transition: all 0.4s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Span needs z-index 2 so it stays above ::before */
.cancel-btn span {
  position: relative;
  z-index: 2;
  transition: all 0.4s ease;
}

/* ── Shine Sweep — ::before ───────────────────────────── */
.cancel-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: all 0.7s;
}
/* On hover: slide the shine from left to right */
.cancel-btn:hover::before { left: 100%; }

/* ── Hover State — fill + lift + scale ───────────────── */
.cancel-btn:hover {
  background: #e74c3c;
  border-color: #e74c3c;
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 20px 40px rgba(231, 76, 60, 0.6);
}

/* ── Active/Press State ──────────────────────────────── */
.cancel-btn:active {
  transform: translateY(-4px) scale(1.02);
}

/* ── Glow Pulse @keyframes ────────────────────────────── */
/* Animates box-shadow spread-radius 0 → 20px with opacity fade */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0   rgba(231, 76, 60, 0.7); }
  70%  { box-shadow: 0 0 0 20px rgba(231, 76, 60, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(231, 76, 60, 0);   }
}
.cancel-btn.pulse {
  animation: pulse 2s infinite;
}

/* ── Particle Container ────────────────────────────────── */
.particles {
  position: absolute;
  width: 100%; height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;       /* particles don't block button clicks */
}

/* Individual particle — sized/positioned/timed by JS */
.particle {
  position: absolute;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  animation: float 15s infinite linear;
}

/* ── Floating Particles @keyframes ────────────────────── */
@keyframes float {
  0%   { transform: translateY(100vh) rotate(0deg);   opacity: 0; }
  10%  { opacity: 1; }            /* fade in after entering frame */
  90%  { opacity: 1; }            /* fade out before leaving frame */
  100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}

// ── Generate 30 floating background particles ──────────
document.addEventListener('DOMContentLoaded', () => {
  const container = document.getElementById('particles');

  for (let i = 0; i < 30; i++) {
    const particle = document.createElement('div');
    particle.classList.add('particle');

    // Random size (0–8px) — equal width/height = circle
    const size = Math.random() * 8 + 'px';
    particle.style.width  = size;
    particle.style.height = size;

    // Random horizontal position across full viewport width
    particle.style.left = Math.random() * 100 + '%';

    // Stagger start times so they don't all appear at once
    particle.style.animationDelay    = Math.random() * 15 + 's';

    // Random speed — slower particles feel more ambient
    particle.style.animationDuration = 10 + Math.random() * 10 + 's';

    container.appendChild(particle);
  }
});

// ── Cancel button click handler ──────────────────────────
function handleCancel() {
  alert('Cancelled with style!');
  // Replace with your actual cancel logic:
  // modal.classList.remove('show');
  // form.reset();
  // history.back();
}