Folding Paper Plane Subscribe Animation

<div class="subscribe-scene">
  <div class="header-text">
    <div class="badge-pill"><i class="fas fa-paper-plane"></i> Interactive Micro-Interaction</div>
    <h2>Subscribe Button Animation</h2>
    <p>Watch the button fold into an origami plane, launch into flight, and confirm subscription!</p>
  </div>

  <!-- Stage Progress Indicator -->
  <div class="stages-indicator">
    <div class="stage-step active" id="step-1">
      <span class="step-num">1</span>
      <span class="step-txt">Input</span>
    </div>
    <div class="stage-arrow"><i class="fas fa-chevron-right"></i></div>
    <div class="stage-step" id="step-2">
      <span class="step-num">2</span>
      <span class="step-txt">Folding... ✉️</span>
    </div>
    <div class="stage-arrow"><i class="fas fa-chevron-right"></i></div>
    <div class="stage-step" id="step-3">
      <span class="step-num">3</span>
      <span class="step-txt">Sending... ✈️</span>
    </div>
    <div class="stage-arrow"><i class="fas fa-chevron-right"></i></div>
    <div class="stage-step" id="step-4">
      <span class="step-num">4</span>
      <span class="step-txt">Subscribed! 🎉</span>
    </div>
  </div>

  <!-- Subscribe Box & Flight Sky Area -->
  <div class="subscribe-card" id="subscribe-card">
    <form id="subscribe-form" class="subscribe-form" novalidate>
      <div class="input-wrap">
        <i class="fas fa-envelope input-icon"></i>
        <input type="email" id="sub-email" class="sub-input" value="mail@aaroniker.me" placeholder="Enter your email..." required autocomplete="off" spellcheck="false">
      </div>

      <!-- Action Button -->
      <button type="button" id="sub-btn" class="sub-btn" title="Subscribe Now">
        <span class="btn-label" id="btn-label">Subscribe</span>
        
        <!-- Origami Fold Polygon Center -->
        <div class="plane-fold-icon" id="plane-fold-icon">
          <svg class="origami-svg" viewBox="0 0 32 32">
            <!-- Left Wing -->
            <polygon class="f-left-wing" points="16,4 4,28 16,22" />
            <!-- Left Under -->
            <polygon class="f-left-under" points="16,4 16,22 11,26" />
            <!-- Right Under -->
            <polygon class="f-right-under" points="16,4 16,22 21,26" />
            <!-- Right Wing -->
            <polygon class="f-right-wing" points="16,4 28,28 16,22" />
          </svg>
        </div>

        <!-- Success Check Icon -->
        <div class="success-icon" id="success-icon">
          <svg class="check-svg" viewBox="0 0 24 24">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
        </div>
      </button>

      <!-- Flying Paper Plane Layer (Escapes container and flies across the scene!) -->
      <div class="sky-flight-layer" id="sky-flight-layer">
        <div class="flying-airplane" id="flying-airplane">
          <svg class="origami-svg flying" viewBox="0 0 32 32">
            <polygon class="f-left-wing" points="16,4 4,28 16,22" />
            <polygon class="f-left-under" points="16,4 16,22 11,26" />
            <polygon class="f-right-under" points="16,4 16,22 21,26" />
            <polygon class="f-right-wing" points="16,4 28,28 16,22" />
          </svg>
          <!-- Wind trail stream dots -->
          <div class="wind-trail">
            <span class="w-dot w1"></span>
            <span class="w-dot w2"></span>
            <span class="w-dot w3"></span>
            <span class="w-dot w4"></span>
          </div>
        </div>
      </div>
    </form>

    <!-- Confetti Particles Emitter -->
    <div class="confetti-holder" id="confetti-holder"></div>
  </div>

  <!-- Dynamic Live Status Banner -->
  <div class="live-status-badge" id="live-status">
    <i class="fas fa-paper-plane" id="status-icon"></i>
    <span id="status-text">Click "Subscribe" to launch the paper plane</span>
  </div>

  <!-- Replay Button -->
  <div class="replay-wrap">
    <button id="replay-btn" class="btn-replay hidden">
      <i class="fas fa-redo-alt"></i> Replay Animation
    </button>
  </div>
