/* 
  Redwood Sanctuary - Main Stylesheet
  Premium, modern, and serene aesthetic
*/

:root {
  /* Design Tokens from Stitch project */
  --primary: #173124;
  --primary-container: #2d4739;
  --on-primary: #ffffff;
  --secondary: #735a3a;
  --secondary-container: #fddab2;
  --on-secondary: #ffffff;
  --surface: #f6faf6;
  --surface-container-lowest: #ffffff;
  --on-surface: #181d1a;
  --on-surface-variant: #424844;
  --outline-variant: #c2c8c2;
  --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  font-family: 'Manrope', sans-serif;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-headline {
  font-family: 'Noto Serif', serif;
}

/* Custom Utilities */
.glass-nav {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.hero-gradient {
  background: linear-gradient(to bottom, rgba(23, 49, 36, 0.2), transparent, var(--surface));
}

.reveal-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Micro-animations */
.hover-lift {
  transition: var(--transition-smooth);
}

.hover-lift:hover {
  transform: translateY(-8px);
}

.image-zoom-container {
  overflow: hidden;
}

.image-zoom-container img {
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.image-zoom-container:hover img {
  transform: scale(1.08);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 1s ease-out forwards;
}

.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-400 { animation-delay: 0.4s; }
.animation-delay-600 { animation-delay: 0.6s; }

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--surface);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-container);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}