/* ============================================================
   Omprakash Ghimire — Design System
   Palette : Ink #0B1E3D · Royal #1550C9 · Sky #4FA6FF
             Paper #FBFBFA · Line #E7EAF0 · Gold #C08A34
   Display : Space Grotesk   Body : Inter   Dateline : IBM Plex Mono
   ============================================================ */

:root {
  --ink: #0B1E3D;
  --royal: #1550C9;
  --sky: #4FA6FF;
  --paper: #FBFBFA;
  --line: #E7EAF0;
  --gold: #C08A34;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
}

.font-display { font-family: 'Space Grotesk', sans-serif; }
.font-mono    { font-family: 'IBM Plex Mono', monospace; }

/* ---------- Dateline / eyebrow stamp ---------- */
.dateline {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--royal);
}

/* ---------- Heritage watermark (subtle mandala line-art) ---------- */
.heritage-watermark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%230B1E3D' stroke-width='1'%3E%3Ccircle cx='200' cy='200' r='180'/%3E%3Ccircle cx='200' cy='200' r='140'/%3E%3Ccircle cx='200' cy='200' r='100'/%3E%3Cg%3E%3Cpath d='M200 20 L210 60 L200 100 L190 60 Z'/%3E%3Cpath d='M200 20 L210 60 L200 100 L190 60 Z' transform='rotate(30 200 200)'/%3E%3Cpath d='M200 20 L210 60 L200 100 L190 60 Z' transform='rotate(60 200 200)'/%3E%3Cpath d='M200 20 L210 60 L200 100 L190 60 Z' transform='rotate(90 200 200)'/%3E%3Cpath d='M200 20 L210 60 L200 100 L190 60 Z' transform='rotate(120 200 200)'/%3E%3Cpath d='M200 20 L210 60 L200 100 L190 60 Z' transform='rotate(150 200 200)'/%3E%3Cpath d='M200 20 L210 60 L200 100 L190 60 Z' transform='rotate(180 200 200)'/%3E%3Cpath d='M200 20 L210 60 L200 100 L190 60 Z' transform='rotate(210 200 200)'/%3E%3Cpath d='M200 20 L210 60 L200 100 L190 60 Z' transform='rotate(240 200 200)'/%3E%3Cpath d='M200 20 L210 60 L200 100 L190 60 Z' transform='rotate(270 200 200)'/%3E%3Cpath d='M200 20 L210 60 L200 100 L190 60 Z' transform='rotate(300 200 200)'/%3E%3Cpath d='M200 20 L210 60 L200 100 L190 60 Z' transform='rotate(330 200 200)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right -60px top -60px;
  background-size: 480px 480px;
}

/* ---------- Glass panel ---------- */
.glass-panel {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 20px 50px -20px rgba(11, 30, 61, 0.25);
}

/* ---------- Press-clip pull quote (torn top edge) ---------- */
.press-clip {
  position: relative;
  background: #fff;
  clip-path: polygon(
    0% 3%, 4% 0%, 9% 2%, 14% 0%, 19% 2%, 24% 0%, 29% 2%, 34% 0%, 39% 2%,
    44% 0%, 49% 2%, 54% 0%, 59% 2%, 64% 0%, 69% 2%, 74% 0%, 79% 2%,
    84% 0%, 89% 2%, 94% 0%, 100% 3%,
    100% 100%, 0% 100%
  );
}

/* ---------- Verified credential stamp ---------- */
.stamp {
  border: 1.5px dashed var(--gold);
  color: var(--gold);
  transform: rotate(-6deg);
}

/* ---------- Gradient blob ---------- */
.blob {
  position: absolute;
  border-radius: 999px;
  filter: blur(70px);
  opacity: 0.35;
  background: radial-gradient(circle at 30% 30%, var(--sky), var(--royal));
}

/* ---------- Card hover lift ---------- */
.lift-card { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.lift-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -16px rgba(11,30,61,.22); }

/* ---------- Reading progress bar ---------- */
#reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--royal), var(--sky));
  z-index: 100;
}

/* ---------- Cursor dot (desktop only) ---------- */
#cursor-dot {
  position: fixed;
  width: 10px; height: 10px;
  background: var(--royal);
  border-radius: 50%;
  pointer-events: none;
  z-index: 90;
  transform: translate(-50%, -50%);
  transition: transform .15s ease-out, background .3s;
  mix-blend-mode: multiply;
  display: none;
}
@media (hover: hover) and (pointer: fine) { #cursor-dot { display: block; } }

/* ---------- Fade-up reveal (fallback if AOS unavailable) ---------- */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity .7s ease, transform .7s ease; }

/* ---------- Skeleton loading ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--line) 25%, #f4f6fa 37%, var(--line) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--sky); }