/* Extracted from src/pages/products.html */
:root {
  --font-heading: "JetBrains Mono", monospace;
  --font-body: "Inter", sans-serif;
}
body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
h5,
h6,
.font-mono-custom {
  font-family: var(--font-heading);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: #e4e4e7;
  border-radius: 20px;
}

/* Subtle Grid Pattern */
.bg-grid-subtle {
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.03) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}
.bg-grid-dark {
  background-image: linear-gradient(to right, #27272a 1px, transparent 1px),
    linear-gradient(to bottom, #27272a 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
}

/* Animation Classes */
.fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Path Animation */
.path-line {
  transition: stroke 0.5s ease, stroke-width 0.3s ease;
}
.path-active {
  stroke: #3b82f6; /* Blue-500 */
  filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.5));
}
.flow-dot {
  offset-path: path(
    "M 80 480 C 160 480, 160 390, 240 390 C 320 390, 320 300, 400 300 C 480 300, 480 210, 560 210 C 640 210, 640 120, 720 120"
  );
  offset-distance: 0%;
  opacity: 0;
  transition-property: offset-distance, opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  will-change: offset-distance;
}
.node-glow {
  box-shadow: 0 0 20px -5px currentColor;
}
.play-active-pulse {
  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  animation: pulse-blue 2s infinite;
}
@keyframes pulse-blue {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

/* 
   --------------------------------------------------------------------------
   BRIDGE THE GAP: TRAJECTORY TOGGLE (Fluid Responsive)
   --------------------------------------------------------------------------
   Ideally this logic handles the "Background Pill" sliding based on state.
   State is controlled via data-state="industry" | "academy" on the container.
*/

/* 
   --------------------------------------------------------------------------
   BRIDGE THE GAP: TRAJECTORY TOGGLE (Fluid Responsive)
   --------------------------------------------------------------------------
   Ideally this logic handles the "Background Pill" sliding based on state.
   State is controlled via data-state="industry" | "academy" on the container.
*/

/* The Container */
.trajectory-toggle-container {
  /* Tailwind utilities applied in HTML: flex, relative, rounded-full, etc. */
  /* We strictly control width behavior here if needed, but Tailwind classes do fine. */
}

/* The Background Pill */
.trajectory-toggle-bg {
  position: absolute;
  top: 6px; 
  bottom: 6px;
  background-color: #27272a; /* zinc-800 */
  border-radius: 9999px;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  border: 1px solid rgba(63, 63, 70, 0.5); /* zinc-700/50 */
}

/* --- MOBILE STATE (Default: Fluid %) --- */
/* State: Industry */
.trajectory-toggle-container[data-state="industry"] .trajectory-toggle-bg {
  left: 1.5%; 
  width: 48.5%;
}
/* State: Academy */
.trajectory-toggle-container[data-state="academy"] .trajectory-toggle-bg {
  left: 50%; 
  width: 48.5%;
}

/* --- DESKTOP STATE (min-width: 1024px to match lg: breakdown of the page) --- */
/* Actually, the page breaks at lg (1024), but let's check the toggle. 
   The original code had specific pixel widths. We want to restore them on larger screens.
   Let's say md (768px) is safe for fixed width? The buttons combined are ~380px. 
   So yes, 768px is safe. 
*/
@media (min-width: 768px) {
  /* Restore Fixed Dimensions */
  .trajectory-toggle-container[data-state="industry"] .trajectory-toggle-bg {
      left: 6px; 
      width: 160px; /* Original Fixed Width */
  }
  
  .trajectory-toggle-container[data-state="academy"] .trajectory-toggle-bg {
      left: 172px; /* 160px + gap? Original was 166px relative to container logic? 
                      Wait, original code:
                      Industry -> L: 6px, W: 160px
                      Academy  -> L: 166px, W: 220px
                      6 + 160 = 166. So they touch?
                      gap is implicit in the logic.
                   */
      width: 220px; /* Original Fixed Width */
  }

/* Typing Animation */
.typing-cursor::after {
  content: '▋';
  display: inline-block;
  vertical-align: bottom;
  margin-left: 2px;
  animation: blink 1s step-end infinite;
  color: #60a5fa; /* blue-400 */
  opacity: 0.8;
}

@keyframes blink {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0; }
}