/* =============================================================
   Boon - Shared Design Foundation
   =============================================================
   Single source of truth for design tokens, typography,
   buttons, background systems, and chrome shared by the
   homepage and the case study detail pages.

   The homepage (index.html) keeps its full inline <style>
   block intact and takes precedence locally; its rules
   already match this file, so linking styles.css is
   a no-op there. The case study pages rely entirely on
   this file + case-studies/case-study.css for all
   foundation styles.
   ============================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #FBFAF6; color: #0F0E0C; overflow-x: hidden; }
body {
  font-family: 'Satoshi', 'Inter Tight', system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11", "cv02";
  -webkit-font-smoothing: antialiased;
}
::selection { background: #0F0E0C; color: #FBF7F0; }

/* -------- Typography utilities -------- */
.font-display {
  font-family: 'Fraunces', serif;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: -0.025em;
}
.serif-i {
  font-family: 'Instrument Serif', 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}
.tnum { font-variant-numeric: tabular-nums; }

/* =============================================================
   WARM-BG: animated peach/amber/coral gradient backgrounds.
   Each layer is a single large blob that orbits + morphs so the
   impression is of bodies of warm light shifting and reforming.
   Loops are seamless because every keyframe set returns to the
   0% transform at 100%.
   ============================================================= */
.warm-bg, .warm-bg-soft, .warm-bg-mini {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, #FDFCF9 0%, #FAF8F4 55%, #FDFCF9 100%);
  overflow: hidden;
}
.warm-bg-dark {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, #0F0E0C 0%, #161410 55%, #0F0E0C 100%);
  overflow: hidden;
}
.warm-bg::before, .warm-bg::after,
.warm-bg-soft::before, .warm-bg-soft::after,
.warm-bg-mini::before, .warm-bg-mini::after,
.warm-bg-dark::before, .warm-bg-dark::after {
  content: "";
  position: absolute;
  inset: -25%;
  pointer-events: none;
  z-index: -1;
  will-change: transform, border-radius;
  filter: blur(40px);
}

.warm-bg::before {
  background:
    radial-gradient(ellipse 45% 55% at 35% 45%, rgba(255,140,90,0.85) 0%, rgba(255,140,90,0) 65%),
    radial-gradient(ellipse 40% 50% at 65% 55%, rgba(255,195,115,0.75) 0%, rgba(255,195,115,0) 65%);
  animation: organic-1 22s ease-in-out infinite, morph-1 14s ease-in-out infinite;
}
.warm-bg::after {
  background:
    radial-gradient(ellipse 50% 45% at 55% 50%, rgba(255,170,100,0.70) 0%, rgba(255,170,100,0) 65%),
    radial-gradient(ellipse 35% 45% at 30% 65%, rgba(255,210,130,0.65) 0%, rgba(255,210,130,0) 65%);
  animation: organic-2 28s ease-in-out infinite, morph-2 18s ease-in-out infinite;
}

.warm-bg-soft::before {
  background:
    radial-gradient(ellipse 45% 50% at 40% 50%, rgba(255,180,110,0.70) 0%, rgba(255,180,110,0) 65%),
    radial-gradient(ellipse 38% 45% at 60% 50%, rgba(255,200,125,0.60) 0%, rgba(255,200,125,0) 65%);
  animation: organic-3 26s ease-in-out infinite, morph-1 16s ease-in-out infinite;
}
.warm-bg-soft::after {
  background:
    radial-gradient(ellipse 42% 48% at 50% 50%, rgba(255,155,100,0.55) 0%, rgba(255,155,100,0) 65%);
  animation: organic-4 32s ease-in-out infinite, morph-2 20s ease-in-out infinite;
}

.warm-bg-mini::before {
  background:
    radial-gradient(ellipse 50% 55% at 40% 50%, rgba(255,180,110,0.80) 0%, rgba(255,180,110,0) 65%),
    radial-gradient(ellipse 45% 50% at 60% 50%, rgba(255,150,95,0.70) 0%, rgba(255,150,95,0) 65%);
  animation: organic-1 18s ease-in-out infinite, morph-1 12s ease-in-out infinite;
}
.warm-bg-mini::after {
  background:
    radial-gradient(ellipse 40% 45% at 50% 60%, rgba(255,200,125,0.60) 0%, rgba(255,200,125,0) 65%);
  animation: organic-2 24s ease-in-out infinite, morph-2 16s ease-in-out infinite;
}

.warm-bg-dark::before {
  background:
    radial-gradient(ellipse 50% 55% at 35% 45%, rgba(240,120,80,0.55) 0%, rgba(240,120,80,0) 65%),
    radial-gradient(ellipse 45% 50% at 65% 55%, rgba(210,78,55,0.48) 0%, rgba(210,78,55,0) 65%);
  animation: organic-1 32s ease-in-out infinite, morph-1 20s ease-in-out infinite;
}
.warm-bg-dark::after {
  background:
    radial-gradient(ellipse 55% 50% at 55% 50%, rgba(250,145,100,0.40) 0%, rgba(250,145,100,0) 65%),
    radial-gradient(ellipse 40% 50% at 30% 65%, rgba(195,72,50,0.45) 0%, rgba(195,72,50,0) 65%);
  animation: organic-2 38s ease-in-out infinite, morph-2 24s ease-in-out infinite;
}

