/* Glassmorphism Design System inspired by arusha-park.php */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Inter:wght@400;500;600;700;800;900&display=swap');

body {
  font-family: 'Inter', sans-serif;
  background-color: white;
  color: #111827; /* gray-900 */
  overflow-x: hidden;
}

::selection {
  background-color: #fef3c7; /* amber-100 */
}

:root {
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-dark-bg: rgba(84, 50, 48, 0.85);
  --glass-dark-border: rgba(255, 255, 255, 0.2);
  --primary-color: #543230;
  --amber-accent: #fbbf24; /* amber-400 */
}

.playfair {
  font-family: 'Playfair Display', serif;
}

.inter {
  font-family: 'Inter', sans-serif;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes slow-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse-slow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

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

.animate-slow-spin {
  animation: slow-spin 20s linear infinite;
}

.animate-pulse-slow {
  animation: pulse-slow 4s ease-in-out infinite;
}

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
}

.glass-card-dark {
  background: var(--glass-dark-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-dark-border);
}

.glass-sidebar {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 2rem;
}

.newspaper-layout {
  column-count: 1;
}

@media (min-width: 768px) {
  .newspaper-layout {
    column-count: 2;
    column-gap: 3rem;
  }
}

.drop-cap:first-letter {
  font-size: 4rem;
  font-weight: 900;
  float: left;
  padding-right: 0.5rem;
  line-height: 0.8;
  color: var(--primary-color);
  font-family: 'Playfair Display', serif;
}

/* Custom transitions */
.hover-scale {
  transition: transform 0.3s ease-out;
}
.hover-scale:hover {
  transform: scale(1.05);
}