/* ============================================================
   Swift Labs — Innovation Hub
   Design tokens, type, layout, motion
   ============================================================ */

:root {
  /* Shell palette — warm near-black lab */
  --ink: #0A0A0B;
  --ink-2: #111113;
  --ink-3: #18181B;
  --line: rgba(244, 242, 236, 0.10);
  --line-strong: rgba(244, 242, 236, 0.22);
  --paper: #F4F2EC;
  --paper-dim: #B9B7AF;
  --muted: #7C7B74;

  /* Accents */
  --lime: #CBF24E;
  --coral: #FF6A45;
  --cobalt: #5B8CFF;
  --violet: #B98BFF;
  --accent: var(--lime);

  /* Type */
  --display: "Bricolage Grotesque", sans-serif;
  --body: "Space Grotesk", sans-serif;
  --mono: "Space Mono", monospace;

  /* Rhythm */
  --pad: clamp(20px, 5vw, 88px);
  --maxw: 1320px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--lime); color: #0A0A0B; }

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

/* Grain + vignette atmosphere ------------------------------ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(203,242,78,0.05), transparent 60%),
    radial-gradient(100% 100% at 50% 120%, rgba(91,140,255,0.045), transparent 55%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Layout helpers ------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.relpos { position: relative; z-index: 3; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--accent);
  display: inline-block;
}

.section-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--muted);
}

/* Reusable display heading sizes */
.h-mega {
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.03em;
  font-size: clamp(48px, 11vw, 168px);
}
.h-big {
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-size: clamp(34px, 6vw, 86px);
}

/* Buttons -------------------------------------------------- */
.btn {
  --bg: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  border-radius: 100px;
  background: var(--bg);
  color: #0A0A0B;
  font-family: var(--body);
  font-weight: 600;
  font-size: 16px;
  border: none;
  position: relative;
  transition: transform 0.25s var(--ease), background 0.2s ease;
  will-change: transform;
}
.btn:hover { background: #fff; }
.btn .dot { width: 8px; height: 8px; border-radius: 50%; background: #0A0A0B; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  border-radius: 100px;
  border: 1px solid var(--line-strong);
  color: var(--paper);
  font-weight: 500;
  font-size: 16px;
  background: transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.btn-ghost:hover { border-color: var(--paper); background: rgba(244,242,236,0.04); }

/* Reveal on scroll ----------------------------------------- */
/* Opacity SNAPS (no transition) so a throttled/paused timeline can never
   leave content stuck-hidden; only the slide-up is animated. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: transform 0.7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* No-JS / JS-failure safety: always show content if the 'js' flag is absent */
html:not(.js) .reveal { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}