script.js

// Premium character data with enhanced details
const characters = [
  {
    id: 1,
    name: "Seraphina Nightshade",
    image: "http://static.photos/purple/320x240/133",
    likes: "2.1M",
    description: "Mysterious vampire aristocrat with a dark past | Enigmatic & Seductive",
    tags: ["Premium", "Vampire", "Aristocrat", "Mysterious"],
    isPremium: true
  },
  {
    id: 2,
    name: "Kael Dragonheart",
    image: "http://static.photos/red/320x240/245",
    likes: "1.8M",
    description: "Noble dragon rider from ancient realms | Brave & Honorable",
    tags: ["Premium", "Dragon", "Warrior", "Noble"],
    isPremium: true
  },
  {
    id: 3,
    name: "Luna Starweaver",
    image: "http://static.photos/blue/320x240/356",
    likes: "3.2M",
    description: "Celestial sorceress mastering cosmic magic | Wise & Ethereal",
    tags: ["Premium", "Sorceress", "Cosmic", "Wise"],
    isPremium: true
  },
  {
    id: 4,
    name: "Dante Inferno",
    image: "http://static.photos/orange/320x240/467",
    likes: "2.7M",
    description: "Rebel demon prince seeking redemption | Charismatic & Complex",
    tags: ["Premium", "Demon", "Rebel", "Complex"],
    isPremium: true
  },
  {
    id: 5,
    name: "Aria Moonwhisper",
    image: "http://static.photos/green/320x240/578",
    likes: "1.9M",
    description: "Elven archer守护者 of ancient forests | Graceful & Protective",
    tags: ["Premium", "Elf", "Archer", "Nature"],
    isPremium: true
  },
  {
    id: 6,
    name: "Zara Cyberpunk",
    image: "http://static.photos/pink/320x240/689",
    likes: "2.4M",
    description: "Hacker extraordinaire from neon districts | Tech-Savvy & Edgy",
    tags: ["Premium", "Cyberpunk", "Hacker", "Futuristic"],
    isPremium: true
  },
  {
    id: 7,
    name: "Orion Blackthorne",
    image: "http://static.photos/black/320x240/790",
    likes: "2.3M",
    description: "Gothic noble with a haunted mansion | Brooding & Mysterious",
    tags: ["Premium", "Gothic", "Noble", "Haunted"],
    isPremium: true
  },
  {
    id: 8,
    name: "Ivy Thornfield",
    image: "http://static.photos/teal/320x240/801",
    likes: "1.6M",
    description: "Botanist with magical plant abilities | Gentle & Nurturing",
    tags: ["Premium", "Botanist", "Magic", "Gentle"],
    isPremium: true
  }
];
// Populate characters container with premium styling
function populateCharacters(chars) {
  const container = document.getElementById('characters-container');
  if (!container) return;
  
  container.innerHTML = '';
  
  chars.forEach((char, index) => {
    const card = document.createElement('custom-character-card');
    card.setAttribute('data-id', char.id);
    card.setAttribute('data-name', char.name);
    card.setAttribute('data-image', char.image);
    card.setAttribute('data-likes', char.likes);
    card.setAttribute('data-description', char.description);
    card.setAttribute('data-tags', JSON.stringify(char.tags));
    card.setAttribute('data-premium', char.isPremium || false);
    
    // Add animation delay for staggered effect
    card.style.animationDelay = `${index * 0.1}s`;
    
    container.appendChild(card);
  });
}
// Initialize characters when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
  populateCharacters(characters);
});
// Character carousel navigation
document.addEventListener('DOMContentLoaded', function() {
  const nextBtn = document.getElementById('next-characters');
  const prevBtn = document.getElementById('prev-characters');
  const container = document.getElementById('characters-container');
  
  if (nextBtn && container) {
    nextBtn.addEventListener('click', function() {
      container.scrollBy({ left: 300, behavior: 'smooth' });
    });
  }
  
  if (prevBtn && container) {
    prevBtn.addEventListener('click', function() {
      container.scrollBy({ left: -300, behavior: 'smooth' });
    });
  }
});