/* ============================================
   Rolando Comiani — The Lucid Interface
   ============================================ */

:root {
  --background: #01132f;
  --surface-container: #0d1f3c;
  --surface-container-low: #081b38;
  --surface-container-highest: #243553;
  --surface-variant: #243553;
  --primary: #75d1ff;
  --on-primary-container: #008ab6;
  --secondary-container: #4a3a87;
  --on-surface: #d7e2ff;
  --on-surface-variant: #c5c6cd;
  --outline-variant: #45474c;
  --tertiary: #ffb86f;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--on-surface);
  background: var(--background);
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ---- Star field ---- */
.star-field {
  background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.05) 1px, transparent 0);
  background-size: 40px 40px;
}

/* ---- Hero orbital animation ---- */
@keyframes float-gentle {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.03); }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(1.12); }
}

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

.animate-glow-pulse {
  animation: glow-pulse 6s ease-in-out infinite;
}

/* ---- Glass panel ---- */
.glass-panel {
  background: rgba(36, 53, 83, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ---- Fade in on scroll ---- */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Book card hover ---- */
.book-card {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.book-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(117,209,255,0.08), 0 8px 24px rgba(0,0,0,0.3);
}

/* ---- Blog card hover ---- */
.blog-card {
  transition: border-color 0.4s ease, background-color 0.4s ease;
}

/* ---- Form focus ---- */
input:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(117,209,255,0.15);
}

/* ---- Header scroll ---- */
.header-scrolled {
  background: rgba(1,19,47,0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

/* ---- Blog post content ---- */
.post-content h2 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--on-surface);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.post-content h3 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--on-surface);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.post-content p {
  color: var(--on-surface-variant);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.post-content ul,
.post-content ol {
  color: var(--on-surface-variant);
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.post-content li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

.post-content strong {
  color: var(--on-surface);
}

.post-content em {
  font-style: italic;
}

.post-content a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.post-content a:hover {
  color: var(--on-surface);
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--background); }
::-webkit-scrollbar-thumb { background: var(--surface-variant); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }