/* ============================================================
   Hantera_ — shared base tokens & atoms
   Brand: Signal Purple / Cream Light / Honey / Deep Ink
   Type: Bricolage Grotesque (display) · Rethink Sans (body) · JetBrains Mono (labels)
   ============================================================ */

:root{
  /* palette */
  --purple:#8F11F9;
  --purple-deep:#6A0FB8;
  --purple-700:#7A0FD6;
  --purple-100:#EFD9FF;
  --purple-050:#F7ECFF;
  --cream:#FFF5D7;
  --cream-deep:#F4E6BF;
  --honey:#FFDB8F;
  --ink:#0C1B33;
  --ink-soft:#16294a;
  --paper:#FFFFFF;

  /* motion */
  --glide:cubic-bezier(.2,.8,.2,1);
  --snap:cubic-bezier(.6,0,.2,1);
  --settle:cubic-bezier(.34,1.56,.64,1);

  /* radius */
  --r-1:6px; --r-card:12px; --r-surface:18px;

  /* layout */
  --maxw:1240px;
  --edge:clamp(20px,5vw,80px);
}
:root{ --ink-line:rgba(255,245,215,.14); }

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;overflow-x:clip;max-width:100%;}
body{font-family:'Rethink Sans',sans-serif;font-weight:500;line-height:1.45;overflow-x:clip;max-width:100%;position:relative;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--purple);color:var(--cream);}

/* ---- type atoms ---- */
.display{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(44px,8.2vw,116px);line-height:.9;letter-spacing:-.025em;
  text-wrap:balance;
}
.h1{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:clamp(34px,4.8vw,72px);line-height:.94;letter-spacing:-.02em;text-wrap:balance;
}
.h2{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:clamp(28px,3.4vw,46px);line-height:1.0;letter-spacing:-.018em;text-wrap:balance;
}
.h3{font-family:'Rethink Sans',sans-serif;font-weight:800;font-size:clamp(19px,1.5vw,22px);line-height:1.12;letter-spacing:-.01em;}
.lead{font-size:clamp(18px,1.7vw,23px);line-height:1.45;font-weight:500;}
.p{font-size:17px;line-height:1.55;font-weight:500;}
.small{font-size:14px;line-height:1.45;}
.eyebrow{
  font-family:'JetBrains Mono',monospace;font-weight:500;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
}
.mono{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:13px;line-height:1.6;}

/* ---- wordmark ---- */
.wordmark{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  letter-spacing:-.03em;display:inline-flex;align-items:baseline;line-height:1;
  user-select:none;
}
.wordmark .cur{margin-left:.01em;}
.cursor-blink{animation:cur 1.15s steps(1,end) infinite;}
@keyframes cur{0%,55%{opacity:1}56%,100%{opacity:0}}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:'Rethink Sans',sans-serif;font-weight:700;font-size:16px;
  padding:15px 26px;border-radius:var(--r-1);border:1.5px solid transparent;
  cursor:pointer;transition:transform .16s var(--snap),background .16s var(--snap),color .16s var(--snap),border-color .16s var(--snap);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn .arrow{transition:transform .2s var(--snap);}
.btn:hover .arrow{transform:translateX(3px);}

.btn-purple{background:var(--purple);color:var(--cream);}
.btn-purple:hover{background:var(--purple-700);}
.btn-ink{background:var(--ink);color:var(--cream);}
.btn-ink:hover{background:var(--ink-soft);}
.btn-cream{background:var(--cream);color:var(--ink);}
.btn-cream:hover{background:#fff;}
.btn-ghost-ink{background:transparent;color:var(--ink);border-color:rgba(12,27,51,.25);}
.btn-ghost-ink:hover{border-color:var(--ink);background:rgba(12,27,51,.04);}
.btn-ghost-cream{background:transparent;color:var(--cream);border-color:rgba(255,245,215,.32);}
.btn-ghost-cream:hover{border-color:var(--cream);background:rgba(255,245,215,.07);}

/* ---- layout ---- */
.container{max-width:var(--maxw);margin:0 auto;padding-left:var(--edge);padding-right:var(--edge);}
.rule{height:1px;border:0;background:currentColor;opacity:.16;}

/* ---- direction switcher (shared chrome) ---- */
.dirswitch{
  position:fixed;z-index:9999;right:max(16px,2vw);bottom:max(16px,2vh);
  display:flex;align-items:center;gap:2px;padding:5px;
  background:rgba(12,27,51,.92);backdrop-filter:blur(10px);
  border-radius:999px;box-shadow:0 8px 30px rgba(12,27,51,.32);
}
.dirswitch .ds-lbl{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,245,215,.55);padding:0 10px 0 8px;
}
.dirswitch a{
  font-family:'Rethink Sans',sans-serif;font-weight:700;font-size:13px;
  color:rgba(255,245,215,.7);padding:7px 13px;border-radius:999px;
  transition:background .16s var(--snap),color .16s var(--snap);
}
.dirswitch a:hover{color:var(--cream);}
.dirswitch a.active{background:var(--purple);color:var(--cream);}

@media (max-width:560px){
  .dirswitch .ds-lbl{display:none;}
  .dirswitch a{padding:7px 11px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .cursor-blink{animation:none;}
}

/* ---- scroll reveal: instant class flip (CSS transitions freeze in capture
   environments, so visibility must not depend on them; rAF in interactions.js
   drives a subtle JS opacity tween for real browsers) ---- */
.js .reveal{opacity:0;transform:translateY(16px);}
.js .reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1 !important;transform:none !important;}
}