/* Shared base styles for NeedAMap marketing pages.
 * Keep in sync with DESIGN_SYSTEM.md.
 */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

/* ===== Design tokens ===== */
:root {
  /* Surfaces */
  --color-base: #0f0d0b;
  --color-surface: #1a1714;
  --color-elevated: #262220;
  --color-elevated-2: #332e2a;

  /* Borders */
  --color-border: #332e2a;
  --color-border-subtle: #262220;
  --color-border-strong: #4a433c;

  /* Text */
  --color-text: #e8e2d9;
  --color-text-muted: #9c9488;
  --color-text-faint: #6b6359;
  --color-text-inverse: #0f0d0b;

  /* Sage */
  --color-sage: #7a8f6e;
  --color-sage-hover: #8fa382;
  --color-sage-pressed: #65785a;
  --color-sage-subtle: #1a2118;
  --color-sage-text: #a3b898;

  /* Amber */
  --color-amber: #c49a3c;
  --color-amber-hover: #d4aa4c;
  --color-amber-pressed: #a07e28;
  --color-amber-text: #0f0d0b;

  /* Semantic */
  --color-error: #c45454;
  --color-success: #5a9c6b;

  /* Typography */
  --font-display: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 13, 11, 0.3);
  --shadow-base: 0 2px 8px rgba(15, 13, 11, 0.4);
  --shadow-lg: 0 8px 24px rgba(15, 13, 11, 0.5);
  --shadow-card-hover: 0 8px 24px rgba(15, 13, 11, 0.5), 0 0 0 1px rgba(122, 143, 110, 0.15);
}

/* ===== Base body ===== */
body {
  background-color: var(--color-base);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Protected images (map artwork) =====
 * Applied to every <img> that displays a generated map. Blocks native
 * drag-save, right-click (also gated via oncontextmenu in markup), and
 * selection. Not a real DRM — a determined user can still screenshot.
 * Goal: discourage casual "save image as" on a public marketing page.
 */
.protected-img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(232, 224, 212, 0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(232, 224, 212, 0.25); }
* { scrollbar-width: thin; scrollbar-color: rgba(232, 224, 212, 0.15) transparent; }

/* ===== Hero page-load animation =====
 * Applied to hero headline + subtitle for a gentle entrance on first paint.
 * Subtitle uses a 150ms delay so the eye follows from headline to supporting copy.
 */
@media (prefers-reduced-motion: no-preference) {
  .fade-in-on-load {
    animation: fadeUp 0.8s ease forwards;
  }
  .fade-in-on-load-delay {
    opacity: 0;
    animation: fadeUp 0.8s ease 0.15s forwards;
  }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Scroll-reveal animations (native, uses scroll-timeline) ===== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    animation: revealUp 0.6s ease forwards;
    animation-timeline: view();
    animation-range: entry 10% entry 40%;
  }
  .reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    animation: revealLeft 0.6s ease forwards;
    animation-timeline: view();
    animation-range: entry 10% entry 40%;
  }
  .reveal-right {
    opacity: 0;
    transform: translateX(30px);
    animation: revealRight 0.6s ease forwards;
    animation-timeline: view();
    animation-range: entry 10% entry 40%;
  }
  .reveal-scale {
    opacity: 0;
    transform: scale(0.96);
    animation: revealScale 0.5s ease forwards;
    animation-timeline: view();
    animation-range: entry 10% entry 35%;
  }
  .stagger > *:nth-child(1) { animation-delay: 0ms; }
  .stagger > *:nth-child(2) { animation-delay: 80ms; }
  .stagger > *:nth-child(3) { animation-delay: 160ms; }
  .stagger > *:nth-child(4) { animation-delay: 240ms; }
  .stagger > *:nth-child(5) { animation-delay: 320ms; }
  .stagger > *:nth-child(6) { animation-delay: 400ms; }
}

@keyframes revealUp { to { opacity: 1; transform: translateY(0); } }
@keyframes revealLeft { to { opacity: 1; transform: translateX(0); } }
@keyframes revealRight { to { opacity: 1; transform: translateX(0); } }
@keyframes revealScale { to { opacity: 1; transform: scale(1); } }

/* ===== Intersection Observer fallback (Firefox, older Safari) ===== */
@media (prefers-reduced-motion: no-preference) {
  .no-scroll-timeline .reveal,
  .no-scroll-timeline .reveal-left,
  .no-scroll-timeline .reveal-right,
  .no-scroll-timeline .reveal-scale {
    animation: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .no-scroll-timeline .reveal.visible,
  .no-scroll-timeline .reveal-left.visible,
  .no-scroll-timeline .reveal-right.visible,
  .no-scroll-timeline .reveal-scale.visible {
    opacity: 1;
    transform: none;
  }
}