/* marketing.css — shared design-system overrides for the public marketing
 * pages (index, web-design, web-hosting, domains, projects, audit, support).
 * Loads AFTER each page's inline <style> so tokens cascade on top.
 *
 * 2026-07-06 design pass:
 *   - tightened radius scale (buttons/inputs 6px, cards 8px, containers 10px)
 *   - layered elevation (tight key shadow + soft ambient) instead of flat drops
 *   - scroll-reveal animation primitives (used with /js/reveal.js)
 *   - full reduced-motion support
 * Replaces the retired lime-era nexsites-polish.css.
 */

:root{
  /* radius scale — small + consistent; large surfaces stay architectural */
  --r-sm: 5px;   /* chips, small controls */
  --r:    8px;   /* buttons, inputs, small cards */
  --r-lg: 10px;  /* cards */
  --r-xl: 12px;  /* large containers, modals, browser frames */

  /* layered elevation: key (tight, directional) + ambient (soft, wide) */
  --shadow-sm: 0 1px 2px rgba(10,31,68,.08), 0 1px 6px rgba(10,31,68,.04);
  --shadow-md: 0 2px 4px rgba(10,31,68,.07), 0 10px 24px rgba(10,31,68,.07);
  --shadow-lg: 0 3px 8px rgba(10,31,68,.08), 0 20px 48px rgba(10,31,68,.10);
  --shadow-xl: 0 6px 16px rgba(10,31,68,.10), 0 32px 80px rgba(10,31,68,.16);
}

/* ── scroll reveal ─────────────────────────────────────────────────────── */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .42s cubic-bezier(.22,.61,.36,1), transform .42s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in{
  opacity: 1;
  transform: none;
}
/* stagger helpers for grouped cards */
.reveal-2{ --reveal-delay: 80ms; }
.reveal-3{ --reveal-delay: 160ms; }
.reveal-4{ --reveal-delay: 240ms; }

@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}