/* ============================================================
   BASE.CSS — Variables, Reset, Typography, Buttons, Utility
   Phillion — Private Members Club
   ============================================================ */

/* ── Variables ── */
:root {
  --gold:        #C6A66B;
  --gold-light:  #e0c98a;
  --gold-dim:    rgba(198,166,107,0.15);
  --black:       #080808;
  --surface:     #0f0f0f;
  --surface2:    #161616;
  --surface3:    #1e1e1e;
  --glass:       rgba(255,255,255,0.04);
  --glass-border:rgba(255,255,255,0.07);
  --text:        #f0ece4;
  --text-dim:    rgba(240,236,228,0.55);
  --text-faint:  rgba(240,236,228,0.25);
}

/* ── Reset ── */
*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Outfit', sans-serif;
  background: var(--black);
  color: var(--text);
  overflow-x: hidden;
  cursor: none;
}
img {
  display: block;
  max-width: 100%;
  background-color: var(--surface2);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ── Custom Cursor ── */
#cursor {
  position: fixed; width: 10px; height: 10px;
  background: var(--gold); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .3s, height .3s;
}
#cursor-ring {
  position: fixed; width: 36px; height: 36px;
  border: 1px solid rgba(198,166,107,0.5); border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  transition: width .4s, height .4s;
}

/* ── Page Loader ── */
.page-loader {
  position: fixed; inset: 0; background: var(--black); z-index: 9000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: opacity .6s .2s;
}
.page-loader.hidden { opacity: 0; pointer-events: none; }
.loader-logo {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem; color: var(--gold);
  letter-spacing: .1em; margin-bottom: 30px;
}
.loader-bar { width: 200px; height: 1px; background: var(--glass-border); overflow: hidden; }
.loader-fill {
  height: 100%; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  animation: loadFill 1.4s cubic-bezier(.22,1,.36,1) .3s forwards;
}
@keyframes loadFill { to { transform: scaleX(1); } }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Typography ── */
.section-tag {
  display: inline-block; font-size: .62rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px;
}
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem,3.5vw,2.8rem);
  font-weight: 500; line-height: 1.2; margin-bottom: 16px;
}
.section-sub {
  font-size: .88rem; color: var(--text-dim);
  max-width: 480px; line-height: 1.7;
}

/* ── Buttons ── */
.btn-gold {
  background: var(--gold); color: var(--black);
  border: none; padding: 14px 32px; border-radius: 2px;
  font-family: 'Outfit', sans-serif; font-size: .78rem;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; transition: all .35s;
}
.btn-gold:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(198,166,107,.25);
}
.btn-ghost {
  background: none; color: var(--text-dim);
  border: 1px solid var(--glass-border);
  padding: 13px 28px; border-radius: 2px;
  font-family: 'Outfit', sans-serif; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; transition: all .35s;
}
.btn-ghost:hover { border-color: rgba(198,166,107,.4); color: var(--gold); }

/* ── Form Elements ── */
.form-row    { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group  { margin-bottom: 20px; }
.form-label  {
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); display: block; margin-bottom: 8px;
}
.form-input,
.form-select,
.form-textarea {
  width: 100%; background: var(--surface2);
  border: 1px solid var(--glass-border);
  color: var(--text); padding: 12px 16px; border-radius: 2px;
  font-family: 'Outfit', sans-serif; font-size: .85rem;
  transition: border-color .3s; outline: none;
}
.form-select  { appearance: none; cursor: pointer; }
.form-textarea { resize: vertical; min-height: 100px; }
.form-input:focus,
.form-select:focus,
.form-textarea:focus { border-color: rgba(198,166,107,.5); }

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--glass-border); }

/* ── Utility ── */
section { padding: 100px 60px; }
.about-tag {
  display: inline-block; font-size: .62rem;
  letter-spacing: .25em; text-transform: uppercase; color: var(--gold);
}