@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  scroll-behavior: smooth;
}

body {
  /* Base body styles */
}

/* Starfield Canvas */
#starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Ensure it's behind everything */
}

/* Gold Gradient Text */
.text-gold-gradient {
  background: linear-gradient(90deg, #ca8a04, #facc15, #eab308, #fde047, #b45309); /* Adjusted gold shades */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; /* Make text transparent to show gradient */
}

/* Spinning Coin Animation */
@keyframes spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
.coin {
  animation: spin 5s linear infinite;
}

/* Ensure content is above background images */
section > div:not(.absolute) {
  position: relative;
  z-index: 1;
}

/* Initial state for scroll-triggered animations */
.scroll-target {
  opacity: 0;
  transition: opacity 0.5s ease-out; /* Optional: fade in opacity */
}

/* --- 3D Stories Carousel --- */
.stories-carousel-container {
  perspective: 1000px; /* Adjust for more/less 3D effect */
  position: relative; /* Needed for absolute positioning or complex effects if added later */
   /* Custom scrollbar (optional) */
  scrollbar-width: thin;
  scrollbar-color: #EAB308 #374151; /* thumb track */
}

/* Webkit scrollbar */
.stories-carousel-container::-webkit-scrollbar {
  width: 8px;
}
.stories-carousel-container::-webkit-scrollbar-track {
  background: #1f2937; /* Darker track */
}
.stories-carousel-container::-webkit-scrollbar-thumb {
  background-color: #EAB308; /* Gold thumb */
  border-radius: 4px;
  border: 2px solid #1f2937; /* Padding around thumb */
}


.stories-list {
  transform-style: preserve-3d;
  position: relative;
  /* No direct spacing here if using mb on items */
}

.story-item {
  transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* Slightly faster transition */
  transform-origin: center center;
  opacity: 0.7;
  transform: rotateX(0deg) translateZ(0px) scale(0.9);
  /* mb-2 utility class in HTML handles spacing now */
}

/* Style for the "active" or centered item (applied via JS) */
.story-item.is-active {
  opacity: 1;
  transform: rotateX(0deg) translateZ(50px) scale(1); /* Bring forward, full opacity */
  z-index: 10; /* Ensure active item is on top */
}

/* --- Copy Feedback Animation --- */
@keyframes copyGlow {
  0% { box-shadow: 0 0 0px 0px rgba(234, 179, 8, 0); } /* Start transparent */
  50% { box-shadow: 0 0 15px 5px rgba(234, 179, 8, 0.7); } /* Glow gold */
  100% { box-shadow: 0 0 0px 0px rgba(234, 179, 8, 0); } /* End transparent */
}

.copy-feedback-glow {
  animation: copyGlow 0.8s ease-out;
  border-radius: 0.375rem; /* Match rounded-md */
}


/* Container padding for fixed navbar */
.container {
  padding-top: 80px; /* Adjust based on navbar height */
}

/* Add scroll margin to new section if navbar overlaps */
#why {
  scroll-margin-top: 80px; /* Adjust based on navbar height */
}

/* Style for donation amount on public story items */
.donation-amount {
  /* Tailwind classes text-xs font-semibold text-brand-gold block mb-1 handle most styling */
  /* Add any additional specific styles here if needed */
  /* Example: */
  /* background-color: rgba(234, 179, 8, 0.1); */
  /* padding: 2px 4px; */
  /* border-radius: 3px; */
  /* display: inline-block; */ /* If you don't want it as a block */
}