Card Flip

<style>
.cards-wrapper {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 30px;
  position: relative;
}
.card-container {
  perspective: 1000px;
  width: 300px;
  height: 400px;
  transition: transform 0.6s ease-in-out;
}
.card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
  pointer-events: auto;
}
.card.disabled {
  pointer-events: none;
  cursor: not-allowed;
}
.card.flipped {
  transform: rotateY(180deg);
}
.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 15px;
  overflow: hidden;
}
.card-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-front {
  transform: rotateY(0deg);
}
.card-back {
  transform: rotateY(180deg);
  position: relative;
}
.claim-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.card.flipped .claim-overlay {
  opacity: 1;
  pointer-events: auto;
}
.claim-overlay a {
  display: inline-block;
  padding: 15px 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-size: 18px;
  font-weight: 600;
  transition: transform 0.2s ease;
}
.claim-overlay a:hover {
  transform: translateY(-2px);
}
.shuffle-button {
  text-align: center;
  margin-top: 20px;
}
.shuffle-button button {
  padding: 12px 35px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.shuffle-button button:hover:not(:disabled) {
  transform: translateY(-2px);
}
.shuffle-button button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>

<div class="cards-wrapper">
  <div class="card-container">
    <div class="card flip-card">
      <div class="card-face card-front">
        <img src="https://cdn.pixabay.com/photo/2025/11/07/15/43/halloween-9943242_1280.jpg" alt="Card Back">
      </div>
      <div class="card-face card-back">
        <img src="https://cdn.pixabay.com/photo/2025/11/07/21/25/tufted-titmouse-9943582_1280.jpg" alt="Reward 1">
        <div class="claim-overlay">
          <a href="#" target="_blank">Click Here</a>
        </div>
      </div>
    </div>
  </div>
  
  <div class="card-container">
    <div class="card flip-card">
      <div class="card-face card-front">
        <img src="https://cdn.pixabay.com/photo/2025/11/07/15/43/halloween-9943242_1280.jpg" alt="Card Back">
      </div>
      <div class="card-face card-back">
        <img src="https://cdn.pixabay.com/photo/2020/09/18/13/07/smoothie-5581794_1280.jpg" alt="Reward 2">
        <div class="claim-overlay">
          <a href="#" target="_blank">Click Here</a>
        </div>
      </div>
    </div>
  </div>
  
  <div class="card-container">
    <div class="card flip-card">
      <div class="card-face card-front">
        <img src="https://cdn.pixabay.com/photo/2025/11/07/15/43/halloween-9943242_1280.jpg" alt="Card Back">
      </div>
      <div class="card-face card-back">
        <img src="https://cdn.pixabay.com/photo/2026/01/01/01/04/beautiful-girl-10045687_1280.jpg" alt="Reward 3">
        <div class="claim-overlay">
          <a href="#" target="_blank">Click Here</a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="shuffle-button">
  <button id="shuffleBtn">Shuffle Again</button>
</div>

<script>
(function() {
  const cardsWrapper = document.querySelector('.cards-wrapper');
  const shuffleBtn = document.getElementById('shuffleBtn');
  let isShuffling = false;
  let hasAutoShuffled = false;
  let cardChosen = false;

  function getCards() {
    return document.querySelectorAll('.flip-card');
  }

  function disableCards() {
    getCards().forEach(card => card.classList.add('disabled'));
  }

  function enableCards() {
    getCards().forEach(card => card.classList.remove('disabled'));
  }

  function attachCardEvents() {
    const cards = getCards();
    cards.forEach(card => {
      card.replaceWith(card.cloneNode(true));
    });
    
    getCards().forEach(card => {
      card.addEventListener('click', function(e) {
        if (e.target.tagName === 'A' || card.classList.contains('disabled') || cardChosen) {
          return;
        }
        
        if (!card.classList.contains('flipped')) {
          card.classList.add('flipped');
          cardChosen = true;
          
          getCards().forEach(c => {
            if (c !== card) {
              c.classList.add('disabled');
            }
          });
        }
        
        e.stopPropagation();
      });
    });
  }

  function shuffleCards() {
    if (isShuffling) return;
    
    isShuffling = true;
    disableCards();
    shuffleBtn.disabled = true;

    const containers = Array.from(document.querySelectorAll('.card-container'));
    const positions = containers.map(c => c.getBoundingClientRect().left);
    
    async function performSwaps() {
      const swapCount = 5 + Math.floor(Math.random() * 3);
      
      for (let i = 0; i < swapCount; i++) {
        const idx1 = Math.floor(Math.random() * 3);
        let idx2 = Math.floor(Math.random() * 3);
        while (idx2 === idx1) {
          idx2 = Math.floor(Math.random() * 3);
        }
        
        const currentPositions = containers.map(c => c.getBoundingClientRect().left);
        const distance1 = currentPositions[idx2] - currentPositions[idx1];
        const distance2 = currentPositions[idx1] - currentPositions[idx2];
        
        containers[idx1].style.transform = `translateX(${distance1}px)`;
        containers[idx2].style.transform = `translateX(${distance2}px)`;
        
        await new Promise(resolve => setTimeout(resolve, 600));
        
        [containers[idx1], containers[idx2]] = [containers[idx2], containers[idx1]];
        
        containers.forEach(c => c.style.transform = '');
        
        cardsWrapper.innerHTML = '';
        containers.forEach(c => cardsWrapper.appendChild(c));
        
        if (i < swapCount - 1) {
          await new Promise(resolve => setTimeout(resolve, 100));
        }
      }
    }
    
    performSwaps().then(() => {
      attachCardEvents();
      isShuffling = false;
      enableCards();
      shuffleBtn.disabled = false;
    });
  }

  function resetCards() {
    getCards().forEach(card => {
      card.classList.remove('flipped');
    });
    cardChosen = false;
  }

  attachCardEvents();

  shuffleBtn.addEventListener('click', function() {
    resetCards();
    shuffleCards();
  });

  window.addEventListener('load', function() {
    if (!hasAutoShuffled) {
      hasAutoShuffled = true;
      setTimeout(() => {
        shuffleCards();
      }, 500);
    }
  });
})();
</script>