/* ============================================================
   Keystone Rewards — Marketing site custom styles
   ------------------------------------------------------------
   Brand tokens are copied from the main Keystone B2B app
   (rep-focus-main/marketing-site/src/index.css) so this page
   feels like the same product.

   Everything Tailwind (loaded via the Play CDN in index.html)
   can express cleanly is kept as utility classes in the HTML.
   Only things Tailwind can't express live here:
     - the HSL-based brand tokens (so utilities like bg-primary
       resolve to the same indigo used by the main app)
     - the soft indigo hero glow
     - the logo marquee animation
     - the scroll-reveal transitions
   ============================================================ */

/* ---------- Brand tokens ----------
   These map 1:1 to the tokens in rep-focus-main/marketing-site.
   They are consumed by the inline tailwind.config in index.html
   (e.g. primary: 'hsl(var(--primary))'), so changing a value
   here updates every utility class that references the token. */
:root {
  --background: 220 20% 97%;        /* page background (near-white) */
  --foreground: 224 30% 16%;        /* primary text color (near-black) */

  --card: 0 0% 100%;                /* elevated surface (pure white) */
  --card-foreground: 224 30% 16%;

  --muted: 220 16% 94%;             /* flat sub-surfaces, rails, stripes */
  --muted-foreground: 220 12% 50%;  /* secondary text, meta copy */

  --primary: 234 62% 58%;           /* Keystone indigo (~#4A5FD6) */
  --primary-foreground: 0 0% 100%;

  --border: 220 16% 89%;            /* default border */
  --radius: 0.625rem;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  /* Match the main app's typographic polish */
  font-feature-settings: 'rlig' 1, 'calt' 1;
  letter-spacing: -0.011em;
}

/* Headings use the display face (Plus Jakarta Sans) — same as app.keystoneb2b.io */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.02em;
  /* Let the browser balance headline wraps across lines for a tighter look */
  text-wrap: balance;
}

/* Offset anchor jumps for the sticky nav so section titles aren't hidden */
section[id] { scroll-margin-top: 5rem; }

/* ---------- Hero background ----------
   Subtle indigo radial glow on a light background.
   Replaces the previous dark orange/blue mesh. */
.hero-bg {
  background:
    radial-gradient(ellipse at 20% 0%,   hsl(234 62% 58% / 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, hsl(234 62% 58% / 0.06) 0%, transparent 55%),
    hsl(var(--background));
}

/* Very subtle grid texture overlay for the hero — tuned for light bg */
.hero-grid {
  background-image:
    linear-gradient(to right,  rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

/* ---------- Logo marquee ----------
   Continuous horizontal scroll of retailer logos. Two copies
   of the track are placed side-by-side; one full translate
   forms a seamless loop. */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* Fade edges of marquee so logos melt into the background */
.marquee-mask {
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* ---------- Scroll reveal ----------
   main.js toggles .is-visible when a .reveal element enters the viewport. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- FAQ accordion ---------- */
details.faq summary { list-style: none; cursor: pointer; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq .chev { transition: transform 0.2s ease; }
details.faq[open] .chev { transform: rotate(180deg); }

/* ---------- Primary button sheen on hover ---------- */
.btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  z-index: -1;
}
.btn-primary:hover::after { transform: translateX(100%); }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}