/**
 * COLOR OF SOUL — Design Tokens & Global Styles
 * Single source of truth for all visual variables
 */

/* ── TOKENS ── */
:root {
  --ink:      #0a0a0a;
  --smoke:    #111009;
  --deep:     #0d0b09;
  --cream:    #faf7f3;
  --ash:      #8a8278;
  --gold:     #c9a96e;
  --gold-lt:  #e8d5b0;
  --gold-dim: rgba(201,169,110,.18);
  --border:   rgba(255,255,255,.06);
  --fd: 'Cormorant Garamond', serif;
  --fb: 'Jost', sans-serif;
  --ease-out: cubic-bezier(.215,.61,.355,1);
  --ease-in-out: cubic-bezier(.77,0,.18,1);
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: auto; }
body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--fb);
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; display:block; }
a { color: inherit; }
button { font-family: var(--fb); }

/* ── CURSOR ── */
#cur {
  position:fixed; width:10px; height:10px;
  background:var(--gold); border-radius:50%;
  pointer-events:none; z-index:99999;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
  transition: width .25s, height .25s;
}
#cur-r {
  position:fixed; width:34px; height:34px;
  border:1px solid rgba(201,169,110,.4); border-radius:50%;
  pointer-events:none; z-index:99998;
  transform:translate(-50%,-50%);
}
@media(max-width:768px){ #cur,#cur-r{display:none} body{cursor:auto} }

/* ── MOBILE MENU ── */
.mobile-menu {
  position:fixed; inset:0;
  background:rgba(8,7,5,.97); z-index:9999;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:0;
  transform:translateX(100%);
  transition:transform .55s var(--ease-in-out);
}
.mobile-menu.open { transform:translateX(0); }
.mm-item { overflow:hidden; padding:8px 0; }
.mm-item a {
  font-family:var(--fd); font-size:clamp(30px,8vw,50px); font-weight:300;
  color:var(--cream); text-decoration:none; letter-spacing:.06em;
  display:block; transform:translateY(100%);
  transition:transform .55s var(--ease-out), color .3s;
}
.mobile-menu.open .mm-item a { transform:translateY(0); }
.mobile-menu.open .mm-item:nth-child(1) a { transition-delay:.05s; }
.mobile-menu.open .mm-item:nth-child(2) a { transition-delay:.10s; }
.mobile-menu.open .mm-item:nth-child(3) a { transition-delay:.15s; }
.mobile-menu.open .mm-item:nth-child(4) a { transition-delay:.20s; }
.mobile-menu.open .mm-item:nth-child(5) a { transition-delay:.25s; }
.mobile-menu.open .mm-item:nth-child(6) a { transition-delay:.30s; }
.mm-item a:hover { color:var(--gold); }
.mm-close {
  position:absolute; top:28px; right:5vw;
  background:none; border:none; color:var(--cream);
  cursor:pointer; width:44px; height:44px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
}
.mm-close::before, .mm-close::after {
  content:''; display:block; width:22px; height:1px; background:var(--cream);
}
.mm-close::before { transform:rotate(45deg) translateY(.5px); }
.mm-close::after  { transform:rotate(-45deg) translateY(-.5px); }
.mm-social {
  position:absolute; bottom:30px; left:5vw;
  display:flex; gap:24px;
}
.mm-social a {
  font-size:9.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ash); text-decoration:none; transition:color .3s;
}
.mm-social a:hover { color:var(--gold); }

/* ── NAVBAR ── */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:24px 5vw;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  transition: padding .4s, background .4s, backdrop-filter .4s, box-shadow .4s, transform .4s;
}
#navbar.scrolled {
  padding:14px 5vw;
  background:rgba(10,10,10,.88);
  backdrop-filter:blur(20px);
  box-shadow:0 1px 0 rgba(201,169,110,.1);
}
#navbar.nav-hide { transform:translateY(-100%); }
.nav-logo-wrap { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.nav-logo-img  { width:34px; height:34px; object-fit:contain; }
.nav-logo-text { font-family:var(--fd); font-size:20px; font-weight:400; letter-spacing:.1em; color:var(--cream); }
.nav-logo-text em { font-style:italic; color:var(--gold); }
.nav-links { display:flex; list-style:none; gap:30px; }
.nav-links a {
  text-decoration:none; color:rgba(250,247,243,.58);
  font-size:10px; font-weight:400; letter-spacing:.24em; text-transform:uppercase;
  transition:color .3s; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-3px; left:0;
  width:0; height:1px; background:var(--gold); transition:width .3s;
}
.nav-links a:hover, .nav-links a.active { color:var(--cream); }
.nav-links a.active::after, .nav-links a:hover::after { width:100%; }
.nav-right  { display:flex; align-items:center; gap:16px; flex-shrink:0; }
.nav-cta {
  padding:8px 20px;
  border:1px solid rgba(201,169,110,.45); color:var(--gold);
  font-size:9px; letter-spacing:.28em; text-transform:uppercase;
  text-decoration:none;
  transition:background .3s, color .3s; white-space:nowrap;
}
.nav-cta:hover { background:var(--gold); color:var(--ink); }
.nav-burger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; background:none; border:none; padding:4px;
}
.nav-burger span { display:block; width:22px; height:1px; background:var(--cream); transition:all .3s; }
@media(max-width:900px){ .nav-links{display:none} .nav-burger{display:flex} }

