/* ============================================================
   site-wide enhancement layer — loaded after each page's own
   inline <style>, so these rules win on equal specificity.
   covers: nav rollup, floating cards/pills, graceful transitions,
   test-tube scroll cue.
   ============================================================ */

/* ── nav rollup: single dropdown pill on every page, every size ── */
.nav-links{display:none!important}
.nav-hamburger{
  display:inline-flex!important;
  align-items:center;
  gap:7px;
  width:auto;
  padding:9px 16px 9px 14px;
  border:1px solid var(--line-s);
  border-radius:999px;
  color:var(--muted);
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.04em;
  text-transform:lowercase;
  transition:all .2s cubic-bezier(.22,1,.36,1);
}
.nav-hamburger:hover{color:var(--ink);border-color:var(--ink);transform:translateY(-1px)}
.nav-hamburger svg{width:16px;height:16px;display:block;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.nav-hamburger.open svg{transform:rotate(90deg)}
.nav-hamburger::after{
  content:'menu';
  order:-1;
}
.nav-drawer{
  display:none;
  position:absolute!important;
  top:66px!important;
  right:12px!important;
  background:var(--panel)!important;
  border:1px solid var(--line-s)!important;
  border-radius:16px!important;
  padding:8px!important;
  box-shadow:0 16px 48px rgba(0,0,0,.4)!important;
  min-width:200px!important;
  z-index:210!important;
  transform-origin:top right;
}
.nav-drawer.open{
  display:block!important;
  animation:drawerIn .22s cubic-bezier(.22,1,.36,1) both;
}
.nav-drawer a,.nav-drawer .nd-cta{
  display:block!important;
  padding:11px 16px!important;
  font-size:13px!important;
  color:var(--muted)!important;
  border-radius:10px!important;
  transition:background .15s,color .15s;
}
.nav-drawer a:hover{background:var(--panel-2)!important;color:var(--ink)!important}
.nav-drawer .nd-sep{height:1px;background:var(--line);margin:6px 8px}
.nav-drawer .nd-cta{color:var(--terra)!important}
@keyframes drawerIn{from{opacity:0;transform:scale(.94) translateY(-6px)}to{opacity:1;transform:none}}

/* ── graceful base transitions ── */
a,button,.btn,.card,.give-card,.d-pill,.a-pill,.freq-pill,.r-pill,.chip,.ppill,
.mini-cta,.amount,.give-mode button,.band,.role,.trust-item,.impact-tile,
.fact,.step,.doc-item,.faq-item,.acc,.plat,.lane-card,.field-card,.cluster,
.exp,.geo-row,.move,.bring-col{
  transition:transform .45s cubic-bezier(.22,1,.36,1),
             box-shadow .45s cubic-bezier(.22,1,.36,1),
             border-color .3s ease,
             background .3s ease,
             color .3s ease;
}

/* ── graceful floating: cards + pills drift gently, staggered ── */
@keyframes gentleFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
.card,.give-card,.band,.plat,.lane-card,.trust-item,.impact-tile,.fact,
.role,.doc-item,.field-card,.exp{
  animation:gentleFloat 6.5s ease-in-out infinite;
}
.chip,.ppill,.mini-cta,.d-pill,.a-pill,.freq-pill,.r-pill,.amount,
.give-mode button{
  animation:gentleFloat 5.5s ease-in-out infinite;
}
/* stagger via nth-child so a row doesn't bob in lockstep */
.card:nth-child(2n),.give-card:nth-child(2n),.band:nth-child(2n),
.plat:nth-child(2n),.lane-card:nth-child(2n),.trust-item:nth-child(2n),
.impact-tile:nth-child(2n),.fact:nth-child(2n),.role:nth-child(2n),
.doc-item:nth-child(2n),.field-card:nth-child(2n),.exp:nth-child(2n),
.chip:nth-child(2n),.ppill:nth-child(2n),.mini-cta:nth-child(2n),
.d-pill:nth-child(2n),.a-pill:nth-child(2n),.freq-pill:nth-child(2n),
.r-pill:nth-child(2n),.amount:nth-child(2n),.give-mode button:nth-child(2n){
  animation-delay:.9s;
}
.card:nth-child(3n),.give-card:nth-child(3n),.band:nth-child(3n),
.plat:nth-child(3n),.lane-card:nth-child(3n),.trust-item:nth-child(3n),
.impact-tile:nth-child(3n),.fact:nth-child(3n),.role:nth-child(3n),
.doc-item:nth-child(3n),.field-card:nth-child(3n),.exp:nth-child(3n),
.chip:nth-child(3n),.ppill:nth-child(3n),.mini-cta:nth-child(3n),
.d-pill:nth-child(3n),.a-pill:nth-child(3n),.freq-pill:nth-child(3n),
.r-pill:nth-child(3n),.amount:nth-child(3n),.give-mode button:nth-child(3n){
  animation-delay:1.8s;
}
/* pause the float on hover/active/open states so interaction reads cleanly */
.card:hover,.give-card:hover,.give-card.active,.band:hover,.plat:hover,
.lane-card:hover,.role:hover,.doc-item:hover,.exp:hover,
.chip:hover,.ppill:hover,.ppill.active,.mini-cta:hover,
.d-pill:hover,.d-pill.on,.a-pill:hover,.a-pill.on,
.freq-pill:hover,.freq-pill.on,.r-pill:hover,.r-pill.on,
.amount:hover,.amount.active,.give-mode button:hover,.give-mode button.active{
  animation-play-state:paused;
}

@media(prefers-reduced-motion:reduce){
  .card,.give-card,.band,.plat,.lane-card,.trust-item,.impact-tile,.fact,
  .role,.doc-item,.field-card,.exp,.chip,.ppill,.mini-cta,.d-pill,.a-pill,
  .freq-pill,.r-pill,.amount,.give-mode button{
    animation:none!important;
  }
}

/* ── test-tube scroll cue ── */
.tt-cue{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:fit-content;
  margin:clamp(28px,5vw,52px) auto 0;
  cursor:pointer;
  background:none;
  border:none;
  padding:6px;
  color:var(--soft);
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.tt-cue:hover{color:var(--muted)}
.tt-cue svg{width:30px;height:44px;display:block;transform-origin:50% 88%;animation:ttFloat 3.2s ease-in-out infinite}
.tt-cue:hover svg{animation:ttFloat 3.2s ease-in-out infinite,ttNudge .5s ease-in-out infinite}
@keyframes ttFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-5px) rotate(-2deg)}}
@keyframes ttNudge{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(1px) rotate(3deg)}}
.tt-cue.shaking svg{animation:ttShake .68s cubic-bezier(.36,.07,.19,.97) both}
@keyframes ttShake{
  10%,90%{transform:translate(-1px,0) rotate(-3deg)}
  20%,80%{transform:translate(2px,-2px) rotate(10deg)}
  30%,50%,70%{transform:translate(-4px,-4px) rotate(-16deg)}
  40%,60%{transform:translate(4px,-4px) rotate(16deg)}
}
.tt-liquid{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.tt-cue.shaking .tt-liquid{transform:translateY(-6px)}
@media(prefers-reduced-motion:reduce){
  .tt-cue svg,.tt-cue.shaking svg{animation:none}
}

/* ── large section icons ── */
.sec-icon{
  width:clamp(40px,5vw,56px);
  height:clamp(40px,5vw,56px);
  color:var(--terra);
  margin-bottom:14px;
  opacity:.92;
  animation:gentleFloat 7s ease-in-out infinite;
}
.sec-icon svg{width:100%;height:100%;display:block}
@media(prefers-reduced-motion:reduce){.sec-icon{animation:none}}