/* ============================================================
   Caples Digital — shared design system
   Loaded on every page alongside the Tailwind CDN.
   All custom classes are namespaced `cd-` so they never
   collide with Tailwind utilities.
   ============================================================ */

:root {
  --ink:    #0B1220;
  --ink-2:  #0f172a;
  --gold:   #C9A961;
  --gold-2: #E3C982;   /* lighter gold for gradients/glow */
  --gold-3: #b69147;   /* darker gold for hovers */
  --paper:  #FAFAF7;
  --line:   #e6e3da;
  --muted:  #64748b;
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-soft: 0 2px 12px rgba(11,18,32,0.06), 0 1px 3px rgba(11,18,32,0.04);
  --shadow-lift: 0 24px 60px rgba(11,18,32,0.14), 0 6px 18px rgba(11,18,32,0.08);
  --shadow-deep: 0 36px 80px rgba(11,18,32,0.32), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ---------- Prevent stray horizontal overflow (decorative absolute/scaled layers) ----------
   `clip` (not `hidden`) so it never creates a scroll container that would break the sticky navbar. */
html, body { overflow-x: clip; max-width: 100%; }

/* ---------- Page scaffold (subpages opt in via body.cd-page) ---------- */
body.cd-page > main,
body.cd-page > section,
body.cd-page > footer { position: relative; z-index: 1; }

/* Keep the navbar sticky above content + decorative layers on every page.
   Higher specificity than the body>* layering rules so `position: sticky` wins. */
#navbar.sticky { position: sticky; top: 0; z-index: 50; }
body.cd-page > header#navbar { position: sticky; z-index: 50; }

/* ---------- Aurora ambient background ---------- */
.cd-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cd-aurora::before,
.cd-aurora::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.5; will-change: transform;
}
.cd-aurora::before {
  width: 46vw; height: 46vw; left: -8vw; top: -10vw;
  background: radial-gradient(circle at 50% 50%, rgba(30,64,175,0.20), transparent 65%);
  animation: cdAuroraA 22s var(--ease) infinite alternate;
}
.cd-aurora::after {
  width: 42vw; height: 42vw; right: -10vw; top: 18vw;
  background: radial-gradient(circle at 50% 50%, rgba(201,169,97,0.22), transparent 65%);
  animation: cdAuroraB 26s var(--ease) infinite alternate;
}
@keyframes cdAuroraA { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6vw,8vw,0) scale(1.15); } }
@keyframes cdAuroraB { from { transform: translate3d(0,0,0) scale(1.05); } to { transform: translate3d(-7vw,-5vw,0) scale(1); } }

/* ---------- Scroll progress bar ---------- */
.cd-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--gold-3), var(--gold), var(--gold-2));
  z-index: 60; pointer-events: none; transition: width 0.1s linear;
  box-shadow: 0 0 12px rgba(201,169,97,0.5);
}

/* ---------- Scroll reveal ---------- */
.cd-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.cd-reveal-l { transform: translateX(-32px); }
.cd-reveal-r { transform: translateX(32px); }
.cd-reveal-scale { transform: scale(0.94); }
.cd-reveal.cd-in { opacity: 1; transform: none; }

/* ---------- Eyebrow (gold label with leading rule) ---------- */
.cd-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold-3);
}
.cd-eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: var(--gold); display: inline-block; }
.cd-eyebrow.cd-eyebrow-light { color: var(--gold-2); }
.cd-eyebrow.cd-eyebrow-center { justify-content: center; }

