/* ==========================================================================
   PGC Center - Official Replit-Inspired Design System
   Exact Design Match for https://pgc-center-ngo-website--uozbiology.replit.app/
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=IBM+Plex+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Exact HSL Colors from Replit Reference */
  --background: 39 43% 95%;           /* #F6F3EC warm ivory/cream */
  --foreground: 202 46% 16%;          /* #162B3A deep institutional slate */
  --border: 38 25% 84%;               /* #E4DDD1 fine warm stone border */
  --input: 38 25% 84%;
  --ring: 176 54% 32%;                /* #257D7A */
  --card: 40 40% 98%;                 /* #FAF9F6 soft ivory card */
  --card-foreground: 202 46% 16%;
  --card-border: 38 25% 84%;
  --popover: 40 40% 98%;
  --popover-foreground: 202 46% 16%;
  --popover-border: 38 25% 84%;
  --primary: 202 46% 16%;             /* #162B3A */
  --primary-foreground: 39 43% 95%;   /* #F6F3EC */
  --secondary: 176 54% 32%;           /* #257D7A deep heritage teal */
  --secondary-foreground: 40 40% 98%;
  --muted: 39 25% 89%;                /* #EAE5DC */
  --muted-foreground: 204 20% 41%;    /* #556E7D */
  --accent: 16 68% 57%;               /* #DC6744 warm terracotta / amber */
  --accent-foreground: 202 46% 16%;
  --destructive: 4 64% 46%;
  --destructive-foreground: 40 40% 98%;

  /* Fonts */
  --app-font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --app-font-serif: "DM Serif Display", Georgia, serif;
  --app-font-mono: "IBM Plex Mono", monospace;

  /* Elevations */
  --radius: 0.65rem;
  --shadow-2xs: 0 2px 0 #1f344000;
  --shadow-xs: 0 2px 5px #1f34400d;
  --shadow-sm: 0 8px 20px #1f34400f;
  --shadow: 0 14px 35px #1f344014;
  --shadow-md: 0 20px 45px #1f34401c;
}

/* --- Base & Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

body {
  font-family: var(--app-font-sans);
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* --- Typography Classes --- */
.font-display {
  font-family: var(--app-font-serif);
}

.font-mono-pgc {
  font-family: var(--app-font-mono);
}

.display-tight {
  letter-spacing: -0.055em;
}

.eyebrow {
  font-family: var(--app-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.66rem;
  line-height: 1.3;
  font-weight: 600;
}

/* --- Animations & Effects --- */
.hero-orbit {
  transform-origin: 50%;
  animation: 20s linear infinite orbit;
}

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

.float-slow {
  animation: 7s ease-in-out infinite float;
}

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

.route-enter {
  animation: routeFadeIn 0.35s ease-out forwards;
}

@keyframes routeFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Hero Typewriter Animated Cursor --- */
.hero-type-cursor {
  display: inline-block;
  font-family: var(--app-font-sans);
  font-weight: 300;
  color: hsl(var(--accent));
  margin-left: 0.06em;
  line-height: 0.85;
  vertical-align: 0.02em;
  user-select: none;
  animation: heroCursorPulse 0.9s infinite ease-in-out;
  transition: opacity 0.1s ease;
}

.hero-type-cursor.typing {
  animation: none !important;
  opacity: 1 !important;
}

@keyframes heroCursorPulse {
  0%, 100% {
    opacity: 1;
    transform: scaleY(1);
    text-shadow: 0 0 12px hsl(var(--accent) / 0.6);
  }
  50% {
    opacity: 0;
    transform: scaleY(0.92);
    text-shadow: none;
  }
}

/* --- Page Intro Banner (Gi component) --- */
.page-intro {
  background: radial-gradient(circle at 78% 14%, hsl(var(--accent) / 0.15), transparent 27rem),
              linear-gradient(135deg, hsl(var(--background)), hsl(var(--muted) / 0.55));
  border-bottom: 1px solid hsl(var(--border));
}

/* --- Header & Navigation --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: hsl(var(--background) / 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid hsl(var(--border));
  transition: all 0.25s ease;
}

.nav-link {
  color: hsl(var(--muted-foreground));
  position: relative;
  transition: color 0.2s;
}

.nav-link:hover {
  color: hsl(var(--primary));
}

.nav-link[data-active="true"] {
  color: hsl(var(--primary));
}

.nav-link[data-active="true"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: hsl(var(--accent));
}

/* --- Form Field --- */
.form-field {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background) / 0.72);
  width: 100%;
  color: hsl(var(--foreground));
  outline: none;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
}

.form-field:focus {
  border-color: hsl(var(--secondary));
  background: #ffffff;
  box-shadow: 0 0 0 3px hsl(var(--secondary) / 0.15);
}

/* --- Portraits Frame --- */
.portrait-frame {
  background: linear-gradient(145deg, hsl(var(--muted)), hsl(var(--card)));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

.portrait-card:hover img {
  transform: scale(1.03);
}

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

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

::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground));
}