/*
 * Merah — global design layer
 * ------------------------------------------------------------------
 * Fonts, headings, buttons and motion shared by every page.
 *
 *   Headings  Fraunces (serif), accent word in Fraunces italic terracotta
 *   Body      Inter
 *   Buttons   Inter 700 uppercase pills · terracotta fill on hover
 *   Motion    driven by Motion (motion.dev) from assets/js/global.js
 */

:root{
  --font-head:"Fraunces",Georgia,"Times New Roman",serif;
  --font-serif:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --terracotta:#B85C2A;
  --terracotta-deep:#8B3A1A;
  --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);font-optical-sizing:auto}
h1,h2{font-weight:400!important;letter-spacing:-.03em!important}
h3,h4{font-weight:500;letter-spacing:-.02em}

/* accent word of a heading: Fraunces italic in terracotta (the Me*r*ah move) */
h1 em,h2 em,.serif{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.02em;
  line-height:.9;
  padding-right:.04em;
  color:var(--terracotta);
}
/* the brand's signature italic "r" inside running text */
.ac{font-family:var(--font-serif);font-style:italic;color:var(--terracotta)}

/* ===================== BUTTONS ===================== */
.btn{
  --fill:var(--terracotta);
  --fill-text:#FFF5E8;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  font-family:var(--font-body)!important;
  font-weight:700!important;
  font-size:12px!important;
  text-transform:uppercase;
  letter-spacing:.125em;
  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:var(--terracotta);--orb-icon:#FFF5E8;--orb-text:#FFF5E8}
.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}
}