/* ---------- Gradient ink->gold display text ---------- */
.cd-grad {
  background-image: linear-gradient(180deg, #fafaf7 0%, #a8a89a 70%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cd-gold { color: var(--gold-3); }

/* ---------- Buttons ---------- */
.cd-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 999px; padding: 0.8rem 1.6rem; font-size: 0.875rem; font-weight: 600;
  cursor: pointer; overflow: hidden; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.cd-btn::after { /* sheen sweep */
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg); transition: left 0.6s var(--ease);
}
.cd-btn:hover::after { left: 130%; }
.cd-btn-ink { background: var(--ink); color: #fff; box-shadow: 0 16px 40px rgba(11,18,32,0.18); }
.cd-btn-ink:hover { transform: translateY(-2px); box-shadow: 0 22px 52px rgba(11,18,32,0.26); }
.cd-btn-gold { background: var(--gold); color: var(--ink); box-shadow: 0 16px 40px rgba(201,169,97,0.28); }
.cd-btn-gold:hover { transform: translateY(-2px); background: var(--gold-3); box-shadow: 0 22px 52px rgba(201,169,97,0.36); }
.cd-btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
.cd-btn-ghost:hover { transform: translateY(-2px); background: #fff; box-shadow: var(--shadow-soft); }
.cd-btn-outline-gold { background: transparent; color: var(--gold-2); border: 1px solid rgba(201,169,97,0.5); }
.cd-btn-outline-gold:hover { background: rgba(201,169,97,0.1); }

/* ---------- Cards ---------- */
.cd-card {
  position: relative; background: rgba(255,255,255,0.92); border: 1px solid var(--line);
  border-radius: 1.75rem; box-shadow: var(--shadow-soft);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.cd-card-hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: rgba(201,169,97,0.55); }
.cd-card-dark { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 60%, var(--ink) 100%); border: 1px solid rgba(255,255,255,0.06); color: #fff; }
/* gold gradient ring on hover */
.cd-ring { position: relative; }
.cd-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(201,169,97,0.7), transparent 40%, transparent 60%, rgba(30,64,175,0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none;
}
.cd-ring:hover::before { opacity: 1; }

/* ---------- Animated link underline ---------- */
.cd-link { position: relative; }
.cd-link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease);
}
.cd-link:hover::after { transform: scaleX(1); }

/* ---------- Stats / count-up ---------- */
.cd-stat-num { font-family: 'Fraunces', Georgia, serif; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }

/* ---------- Marquee ---------- */
.cd-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cd-marquee-track { display: inline-flex; gap: 2.5rem; white-space: nowrap; animation: cdMarquee 32s linear infinite; will-change: transform; }
.cd-marquee:hover .cd-marquee-track { animation-play-state: paused; }
@keyframes cdMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Brand monogram chip (replaces text trust logos) ---------- */
.cd-chip {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.2rem; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.7); box-shadow: var(--shadow-soft);
  font-size: 0.82rem; font-weight: 600; color: #475569; letter-spacing: 0.01em;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.cd-chip:hover { transform: translateY(-3px); border-color: rgba(201,169,97,0.6); color: var(--ink); }
.cd-chip-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(201,169,97,0.18); flex: none; }

/* ---------- Timeline (About) ---------- */
.cd-timeline { position: relative; padding-left: 2.2rem; }
.cd-timeline::before { content: ""; position: absolute; left: 0.5rem; top: 0.4rem; bottom: 0.4rem; width: 2px; background: linear-gradient(180deg, var(--gold), rgba(201,169,97,0.15)); }
.cd-tl-item { position: relative; }
.cd-tl-item::before {
  content: ""; position: absolute; left: -1.72rem; top: 0.35rem; width: 0.7rem; height: 0.7rem; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--gold); box-shadow: 0 0 0 4px rgba(201,169,97,0.12);
}

/* ---------- Spline robot: watermark mask + loading spinner ---------- */
/* Full-width bottom fade reliably hides the "Built with Spline" badge (bottom-right). */
.cd-spline-mask {
  position: absolute; left: 0; right: 0; bottom: 0; height: 92px; z-index: 20; pointer-events: none;
  background: linear-gradient(to top, var(--ink) 0%, var(--ink) 58%, rgba(11,18,32,0) 100%);
}
/* extra solid block over the bottom-right corner where the badge sits */
.cd-spline-mask::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 210px; height: 46px;
  background: var(--ink); border-top-left-radius: 14px;
}
.cd-spinner {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid rgba(201,169,97,0.22); border-top-color: var(--gold);
  animation: cdSpin 0.9s linear infinite;
}
@keyframes cdSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cd-spinner { animation: none; } }

/* ---------- Section divider (gold hairline diamond) ---------- */
.cd-divider { display: flex; align-items: center; gap: 1rem; color: var(--line); }
.cd-divider::before, .cd-divider::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--line)); }
.cd-divider::after { background: linear-gradient(90deg, var(--line), transparent); }
.cd-divider span { width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); }

/* ---------- Floating decorative blobs inside dark cards ---------- */
.cd-glow-gold { box-shadow: 0 0 60px rgba(201,169,97,0.16); }

/* ---------- Map pin with pulse (custom contact map) ---------- */
.cd-pin { position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
.cd-pin::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: rgba(201,169,97,0.45); animation: cdPing 2.6s var(--ease) infinite; }
.cd-pin > svg { position: relative; z-index: 1; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.45)); }
@keyframes cdPing { 0% { transform: scale(0.5); opacity: 0.85; } 80%, 100% { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cd-pin::before { animation: none; } }

/* ---------- Mobile menu animation ---------- */
#mobile-menu { transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
#mobile-menu.cd-closing { opacity: 0; transform: translateY(-8px); }

/* ---------- Reduced motion: respect user preference ---------- */
@media (prefers-reduced-motion: reduce) {
  .cd-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cd-aurora::before, .cd-aurora::after,
  .cd-marquee-track { animation: none !important; }
  .cd-btn::after { display: none; }
  html { scroll-behavior: auto !important; }
}

/* ---------- Smooth in-page anchors ---------- */
html { scroll-behavior: smooth; }