/* ── PAGE HERO ── */
.page-hero {
  position:relative; height:52vh; min-height:360px;
  display:flex; align-items:flex-end; overflow:hidden;
}
.page-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; will-change:transform; }
.page-hero-ov { position:absolute; inset:0; background:linear-gradient(160deg,rgba(10,10,10,.82) 0%,rgba(10,10,10,.28) 60%,rgba(10,10,10,.78) 100%); }
.page-hero-content { position:relative; z-index:2; padding:0 7vw 8vh; }
.page-hero-eye  { font-size:9px; letter-spacing:.55em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.page-hero-title { font-family:var(--fd); font-size:clamp(44px,7vw,100px); font-weight:300; line-height:.95; }
.page-hero-title em { font-style:italic; color:var(--gold-lt); }

/* ── MARQUEE ── */
.marquee { background:var(--gold); padding:12px 0; overflow:hidden; white-space:nowrap; }
.marquee-t { display:inline-flex; animation:mq 34s linear infinite; }
.mq-item { font-family:var(--fd); font-size:13px; font-style:italic; letter-spacing:.08em; color:var(--ink); padding:0 32px; }
.mq-dot  { color:rgba(10,10,10,.3); font-size:10px; }
@keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── SHARED TOKENS ── */
.s-eye { font-size:9px; letter-spacing:.55em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.s-title { font-family:var(--fd); font-weight:300; line-height:1.05; }
.s-divider { width:40px; height:1px; background:var(--gold); margin:22px 0; }
.btn-primary {
  padding:13px 34px; background:var(--gold); color:var(--ink);
  font-size:9.5px; font-weight:500; letter-spacing:.3em; text-transform:uppercase;
  text-decoration:none; border:none; cursor:pointer; display:inline-block; white-space:nowrap;
  transition:background .3s, transform .3s;
}
.btn-primary:hover { background:var(--gold-lt); transform:translateY(-2px); }
.btn-outline {
  padding:12px 30px; background:transparent;
  border:1px solid rgba(201,169,110,.5); color:var(--gold);
  font-size:9.5px; font-weight:400; letter-spacing:.28em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; display:inline-block; white-space:nowrap;
  transition:background .3s, color .3s;
}
.btn-outline:hover { background:var(--gold); color:var(--ink); }

/* ── FOOTER ── */
#footer { background:#050505; padding:76px 5vw 38px; }
.ft-top {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px;
  padding-bottom:52px; border-bottom:1px solid var(--border); margin-bottom:32px;
}
.ft-brand-row { display:flex; align-items:center; gap:10px; margin-bottom:13px; }
.ft-brand-row img { width:30px; height:30px; object-fit:contain; }
.ft-brand-txt { font-family:var(--fd); font-size:21px; font-weight:300; }
.ft-brand-txt em { font-style:italic; color:var(--gold); }
.ft-tagline { font-size:13px; line-height:1.8; color:rgba(250,247,243,.35); max-width:230px; }
.ft-soc { display:flex; gap:9px; margin-top:24px; }
.ft-soc a {
  width:32px; height:32px; border:1px solid rgba(255,255,255,.09);
  display:flex; align-items:center; justify-content:center;
  color:var(--ash); font-size:10px; text-decoration:none;
  transition:border-color .3s, color .3s;
}
.ft-soc a:hover { border-color:var(--gold); color:var(--gold); }
.ft-col-t { font-size:8.5px; letter-spacing:.45em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; }
.ft-list { list-style:none; }
.ft-list li { margin-bottom:9px; }
.ft-list a { color:rgba(250,247,243,.35); font-size:13px; text-decoration:none; transition:color .3s; }
.ft-list a:hover { color:var(--cream); }
.ft-bot { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.ft-copy { font-size:10.5px; color:rgba(250,247,243,.25); letter-spacing:.07em; }
.ft-copy a { color:var(--gold); text-decoration:none; }
.ft-pay { display:flex; gap:7px; }
.ft-pay span { font-size:9.5px; color:rgba(250,247,243,.26); padding:3px 9px; border:1px solid rgba(255,255,255,.07); }
@media(max-width:960px){ .ft-top{grid-template-columns:1fr 1fr;gap:34px} }
@media(max-width:560px){ .ft-top{grid-template-columns:1fr} }

/* ── ANIMATION HELPERS ── */
.anim   { opacity:0; transform:translateY(32px); }
.anim-l { opacity:0; transform:translateX(-32px); }
.anim-r { opacity:0; transform:translateX(32px); }
.anim-s { opacity:0; transform:scale(.95); }
.stagger > * { opacity:0; transform:translateY(24px); }

/* ── EXTRAS (used by about/contact pages) ── */
.mm-line { width:100%; height:1px; background:rgba(201,169,110,.12); margin:16px 0; }
.team-link { display:inline-block; margin-top:13px; font-size:8.5px; letter-spacing:.32em; text-transform:uppercase; color:var(--ash); border-bottom:1px solid rgba(201,169,110,.28); padding-bottom:3px; text-decoration:none; transition:color .3s; }
.team-link:hover { color:var(--gold); }
/* About page story/philosophy anim targets need initial state */
.story-vis, .phil-left, .phil-right, #story .anim-r { opacity:0; transform:translateX(-32px); }
#story .anim-r { transform:translateX(32px); }
.phil-right { transform:translateX(32px); }
/* Contact info panel */
.ct-info, .ct-form-wrap { opacity:0; transform:translateX(-32px); }
.ct-form-wrap { transform:translateX(32px); }