/* ============================================================
   HumanSide — Redesign Foundation
   Brand: Bricolage Grotesque + Newsreader italic
          blue #537feb · orange #fb9d59 · cream #f8f5ec
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=Newsreader:ital,opsz,wght@1,6..72,400..600&display=swap');

:root{
  /* brand core */
  --blue:        #537feb;
  --blue-deep:   #3457d8;
  --blue-press:  #2742b8;
  --blue-soft:   #e7ecff;
  --blue-tint:   #ccd6ff;
  --orange:      #fb9d59;
  --orange-deep: #f5832f;
  --orange-soft: #ffe7d2;
  --cream:       #f8f5ec;
  --cream-deep:  #efe9d6;
  --ink:         #16152e;
  --ink-2:       #2b2a47;
  --ink-soft:    #5a5872;
  --green:       #3f7d5a;
  --green-soft:  #dcebd6;
  --plum:        #6a4f8f;
  --plum-soft:   #ece2f6;
  --white:       #ffffff;

  --font-display:'Bricolage Grotesque', system-ui, sans-serif;
  --font-serif:  'Newsreader', Georgia, serif;

  --maxw: 1240px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 34px;
  --r-xl: 48px;

  --ease-elastic: cubic-bezier(.16, 1.3, .3, 1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-display);
  background:var(--cream);
  color:var(--ink);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
::selection{ background:var(--orange); color:var(--ink); }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.section{ position:relative; padding-block:clamp(5rem, 11vw, 9rem); }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.82rem; font-weight:600; letter-spacing:.02em;
  text-transform:uppercase; color:var(--blue-deep);
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--orange); }

/* ---------- type ---------- */
.serif{ font-family:var(--font-serif); font-style:italic; font-weight:500; }
.h-xl{
  font-weight:700; line-height:.98; letter-spacing:-.03em;
  font-size:clamp(2.9rem, 8.5vw, 7rem);
}
.h-lg{
  font-weight:700; line-height:1.02; letter-spacing:-.025em;
  font-size:clamp(2.2rem, 5.2vw, 4rem);
}
.h-md{
  font-weight:700; line-height:1.06; letter-spacing:-.02em;
  font-size:clamp(1.7rem, 3.2vw, 2.6rem);
}
.lead{
  font-size:clamp(1.05rem, 1.5vw, 1.3rem);
  line-height:1.6; color:var(--ink-2); font-weight:400;
  max-width:42ch;
}
.muted{ color:var(--ink-soft); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:600; font-size:1rem;
  padding:.95rem 1.6rem; border-radius:999px;
  transition:transform .25s var(--ease-elastic), background .2s, color .2s, box-shadow .25s;
  will-change:transform;
}
.btn .arr{ transition:transform .3s var(--ease-out); }
.btn:hover .arr{ transform:translateX(4px); }
.btn-primary{ background:var(--blue); color:var(--white); box-shadow:0 10px 22px -8px rgba(83,127,235,.7); }
.btn-primary:hover{ background:var(--blue-deep); }
.btn-ink{ background:var(--ink); color:var(--cream); }
.btn-ink:hover{ background:var(--ink-2); }
.btn-orange{ background:var(--orange); color:var(--ink); box-shadow:0 10px 22px -8px rgba(251,157,89,.8); }
.btn-orange:hover{ background:var(--orange-deep); }
.btn-ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--cream); }
.btn-lg{ padding:1.1rem 2rem; font-size:1.08rem; }

/* magnetic wrapper keeps layout, inner moves */
.mag{ display:inline-block; }

/* ---------- speech bubble (brand motif) ---------- */
.bubble{
  position:relative; display:inline-block;
  background:var(--blue); color:var(--cream);
  font-weight:500; font-size:.95rem;
  padding:.7rem 1.1rem; border-radius:18px;
  line-height:1.3;
}
.bubble::after{
  content:""; position:absolute; left:26px; bottom:-9px;
  width:20px; height:18px; background:var(--blue);
  clip-path:path('M0 0 Q4 16 22 18 Q8 14 8 0 Z');
}
.bubble.orange{ background:var(--orange); color:var(--ink); }
.bubble.orange::after{ background:var(--orange); }
.bubble.cream{ background:var(--cream); color:var(--ink); box-shadow:0 8px 26px -10px rgba(22,21,46,.3); }
.bubble.cream::after{ background:var(--cream); }
.bubble.tail-right::after{ left:auto; right:26px; clip-path:path('M22 0 Q18 16 0 18 Q14 14 14 0 Z'); }

/* ---------- pills / tags ---------- */
.pill{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.8rem; font-weight:600; letter-spacing:.01em;
  padding:.4rem .85rem; border-radius:999px;
  background:var(--white); color:var(--ink-2);
  box-shadow:inset 0 0 0 1.5px rgba(22,21,46,.1);
}
.pill.solid-blue{ background:var(--blue-soft); color:var(--blue-press); box-shadow:none; }
.pill.solid-green{ background:var(--green-soft); color:var(--green); box-shadow:none; }
.pill.live{ background:#e4f6ea; color:#1d8a4c; box-shadow:none; }
.pill.live .dot{ width:7px;height:7px;border-radius:50%;background:#22a85a; box-shadow:0 0 0 0 rgba(34,168,90,.6); animation:livepulse 2s infinite; }
@keyframes livepulse{ 0%{box-shadow:0 0 0 0 rgba(34,168,90,.5);} 70%{box-shadow:0 0 0 7px rgba(34,168,90,0);} 100%{box-shadow:0 0 0 0 rgba(34,168,90,0);} }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease-out), transform .9s var(--ease-elastic); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }

.pop{ opacity:0; transform:scale(.7) translateY(10px); transition:opacity .5s, transform .7s var(--ease-elastic); }
.pop.in{ opacity:1; transform:none; }

/* word-by-word headline */
.word{ display:inline-block; overflow:hidden; vertical-align:top;
  /* pad top/right so italic serif overhang isn't clipped; bottom/left stay flush for the slide-up reveal */
  padding:.12em .18em 0 0; margin:-.12em -.18em 0 0; }
.word > span{ display:inline-block; transform:translateY(120%); transition:transform .9s var(--ease-elastic); }
.word.in > span{ transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal,.pop,.word>span{ opacity:1 !important; transform:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}