/* ============================================================================
   home-scroll.css — foundation for the Home Scroll redesign (Journey · Articles
   · Partners · CTA). Ported from the Claude design handoff (design tokens +
   shared section/reveal/marquee primitives). Section-specific styles live in
   each partial's own <style> block (matching the existing homepage pattern);
   this file holds ONLY the tokens + truly-shared utilities.
   Scoped under `.hs` so the token vars never leak into the rest of the page.
   ========================================================================== */

/* Restore position:sticky for the Journey pin. The global shell sets
   overflow-x:hidden on <html>/<body>, which makes them a scroll container and
   breaks sticky on descendants (the README's documented gotcha). overflow-x:clip
   prevents horizontal scroll WITHOUT that side effect. Scoped to the new
   homepage: this stylesheet only loads when the scroll design is active, so it
   reverts cleanly with the flag and never touches other pages. */
html, body { overflow-x: clip !important; }

.hs {
  /* — Brand green ramp (surf) — */
  --surf-50:#F0FBF3; --surf-100:#D6F0DD; --surf-200:#A8DEB5; --surf-300:#71C689;
  --surf-400:#44AD60; --surf-500:#2D9650; --surf-600:#1F7537; --surf-700:#145425; --surf-800:#0B3A18; --surf-900:#041F0B;
  /* — Sage companion — */
  --sage-100:#E7F3E8; --sage-200:#C6E3C9; --sage-600:#2A6539;
  /* — Slate neutrals — */
  --slate-100:#F1F5F9; --slate-200:#E2E8F0; --slate-600:#475569; --slate-900:#0F172A;
  /* — Surfaces — */
  --page-bg:#F7FCF8; --surface-sunken:#F8FAFC; --surface-mint:#ECFDF5;
  /* — Ink — */
  --text-strong:#0F172A; --text-body:#1E2D2C; --text-muted:#475569; --text-subtle:#94A3B8;
  /* — Borders — */
  --border-default:#E2E8F0; --border-sage:#C6E3C9; --border-mint:#DCFCE7;
  /* — Semantic + aliases — */
  --green-check:#16a34a; --brand:#2D9650; --brand-strong:#1F7537; --brand-hover:#247A42;
  /* — Shadow — */
  --shadow-xs:0 1px 2px rgba(15,23,42,.06);
  --shadow-lift:0 24px 56px -12px rgba(45,150,80,.20);
  --shadow-drop:0 20px 60px -10px rgba(0,0,0,.15);
  --shadow-btn:0 8px 28px rgba(14,87,83,.32);
  /* — Motion + layout — */
  --ease-brand:cubic-bezier(.25,.46,.45,.94);
  --container:1280px;
  --font-sans:'Inter',system-ui,sans-serif;
  --font-serif:'Lora',Georgia,serif;
}

/* — Section shell + container — */
.hs-section { position:relative; }
.hs-pad { max-width:var(--container); margin:0 auto; padding:0 28px; }

/* — Section head (eyebrow + Lora title w/ one italic emphasis word + sub + action) — */
.hs-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; flex-wrap:wrap; }
.hs-head .hs-eyebrow { font-family:var(--font-sans); font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--surf-400); margin:0 0 10px; }
.hs-head h2 { font-family:var(--font-serif); font-size:34px; font-weight:700; letter-spacing:-.02em; color:var(--text-strong); margin:0; line-height:1.1; }
.hs-head h2 .it { font-style:italic; font-weight:600; color:var(--surf-600); }
.hs-head .hs-sub { font-family:var(--font-sans); font-size:15px; color:var(--text-muted); margin:8px 0 0; max-width:48ch; }
.hs-head .hs-head-actions { flex-shrink:0; }

/* — Buttons — */
.hs-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-sans); font-weight:600; line-height:1; border-radius:10px; cursor:pointer; text-decoration:none; white-space:nowrap; transition:all .22s var(--ease-brand); border:1px solid transparent; }
.hs-btn--sm { padding:8px 16px; font-size:13px; }
.hs-btn--md { padding:11px 20px; font-size:14.5px; }
.hs-btn--primary { background:var(--brand); color:#fff; }
.hs-btn--primary:hover { background:var(--brand-hover); box-shadow:var(--shadow-btn); transform:translateY(-1px); }
.hs-btn--secondary { background:#fff; color:var(--brand-strong); border-color:var(--border-sage); }
.hs-btn--secondary:hover { background:var(--surf-50); border-color:var(--surf-300); }
.hs-btn--ghost { background:transparent; color:var(--text-muted); }
.hs-btn--ghost:hover { background:var(--surf-50); color:var(--brand-strong); }

/* — Card lift — */
.hs-lift { transition:transform .22s var(--ease-brand), box-shadow .22s var(--ease-brand); }
.hs-lift:hover { transform:translateY(-5px); box-shadow:var(--shadow-lift); }

/* — Reveal (fade-up on viewport entry; JS adds .is-in) — */
.hs-reveal { opacity:0; transform:translateY(24px); transition:opacity .55s var(--ease-brand), transform .55s var(--ease-brand); }
.hs-reveal.is-in { opacity:1; transform:none; }

/* — Initials avatar fallback (deterministic brand-green; matches OPAvatar) — */
.hs-avatar { flex-shrink:0; color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-sans); font-weight:700; user-select:none; border-radius:50%; object-fit:cover; }

/* — Verified tick — */
.hs-verified { display:inline-flex; color:var(--green-check); flex-shrink:0; }

/* — Marquee (Partners) — */
@keyframes hs-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.hs-marquee-mask { overflow:hidden; margin:0 -28px; padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.hs-marquee { display:flex; gap:14px; width:max-content; padding:0 14px; animation:hs-marquee 48s linear infinite; }
.hs-marquee:hover { animation-play-state:paused; }
.hs-marquee--reverse { animation-direction:reverse; }

/* — Reduced motion: drop scrubs/marquees/reveals to static — */
@media (prefers-reduced-motion: reduce) {
  .hs-marquee { animation:none; }
  .hs-reveal { opacity:1; transform:none; transition:none; }
}

@media (max-width:768px) {
  .hs-pad { padding:0 18px; }
  .hs-head h2 { font-size:27px; }
  .hs-marquee-mask { margin:0 -18px; }
}
