/* ============================================================
   Turtle Software × Club Concierge — Shared Theme
   Palette: deep maroon + royal purple + antique gold
   ============================================================ */

:root{
  /* base darks */
  --ink:            #0d0611;
  --maroon-950:     #200811;
  --maroon-900:     #350c1c;
  --maroon-800:     #4a1226;
  --purple-950:     #170a24;
  --purple-900:     #241033;
  --purple-800:     #341749;
  --purple-700:     #472263;

  /* gold family */
  --gold-200:       #f6ecc9;
  --gold-300:       #edd9a0;
  --gold-400:       #e3c477;
  --gold-500:       #d4af37;
  --gold-600:       #b8912b;
  --gold-700:       #8f6f21;

  /* text */
  --cream:          #f6efe0;
  --cream-dim:      #d9cdb8;
  --muted:          #b6a8c4;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;

  --serif: 'Playfair Display', 'Georgia', serif;
  --script: 'Cormorant Garamond', 'Georgia', serif;
  --sans: 'Montserrat', 'Segoe UI', sans-serif;

  --ease-lux: cubic-bezier(.22,.61,.16,1);
}

*, *::before, *::after{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  overflow-x: hidden;
}

body{
  background:
    radial-gradient(ellipse 120% 80% at 15% 0%, rgba(74,18,38,.55), transparent 60%),
    radial-gradient(ellipse 120% 90% at 90% 15%, rgba(71,34,99,.55), transparent 55%),
    radial-gradient(ellipse 100% 70% at 50% 100%, rgba(53,12,28,.65), transparent 60%),
    linear-gradient(160deg, var(--purple-950) 0%, var(--ink) 45%, var(--maroon-950) 100%);
  background-attachment: fixed;
}

a{ color: inherit; }

::selection{
  background: var(--gold-500);
  color: var(--ink);
}

/* scrollbar */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: linear-gradient(var(--gold-600), var(--gold-500));
  border-radius: 10px;
}

/* ---------- shared decorative canvas layer ---------- */
#particle-field{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
}

/* ---------- fine hairline gold rule ---------- */
.hairline{
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  opacity: .55;
}

/* ---------- gold gradient text ---------- */
.gold-text{
  background: linear-gradient(100deg, var(--gold-300) 10%, var(--gold-500) 35%, var(--gold-200) 50%, var(--gold-600) 70%, var(--gold-400) 90%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 7s linear infinite;
}

@keyframes shimmer{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 220% 50%; }
}

/* ---------- corner ornament (art-deco style) ---------- */
.corner-frame{ position: absolute; inset: 0; pointer-events: none; }
.corner-frame svg{ position: absolute; width: 64px; height: 64px; opacity: .55; }
.corner-frame .tl{ top: 18px; left: 18px; }
.corner-frame .tr{ top: 18px; right: 18px; transform: scaleX(-1); }
.corner-frame .bl{ bottom: 18px; left: 18px; transform: scaleY(-1); }
.corner-frame .br{ bottom: 18px; right: 18px; transform: scale(-1,-1); }

/* ---------- buttons ---------- */
.btn-gold{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 15px 38px;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: linear-gradient(120deg, var(--gold-300), var(--gold-500) 45%, var(--gold-400) 55%, var(--gold-600));
  background-size: 220% 100%;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  transition: transform .45s var(--ease-lux), box-shadow .45s var(--ease-lux), background-position .6s ease;
  box-shadow: 0 8px 28px -8px rgba(212,175,55,.55);
}
.btn-gold:hover{
  transform: translateY(-2px);
  background-position: 100% 0;
  box-shadow: 0 14px 34px -8px rgba(212,175,55,.75);
}
.btn-gold:active{ transform: translateY(0); }

.btn-ghost{
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: 13px 30px;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-300);
  background: transparent;
  border: 1px solid rgba(228,196,119,.45);
  border-radius: 999px;
  cursor: pointer;
  transition: all .35s var(--ease-lux);
}
.btn-ghost:hover{
  border-color: var(--gold-400);
  background: rgba(228,196,119,.08);
  color: var(--gold-200);
}

/* reveal-on-enter utility (JS toggles .in) */
.reveal{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease-lux), transform .9s var(--ease-lux);
}
.reveal.in{ opacity: 1; transform: translateY(0); }

.reveal-scale{
  opacity: 0;
  transform: scale(.9);
  transition: opacity .8s var(--ease-lux), transform .8s var(--ease-lux);
}
.reveal-scale.in{ opacity: 1; transform: scale(1); }

[data-d]{ transition-delay: calc(var(--d, 0) * 1ms); }