@keyframes organic-1 {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  14%  { transform: translate3d(8%, -6%, 0) rotate(40deg) scale(1.08); }
  28%  { transform: translate3d(-5%, -10%, 0) rotate(80deg) scale(1.04); }
  42%  { transform: translate3d(-12%, 2%, 0) rotate(140deg) scale(1.10); }
  57%  { transform: translate3d(-4%, 10%, 0) rotate(200deg) scale(1.05); }
  71%  { transform: translate3d(7%, 8%, 0) rotate(260deg) scale(1.09); }
  85%  { transform: translate3d(10%, -2%, 0) rotate(320deg) scale(1.04); }
  100% { transform: translate3d(0, 0, 0) rotate(360deg) scale(1); }
}
@keyframes organic-2 {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  16%  { transform: translate3d(-9%, 5%, 0) rotate(-50deg) scale(1.06); }
  33%  { transform: translate3d(-3%, 12%, 0) rotate(-110deg) scale(1.10); }
  50%  { transform: translate3d(8%, 7%, 0) rotate(-180deg) scale(1.04); }
  66%  { transform: translate3d(11%, -4%, 0) rotate(-240deg) scale(1.08); }
  83%  { transform: translate3d(2%, -9%, 0) rotate(-310deg) scale(1.05); }
  100% { transform: translate3d(0, 0, 0) rotate(-360deg) scale(1); }
}
@keyframes organic-3 {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  20%  { transform: translate3d(6%, 8%, 0) rotate(60deg) scale(1.07); }
  40%  { transform: translate3d(-7%, 5%, 0) rotate(140deg) scale(1.10); }
  60%  { transform: translate3d(-9%, -7%, 0) rotate(220deg) scale(1.05); }
  80%  { transform: translate3d(5%, -8%, 0) rotate(300deg) scale(1.08); }
  100% { transform: translate3d(0, 0, 0) rotate(360deg) scale(1); }
}
@keyframes organic-4 {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  25%  { transform: translate3d(-7%, -6%, 0) rotate(-90deg) scale(1.08); }
  50%  { transform: translate3d(8%, -3%, 0) rotate(-180deg) scale(1.04); }
  75%  { transform: translate3d(4%, 9%, 0) rotate(-270deg) scale(1.07); }
  100% { transform: translate3d(0, 0, 0) rotate(-360deg) scale(1); }
}

@keyframes morph-1 {
  0%   { border-radius: 42% 58% 65% 35% / 50% 45% 55% 50%; }
  25%  { border-radius: 60% 40% 35% 65% / 45% 55% 45% 55%; }
  50%  { border-radius: 35% 65% 55% 45% / 60% 40% 60% 40%; }
  75%  { border-radius: 55% 45% 60% 40% / 40% 60% 35% 65%; }
  100% { border-radius: 42% 58% 65% 35% / 50% 45% 55% 50%; }
}
@keyframes morph-2 {
  0%   { border-radius: 55% 45% 40% 60% / 45% 55% 50% 50%; }
  33%  { border-radius: 40% 60% 60% 40% / 55% 45% 60% 40%; }
  66%  { border-radius: 65% 35% 50% 50% / 35% 65% 45% 55%; }
  100% { border-radius: 55% 45% 40% 60% / 45% 55% 50% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .warm-bg::before, .warm-bg::after,
  .warm-bg-soft::before, .warm-bg-soft::after,
  .warm-bg-mini::before, .warm-bg-mini::after,
  .warm-bg-dark::before, .warm-bg-dark::after { animation: none; }
}

/* =============================================================
   TEXTURED SECTION SYSTEM - paper-noise + optional dots/grid
   ============================================================= */
.paper-noise { position: relative; isolation: isolate; }
.paper-noise::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.32  0 0 0 0 0.12  0 0 0 0.8 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: 0.8;
  mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 18%, rgba(0,0,0,1) 82%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 18%, rgba(0,0,0,1) 82%, rgba(0,0,0,0) 100%);
}

