/*
 * Prime Doctor RX — global design layer (loaded by v1 and v2)
 * ------------------------------------------------------------------
 * Fonts, headings, buttons and motion shared by every version.
 *
 *   Headings  Inter Regular, -0.04em, last word in Instrument Serif italic
 *   Body      Satoshi (Outfit as fallback)
 *   Buttons   Satoshi Regular · liquid pass-through fill + label roll
 *   Motion    driven by Motion (motion.dev) from assets/js/global.js
 */

:root{
  --font-head:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --font-body:"Satoshi","Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease-expo:cubic-bezier(.19,1,.22,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
}

body{font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

h1,h2,h3,h4{font-family:var(--font-head)}
h1,h2{font-weight:400!important;letter-spacing:-.04em!important}
h3,h4{font-weight:500;letter-spacing:-.03em}

/* last word of a heading */
h1 em,h2 em,.serif{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.04em;
  font-size:1.08em;
  line-height:.9;
  padding-right:.04em;
}

/* ===================== BUTTONS ===================== */
.btn{
  --fill:#171411;
  --fill-text:#fff;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  font-family:var(--font-body)!important;
  font-weight:400!important;
  letter-spacing:.005em;
  transform:translateZ(0);
  transition:transform .55s cubic-bezier(.34,1.56,.64,1),box-shadow .6s var(--ease-out),border-color .5s ease!important;
  -webkit-mask-image:-webkit-radial-gradient(white,black); /* keeps the fill clipped to the pill in Safari */
}
.btn:hover{transform:translateZ(0)}
.btn:active{transform:scale(.965);transition-duration:.18s!important}

/* liquid fill: rises with a curved top, flattens, then exits upward */
.btn::before{
  content:"";
  position:absolute;
  left:-2px;right:-2px;top:-2px;bottom:-2px;
  background:var(--fill);
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  transform:translate3d(0,102%,0);
  transition:transform .8s var(--ease-expo),border-radius .8s var(--ease-expo);
  z-index:-1;
  pointer-events:none;
}
.btn.is-hover::before{transform:translate3d(0,0,0);border-radius:0}
.btn.is-exit::before{transform:translate3d(0,-102%,0);border-radius:0 0 50% 50% / 0 0 100% 100%}
.btn.is-reset::before{transition:none}

/* label roll: the label slides up and an identical copy follows it in */
.btn-label{display:inline-grid;overflow:hidden;vertical-align:middle;line-height:1.25;padding:.12em 0;margin:-.12em 0}
.btn-label > span{grid-area:1/1;display:block;white-space:nowrap;transition:transform .75s var(--ease-expo)}
.btn-label > span + span{transform:translate3d(0,110%,0);color:var(--fill-text)}
.btn.is-hover .btn-label > span:first-child,.btn:focus-visible .btn-label > span:first-child{transform:translate3d(0,-110%,0)}
.btn.is-hover .btn-label > span + span,.btn:focus-visible .btn-label > span + span{transform:translate3d(0,0,0)}

/* orb button: the arrow circle grows until it fills the pill */
.btn-orb::before{display:none}
.btn-orb{--orb:#171411;--orb-icon:#fff;--orb-text:#fff}
.btn-orb .btn-label > span + span{color:var(--orb-text)}
.orb{position:relative;display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px}
.orb-bg{position:absolute;inset:0;border-radius:50%;background:var(--orb);z-index:-1;transform:scale(1);transition:transform .9s var(--ease-expo)}
.btn-orb.is-hover .orb-bg{transform:scale(var(--orb-scale,9))}
/* arrows travel through a clipped circle so only one is ever visible */
.orb-ico{position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:50%;overflow:hidden;color:var(--orb-icon)}
.orb-ico svg{grid-area:1/1;width:13px;height:13px;transition:transform .75s var(--ease-expo)}
.orb-ico svg + svg{transform:translate3d(-42px,0,0)}
.btn-orb.is-hover .orb-ico svg:first-child{transform:translate3d(42px,0,0)}
.btn-orb.is-hover .orb-ico svg + svg{transform:translate3d(0,0,0)}

/* text links with the same roll */
.roll{display:inline-grid;overflow:hidden;vertical-align:bottom;line-height:1.3;padding:.08em 0;margin:-.08em 0}
.roll > span{grid-area:1/1;white-space:nowrap;transition:transform .7s var(--ease-expo)}
.roll > span + span{transform:translate3d(0,110%,0)}
a:hover > .roll > span:first-child,.roll-host:hover .roll > span:first-child{transform:translate3d(0,-110%,0)}
a:hover > .roll > span + span,.roll-host:hover .roll > span + span{transform:translate3d(0,0,0)}

/* ===================== APPEAR STATES =====================
   Hidden only once JS is confirmed (html.js) and never if the
   motion script fails (html.motion-off shows everything). */
html.js:not(.motion-off) [data-a="lines"]{visibility:hidden}
html.js:not(.motion-off) [data-a="fade"],
html.js:not(.motion-off) [data-a="stagger"] > *{opacity:0}
html.js:not(.motion-off) [data-a="media"]{clip-path:inset(12% 9% 12% 9% round 28px)}

.ln-mask{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln-mask > .ln-in{display:block;transform-origin:0 100%;will-change:transform}

@media(prefers-reduced-motion:reduce){
  .btn::before,.btn-label > span,.roll > span,.orb-bg,.orb-ico svg{transition:none!important}
}