/* ==========================================================================
   Google Sans Font Definitions (Loaded from static/)
   ========================================================================== */

@font-face {
  font-family: 'Google Sans';
  src: url('static/GoogleSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Google Sans';
  src: url('static/GoogleSans-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Google Sans';
  src: url('static/GoogleSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Google Sans';
  src: url('static/GoogleSans-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Google Sans';
  src: url('static/GoogleSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Google Sans';
  src: url('static/GoogleSans-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Google Sans';
  src: url('static/GoogleSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Google Sans';
  src: url('static/GoogleSans-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Global Font Application: Enforces Google Sans for all current and future elements */
*, *::before, *::after, html, body, button, input, select, textarea {
  font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

html {
  scroll-behavior: smooth;
}

.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}

.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}

/* ==========================================================================
   Floating Paths Background (High Performance Canvas Container)
   ========================================================================== */
#floating-paths-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  background-color: #0c0d12;
  will-change: opacity;
}

#floating-paths-container.paths-active {
  opacity: 1;
}

/* ==========================================================================
   Header Smooth Morphing Transitions (Fluid Scale & Position Interpolation)
   ========================================================================== */
#site-header-bar {
  transition: max-width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-radius 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              margin-top 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: max-width, width, border-radius, box-shadow, margin-top;
}

/* Scrolled Up: Stretched across full X-axis with dividing bottom line */
.header-at-top {
  max-width: 100% !important;
  width: 100% !important;
  margin-top: 0px !important;
  border-radius: 0px !important;
  border-left: 0px solid transparent !important;
  border-right: 0px solid transparent !important;
  border-top: 0px solid transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

/* Scrolled Down: Floating pill scale */
.header-scrolled-pill {
  max-width: 64rem !important; /* max-w-5xl */
  width: 92% !important;
  margin-top: 0.75rem !important;
  border-radius: 1rem !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.65) !important;
}

/* ==========================================================================
   Loading Screen Overlay & Reveal Animations
   ========================================================================== */
#main-content {
  position: relative;
  z-index: 10;
  transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: filter, opacity;
}

#main-content.content-blurred {
  filter: blur(10px);
  transform: scale(0.99);
  opacity: 0.6;
}

#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(12, 13, 18, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              backdrop-filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}

#loading-screen.loader-hidden {
  opacity: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  pointer-events: none;
}

.loader-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

#loading-screen.loader-hidden .loader-card {
  transform: scale(0.95);
  opacity: 0;
}