/* Custom styles layered on top of Tailwind */

html { scroll-behavior: smooth; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0b0f1a; }
::-webkit-scrollbar-thumb { background: #1a2236; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #27314a; }

/* Selection */
::selection { background: #5b7cff; color: white; }

/* Prose / lesson content */
.prose-lesson { color: #cbd5e1; line-height: 1.75; }
.prose-lesson h2 { color: #f1f5f9; font-size: 2rem; font-weight: 700; margin-top: 3rem; margin-bottom: 1rem; letter-spacing: -0.02em; }
.prose-lesson h3 { color: #f1f5f9; font-size: 1.375rem; font-weight: 600; margin-top: 2.5rem; margin-bottom: 0.75rem; letter-spacing: -0.015em; }
.prose-lesson h4 { color: #e2e8f0; font-size: 1.125rem; font-weight: 600; margin-top: 1.75rem; margin-bottom: 0.5rem; }
.prose-lesson p { margin-bottom: 1.25rem; }
.prose-lesson ul, .prose-lesson ol { margin-bottom: 1.25rem; padding-left: 1.5rem; }
.prose-lesson ul { list-style: disc; }
.prose-lesson ol { list-style: decimal; }
.prose-lesson li { margin-bottom: 0.5rem; }
.prose-lesson li::marker { color: #5b7cff; }
.prose-lesson strong { color: #f1f5f9; font-weight: 600; }
.prose-lesson em { color: #e2e8f0; }
.prose-lesson a { color: #7c9cff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose-lesson a:hover { color: #5eead4; }
.prose-lesson code:not(pre code) { background: #1a2236; color: #5eead4; padding: 0.15rem 0.4rem; border-radius: 0.25rem; font-size: 0.9em; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.prose-lesson pre { background: #070912; border: 1px solid #1a2236; border-radius: 0.75rem; padding: 1.25rem; overflow-x: auto; margin: 1.5rem 0; font-size: 0.875rem; line-height: 1.6; }
.prose-lesson pre code { color: #e2e8f0; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.prose-lesson blockquote { border-left: 3px solid #5b7cff; padding-left: 1rem; margin: 1.5rem 0; color: #94a3b8; font-style: italic; }
.prose-lesson hr { border-color: #1a2236; margin: 2.5rem 0; }
.prose-lesson table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9rem; }
.prose-lesson th, .prose-lesson td { border: 1px solid #1a2236; padding: 0.6rem 0.85rem; text-align: left; }
.prose-lesson th { background: #111726; color: #f1f5f9; font-weight: 600; }

/* Callout boxes */
.callout { border-left: 3px solid; padding: 1rem 1.25rem; border-radius: 0 0.5rem 0.5rem 0; margin: 1.5rem 0; background: rgba(255,255,255,0.02); }
.callout-tip { border-color: #2dd4bf; }
.callout-warn { border-color: #fbbf24; }
.callout-danger { border-color: #f87171; }
.callout-note { border-color: #5b7cff; }
.callout strong { color: #f1f5f9; }

/* Token highlight */
.token-keyword { color: #c084fc; }
.token-string { color: #5eead4; }
.token-comment { color: #64748b; font-style: italic; }
.token-number { color: #fbbf24; }

/* Module cards on dashboard */
.module-card { transition: transform 0.2s, border-color 0.2s; }
.module-card:hover { transform: translateY(-2px); border-color: rgba(91, 124, 255, 0.4); }

/* Locked state for gated content cards (data-requires-enrollment when not enrolled) */
.is-locked {
  position: relative;
  opacity: 0.62;
  filter: saturate(0.6);
  transition: opacity 0.2s, filter 0.2s, transform 0.2s;
}
.is-locked:hover {
  opacity: 0.85;
  filter: saturate(0.9);
}
.is-locked::after {
  content: '🔒 Enroll to unlock';
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: rgba(7, 9, 18, 0.85);
  color: #e2e8f0;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(91, 124, 255, 0.3);
  backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: 2;
}
/* JS handles click interception. We don't disable pointer events because we still
   want the cursor to indicate clickability — the click is just rerouted to enroll. */

/* Progress bar */
.progress-bar { height: 6px; background: #1a2236; border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #5b7cff, #2dd4bf); transition: width 0.4s; }

/* Floating decorative elements */
.floater {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
  opacity: 0.5;
  will-change: transform;
}
.floater-1 { width: 220px; height: 220px; background: radial-gradient(circle, #5b7cff 0%, transparent 70%); animation: float-a 18s ease-in-out infinite; }
.floater-2 { width: 180px; height: 180px; background: radial-gradient(circle, #2dd4bf 0%, transparent 70%); animation: float-b 22s ease-in-out infinite; }
.floater-3 { width: 140px; height: 140px; background: radial-gradient(circle, #c084fc 0%, transparent 70%); animation: float-c 26s ease-in-out infinite; }
.floater-4 { width: 100px; height: 100px; background: radial-gradient(circle, #fbbf24 0%, transparent 70%); animation: float-a 20s ease-in-out infinite reverse; opacity: 0.3; }

@keyframes float-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.1); }
  66% { transform: translate(-30px, 40px) scale(0.95); }
}
@keyframes float-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, 30px) scale(1.15); }
}
@keyframes float-c {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, 50px) scale(0.9); }
  75% { transform: translate(-40px, -20px) scale(1.05); }
}

/* Floating geometric shapes */
.shape {
  position: absolute;
  pointer-events: none;
  opacity: 0.18;
  will-change: transform;
}
.shape-square { border: 2px solid #5b7cff; border-radius: 8px; animation: drift-a 24s ease-in-out infinite; }
.shape-circle { border: 2px solid #2dd4bf; border-radius: 50%; animation: drift-b 28s ease-in-out infinite; }
.shape-triangle { width: 0; height: 0; border-left: 24px solid transparent; border-right: 24px solid transparent; border-bottom: 40px solid rgba(192, 132, 252, 0.4); animation: drift-c 32s ease-in-out infinite; }

@keyframes drift-a {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(20px, -40px) rotate(180deg); }
}
@keyframes drift-b {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-30px, 30px) rotate(-180deg); }
}
@keyframes drift-c {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(30px, 50px) rotate(120deg); }
}

/* Subtle pulse for accent dots */
@keyframes soft-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}
.pulse-dot { animation: soft-pulse 3s ease-in-out infinite; }

/* Gradient title fix — descender room */
.gradient-title {
  padding-bottom: 0.12em;
  line-height: 1.15;
}

/* Performance: pause animations when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .floater, .shape, .pulse-dot { animation: none !important; }
}

/* Print */
@media print {
  nav, footer, .no-print, .floater, .shape { display: none !important; }
  body { background: white; color: black; }
}