<div class="min-h-screen bg-gradient-to-br from-orange-50 to-amber-200 dark:from-gray-950 dark:to-stone-900 p-4 sm:p-6 lg:p-8 font-sans text-gray-900 dark:text-gray-100 relative overflow-hidden">
<!-- Glow background effects -->
<div class="absolute -top-32 -left-32 w-96 h-96 bg-orange-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob dark:bg-amber-600"></div>
<div class="absolute -bottom-24 -right-24 w-72 h-72 bg-red-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000 dark:bg-red-800"></div>
<div class="absolute top-1/4 left-1/2 w-64 h-64 bg-yellow-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000 dark:bg-orange-600"></div>
<div class="container mx-auto relative z-10">
<!-- Header/Navigation Placeholder -->
<header class="mb-8 flex flex-col sm:flex-row justify-between items-center bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl p-4 shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700">
<h1 class="text-2xl sm:text-3xl font-extrabold text-orange-200 uppercase tracking-widest text-shadow-glow dark:text-amber-400 mb-4 sm:mb-0">
Wanderlust Expeditions
</h1>
<nav class="flex gap-4 sm:gap-6">
<a href="#" class="text-orange-300 hover:text-amber-500 transition-colors duration-300 relative group">
Destinations
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 origin-left transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
</a>
<a href="#" class="text-orange-300 hover:text-amber-500 transition-colors duration-300 relative group">
Tours
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 origin-left transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
</a>
<a href="#" class="text-orange-300 hover:text-amber-500 transition-colors duration-300 relative group">
About Us
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 origin-left transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
</a>
</nav>
</header>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Left Sidebar - Filters -->
<aside class="lg:col-span-1 p-6 bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700">
<h2 class="text-xl font-bold mb-6 text-orange-200 text-shadow-glow dark:text-amber-400">Filter Your Adventure</h2>
<div class="mb-6">
<label for="destination" class="block text-orange-300 text-sm font-medium mb-2">Destination</label>
<select id="destination" class="w-full p-3 rounded-lg bg-orange-900 text-orange-100 border border-orange-700 focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 shadow-inner glow-inset-orange">
<option>All Destinations</option>
<option>Sahara Desert</option>
<option>Himalayan Peaks</option>
<option>Amazon Rainforest</option>
<option>Nordic Fjords</option>
</select>
</div>
<div class="mb-6">
<label for="price-range" class="block text-orange-300 text-sm font-medium mb-2">Price Range</label>
<input type="range" id="price-range" min="100" max="5000" value="2500" class="w-full h-2 bg-orange-700 accent-amber-500 rounded-lg appearance-none cursor-pointer glow-inset-orange">
<div class="flex justify-between text-xs text-orange-200 mt-2">
<span>$100</span>
<span>$5000</span>
</div>
</div>
<div class="mb-6">
<label class="block text-orange-300 text-sm font-medium mb-2">Activities</label>
<div class="space-y-2">
<label class="flex items-center text-orange-200">
<input type="checkbox" class="form-checkbox h-5 w-5 text-amber-500 rounded border-orange-700 bg-orange-900 focus:ring-amber-500 glow-orange-checkbox">
<span class="ml-2 text-glow">Hiking & Trekking</span>
</label>
<label class="flex items-center text-orange-200">
<input type="checkbox" class="form-checkbox h-5 w-5 text-amber-500 rounded border-orange-700 bg-orange-900 focus:ring-amber-500 glow-orange-checkbox">
<span class="ml-2 text-glow">Cultural Immersion</span>
</label>
<label class="flex items-center text-orange-200">
<input type="checkbox" class="form-checkbox h-5 w-5 text-amber-500 rounded border-orange-700 bg-orange-900 focus:ring-amber-500 glow-orange-checkbox">
<span class="ml-2 text-glow">Wildlife Safaris</span>
</label>
</div>
</div>
<button class="w-full py-3 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-lg hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
Apply Filters
</button>
</aside>
<!-- Main Product Grid -->
<section class="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
<!-- Product Card 1 -->
<div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
<div class="card-inner">
<div class="card-front p-4">
<div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
<img src="https://picsum.photos/id/1015/400/300" alt="Desert Safari" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
<span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Popular</span>
</div>
</div>
<h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Sahara Desert Trek</h3>
<p class="text-sm text-orange-300 mb-4 line-clamp-2">Experience the majestic dunes and endless skies of the Sahara on this unforgettable journey.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-2xl font-extrabold text-amber-500 price-glow">$1200</span>
<div class="flex items-center text-orange-400">
<svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
4.8 <span class="text-xs ml-1">(240 reviews)</span>
</div>
</div>
<button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
View Details
</button>
</div>
<div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
<h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
<ul class="text-orange-300 text-sm space-y-2 mb-6">
<li>• Duration: 7 Days</li>
<li>• Difficulty: Moderate</li>
<li>• Group Size: Max 12</li>
<li>• Best Season: October - March</li>
</ul>
<button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
Book Now
</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
<div class="card-inner">
<div class="card-front p-4">
<div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
<img src="https://picsum.photos/id/292/400/300" alt="Himalayan Peaks" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
<span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">New!</span>
</div>
</div>
<h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Himalayan Basecamp</h3>
<p class="text-sm text-orange-300 mb-4 line-clamp-2">Conquer breathtaking peaks and witness stunning panoramic views in the Himalayas.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-2xl font-extrabold text-amber-500 price-glow">$2500</span>
<div class="flex items-center text-orange-400">
<svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
4.9 <span class="text-xs ml-1">(180 reviews)</span>
</div>
</div>
<button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
View Details
</button>
</div>
<div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
<h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
<ul class="text-orange-300 text-sm space-y-2 mb-6">
<li>• Duration: 14 Days</li>
<li>• Difficulty: Advanced</li>
<li>• Group Size: Max 8</li>
<li>• Best Season: April - June</li>
</ul>
<button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
Book Now
</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
<div class="card-inner">
<div class="card-front p-4">
<div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
<img src="https://picsum.photos/id/1077/400/300" alt="Amazon River" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
<span class="text-xs font-semibold text-orange-200 bg-orange-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Low Spots Remaining</span>
</div>
</div>
<h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Amazon Wildlife Tour</h3>
<p class="text-sm text-orange-300 mb-4 line-clamp-2">Navigate the mighty Amazon river and encounter unique wildlife in their natural habitat.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-2xl font-extrabold text-amber-500 price-glow">$1800</span>
<div class="flex items-center text-orange-400">
<svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
4.7 <span class="text-xs ml-1">(310 reviews)</span>
</div>
</div>
<button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
View Details
</button>
</div>
<div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
<h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
<ul class="text-orange-300 text-sm space-y-2 mb-6">
<li>• Duration: 10 Days</li>
<li>• Difficulty: Easy</li>
<li>• Group Size: Max 15</li>
<li>• Best Season: May - September</li>
</ul>
<button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
Book Now
</button>
</div>
</div>
</div>
<!-- Add more product cards here following the same structure -->
<!-- Product Card 4 -->
<div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
<div class="card-inner">
<div class="card-front p-4">
<div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
<img src="https://picsum.photos/id/1029/400/300" alt="Nordic Fjords" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
<span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Featured</span>
</div>
</div>
<h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Nordic Fjords Cruise</h3>
<p class="text-sm text-orange-300 mb-4 line-clamp-2">Cruise through breathtaking fjords and explore charming Nordic villages.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-2xl font-extrabold text-amber-500 price-glow">$2800</span>
<div class="flex items-center text-orange-400">
<svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
4.9 <span class="text-xs ml-1">(200 reviews)</span>
</div>
</div>
<button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
View Details
</button>
</div>
<div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
<h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
<ul class="text-orange-300 text-sm space-y-2 mb-6">
<li>• Duration: 8 Days</li>
<li>• Difficulty: Easy</li>
<li>• Group Size: Max 20</li>
<li>• Best Season: June - August</li>
</ul>
<button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
Book Now
</button>
</div>
</div>
</div>
<!-- Product Card 5 -->
<div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
<div class="card-inner">
<div class="card-front p-4">
<div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
<img src="https://picsum.photos/id/1083/400/300" alt="Bali Beaches" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
<span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Relaxation</span>
</div>
</div>
<h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Bali Beach Retreat</h3>
<p class="text-sm text-orange-300 mb-4 line-clamp-2">Unwind on pristine beaches and immerse yourself in the serene culture of Bali.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-2xl font-extrabold text-amber-500 price-glow">$950</span>
<div class="flex items-center text-orange-400">
<svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
4.6 <span class="text-xs ml-1">(450 reviews)</span>
</div>
</div>
<button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
View Details
</button>
</div>
<div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
<h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
<ul class="text-orange-300 text-sm space-y-2 mb-6">
<li>• Duration: 5 Days</li>
<li>• Difficulty: Easy</li>
<li>• Group Size: Any</li>
<li>• Best Season: All Year</li>
</ul>
<button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
Book Now
</button>
</div>
</div>
</div>
<!-- Product Card 6 -->
<div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
<div class="card-inner">
<div class="card-front p-4">
<div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
<img src="https://picsum.photos/id/1043/400/300" alt="Kyoto Temples" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
<span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Cultural</span>
</div>
</div>
<h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Kyoto Cultural Journey</h3>
<p class="text-sm text-orange-300 mb-4 line-clamp-2">Explore ancient temples, traditional gardens, and vibrant history in Japan's cultural heart.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-2xl font-extrabold text-amber-500 price-glow">$2100</span>
<div class="flex items-center text-orange-400">
<svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
4.8 <span class="text-xs ml-1">(290 reviews)</span>
</div>
</div>
<button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
View Details
</button>
</div>
<div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
<h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
<ul class="text-orange-300 text-sm space-y-2 mb-6">
<li>• Duration: 9 Days</li>
<li>• Difficulty: Easy</li>
<li>• Group Size: Max 10</li>
<li>• Best Season: March - May</li>
</ul>
<button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
Book Now
</button>
</div>
</div>
</div>
</section>
</div>
<!-- Testimonial/Call to Action Section -->
<section class="mt-12 p-8 bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl shadow-xl border border-orange-700 text-center dark:bg-stone-900 dark:border-stone-700">
<h2 class="text-3xl font-extrabold mb-4 text-orange-200 text-shadow-glow dark:text-amber-400">Ready for Your Next Adventure?</h2>
<p class="text-lg text-orange-300 mb-8">Join thousands of happy explorers who've crafted unforgettable memories with us.</p>
<div class="flex flex-wrap justify-center items-center gap-6 mb-8">
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer Avatar" class="w-16 h-16 rounded-full border-2 border-amber-500 shadow-lg glow-avatar">
<p class="text-amber-400 text-sm mt-2 font-semibold">Jane D.</p>
</div>
<div class="text-orange-200 italic max-w-md">"My trip to the Himalayas was beyond words. The organization was flawless, and the guides were exceptional. Highly recommend!"</div>
</div>
<a href="#contact" class="inline-block py-4 px-8 bg-gradient-to-r from-amber-500 to-orange-600 text-brown-900 font-bold text-xl rounded-full shadow-2xl hover:from-amber-600 hover:to-orange-700 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-lg">
Contact Our Travel Experts
</a>
</section>
</div>
<!-- Custom Styles for Neon/Glow Effects and Card Flip -->
<style>
@keyframes blob {
0% {
transform: translate(0px, 0px) scale(1);
}
33% {
transform: translate(30px, -50px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
100% {
transform: translate(0px, 0px) scale(1);
}
}
.animate-blob {
animation: blob 7s infinite cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
.text-shadow-glow {
text-shadow: 0 0 5px rgba(255, 165, 0, 0.8), 0 0 10px rgba(255, 140, 0, 0.6), 0 0 15px rgba(255, 69, 0, 0.4);
}
.glow-inset-orange:focus {
box-shadow: inset 0 0 8px rgba(255, 165, 0, 0.6), 0 0 10px rgba(255, 140, 0, 0.4);
}
.glow-orange-checkbox:checked {
box-shadow: 0 0 5px rgba(255, 165, 0, 0.8);
}
/* General Button Glow */
.button-glow {
box-shadow: 0 0 10px rgba(255, 165, 0, 0.6);
}
.button-glow:hover {
box-shadow: 0 0 15px rgba(255, 165, 0, 0.8), 0 0 20px rgba(255, 140, 0, 0.7);
}
.button-glow-sm {
box-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
}
.button-glow-sm:hover {
box-shadow: 0 0 12px rgba(255, 215, 0, 0.9), 0 0 16px rgba(255, 190, 0, 0.8);
}
.button-glow-lg {
box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 25px rgba(255, 165, 0, 0.7);
}
.button-glow-lg:hover {
box-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 30px rgba(255, 165, 0, 0.9);
}
.card-image-glow {
box-shadow: 0 0 8px rgba(255, 165, 0, 0.7);
}
.group:hover .card-image-glow {
box-shadow: 0 0 15px rgba(255, 165, 0, 0.9);
}
.glow-tag {
box-shadow: 0 0 5px rgba(255, 69, 0, 0.7);
}
.price-glow {
text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}
.glow-avatar {
box-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}
/* 3D Card Flip Effect */
.perspective-card {
perspective: 1000px;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.group:hover .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
display: flex;
flex-direction: column;
}
.card-front {
background-color: transparent;
z-index: 2;
}
.card-back {
background-color: #5a2e00; /* Darker brown for back */
transform: rotateY(180deg);
justify-content: center;
align-items: center;
padding: 1.5rem;
}
/* Dark Mode Overrides */
.dark .text-shadow-glow {
text-shadow: 0 0 5px rgba(255, 215, 0, 0.9), 0 0 10px rgba(255, 190, 0, 0.7), 0 0 15px rgba(255, 160, 0, 0.5);
}
.dark .glow-inset-orange:focus {
box-shadow: inset 0 0 8px rgba(255, 215, 0, 0.7), 0 0 10px rgba(255, 190, 0, 0.5);
}
.dark .glow-orange-checkbox:checked {
box-shadow: 0 0 5px rgba(255, 215, 0, 0.9);
}
.dark .button-glow {
box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
}
.dark .button-glow:hover {
box-shadow: 0 0 15px rgba(255, 215, 0, 0.9), 0 0 20px rgba(255, 190, 0, 0.8);
}
.dark .price-glow {
text-shadow: 0 0 8px rgba(255, 255, 0, 0.9);
}
.dark .card-image-glow {
box-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}
.dark .group:hover .card-image-glow {
box-shadow: 0 0 15px rgba(255, 215, 0, 1);
}
.dark .glow-tag {
box-shadow: 0 0 5px rgba(200, 0, 0, 0.9);
}
.dark .glow-avatar {
box-shadow: 0 0 8px rgba(255, 215, 0, 0.9);
}
</style>
</div>
