/*
 * Gridwerk design tokens + shared motion system.
 * Single source of truth for color — see /styleguide.php for a visual
 * reference of every token below. Change a value here, it updates
 * everywhere (every page links this file from includes/header.php).
 */

:root {
  /* Surface */
  --bg: #1d2024;
  --bg-raised: #2a2d33;
  --bg-accent-tint: #252643; /* opaque equivalent of accent-solid at 18% over bg — used for highlighted cards, since a translucent tint would let the backdrop grid lines show through */

  /* Text */
  --ink: #f2efea;       /* headings */
  --ink-soft: #e4e0d8;  /* long-form body copy (blog posts) */
  --muted: #a79f93;     /* secondary copy — warm grey */
  --faint: #726b60;     /* tertiary / meta text */

  /* Accent (blue-purple) */
  --accent: #7c6fef;             /* links, outlines, small UI accents */
  --accent-hover: #9184ff;
  --accent-solid: #4c3fcf;       /* solid fills (buttons, badges, CTA bands) */
  --accent-solid-hover: #5c4fe0;
  --on-accent: #f2efea;          /* text/icons sitting on a solid accent fill */

  /* Borders (light-on-dark hairlines) */
  --border: rgba(242, 239, 234, 0.12);
  --border-soft: rgba(242, 239, 234, 0.08);
  --border-strong: rgba(242, 239, 234, 0.22);
  --border-dashed: rgba(242, 239, 234, 0.18);

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);        /* smooth expo-out, for hover/interaction */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* slight overshoot, for entrances */
}

/* Persistent full-viewport column grid — the Swiss/modernist backdrop
   that runs behind every page, edge to edge, fixed to the viewport.
   .gw-container shares the exact same column math so real content
   snaps to these same lines instead of sitting in an independent
   centered box. Both must stay in lockstep: same padding, same
   grid-template-columns. No column-gap — text and element edges land
   exactly ON the lines; separation between cards comes from their own
   padding/borders, not from gaps between tracks. */
:root { --gw-grid-pad: clamp(20px, 5vw, 56px); }

.gw-grid-lines {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none;
  padding: 0 var(--gw-grid-pad);
  display: grid; grid-template-columns: repeat(6, 1fr);
}
.gw-grid-lines span { border-right: 1px solid var(--border-soft); }
.gw-grid-lines span:last-child { border-right: none; }

.gw-container {
  display: grid; grid-template-columns: repeat(6, 1fr);
  padding: 0 var(--gw-grid-pad); align-items: start;
}
/* For a grid item that already spans the full padded width (grid-column:1/-1)
   and needs to re-divide that same space into aligned sub-columns — no
   padding of its own, so it lines up exactly with the parent's tracks. */
.gw-subgrid { display: grid; grid-template-columns: repeat(6, 1fr); }

@media (max-width: 780px) {
  .gw-grid-lines, .gw-container, .gw-subgrid { grid-template-columns: 1fr; }
  .gw-grid-lines span { border-right: none; }
  /* Desktop uses explicit grid-row to co-align side-by-side items (e.g. a
     heading and its body copy sharing a row in different columns). Once
     columns collapse to one full-width track, items left on the same
     explicit row would stack directly on top of each other instead of
     flowing in DOM order — reset row placement too so everything stacks
     naturally top to bottom. */
  .gw-container > *, .gw-subgrid > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
}

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 92px; }
body { margin: 0; position: relative; background: var(--bg); color: var(--ink); font-family: 'Inter Tight', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
a, .gw-btn-solid, .gw-btn-outline, .gw-btn-cta, .gw-card, .gw-logo img {
  transition: color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease),
              opacity .3s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}

/* Nav: sliding underline on hover, permanent one for the active page */
.gw-site-header { transition: transform .4s var(--ease); }
.gw-site-header.gw-hide { transform: translateY(-100%); }
.gw-nav a { position: relative; }
.gw-nav a:hover { color: var(--ink); }
.gw-nav a.active { color: var(--ink); border-bottom-color: var(--accent); }
.gw-nav a:not(.active)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px;
  background: var(--accent); border-radius: 2px;
  box-shadow: 0 0 12px rgba(124, 111, 239, .7);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.gw-nav a:not(.active):hover::after { transform: scaleX(1); }

/* Buttons */
.gw-btn-solid, .gw-btn-outline, .gw-btn-cta { will-change: transform; }
.gw-btn-solid { background: var(--accent-solid); color: var(--on-accent); border: 1px solid var(--accent-solid); }
.gw-btn-solid:hover { background: var(--accent-solid-hover); border-color: var(--accent-solid-hover); box-shadow: 0 16px 40px rgba(76, 63, 207, .5); transform: scale(1.045); }
.gw-btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--border-strong); }
.gw-btn-outline:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 24px rgba(124, 111, 239, .25); transform: scale(1.045); }
.gw-btn-cta { background: var(--on-accent); color: var(--accent-solid); border: 1px solid var(--on-accent); }
.gw-btn-cta:hover { background: transparent; color: var(--on-accent); box-shadow: 0 0 24px rgba(242, 239, 234, .3); transform: scale(1.045); }

