/* Custom styles for TokPicks - BuzzFeed Style + Urgency Animations */

/* === PERFORMANCE OPTIMIZATION === */
/* Font loading optimization for faster text rendering */
@font-face {
  font-family: system-ui;
  font-display: swap;
}

/* Use system fonts for better performance */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Unicode icons as lightweight alternative to FontAwesome */
.icon-fire::before { content: "🔥"; }
.icon-star::before { content: "⭐"; }
.icon-heart::before { content: "❤️"; }
.icon-eye::before { content: "👁️"; }
.icon-search::before { content: "🔍"; }
.icon-play::before { content: "▶️"; }
.icon-amazon::before { content: "📦"; }
.icon-check::before { content: "✓"; }

/* Image loading optimization */
img {
  content-visibility: auto;
  contain-intrinsic-size: 300px 300px;
}

/* Lazy loading fade-in effect */
img[loading="lazy"] {
  background: #f0f0f0;
}

/* Reduce layout shift with aspect ratio boxes */
.aspect-square,
.aspect-\[4\/3\],
.aspect-video {
  position: relative;
  overflow: hidden;
}

/* GPU acceleration for better performance */
.transform,
.transition-transform {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Reduce motion for accessibility and performance */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
  /* Scale entire site to 67% */
  font-size: 67%;
}

/* Reset body to maintain readability */
body {
  font-size: 1rem;
}

/* === SMART STICKY HEADER === */
/* Hide header on scroll down, show on scroll up */
#main-header {
  transform: translateY(0);
  transition: transform 0.3s ease-in-out;
}

#main-header.header-hidden {
  transform: translateY(-100%);
}

/* Ensure content doesn't jump when header hides */
body {
  padding-top: 0;
}

/* === URGENCY ANIMATIONS === */

/* Mega Pulse Animation - Makes button pulsate */
@keyframes mega-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 25px 50px -12px rgba(251, 146, 60, 0.5);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(251, 146, 60, 0.8);
  }
}

.animate-mega-pulse {
  animation: mega-pulse 2s ease-in-out infinite;
}

/* Shine Effect - Light sweep across button */
@keyframes shine {
  0% {
    transform: translateX(-100%) skewX(-20deg);
  }
  100% {
    transform: translateX(200%) skewX(-20deg);
  }
}

.animate-shine {
  animation: shine 3s ease-in-out infinite;
}

/* Blink Animation - For stock warning */
@keyframes blink {
  0%, 100% {
    opacity: 1;
    background-color: #fef2f2;
  }
  50% {
    opacity: 0.85;
    background-color: #fee2e2;
  }
}

.animate-blink {
  animation: blink 1.5s ease-in-out infinite;
}

/* Shake Animation - Attention grabber */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

/* Bounce with glow */
@keyframes bounce-glow {
  0%, 100% {
    transform: translateY(0);
    filter: drop-shadow(0 0 10px rgba(252, 211, 77, 0.8));
  }
  50% {
    transform: translateY(-10px);
    filter: drop-shadow(0 0 20px rgba(252, 211, 77, 1));
  }
}

.animate-bounce {
  animation: bounce-glow 2s ease-in-out infinite;
}

/* Glow Effect for Button Border */
@keyframes glow {
  0%, 100% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

/* Sparkle Animation */
@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}

.animate-sparkle {
  animation: sparkle 2s ease-in-out infinite;
}

/* BuzzFeed-style bold typography */
.font-black {
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* Custom prose styling */
.prose {
  color: #374151;
  max-width: 100%;
}

.prose h2 {
  font-size: 1.875rem;
  font-weight: 900;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #111827;
  letter-spacing: -0.02em;
}

.prose h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  color: #1f2937;
}

.prose p {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  line-height: 1.75;
}

.prose ul, .prose ol {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  padding-left: 1.625rem;
}