</div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body {
  background: radial-gradient(circle at top, #131b2e 0%, #090d16 100%);
  color: #f8fafc;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-x: hidden;
}
.subscribe-scene {
  width: 100%;
  max-width: 520px;
  text-align: center;
  position: relative;
}
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(45, 212, 191, 0.12);
  color: #2dd4bf;
  border: 1px solid rgba(45, 212, 191, 0.3);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.header-text h2 {
  font-size: 1.75rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}
.header-text p {
  color: #94a3b8;
  font-size: 0.9rem;
  margin-bottom: 24px;
}

/* Stage Progress Indicator */
.stages-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 30px;
  padding: 8px 14px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.stage-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  padding: 4px 8px;
  border-radius: 14px;
  transition: all 0.3s ease;
}
.stage-step .step-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #334155;
  color: #f8fafc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
}
.stage-step.active {
  background: rgba(45, 212, 191, 0.18);
  color: #2dd4bf;
}
.stage-step.active .step-num {
  background: #2dd4bf;
  color: #04150f;
}
.stage-step.completed {
  color: #10b981;
}
.stage-step.completed .step-num {
  background: #10b981;
  color: #ffffff;
}
.stage-arrow {
  color: #475569;
  font-size: 0.68rem;
}

/* Main Subscribe Card & Form */
.subscribe-card {
  position: relative;
  margin-bottom: 20px;
}
.subscribe-form {
  background: #0f172a;
  border: 2px solid #2dd4bf;
  border-radius: 50px;
  padding: 6px 6px 6px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 12px 35px -8px rgba(45, 212, 191, 0.35);
  position: relative;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: visible;
}
.subscribe-form:focus-within {
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.25), 0 15px 40px -5px rgba(45, 212, 191, 0.5);
  border-color: #5eead4;
}

.input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  padding-right: 12px;
}
.input-icon {
  color: #2dd4bf;
  font-size: 1rem;
  transition: color 0.3s;
}
.sub-input {
  width: 100%;
  background: transparent;
  border: none;
  color: #f8fafc;
  font-size: 1rem;
  font-weight: 500;
  outline: none;
}
.sub-input::placeholder {
  color: #64748b;
}

/* Morphing Action Button */
.sub-btn {
  background: #2dd4bf;
  color: #04150f;
  border: none;
  height: 46px;
  min-width: 130px;
  padding: 0 20px;
  border-radius: 40px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(45, 212, 191, 0.4);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
  overflow: hidden;
}
.sub-btn:hover {
  background: #5eead4;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(45, 212, 191, 0.6);
}

.btn-label {
  transition: transform 0.3s ease, opacity 0.3s ease;
  white-space: nowrap;
}

