/* ============================================================
   ROCKSHORE BUILDING GROUP — shared design tokens + motion base
   Loaded by every page, before site.css. Carries the brand
   palette, the reset, and the shared motion engine hooks.
   ============================================================ */

:root {
  /* Brand — sampled from the Rockshore logo + live site CSS */
  --navy:      #16243e;   /* primary brand dark  */
  --navy-900:  #0e1729;   /* deepest, near-black navy */
  --navy-800:  #142238;
  --navy-700:  #1d3153;   /* raised panels on dark */
  --navy-600:  #274067;

  --gold:      #806319;   /* brand gold — solid fills on light bg */
  --gold-lite: #c9a24e;   /* brightened gold — text/lines on dark bg */
  --gold-glow: #e4c477;   /* highlight / sheen */

  --cream:     #f6f1e7;
  --paper:     #faf8f3;
  --sand:      #efe8da;
  --ink:       #16243e;
  --ink-soft:  #45506380; /* muted body copy on light */
  --muted:     #59647a;
  --line:      rgba(22,36,62,.12);
  --line-gold: rgba(128,99,25,.30);

  --ease:      cubic-bezier(.2,.7,.2,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --maxw:      1240px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
button{ font:inherit; cursor:pointer; }
h1,h2,h3,h4,p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

/* ---------- scroll reveal ---------- */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay:var(--rd,0ms);
  will-change:opacity,transform;
}
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(-40px); }
[data-reveal="right"]{ transform:translateX(40px); }
[data-reveal="scale"]{ transform:scale(.92); }
[data-reveal].in{ opacity:1; transform:none; }

/* ---------- Ken Burns hero (the "moving images", zero credit) ---------- */
.kb{ position:absolute; inset:0; overflow:hidden; }
.kb-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1.06);
  transition:opacity 1.8s ease;
  will-change:opacity,transform;
}
.kb-slide.active{
  opacity:1;
  animation:kenburns var(--kb-dur,16s) ease-out both;
}
@keyframes kenburns{
  0%{ transform:scale(1.05) translate3d(0,0,0); }
  100%{ transform:scale(1.20) translate3d(0,-1.5%,0); }
}

/* ---------- parallax ---------- */
[data-parallax]{ will-change:transform; }

/* ---------- freeze-proof cursor accent (fine pointers only) ---------- */
#rs-ring{
  position:fixed; top:0; left:0; width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1.5px solid var(--gold-lite); border-radius:50%;
  pointer-events:none; z-index:9500; opacity:0;
  transition:width .25s var(--ease), height .25s var(--ease), opacity .3s, background .25s;
  mix-blend-mode:difference;
}
#rs-ring.show{ opacity:.9; }
#rs-ring.big{ width:66px; height:66px; margin:-33px 0 0 -33px; background:rgba(201,162,78,.12); }

/* ---------- floating action buttons: WhatsApp / phone / back-to-top ---------- */
#rs-fab{
  position:fixed; right:20px; bottom:22px; z-index:9200;
  display:flex; flex-direction:column; gap:12px;
}
#rs-fab .fab{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:linear-gradient(160deg,var(--gold-glow),var(--gold-lite) 55%,var(--gold));
  color:var(--navy-900); border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.55); text-decoration:none;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s var(--ease);
}
#rs-fab .fab:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 16px 34px -10px rgba(0,0,0,.6); color:var(--navy-900); }
#rs-fab .fab svg{ width:24px; height:24px; display:block; }
#rs-fab .fab.top{ opacity:0; visibility:hidden; transform:translateY(12px); pointer-events:none; }
#rs-fab .fab.top.show{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
@media(max-width:560px){
  #rs-fab{ right:14px; bottom:16px; gap:10px; }
  #rs-fab .fab{ width:48px; height:48px; }
  #rs-fab .fab svg{ width:22px; height:22px; }
}

/* ---------- utility ---------- */
.rs-noscroll{ overflow:hidden; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .kb-slide.active{ animation:none; }
}