/* ============================================================
   base.css — reset, base typography, and reusable primitives
   that future Tilean apps will share (buttons, eyebrow, section
   title, divider, reveal) plus the reduced-motion handling for
   those primitives.

   NOTE ON reduced-motion: the prefers-reduced-motion overrides are
   intentionally split — the rules below cover the shared primitives
   defined in THIS file (html, .reveal, .btn sheen). The overrides for
   page-specific components (seal rings, scrollcue, status dot, service
   hover, nav-toggle) live at the end of site.css so they stay last in
   the cascade and keep winning against their normal rules.
   ============================================================ */

/* ---------- reset / base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--void);
  color:var(--parchment);
  font-family:var(--body);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold);color:var(--void)}

/* ---------- eyebrow / section title ---------- */
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);opacity:.6}
h2.sec-title{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.9rem,4vw,3rem);line-height:1.1;
  color:var(--parchment);margin:.5rem 0 1.4rem;letter-spacing:.01em;
}

/* ---------- buttons (+ gilded sheen) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 18px;border-radius:2px;text-decoration:none;transition:all .25s;white-space:nowrap;
  position:relative;overflow:hidden;isolation:isolate;
}
.btn::before{
  content:"";position:absolute;top:0;left:-140%;width:55%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,246,222,.65),transparent);
  transform:skewX(-22deg);transition:left .65s cubic-bezier(.2,.7,.2,1);pointer-events:none;
}
.btn:hover::before{left:170%}
.btn-gold{background:var(--gold);color:var(--void);font-weight:500}
.btn-gold:hover{background:var(--gold-bright);box-shadow:0 0 24px rgba(212,175,55,.4);transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--gold-dim);color:var(--gold)}
.btn-ghost:hover{border-color:var(--gold);background:rgba(212,175,55,.08);transform:translateY(-1px)}

/* ---------- divider ---------- */
.divider{display:flex;align-items:center;justify-content:center;gap:20px;
  max-width:1120px;margin:0 auto;padding:0 32px}
.divider::before,.divider::after{content:"";height:1px;flex:1;
  background:linear-gradient(90deg,transparent,var(--panel-line))}
.divider::after{background:linear-gradient(90deg,var(--panel-line),transparent)}
.divider i{width:10px;height:10px;border:1px solid var(--gold);transform:rotate(45deg);
  position:relative;flex:0 0 auto}
.divider i::after{content:"";position:absolute;inset:2px;background:var(--gold);opacity:.55}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- reduced motion (shared primitives) ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{transition:none;opacity:1;transform:none}
  .btn::before{display:none}
}