/* Cards — opaque fill so the fixed backdrop grid lines don't show through
   and cross with each card's own border dividers */
.gw-card { background: var(--bg); }
.gw-card:hover { background: rgba(124, 111, 239, .1); transform: translateY(-14px) scale(1.03); box-shadow: 0 30px 60px rgba(0, 0, 0, .45), 0 0 40px rgba(76, 63, 207, .18); }
.gw-post-row { border-radius: 4px; }
.gw-post-row:hover { background: rgba(124, 111, 239, .09); }
.gw-logo img { filter: brightness(0) saturate(100%) invert(1); }
.gw-logo:hover img { transform: scale(1.08); }
.gw-post-body p { margin: 0 0 22px; }
.gw-post-body p:last-child { margin-bottom: 0; }

/* HubSpot's embed sets an explicit pixel width on its injected iframe —
   without this it overflows narrow viewports instead of reflowing. */
.hs-form-frame, .hs-form-frame iframe { max-width: 100% !important; }
.hs-form-frame { border: none !important; box-shadow: none !important; }

.gw-fade-in { animation: gwFadeIn .8s var(--ease-spring) both; }
@keyframes gwFadeIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Hero entrance: choreographed stagger + overshoot on first paint */
.gw-hero { position: relative; isolation: isolate; overflow: hidden; }
.gw-hero::before {
  content: ''; position: absolute; z-index: -1; top: -220px; left: 50%;
  width: 900px; height: 560px; margin-left: -450px;
  background: radial-gradient(circle, rgba(124, 111, 239, .35) 0%, rgba(124, 111, 239, 0) 68%);
  filter: blur(10px); pointer-events: none;
  animation: gwGlowDrift 12s ease-in-out infinite;
}
@keyframes gwGlowDrift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .85; }
  50% { transform: translate(60px, 40px) scale(1.15); opacity: 1; }
}
.gw-hero > * { opacity: 0; transform: translateY(48px) scale(.94); animation: gwHeroIn 1s var(--ease-spring) both; }
.gw-hero > *:nth-child(1) { animation-delay: .08s; }
.gw-hero > *:nth-child(2) { animation-delay: .22s; }
.gw-hero > *:nth-child(3) { animation-delay: .36s; }
.gw-hero > *:nth-child(4) { animation-delay: .5s; }
@keyframes gwHeroIn { to { opacity: 1; transform: none; } }

/* Heading lines emerge from their own left edge (the gridline they sit
   on). JS (includes/footer.php) splits heading text into one
   .gw-line-mask per rendered line, each wrapping a .gw-line-inner that
   actually moves. Each heading is observed individually (gets its own
   .gw-in the moment IT scrolls into view, not when its section does),
   so a clean expo-out slide — no overshoot — reads as precise rather
   than playful. */
.gw-line-mask { display: block; overflow: hidden; }
.gw-line-inner { display: inline-block; transform: translateX(-32px); opacity: 0; transition: transform .7s var(--ease), opacity .55s var(--ease); }
.gw-in .gw-line-inner { transform: translateX(0); opacity: 1; }
.gw-line-mask:nth-child(1) .gw-line-inner { transition-delay: .03s; }
.gw-line-mask:nth-child(2) .gw-line-inner { transition-delay: .1s; }
.gw-line-mask:nth-child(3) .gw-line-inner { transition-delay: .17s; }
.gw-line-mask:nth-child(4) .gw-line-inner { transition-delay: .24s; }

/* Granular scroll reveal: every meaningful element (label, paragraph,
   button row, each card in a grid) is observed and animated on its
   own — not the section as one block. Restrained on purpose: a short
   rise, no blur, no scale, no spring/overshoot — precise rather than
   bouncy. JS (includes/footer.php, gwGranularize) assigns this class
   to each target and staggers siblings by a small nth-based delay. */
.gw-el { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.gw-el.gw-in { opacity: 1; transform: none; }
.gw-el:nth-child(1) { transition-delay: 0s; }
.gw-el:nth-child(2) { transition-delay: .06s; }
.gw-el:nth-child(3) { transition-delay: .12s; }
.gw-el:nth-child(4) { transition-delay: .18s; }
.gw-el:nth-child(5) { transition-delay: .24s; }
.gw-el:nth-child(6) { transition-delay: .3s; }
.gw-el:nth-child(n+7) { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a, .gw-btn-solid, .gw-btn-outline, .gw-btn-cta, .gw-card, .gw-logo img,
  .gw-el, .gw-site-header, .gw-nav a:not(.active)::after,
  .gw-hero::before, .gw-line-inner { transition: none !important; animation: none !important; }
  .gw-el { opacity: 1 !important; transform: none !important; }
  .gw-line-inner { opacity: 1 !important; transform: none !important; }
  .gw-fade-in, .gw-hero > * { opacity: 1 !important; transform: none !important; }
  .gw-site-header.gw-hide { transform: none !important; }
  .gw-hero::before { display: none; }
}