/* ==========================================================================
   Global Christ Scholars Church - Custom Stylesheet
   "Raising Scholars, Transforming Lives — For Christ, For Excellence, For Impact"
   ========================================================================== */

:root {
  --royal-950: #090d2a;
  --royal-900: #111747;
  --royal-800: #1c256b;
  --royal-700: #253085;
  --royal-600: #313fa3;
  --gold-500: #d4af37;
  --gold-400: #e5c453;
  --gold-300: #f3dc86;
  --ivory-50: #fbfaf7;
  --ivory-100: #f4f0e8;
}

html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

.font-serif-display {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

.font-cinzel {
  font-family: 'Cinzel', Georgia, serif;
}

.font-script {
  font-family: 'Great Vibes', cursive;
}

/* Hero Architectural Background & Light Rays */
.hero-sanctuary-bg {
  background:
    radial-gradient(circle at 80% 25%, rgba(212, 175, 55, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(49, 63, 163, 0.35) 0%, transparent 50%),
    linear-gradient(135deg, #070a20 0%, #11184c 52%, #1d2778 100%);
  position: relative;
  overflow: hidden;
}

.hero-sanctuary-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
  pointer-events: none;
}

/* Subtle Light Rays echoing the Mortarboard Rays in the Logo */
.light-rays {
  background: conic-gradient(
    from 270deg at 50% 50%,
    transparent 0deg,
    rgba(212, 175, 55, 0.08) 15deg,
    transparent 30deg,
    rgba(255, 255, 255, 0.06) 45deg,
    transparent 60deg,
    rgba(212, 175, 55, 0.08) 75deg,
    transparent 90deg
  );
  filter: blur(28px);
}

/* Rotating Orbital Ring around the Church Seal */
@keyframes slowSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes reverseSlowSpin {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes floatGentle {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.25), 0 0 60px rgba(37, 48, 133, 0.45);
  }
  50% {
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.45), 0 0 85px rgba(49, 63, 163, 0.65);
  }
}

.orbit-ring {
  animation: slowSpin 38s linear infinite;
}

.orbit-ring-reverse {
  animation: reverseSlowSpin 50s linear infinite;
}

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

.float-card-delayed {
  animation: floatGentle 6s ease-in-out 3s infinite;
}

.seal-glow {
  animation: pulseGlow 5s ease-in-out infinite;
}

/* Gold Shimmer Text */
.text-gold-gradient {
  background: linear-gradient(135deg, #f7e5a9 0%, #d4af37 45%, #b88917 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-gold-gradient {
  background: linear-gradient(135deg, #e5c453 0%, #d4af37 50%, #b58c1c 100%);
}

.bg-royal-gradient {
  background: linear-gradient(135deg, #111747 0%, #1e2773 55%, #273391 100%);
}

/* Glass Cards */
.glass-panel {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.glass-nav {
  background: rgba(11, 15, 46, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

/* Card Hover Transitions */
.scholar-card {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.scholar-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -15px rgba(17, 23, 71, 0.16), 0 0 0 1px rgba(212, 175, 55, 0.35);
}

/* Audio Waveform Bars Animation */
@keyframes soundWave {
  0%, 100% {
    height: 25%;
  }
  50% {
    height: 100%;
  }
}

.wave-bar {
  transition: height 0.2s ease;
}

.playing .wave-bar:nth-child(odd) {
  animation: soundWave 0.9s ease-in-out infinite;
}

.playing .wave-bar:nth-child(even) {
  animation: soundWave 1.2s ease-in-out 0.2s infinite;
}

.playing .wave-bar:nth-child(3n) {
  animation: soundWave 0.75s ease-in-out 0.4s infinite;
}

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

::-webkit-scrollbar-track {
  background: #0b0f2e;
}

::-webkit-scrollbar-thumb {
  background: #273391;
  border-radius: 5px;
  border: 2px solid #0b0f2e;
}

::-webkit-scrollbar-thumb:hover {
  background: #d4af37;
}

/* Outreach Card Image Hover Effect */
.outreach-card {
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.outreach-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -12px rgba(17, 23, 71, 0.2), 0 0 0 1px rgba(212, 175, 55, 0.4);
}
.outreach-card:hover .outreach-img {
  transform: scale(1.05);
}
.outreach-img {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Toast Notification */
#copy-toast {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#copy-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}