html { scroll-behavior: smooth; }
body {
  background: #fbfaf6;
  color: #16140f;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}
.font-serif { letter-spacing: -0.01em; }
.h-display { font-family: "Instrument Serif", Charter, Georgia, serif; font-weight: 400; letter-spacing: -0.022em; line-height: 1.02; }
.grain {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(22,20,15,0.06) 1px, transparent 0);
  background-size: 22px 22px;
}

/* hero graph background */
.hero-graph-wrap {
  /* fade the graph in/out softly at top + bottom so it doesn't crash into adjacent UI */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 80px, #000 calc(100% - 60px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 80px, #000 calc(100% - 60px), transparent 100%);
}
#hero-graph { display: block; }
.hairline { border-color: rgba(22,20,15,0.10); }
.hairline-strong { border-color: rgba(22,20,15,0.16); }
.btn-primary {
  background: #16140f;
  color: #fbfaf6;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn-primary:hover { background: #2a2620; transform: translateY(-1px); }
.btn-ghost {
  border: 1px solid rgba(22,20,15,0.20);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-ghost:hover { background: rgba(22,20,15,0.04); border-color: rgba(22,20,15,0.4); }
.accent { color: #4f46e5; }
.accent-bg { background: #4f46e5; }
.chip { font-feature-settings: "tnum"; }

/* underline grow for nav */
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: #16140f; transform: scaleX(0); transform-origin: left;
  transition: transform 0.2s ease;
}
.nav-link:hover::after { transform: scaleX(1); }

/* Subtle scroll fade */
.fade-up { opacity: 0; transform: translateY(8px); animation: fadeUp 0.7s ease-out forwards; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* Drop zone animation */
@keyframes dropPdf {
  0%   { transform: translateY(-120%); opacity: 0; }
  20%  { opacity: 1; }
  55%  { transform: translateY(0); opacity: 1; }
  65%  { transform: translateY(0) scale(0.96); }
  80%  { transform: translateY(0) scale(0.96); opacity: 0.4; }
  100% { transform: translateY(40%) scale(0.9); opacity: 0; }
}
.drop-pdf { animation: dropPdf 4.5s ease-in-out infinite; }
@keyframes pulseRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79,70,229,0); }
  50%      { box-shadow: 0 0 0 14px rgba(79,70,229,0.08); }
}
.pulse-ring { animation: pulseRing 4.5s ease-in-out infinite; }

/* =========================================================
   Watchdog pipeline demo (Pipeline §02) — 13s master cycle
   Demonstrates the full process: drop → DOI → CrossRef →
   LLM → file move + symlinks, then loops.
   ========================================================= */
@keyframes wdDrop {
  0%, 6%    { transform: translateX(-50%) translateY(-150%); opacity: 0; }
  9%        { transform: translateX(-50%) translateY(-150%); opacity: 0.7; }
  14%       { transform: translateX(-50%) translateY(28%); opacity: 1; }
  16%       { transform: translateX(-50%) translateY(22%) scale(0.96); }
  82%       { transform: translateX(-50%) translateY(22%) scale(0.96); opacity: 1; }
  87%       { transform: translateX(-50%) translateY(80%) scale(0.7); opacity: 0; }
  100%      { transform: translateX(-50%) translateY(80%) scale(0.7); opacity: 0; }
}
.wd-pdf { animation: wdDrop 13s cubic-bezier(.6,.05,.4,1) infinite; }

@keyframes wdIdle {
  0%, 6%, 92%, 100% { opacity: 1; }
  10%, 90%          { opacity: 0; }
}
.wd-idle { animation: wdIdle 13s ease-in-out infinite; }

@keyframes wdLanded {
  0%, 84%   { opacity: 0; transform: translateY(6px); }
  86%, 94%  { opacity: 1; transform: translateY(0); }
  97%, 100% { opacity: 0; transform: translateY(0); }
}
.wd-landed { animation: wdLanded 13s ease-in-out infinite; }

/* terminal log lines — staggered fade-in over the cycle */
.wd-log { opacity: 0; transform: translateX(-6px); }
@keyframes wdLog1 { 0%, 13% { opacity: 0; transform: translateX(-6px); } 17%, 93% { opacity: 1; transform: translateX(0); } 96%, 100% { opacity: 0; } }
@keyframes wdLog2 { 0%, 31% { opacity: 0; transform: translateX(-6px); } 35%, 93% { opacity: 1; transform: translateX(0); } 96%, 100% { opacity: 0; } }
@keyframes wdLog3 { 0%, 47% { opacity: 0; transform: translateX(-6px); } 51%, 93% { opacity: 1; transform: translateX(0); } 96%, 100% { opacity: 0; } }
@keyframes wdLog4 { 0%, 63% { opacity: 0; transform: translateX(-6px); } 67%, 93% { opacity: 1; transform: translateX(0); } 96%, 100% { opacity: 0; } }
@keyframes wdLog5 { 0%, 80% { opacity: 0; transform: translateX(-6px); } 84%, 93% { opacity: 1; transform: translateX(0); } 96%, 100% { opacity: 0; } }
@keyframes wdLog6 { 0%, 89% { opacity: 0; } 92%, 99% { opacity: 0.7; } 100% { opacity: 0; } }
.wd-log-1 { animation: wdLog1 13s ease-in-out infinite; }
.wd-log-2 { animation: wdLog2 13s ease-in-out infinite; }
.wd-log-3 { animation: wdLog3 13s ease-in-out infinite; }
.wd-log-4 { animation: wdLog4 13s ease-in-out infinite; }
.wd-log-5 { animation: wdLog5 13s ease-in-out infinite; }
.wd-log-6 { animation: wdLog6 13s ease-in-out infinite; }

/* blinking caret at the current "tail" of the log */
@keyframes wdCaret {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.wd-caret { animation: wdCaret 0.9s steps(1) infinite; }

/* step lamps */
.wd-lamp {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(22,20,15,0.05);
  color: rgba(22,20,15,0.4);
  font-family: "Instrument Serif", Charter, Georgia, serif;
  font-size: 19px; line-height: 1;
  transition: background .3s, color .3s, transform .3s;
}
.wd-lamp-line { flex: 1; height: 1px; background: rgba(22,20,15,0.12); position: relative; overflow: hidden; }
.wd-lamp-line::after {
  content: ""; position: absolute; inset: 0; width: 0;
  background: #4f46e5; transition: width .3s;
}
@keyframes wdLamp1 {
  0%, 14%, 35%, 100% { background: rgba(22,20,15,0.05); color: rgba(22,20,15,0.4); }
  17%, 32%           { background: #4f46e5; color: #fff; }
  36%, 100%          { background: rgba(16,185,129,0.12); color: #047857; }
}
@keyframes wdLamp2 {
  0%, 31%, 51%, 100% { background: rgba(22,20,15,0.05); color: rgba(22,20,15,0.4); }
  34%, 48%           { background: #4f46e5; color: #fff; }
  52%, 100%          { background: rgba(16,185,129,0.12); color: #047857; }
}
@keyframes wdLamp3 {
  0%, 47%, 67%, 100% { background: rgba(22,20,15,0.05); color: rgba(22,20,15,0.4); }
  50%, 64%           { background: #4f46e5; color: #fff; }
  68%, 100%          { background: rgba(16,185,129,0.12); color: #047857; }
}
@keyframes wdLamp4 {
  0%, 63%, 85%, 100% { background: rgba(22,20,15,0.05); color: rgba(22,20,15,0.4); }
  67%, 82%           { background: #4f46e5; color: #fff; transform: scale(1.08); }
  86%, 100%          { background: rgba(16,185,129,0.12); color: #047857; }
}
.wd-lamp[data-lamp="1"] { animation: wdLamp1 13s ease-in-out infinite; }
.wd-lamp[data-lamp="2"] { animation: wdLamp2 13s ease-in-out infinite; }
.wd-lamp[data-lamp="3"] { animation: wdLamp3 13s ease-in-out infinite; }
.wd-lamp[data-lamp="4"] { animation: wdLamp4 13s ease-in-out infinite; }

/* progress bar between lamps */
@keyframes wdBar1 { 0%, 14% { width: 0; } 32% { width: 100%; } 100% { width: 100%; } }
@keyframes wdBar2 { 0%, 31% { width: 0; } 48% { width: 100%; } 100% { width: 100%; } }
@keyframes wdBar3 { 0%, 47% { width: 0; } 64% { width: 100%; } 100% { width: 100%; } }
.wd-lamp-line[data-bar="1"]::after { animation: wdBar1 13s ease-in-out infinite; }
.wd-lamp-line[data-bar="2"]::after { animation: wdBar2 13s ease-in-out infinite; }
.wd-lamp-line[data-bar="3"]::after { animation: wdBar3 13s ease-in-out infinite; }

/* watchdog status dot pulse */
@keyframes wdPulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}
.wd-dot { animation: wdPulseDot 2s ease-in-out infinite; }

/* ghost grid background for drop zone */
.wd-grid {
  background-image: radial-gradient(circle at 1px 1px, rgba(22,20,15,0.10) 1px, transparent 0);
  background-size: 14px 14px;
}

/* File tree */
.tree-line { color: rgba(22,20,15,0.35); }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.chev { transition: transform 0.2s ease; }
details[open] > summary .chev { transform: rotate(90deg); }

/* FAQ */
.faq summary { cursor: pointer; }
.faq[open] .plus { transform: rotate(45deg); }
.plus { transition: transform 0.2s ease; }

/* mock explorer */
.win-titlebar { background: linear-gradient(180deg, #fafaf9 0%, #f1efe8 100%); }

/* dotted divider */
.dotted-x {
  background-image: linear-gradient(90deg, rgba(22,20,15,0.18) 25%, transparent 25%);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  background-position: 0 50%;
  height: 1px;
}

/* code block */
.code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.7;
}

/* placeholder stripe */
.stripe-placeholder {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(22,20,15,0.05),
    rgba(22,20,15,0.05) 8px,
    rgba(22,20,15,0.02) 8px,
    rgba(22,20,15,0.02) 16px
  );
}
.stripe-paper {
  background-image: repeating-linear-gradient(
    0deg,
    rgba(22,20,15,0.04),
    rgba(22,20,15,0.04) 1px,
    transparent 1px,
    transparent 6px
  );
}

/* =========================================================
   Hero mini-app — 4-scene click+autoplay demo
   ========================================================= */
.ma-scene {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(4px);
  transition: opacity .25s ease-out, transform .25s ease-out;
  pointer-events: none;
}
.ma-scene.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }

.ma-lamp {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(22,20,15,0.05);
  color: rgba(22,20,15,0.4);
  font-family: "Instrument Serif", Charter, Georgia, serif;
  font-size: 19px; line-height: 1;
  transition: background .25s, color .25s, transform .25s;
  cursor: pointer; border: none; padding: 0;
}
.ma-lamp:hover { background: rgba(22,20,15,0.10); color: rgba(22,20,15,0.7); }
.ma-lamp:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }
.ma-lamp.is-passed { background: rgba(16,185,129,0.12); color: #047857; }
.ma-lamp.is-active { background: #4f46e5; color: #fff; transform: scale(1.05); }
.ma-lamp-sep { flex: 1; height: 1px; background: rgba(22,20,15,0.14); }

/* Scene 1: staggered fade-in for "recent imports" list */
.ma-scene[data-scene="1"] .ma-fade { opacity: 0; transform: translateY(3px); }
.ma-scene[data-scene="1"].is-active .ma-fade {
  animation: maFadeIn 0.45s ease-out forwards;
}
.ma-scene[data-scene="1"].is-active .ma-fade:nth-child(1) { animation-delay: .08s; }
.ma-scene[data-scene="1"].is-active .ma-fade:nth-child(2) { animation-delay: .16s; }
.ma-scene[data-scene="1"].is-active .ma-fade:nth-child(3) { animation-delay: .24s; }
@keyframes maFadeIn { to { opacity: 1; transform: translateY(0); } }

/* Scene 1: falling PDF tile with random-looking filename */
.ma-pdf-drop {
  position: absolute; left: 50%;
  top: 10%;
  transform: translate(-50%, -140%);
  opacity: 0;
  pointer-events: none;
}
.ma-scene[data-scene="1"].is-active .ma-pdf-drop {
  animation: maPdfDrop 3.6s cubic-bezier(.55,.05,.35,1) .35s forwards;
}
@keyframes maPdfDrop {
  0%   { opacity: 0; transform: translate(-50%, -140%) rotate(-6deg); }
  18%  { opacity: 1; transform: translate(-50%, -140%) rotate(-6deg); }
  55%  { opacity: 1; transform: translate(-50%, -8%) rotate(-1deg); }
  70%  { opacity: 1; transform: translate(-50%, -8%) rotate(-1deg) scale(0.98); }
  100% { opacity: 0; transform: translate(-50%, 14%) rotate(0) scale(0.92); }
}

/* Scene 2: chat reveals — user first, then typing dots, then AI bubble */
.ma-scene[data-scene="2"] .ma-chat-user,
.ma-scene[data-scene="2"] .ma-chat-typing,
.ma-scene[data-scene="2"] .ma-chat-ai { opacity: 0; }
.ma-scene[data-scene="2"].is-active .ma-chat-user { animation: maFadeIn .35s ease-out .1s forwards; }
.ma-scene[data-scene="2"].is-active .ma-chat-typing { animation: maChatTyping 1.4s ease-out .55s forwards; }
.ma-scene[data-scene="2"].is-active .ma-chat-ai { animation: maFadeIn .35s ease-out 1.8s forwards; }
@keyframes maChatTyping {
  0% { opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { opacity: 0; }
}

/* Scene 3: button press + file pill */
.ma-scene[data-scene="3"] .ma-btn { transform: translateY(0); transition: transform .15s ease; }
.ma-scene[data-scene="3"].is-active .ma-btn { animation: maPress .4s ease-out .25s; }
@keyframes maPress {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(1.5px); filter: brightness(0.92); }
}
.ma-scene[data-scene="3"] .ma-file-pill { opacity: 0; }
.ma-scene[data-scene="3"].is-active .ma-file-pill {
  animation: maFilePill 2.6s cubic-bezier(.5,.05,.4,1) .55s forwards;
}
@keyframes maFilePill {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-4px) scale(0.96); }
  18%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  70%  { opacity: 1; transform: translateX(-50%) translateY(50px) scale(0.98); }
  100% { opacity: 0; transform: translateX(-50%) translateY(78px) scale(0.94); }
}

/* Reduced motion: snap, don't animate */
@media (prefers-reduced-motion: reduce) {
  .ma-scene, .ma-scene.is-active .ma-fade,
  .ma-scene[data-scene="2"].is-active .ma-chat-user,
  .ma-scene[data-scene="2"].is-active .ma-chat-typing,
  .ma-scene[data-scene="2"].is-active .ma-chat-ai,
  .ma-scene[data-scene="3"].is-active .ma-btn,
  .ma-scene[data-scene="3"].is-active .ma-file-pill {
    animation: none !important; transition: none !important;
  }
  .ma-scene[data-scene="2"].is-active .ma-chat-typing { opacity: 0; }
  .ma-scene[data-scene="2"].is-active .ma-chat-user,
  .ma-scene[data-scene="2"].is-active .ma-chat-ai,
  .ma-scene.is-active .ma-fade { opacity: 1; transform: none; }
}

/* =========================================================
   Mobile: hide canvas-driven hero graph below lg breakpoint
   ========================================================= */
@media (max-width: 1023px) {
  #hero-graph, #hero-graph-card { display: none; }
}

/* Share-button toast (paper-beige, ink-700, 3s visible) */
.share-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  background: #eceadf;
  color: #3c3830;
  border: 1px solid rgba(22,20,15,0.16);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(22,20,15,0.10);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 1000;
}
.share-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}