.prose li {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.prose strong {
  font-weight: 700;
  color: #111827;
}

.prose a {
  color: #f97316;
  text-decoration: underline;
}

.prose a:hover {
  color: #ea580c;
}

/* Line clamp utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Gradient text */
.text-gradient {
  background: linear-gradient(to right, #f97316, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Smooth transitions */
* {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* TikTok embed responsive */
.tiktok-embed {
  margin: 0 auto;
}

/* ========================================
   URGENCY & CONVERSION ANIMATIONS
   ======================================== */

/* Pulsing Border for Urgency */
@keyframes pulse-border {
  0%, 100% {
    border-color: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  50% {
    border-color: #dc2626;
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }
}

.animate-pulse-border {
  animation: pulse-border 2s ease-in-out infinite;
}

/* Urgency Pulse (for "DEAL EXPIRES SOON") */
@keyframes urgency-pulse {
  0%, 100% {
    background-color: #dc2626;
  }
  50% {
    background-color: #ef4444;
  }
}

.animate-urgency-pulse {
  animation: urgency-pulse 1s ease-in-out infinite;
}

/* Blink Animation (for stock alerts) */
@keyframes blink {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0.7;
  }
}

.animate-blink {
  animation: blink 2s ease-in-out infinite;
}

/* Price Pulse (makes price stand out) */
@keyframes price-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.animate-price-pulse {
  animation: price-pulse 1.5s ease-in-out infinite;
}

/* Star Pop-in Animation */
@keyframes star-pop {
  0% {
    transform: scale(0) rotate(0deg);
  }
  50% {
    transform: scale(1.3) rotate(180deg);
  }
  100% {
    transform: scale(1) rotate(360deg);
  }
}

.animate-star-pop {
  animation: star-pop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Flip Animation (for countdown timer) */
@keyframes flip {
  0%, 100% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(180deg);
  }
}

.animate-flip {
  animation: flip 2s ease-in-out infinite;
}

/* Glow Effect (for button border) */
@keyframes glow {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

/* Mega Pulse (for main CTA button) */
@keyframes mega-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7);
  }
  50% {
    box-shadow: 0 0 0 20px rgba(249, 115, 22, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
  }
}

.animate-mega-pulse {
  animation: mega-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Text Glow (for button text) */
@keyframes text-glow {
  0%, 100% {
    text-shadow: 0 0 10px rgba(249, 115, 22, 0.5);
  }
  50% {
    text-shadow: 0 0 20px rgba(249, 115, 22, 1);
  }
}

.animate-text-glow {
  animation: text-glow 1.5s ease-in-out infinite;
}

/* Sparkle Animation (decorative) */
@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-sparkle {
  animation: sparkle 1.5s ease-in-out infinite;
}

/* Shake Animation (for urgency) */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

/* Bounce with Delay */
@keyframes bounce-delay {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-bounce-delay {
  animation: bounce-delay 1s ease-in-out infinite;
}

/* Gradient Shift (for dynamic backgrounds) */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animate-gradient-shift {
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

/* ========================================
   BUZZFEED-STYLE ANIMATIONS (Existing)
   ======================================== */

/* Amazon Button Shine Animation */
.amazon-button-wrapper {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

@keyframes shine {
  0% {
    transform: translateX(-100%) skewX(-15deg);
  }
  100% {
    transform: translateX(200%) skewX(-15deg);
  }
}

.animate-shine {
  animation: shine 1.5s ease-in-out infinite;
}

/* Pulse Animation for Deals */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  50% {
    box-shadow: 0 0 0 20px rgba(239, 68, 68, 0);
  }
}

.animate-pulse-glow {
  animation: pulse-glow 2s infinite;
}

/* Card Hover Effects - BuzzFeed Style */
.card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Button Bounce Effect */
@keyframes bounce-subtle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.hover-bounce:hover {
  animation: bounce-subtle 0.6s ease-in-out infinite;
}

/* Price Pop Animation */
@keyframes pop-in {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-pop {
  animation: pop-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Gradient Button Hover */
.gradient-button {
  background: linear-gradient(135deg, #f97316 0%, #ec4899 100%);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.gradient-button::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: left 0.5s;
}

.gradient-button:hover::before {
  left: 100%;
}

.gradient-button:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px -5px rgba(249, 115, 22, 0.5);
}

/* Skeleton Loading - BuzzFeed Style */
.skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Badge Animations */
.badge-wiggle {
  animation: wiggle 1s ease-in-out infinite;
}

@keyframes wiggle {
  0%, 100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

/* Category Card Hover */
.category-card {
  transition: all 0.3s ease;
}

.category-card:hover {
  transform: scale(1.1) rotate(2deg);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}

/* Star Rating Animation */
.star-rating {
  display: inline-flex;
}

.star-rating i {
  transition: all 0.2s ease;
}

.star-rating:hover i {
  transform: scale(1.2);
}

/* Floating Animation */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Mobile sticky header */
@media (max-width: 768px) {
  header {
    position: sticky;
    top: 0;
    z-index: 50;
  }
  
  /* Reduce animations on mobile for performance */
  .card-hover:hover {
    transform: translateY(-4px) scale(1.01);
  }
}

/* Print styles */
@media print {
  header, footer, .adsbygoogle {
    display: none !important;
  }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
  /* Add dark mode styles if needed */
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   BUZZFEED SHOPPING STYLE HERO SECTION
   ======================================== */

/* Hide scrollbar for mobile category navigation */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Smooth scroll for mobile category bar */
.overflow-x-auto {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Hero section background gradient */
.hero-section {
  background: linear-gradient(180deg, #F9F9F5 0%, #FEFEFE 100%);
  border-bottom: 1px solid #E5E5E0;
}

/* Category icon hover effects */
.hero-section a:active {
  transform: scale(0.95);
}

/* Search bar focus state enhancement */
.hero-section input:focus {
  outline: none;
}

/* Premium shadow for elevated elements */
.hero-section .shadow-lg {
  box-shadow: 0 10px 25px -5px rgba(88, 112, 88, 0.15), 
              0 8px 10px -6px rgba(88, 112, 88, 0.1);
}

/* Sage green accent color utility */
.text-sage {
  color: #587058;
}

.bg-sage {
  background-color: #587058;
}

.border-sage {
  border-color: #587058;
}

/* Smooth transitions for all interactive elements */
.hero-section a,
.hero-section button,
.hero-section input {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
  .hero-section {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  
  /* Ensure category icons are easily tappable */
  .hero-section .flex-shrink-0 {
    -webkit-tap-highlight-color: transparent;
  }
}

/* Tablet-specific adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

/* ========================================
   REDESIGNED AUTO-GENERATED CONTENT SECTIONS
   ======================================== */

/* Enhanced line-height for readability */
.prose {
  line-height: 1.6;
}

.prose h2 {
  font-size: 1.875rem;
  font-weight: 900;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  color: #111827;
  letter-spacing: -0.02em;
  position: relative;
  padding-bottom: 0.75rem;
}

/* Horizontal divider after each h2 */
.prose h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(to right, #f97316, #ec4899);
  border-radius: 2px;
}

.prose h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #1f2937;
}

/* "What Makes This Special" Section - Light Yellow Callout */
.prose h2:first-of-type {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  padding: 1.5rem;
  border-radius: 1rem;
  border-left: 6px solid #f59e0b;
  margin-top: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.prose h2:first-of-type::after {
  display: none;
}

/* Add emoji icon before "What Makes This Special" */
.prose h2:first-of-type::before {
  content: '✨ ';
  font-size: 2rem;
  margin-right: 0.5rem;
}

/* Style the list items under "What Makes This Special" */
.prose h2:first-of-type + ul,
.prose h2:first-of-type + p + ul {
  background: #fffbeb;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-top: 1rem;
  border: 2px solid #fbbf24;
}

.prose h2:first-of-type + ul li,
.prose h2:first-of-type + p + ul li {
  position: relative;
  padding-left: 2rem;
  margin: 1rem 0;
}

/* Add emoji bullets */
.prose h2:first-of-type + ul li::before,
.prose h2:first-of-type + p + ul li::before {
  content: '✅';
  position: absolute;
  left: 0;
  font-size: 1.25rem;
}

/* Bold the first part of each list item (label) */
.prose h2:first-of-type + ul li strong,
.prose h2:first-of-type + p + ul li strong {
  color: #92400e;
  font-weight: 800;
  display: block;
  margin-bottom: 0.25rem;
}

/* "Why TikTok Users Love It" / "Viral Buzz" Section */
.prose h2:nth-of-type(2) {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  padding: 1.5rem;
  border-radius: 1rem;
  border-left: 6px solid #3b82f6;
  position: relative;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.prose h2:nth-of-type(2)::after {
  display: none;
}

/* TikTok icon in corner */
.prose h2:nth-of-type(2)::before {
  content: '🎵 ';
  font-size: 2rem;
  margin-right: 0.5rem;
}

/* Add small TikTok icon badge */
.prose h2:nth-of-type(2)::after {
  content: 'VIRAL BUZZ';
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: #1e40af;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
}

.prose h2:nth-of-type(2) + p {
  background: #eff6ff;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-top: 1rem;
  border: 2px solid #60a5fa;
  font-size: 1.125rem;
  font-style: italic;
  position: relative;
  padding-left: 3rem;
}

/* Quote marks for viral buzz */
.prose h2:nth-of-type(2) + p::before {
  content: '"';
  position: absolute;
  left: 1rem;
  top: 0.5rem;
  font-size: 3rem;
  color: #3b82f6;
  opacity: 0.3;
  font-family: Georgia, serif;
}

/* Highlight trending keywords */
.prose h2:nth-of-type(2) + p strong,
.prose h2:nth-of-type(2) + p em {
  color: #1e40af;
  font-weight: 700;
  background: #dbeafe;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
}

/* "Who Should Buy This?" & "Final Verdict" - Two Column Layout */
@media (min-width: 768px) {
  /* Find sections that should be side-by-side */
  .prose h2:nth-last-of-type(2),
  .prose h2:last-of-type {
    width: calc(50% - 1rem);
    display: inline-block;
    vertical-align: top;
  }
  
  .prose h2:nth-last-of-type(2) {
    margin-right: 2rem;
  }
  
  .prose h2:nth-last-of-type(2) + ul,
  .prose h2:nth-last-of-type(2) + p {
    width: calc(50% - 1rem);
    display: inline-block;
    vertical-align: top;
    margin-right: 2rem;
  }
  
  .prose h2:last-of-type + p,
  .prose h2:last-of-type + ul {
    width: calc(50% - 1rem);
    display: inline-block;
    vertical-align: top;
  }
}

/* "Final Verdict" Section with Green Badge */
.prose h2:last-of-type {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  padding: 1.5rem;
  border-radius: 1rem;
  border-left: 6px solid #10b981;
  position: relative;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.prose h2:last-of-type::after {
  display: none;
}

/* Green "Recommended" badge */
.prose h2:last-of-type::before {
  content: '⭐ RECOMMENDED';
  position: absolute;
  top: -0.75rem;
  right: 1rem;
  background: #10b981;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.5);
}

.prose h2:last-of-type + p {
  background: #ecfdf5;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-top: 1rem;
  border: 2px solid #34d399;
  font-size: 1.25rem;
  font-weight: 700;
  color: #065f46;
  line-height: 1.6;
}

/* "Who Should Buy This?" Section */
.prose h2:nth-last-of-type(2) {
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
  padding: 1.5rem;
  border-radius: 1rem;
  border-left: 6px solid #6366f1;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.prose h2:nth-last-of-type(2)::after {
  display: none;
}

.prose h2:nth-last-of-type(2)::before {
  content: '👥 ';
  font-size: 2rem;
  margin-right: 0.5rem;
}

.prose h2:nth-last-of-type(2) + ul {
  background: #eef2ff;
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-top: 1rem;
  border: 2px solid #818cf8;
}

.prose h2:nth-last-of-type(2) + ul li {
  position: relative;
  padding-left: 2rem;
  margin: 0.75rem 0;
}

.prose h2:nth-last-of-type(2) + ul li::before {
  content: '🎯';
  position: absolute;
  left: 0;
  font-size: 1.25rem;
}

/* Add various emoji icons for other sections */
.prose h3::before {
  margin-right: 0.5rem;
}

/* Key Features emoji */
.prose h2:contains("Features")::before,
.prose h2[class*="feature"]::before {
  content: '🚀 ';
  font-size: 1.5rem;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .prose h2 {
    font-size: 1.5rem;
    padding: 1rem;
    margin-top: 2rem;
  }
  
  .prose h2::before {
    font-size: 1.5rem;
  }
  
  .prose h2:last-of-type::before {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    top: -0.5rem;
  }
  
  .prose h2:nth-of-type(2)::after {
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
    top: 0.75rem;
    right: 0.75rem;
  }
  
  .prose ul,
  .prose p {
    font-size: 0.9375rem;
  }
  
  .prose h2:first-of-type + ul,
  .prose h2:first-of-type + p + ul,
  .prose h2:nth-of-type(2) + p,
  .prose h2:nth-last-of-type(2) + ul,
  .prose h2:last-of-type + p {
    padding: 1rem;
  }
}

/* Horizontal dividers between major sections */
.prose > * + h2 {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 2px solid #e5e7eb;
}

.prose > h2:first-child {
  border-top: none;
  padding-top: 0;
}



/* ============================================
   VIRAL BUZZ BOX - Why Everyone's Obsessed
   ============================================ */

.viral-buzz-box {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  position: relative;
}

.viral-buzz-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(37, 99, 235, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.viral-buzz-box h2 {
  position: relative;
  z-index: 1;
}

.viral-buzz-box p {
  position: relative;
  z-index: 1;
}

/* Preserve line breaks and spaces */
.whitespace-pre-line {
  white-space: pre-line;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

/* ============================================
   PLATFORM-SPECIFIC AUTO-CROP SYSTEM
   SNS UI 요소를 숨기기 위한 플랫폼별 썸네일 크롭
   ============================================ */

/* Common masking for all cards */
.card-thumbnail-crop {
  overflow: hidden;
  position: relative;
}

/* Subtle shadow overlay for badge readability */
.card-thumbnail-crop::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* Platform-specific image crop settings */

/* TikTok: 우측 하단 프로필/음악 아이콘, 좌측 하단 아이디 제거 */
.card-tiktok .card-thumbnail-crop img {
  transform: scale(1.15);
  object-position: 50% 40%;
}

/* Instagram Reels: 하단 큰 텍스트와 음악 정보, 우측 좋아요/댓글 제거 */
.card-reels .card-thumbnail-crop img {
  transform: scale(1.2);
  object-position: center 30%;
}

/* YouTube Shorts: 우측 하단 채널 로고와 구독 버튼 제거 */
.card-shorts .card-thumbnail-crop img {
  transform: scale(1.1);
  object-position: center;
}

/* Smooth transition for transform */
.card-thumbnail-crop img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover effect - slight zoom */
.group:hover .card-thumbnail-crop img {
  transform: scale(1.25) !important;
}

.card-tiktok.group:hover .card-thumbnail-crop img {
  transform: scale(1.3) !important;
  object-position: 50% 40%;
}

.card-reels.group:hover .card-thumbnail-crop img {
  transform: scale(1.35) !important;
  object-position: center 30%;
}

.card-shorts.group:hover .card-thumbnail-crop img {
  transform: scale(1.25) !important;
  object-position: center;
}

/* === NEW CTA BUTTON ANIMATIONS === */

/* Gradient XY Animation - Moves gradient diagonally */
@keyframes gradient-xy {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.animate-gradient-xy {
  background-size: 400% 400%;
  animation: gradient-xy 3s ease infinite;
}

/* Slow Bounce Animation */
@keyframes bounce-slow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-bounce-slow {
  animation: bounce-slow 2s ease-in-out infinite;
}

/* Pulse Animation for Price Badge */
@keyframes price-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.animate-price-pulse {
  animation: price-pulse 2s ease-in-out infinite;
}

/* Glow effect */
@keyframes glow {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}