/* Origami Plane SVG & Facets */
.plane-fold-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.origami-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.f-left-wing { fill: #0f766e; }
.f-left-under { fill: #115e59; }
.f-right-under { fill: #14b8a6; }
.f-right-wing { fill: #04150f; }

/* Checkmark Icon */
.success-icon {
  position: absolute;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.4) rotate(-20deg);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.check-svg {
  width: 22px;
  height: 22px;
  stroke: #ffffff;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.5s ease 0.1s;
}

/* Sky Flight Layer & Flying Plane */
.sky-flight-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
}
.flying-airplane {
  position: absolute;
  top: 7px;
  right: 12px;
  width: 32px;
  height: 32px;
  opacity: 0;
  pointer-events: none;
  z-index: 50;
  transform-origin: center center;
}
.flying-airplane .origami-svg {
  width: 32px;
  height: 32px;
}
.flying-airplane .f-left-wing { fill: #2dd4bf; }
.flying-airplane .f-left-under { fill: #0f766e; }
.flying-airplane .f-right-under { fill: #14b8a6; }
.flying-airplane .f-right-wing { fill: #5eead4; }

/* Wind Trail Stream */
.wind-trail {
  position: absolute;
  top: 50%;
  left: -24px;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
  opacity: 0;
}
.w-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #2dd4bf;
  box-shadow: 0 0 6px #2dd4bf;
  display: inline-block;
  opacity: 0.7;
}

/* ================== ANIMATION STATES ================== */

/* Stage 2: Folding State */
.subscribe-form.is-folding .btn-label {
  opacity: 0;
  transform: scale(0.5) translateY(10px);
}
.subscribe-form.is-folding .sub-btn {
  min-width: 46px;
  width: 46px;
  padding: 0;
  border-radius: 50%;
  background: #2dd4bf;
}
.subscribe-form.is-folding .plane-fold-icon {
  opacity: 1;
  transform: scale(1.1) rotate(45deg);
  animation: origamiCrease 0.65s forwards cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes origamiCrease {
  0% { transform: scale(0.4) rotate(0deg); }
  40% { transform: scale(1.3) rotate(-25deg); }
  75% { transform: scale(0.9) rotate(35deg); }
  100% { transform: scale(1.1) rotate(45deg); }
}

/* Stage 3: Flying State */
.subscribe-form.is-flying .plane-fold-icon {
  opacity: 0;
  transform: scale(0.2);
}
.subscribe-form.is-flying {
  box-shadow: 0 0 25px rgba(45, 212, 191, 0.6);
  border-color: #5eead4;
}
.subscribe-form.is-flying .flying-airplane {
  opacity: 1;
  animation: swoopingFlight 1.1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.subscribe-form.is-flying .wind-trail {
  opacity: 1;
  animation: trailFade 1.1s ease forwards;
}
@keyframes swoopingFlight {
  0% {
    transform: translate(0, 0) scale(1) rotate(45deg);
    opacity: 1;
  }
  25% {
    transform: translate(-15px, -18px) scale(1.2) rotate(30deg);
  }
  50% {
    transform: translate(60px, -45px) scale(1.1) rotate(55deg);
  }
  75% {
    transform: translate(180px, -95px) scale(0.85) rotate(40deg);
    opacity: 0.95;
  }
  100% {
    transform: translate(340px, -160px) scale(0.4) rotate(30deg);
    opacity: 0;
  }
}
@keyframes trailFade {
  0% { opacity: 0; transform: translateY(-50%) scale(0.5); }
  30% { opacity: 1; transform: translateY(-50%) scale(1.1); }
  100% { opacity: 0; transform: translateY(-50%) scale(0.2); }
}

/* Stage 4: Success State */
.subscribe-form.is-success {
  border-color: #10b981;
  box-shadow: 0 12px 35px -8px rgba(16, 185, 129, 0.4);
}
.subscribe-form.is-success .input-icon {
  color: #10b981;
}
.subscribe-form.is-success .sub-btn {
  background: #10b981;
  min-width: 46px;
  width: 46px;
  padding: 0;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.5);
  animation: successPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes successPop {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.subscribe-form.is-success .success-icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}
.subscribe-form.is-success .check-svg {
  stroke-dashoffset: 0;
}

/* Confetti Burst */
.confetti-holder {
  position: absolute;
  top: 50%;
  right: 28px;
  transform: translateY(-50%);
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.confetti-piece {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  animation: confettiExplode 0.8s ease-out forwards;
}
@keyframes confettiExplode {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0);
    opacity: 0;
  }
}

/* Form Shake on Error */
.subscribe-form.shake {
  animation: shakeBox 0.4s ease-in-out;
  border-color: #ef4444;
}
@keyframes shakeBox {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

/* Dynamic Live Status Badge */
.live-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(45, 212, 191, 0.25);
  color: #2dd4bf;
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 600;
  margin-top: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.live-status-badge.error {
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
  background: rgba(239, 68, 68, 0.1);
}
.live-status-badge.success {
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
}

/* Replay Button */
.replay-wrap {
  margin-top: 16px;
  min-height: 40px;
}
.btn-replay {
  background: #1e293b;
  border: 1px solid #334155;
  color: #f8fafc;
  padding: 9px 20px;
  border-radius: 25px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.btn-replay:hover {
  background: #334155;
  border-color: #2dd4bf;
  color: #2dd4bf;
  transform: translateY(-2px);
}
.hidden {
  display: none !important;
}

const form = document.getElementById('subscribe-form');
const emailInput = document.getElementById('sub-email');
const subBtn = document.getElementById('sub-btn');
const btnLabel = document.getElementById('btn-label');
const liveStatus = document.getElementById('live-status');
const statusIcon = document.getElementById('status-icon');
const statusText = document.getElementById('status-text');
const replayBtn = document.getElementById('replay-btn');
const confettiHolder = document.getElementById('confetti-holder');

const steps = [
  document.getElementById('step-1'),
  document.getElementById('step-2'),
  document.getElementById('step-3'),
  document.getElementById('step-4')
];

let timeoutIds = [];

function setStage(stepNumber) {
  steps.forEach((st, idx) => {
    st.classList.remove('active', 'completed');
    if (idx + 1 < stepNumber) {
      st.classList.add('completed');
    } else if (idx + 1 === stepNumber) {
      st.classList.add('active');
    }
  });
}

function updateStatus(text, iconClass, statusType = 'normal') {
  statusText.textContent = text;
  statusIcon.className = iconClass;
  liveStatus.className = 'live-status-badge ' + (statusType === 'error' ? 'error' : statusType === 'success' ? 'success' : '');
}

function burstConfetti() {
  confettiHolder.innerHTML = '';
  const colors = ['#2dd4bf', '#10b981', '#38bdf8', '#fbbf24', '#f43f5e', '#a855f7'];
  for (let i = 0; i < 24; i++) {
    const piece = document.createElement('div');
    piece.className = 'confetti-piece';
    const color = colors[Math.floor(Math.random() * colors.length)];
    const tx = (Math.random() - 0.5) * 160 + 'px';
    const ty = (Math.random() - 0.7) * 140 + 'px';
    const rot = Math.random() * 360 + 'deg';
    piece.style.backgroundColor = color;
    piece.style.setProperty('--tx', tx);
    piece.style.setProperty('--ty', ty);
    piece.style.setProperty('--rot', rot);
    confettiHolder.appendChild(piece);
  }
}

function handleSubscribe() {
  const email = emailInput.value.trim();

  // Basic email validation
  if (!email || !email.includes('@') || !email.includes('.')) {
    form.classList.add('shake');
    updateStatus('Please enter a valid email address!', 'fas fa-exclamation-circle', 'error');
    setTimeout(() => form.classList.remove('shake'), 400);
    return;
  }

  // Clear any existing timers
  timeoutIds.forEach(id => clearTimeout(id));
  timeoutIds = [];

  // Lock input and button
  emailInput.disabled = true;
  subBtn.disabled = true;

  // STAGE 2: Folding... ✉️
  setStage(2);
  form.className = 'subscribe-form is-folding';
  updateStatus('Folding origami paper plane... ✉️', 'fas fa-envelope-open-text');

  // STAGE 3: Sending... ✈️ (at 650ms)
  timeoutIds.push(setTimeout(() => {
    setStage(3);
    form.className = 'subscribe-form is-flying';
    updateStatus('Sending subscription... ✈️', 'fas fa-paper-plane');
  }, 650));

  // STAGE 4: Subscribed! 🎉 (at 1750ms)
  timeoutIds.push(setTimeout(() => {
    setStage(4);
    form.className = 'subscribe-form is-success';
    updateStatus('Subscribed! 🎉 Check your inbox for confirmation.', 'fas fa-check-circle', 'success');
    burstConfetti();
    replayBtn.classList.remove('hidden');
    subBtn.disabled = false;
  }, 1750));
}

function resetForm() {
  timeoutIds.forEach(id => clearTimeout(id));
  timeoutIds = [];

  form.className = 'subscribe-form';
  emailInput.disabled = false;
  subBtn.disabled = false;
  setStage(1);
  updateStatus('Click "Subscribe" to launch the paper plane', 'fas fa-paper-plane');
  replayBtn.classList.add('hidden');
  confettiHolder.innerHTML = '';
  emailInput.focus();
}

// Event Listeners (both button click and form submit / Enter key)
subBtn.addEventListener('click', (e) => {
  e.preventDefault();
  if (form.classList.contains('is-success')) {
    resetForm();
  } else {
    handleSubscribe();
  }
});

form.addEventListener('submit', (e) => {
  e.preventDefault();
  handleSubscribe();
});

emailInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    e.preventDefault();
    handleSubscribe();
  }
});

replayBtn.addEventListener('click', resetForm);