/* ============================================================
   BASE.CSS
   Global styles: color/font variables, resets, header, hero,
   section dividers, footer, and page-wide responsive rules.
   Card, carousel, and icon styles live in their own files —
   see cards.css and icons.css.
   ============================================================ */

:root {
  /* ---- color palette: change these to re-theme the whole site ---- */
  --bg: #0d0b12;
  --surface: #17131f;
  --surface-hover: #1e1828;
  --border: #2a2435;
  --border-hover: #4a3d5c;
  --text: #f3f1f7;
  --text-muted: #9891a3;
  --text-dim: #5c5568;
  --accent: #a66cff;
  --accent-bright: #d9a9ff;
  --accent-deep: #6b3fa0;
  --accent-glow: rgba(166,108,255,0.12);

  /* ---- typography ---- */
  --display: 'Space Grotesk', sans-serif;
  --body-font: 'Inter', sans-serif;

  /* ---- shared shape ---- */
  --r-card: 20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body-font);
  overflow-x: hidden;
  position: relative;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- shimmer text: used only on "by" in the logo ---------- */
.shimmer {
  background: linear-gradient(100deg, var(--accent-deep) 0%, var(--accent-bright) 50%, var(--accent-deep) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 3.4s ease-in-out infinite alternate;
  font-style: normal;
}
@keyframes shimmer { 0% { background-position: 0% 0; } 100% { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .shimmer { animation: none; background-position: -60% 0; } }

/* ---------- static gradient for hero emphasis words (no animation) ---------- */
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--accent-deep), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- grain texture overlay ---------- */
#grain { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0.03; mix-blend-mode: overlay; }

/* ---------- ambient background blobs ----------
   Idle drift is pure CSS (cheap). Mouse parallax is applied via JS
   to the .blob-parallax wrapper — see js/background.js */
.blob-parallax { position: fixed; inset: 0; pointer-events: none; z-index: 0; will-change: transform; transition: transform 0.5s cubic-bezier(.2,.7,.3,1); }
.blob { position: absolute; border-radius: 50%; filter: blur(110px); will-change: transform; }
.blob1 { width: 520px; height: 520px; background: var(--accent-deep); top: -140px; left: -120px; opacity: 0.16; animation: drift1 16s ease-in-out infinite; }
.blob2 { width: 420px; height: 420px; background: var(--accent); top: 35%; right: -160px; opacity: 0.12; animation: drift2 19s ease-in-out infinite; }
.blob3 { width: 380px; height: 380px; background: var(--accent-bright); bottom: -160px; left: 25%; opacity: 0.07; animation: drift3 22s ease-in-out infinite; }
@keyframes drift1 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(24px,-20px); } }
@keyframes drift2 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-26px,18px); } }
@keyframes drift3 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(16px,16px); } }
@media (prefers-reduced-motion: reduce) { .blob1, .blob2, .blob3 { animation: none; } }

/* ---------- shared layout container ---------- */
.wrap { position: relative; z-index: 3; max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* ---------- header ---------- */
header {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1200px; margin: 0 auto; padding: 15px 32px;
  position: relative; z-index: 3;
}
.logo { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.pill {
  font-family: var(--body-font); font-size: 13px; font-weight: 500;
  padding: 9px 18px; border: 1px solid var(--border-hover); border-radius: 999px;
  color: var(--text); transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s ease;
}
.pill:hover { border-color: var(--accent); background: var(--accent-glow); }
.pill:active { transform: scale(0.96); }

/* ---------- hero ---------- */
.hero { padding: clamp(14px, 2.8vh, 30px) 0 clamp(18px, 3.4vh, 34px); }
.eyebrow {
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent-bright); margin-bottom: 12px;
}
.hero h1 {
  font-family: var(--display); font-weight: 600; font-size: clamp(22px, 3.4vw, 38px);
  line-height: 1.12; letter-spacing: -0.02em; max-width: 680px;
}
.hero p { margin-top: 12px; max-width: 440px; font-size: 14px; line-height: 1.6; color: var(--text-muted); }

/* ---------- section dividers ---------- */
.divider {
  width: 82%; max-width: 900px; margin: 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 18%, var(--border) 82%, transparent);
}

/* ---------- footer ---------- */
footer.site-footer { position: relative; z-index: 3; padding: 56px 0 34px; }
.footer-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-bottom: 24px; }
.footer-top .logo { font-size: 22px; }
.footer-status { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-muted); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 20px; font-size: 13px; color: var(--text-dim); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.back-to-top { font-size: 13px; color: var(--text-muted); transition: color 0.2s ease; display: inline-flex; align-items: center; gap: 6px; }
.back-to-top:hover { color: var(--accent-bright); }
.back-to-top .arrow { display: inline-block; animation: bob 2.2s ease-in-out infinite; }
.back-to-top:hover .arrow { animation-duration: 0.7s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ---------- responsive & accessibility ---------- */
@media (max-width: 640px) {
  header, .wrap { padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *:not(.shimmer) { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  .slide, .card, section.rail-section { transition: none !important; }
}