@import url('./tokens.css');

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* -------------------- SMOOTH SCROLL --------------------
   Site-wide glide for anchor jumps, in-page nav, and scrollIntoView. The
   scroll-padding keeps landing targets clear of the sticky nav; [id] targets
   get the same offset so deep links don't tuck under it. */
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
:target, [id] { scroll-margin-top: 92px; }
@media (max-width: 760px) { html { scroll-padding-top: 68px; } :target, [id] { scroll-margin-top: 68px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* clip (not hidden) so the body never becomes a scroll container — hidden here
   breaks position:sticky on the nav (notably iOS Safari + narrow viewports). */
html, body { overflow-x: clip; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* -------------------- PAGE SHELL --------------------
   Every page rides inside one rounded panel on a darker ground, matching the
   Spark platform shell. Pages that ship their own shell (.v2-shellpad) reset
   #root in their own stylesheet. */
html { background: #07080A; }
body { padding: 14px; background: #07080A; }
#root { max-width: 1792px; margin: 0 auto; background: var(--ink-000); border: 1px solid rgba(250,250,247,0.14); border-radius: 26px; overflow: clip; }
@media (max-width: 760px) { body { padding: 7px; } #root { border-radius: 16px; } }
@media print { body { padding: 0; background: #fff; } #root { max-width: none; border: 0; border-radius: 0; overflow: visible; } }
button { font-family: inherit; }
img { max-width: 100%; display: block; }

::selection { background: var(--ignite-500); color: #fff; }

/* -------------------- HERO SIZE VARIANTS --------------------
   Shared hero band. Height is content-driven; padding-block comes from the
   --hero-pad-* tokens so every page's hero reads from one system.
   Apply .hero-band + a variant, or reference the token inline. */
.hero-band            { padding-block: var(--hero-pad-standard); }
.hero-band--compact   { padding-block: var(--hero-pad-compact); }
.hero-band--standard  { padding-block: var(--hero-pad-standard); }
.hero-band--tall      { padding-block: var(--hero-pad-tall); min-height: min(86vh, 880px); }

@keyframes livepulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes tickin {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
@keyframes subtle-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes radar {
  0%   { transform: scale(0.2); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes fadein {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sp-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}
@keyframes sp-pop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.92); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.rise-on-view { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.rise-on-view.in { opacity: 1; transform: translateY(0); }

.link-mono {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-2); cursor: pointer;
  transition: color 160ms var(--ease-out);
}
.link-mono:hover { color: var(--ignite-500); }

/* Circular "All capabilities" button */
@keyframes capSpin { to { transform: rotate(360deg); } }
.cap-circle { transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out); }
.cap-circle-spin { transform-origin: 50% 50%; animation: capSpin 22s linear infinite; }
.cap-arc-txt { fill: var(--fg-1); transition: fill 220ms var(--ease-out); }
.cap-arrow { transition: color 220ms var(--ease-out); }
.cap-circle:hover { background: var(--spark-500) !important; border-color: var(--spark-500) !important; }
.cap-circle:hover .cap-arc-txt { fill: #0A0B0D !important; }
.cap-circle:hover .cap-arrow { color: #0A0B0D !important; }
@media (prefers-reduced-motion: reduce) { .cap-circle-spin { animation: none; } }

/* paper (light) section body tweaks */
.paper { background: var(--paper-000); color: var(--fg-1-inv); }
.paper h1, .paper h2, .paper h3, .paper h4 { color: var(--fg-1-inv); }