/* Font imports */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,600;0,8..60,700;1,8..60,600&display=swap');

/* Base Styles & Utility Classes */
:root {
  --color-primary: #000f22;
  --color-primary-container: #0a2540;
  --color-secondary: #d4af37;
  --color-secondary-container: #fed65b;
  --color-surface: #faf9fb;
  --color-surface-container: #efedf0;
  --color-surface-lowest: #ffffff;
  --color-on-surface-variant: #43474d;
  --color-outline: #74777e;
  --color-outline-variant: #c4c6ce;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Work Sans', sans-serif;
  background-color: var(--color-surface);
  color: #1b1c1e;
  overflow-x: hidden;
}

.font-serif-headline {
  font-family: 'Source Serif 4', Georgia, serif;
}

/* Interactive 3D Tilt & Spotlight Card Styling */
.interactive-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

.interactive-card:hover {
  box-shadow: 0 24px 50px -12px rgba(212, 175, 55, 0.3), 0 12px 30px -10px rgba(10, 37, 64, 0.35);
  border-color: rgba(212, 175, 55, 0.6) !important;
}

.card-spotlight {
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(212, 175, 55, 0.22), transparent 45%);
}

.interactive-card:hover .card-spotlight {
  opacity: 1;
}

/* Contact Card Styling */
.contact-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(10, 37, 64, 0.12);
}

/* Hide scrollbar for clean view */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Custom Glow Effect */
.gold-glow {
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.3);
}

/* Custom Smooth Transitions */
.nav-transition {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Modal Animations */
.modal-overlay {
  transition: opacity 0.35s ease;
}

.modal-content {
  transform: translateY(40px) scale(0.96);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-open .modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Member Bio Section Card inside Modal */
.bio-section-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bio-section-card:hover {
  transform: translateX(4px);
  box-shadow: 0 8px 20px rgba(10, 37, 64, 0.08);
}