.paper-noise.bg-dots-soft::after,
.paper-noise.bg-grid-soft::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 18%, rgba(0,0,0,1) 82%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 18%, rgba(0,0,0,1) 82%, rgba(0,0,0,0) 100%);
}
.paper-noise.bg-dots-soft::after {
  background-image: radial-gradient(rgba(15,14,12,0.08) 1px, transparent 1.2px);
  background-size: 18px 18px;
}
.paper-noise.bg-grid-soft::after {
  background-image:
    linear-gradient(rgba(15,14,12,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,14,12,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}
.paper-noise > * { position: relative; z-index: 1; }
.bg-dots-soft, .bg-grid-soft { background-image: none; }

@media (prefers-reduced-motion: reduce) {
  .paper-noise::before { opacity: 0.55; }
}

/* Hairline borders used across cards, dividers, and meta bands */
.hair { border-color: rgba(15,14,12,0.10); }
.hair-soft { border-color: rgba(15,14,12,0.06); }
.divider-bleed { height: 1px; background: linear-gradient(90deg, transparent, rgba(15,14,12,0.10), transparent); }

/* =============================================================
   BUTTONS
   ============================================================= */
.btn-dark {
  background: #0F0E0C; color: #FBF7F0;
  border-radius: 999px; padding: 14px 22px;
  font-weight: 500; font-size: 14.5px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1),
              background .25s ease, box-shadow .35s ease;
  box-shadow: 0 2px 8px rgba(15,14,12,0.15);
  text-decoration: none;
}
.btn-dark:hover {
  background: #2A251F;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 20px rgba(15,14,12,0.25);
}
.btn-dark:active {
  transform: translateY(-1px) scale(0.98);
  transition-duration: .1s;
}

/* Compact variant used in the nav pill on mobile only */
.btn-dark-nav {
  padding: 8px 14px;
  font-size: 13px;
  box-shadow: 0 1px 4px rgba(15,14,12,0.12);
}
@media (min-width: 768px) {
  .btn-dark-nav {
    padding: 14px 22px;
    font-size: 14.5px;
    box-shadow: 0 2px 8px rgba(15,14,12,0.15);
  }
}

.btn-light {
  background: rgba(255,255,255,0.65); color: #0F0E0C;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 999px; padding: 14px 22px;
  font-weight: 500; font-size: 14.5px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(255,255,255,0.45);
  transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1),
              background .25s ease, box-shadow .35s ease;
  box-shadow: 0 2px 8px rgba(15,14,12,0.08);
  text-decoration: none;
}
.btn-light:hover {
  background: rgba(255,255,255,0.85);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 20px rgba(15,14,12,0.12);
}
.btn-light:active {
  transform: translateY(-1px) scale(0.98);
  transition-duration: .1s;
}

/* Arrow moves on hover */
.arrow {
  display: inline-block;
  transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
a:hover .arrow, button:hover .arrow { transform: translateX(5px); }

/* =============================================================
   PILLS, CARDS, GLASS
   ============================================================= */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; background: rgba(255,255,255,0.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px; font-size: 13px; color: #2A251F;
  box-shadow: 0 1px 2px rgba(15,14,12,0.03);
}
.pill-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: #0F0E0C; box-shadow: 0 0 0 3px rgba(15,14,12,0.10);
}
.muted-dot {
  width: 8px; height: 8px; border-radius: 999px;
  border: 1.5px solid rgba(15,14,12,0.25);
}

.card {
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(15,14,12,0.04),
              0 12px 40px -20px rgba(15,14,12,0.12);
  transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .4s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(15,14,12,0.04),
              0 20px 50px -20px rgba(15,14,12,0.18);
}

.glass {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.35);
}
.glass-strong {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.45);
}

/* =============================================================
   LINKS - animated underline from the left
   ============================================================= */
.link-u { position: relative; transition: color .25s ease; text-decoration: none; color: inherit; }
.link-u::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.link-u:hover::after { transform: scaleX(1); }
.link-u:hover { color: #0F0E0C; }

/* Dark theme scope: flip link color + underline on inverted surfaces */
.theme-dark .link-u     { color: #FBF7F0; }
.theme-dark .link-u::after { background-color: rgba(255,255,255,0.6); }
.theme-dark .link-u:hover  { color: #fff; }

/* =============================================================
   HERO EYEBROW - animated orange dot + mono label pill
   ============================================================= */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,244,225,0.7));
  border: 1px solid rgba(232, 165, 74, 0.35);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #2A251F;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px rgba(15,14,12,0.04),
              0 8px 24px -10px rgba(230,118,64,0.25);
}
.hero-eyebrow .dot {
  position: relative;
  width: 8px; height: 8px; border-radius: 999px;
  background: #E8A54A;
  box-shadow: 0 0 0 0 rgba(232, 165, 74, 0.6);
  animation: hero-eyebrow-pulse 2.2s ease-out infinite;
}
@keyframes hero-eyebrow-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(232, 165, 74, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(232, 165, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 165, 74, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow .dot { animation: none; }
}
@media (max-width: 639px) {
  .hero-eyebrow {
    font-size: 10px;
    padding: 7px 14px;
    gap: 8px;
  }
  .hero-eyebrow .dot { width: 6px; height: 6px; }
}

/* Section eyebrow: centered row-header chip above section H2s */
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2A251F;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}