/* ===================================================
   ATELIER — Premium Café Template Portfolio
   =================================================== */

/* ── TOKENS ──────────────────────────────────────── */
:root {
  --bg:       #07070A;
  --bg2:      #0F0F12;
  --bg3:      #161619;
  --bg4:      #1E1E22;
  --fg:       #F2ECE3;
  --fg2:      #C8C0B4;
  --muted:    #6E6760;
  --muted2:   #3A3730;
  --border:   rgba(242,236,227,.07);
  --border2:  rgba(242,236,227,.13);

  --gold:     #C9A96E;
  --gold-lt:  #E4C99A;
  --gold-dk:  #9A7A3E;
  --terra:    #C87941;
  --terra-lt: #E5A970;
  --cream:    #FDFAF4;
  --espresso: #1E1509;

  --ff-d: 'Playfair Display', Georgia, serif;
  --ff-e: 'Cormorant Garamond', 'Times New Roman', serif;
  --ff-b: 'Inter', -apple-system, sans-serif;

  --eo: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(0,0,.2,1);

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;

  --shadow-dark: 0 40px 120px rgba(0,0,0,.7);
  --shadow-card: 0 24px 80px rgba(0,0,0,.5);
  --shadow-gold: 0 20px 60px rgba(201,169,110,.15);
}

/* ── RESET ───────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family:var(--ff-b);
  background:var(--bg);
  color:var(--fg);
  overflow-x:hidden;
  cursor:none;
}
img  { display:block; max-width:100%; }
a    { text-decoration:none; color:inherit; }
ul   { list-style:none; }
button { font-family:inherit; cursor:none; border:none; background:none; }

/* ── FILM GRAIN ───────────────────────────────────── */
body::after {
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9990;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── CUSTOM CURSOR ────────────────────────────────── */
#cur-dot {
  position:fixed; top:0; left:0;
  width:8px; height:8px;
  background:var(--gold);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  transition:background .2s;
}
#cur-ring {
  position:fixed; top:0; left:0;
  width:38px; height:38px;
  border:1.5px solid rgba(201,169,110,.5);
  border-radius:50%;
  pointer-events:none;
  z-index:9998;
  transform:translate(-50%,-50%);
  transition:width .3s var(--eo), height .3s var(--eo), opacity .3s, border-color .3s;
}
body.hov #cur-ring {
  width:60px; height:60px;
  opacity:.25;
  border-color:var(--fg);
}

/* ── LOADER ───────────────────────────────────────── */
#loader {
  position:fixed; inset:0;
  background:var(--bg);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  z-index:10000;
  transition:opacity .7s var(--eo), visibility .7s;
}
#loader.done { opacity:0; visibility:hidden; }
.ld-wordmark {
  font-family:var(--ff-b);
  font-size:.72rem;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:48px;
}
.ld-bar-wrap {
  width:160px; height:1px;
  background:var(--bg4);
}
.ld-bar {
  height:100%;
  background:var(--gold);
  width:0;
  animation:ldGrow 1.6s var(--eo) forwards;
}
@keyframes ldGrow { to { width:100%; } }
.ld-pct {
  font-family:var(--ff-d);
  font-size:4.5rem;
  font-weight:700;
  color:var(--bg3);
  margin-top:28px;
  letter-spacing:-.02em;
  line-height:1;
  user-select:none;
}

/* ── NAV ──────────────────────────────────────────── */
#nav {
  position:fixed; top:0; left:0; right:0;
  z-index:900;
  height:72px;
  padding:0 48px;
  display:flex; align-items:center; justify-content:space-between;
  transition:background .4s var(--eo), backdrop-filter .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
#nav.scrolled {
  background:rgba(7,7,10,.82);
  backdrop-filter:blur(20px) saturate(120%);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  border-bottom-color:var(--border);
}
.nav-logo {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.nav-logo span { color:var(--gold); }
.nav-ctas { display:flex; gap:12px; align-items:center; }
.nav-link {
  font-family:var(--ff-b);
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fg);
  transition:color .2s;
  padding:4px 0;
}
.nav-link:hover { color:var(--fg); }
.nav-sep { width:1px; height:16px; background:var(--border2); }
.nav-preview-d {
  font-family:var(--ff-b);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:9px 20px;
  background:var(--bg4);
  color:var(--fg2);
  border:1px solid var(--border2);
  border-radius:var(--r-sm);
  transition:background .2s, border-color .2s, color .2s;
}
.nav-preview-d:hover { background:var(--bg3); border-color:var(--gold); color:var(--gold); }
.nav-preview-l {
  font-family:var(--ff-b);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:9px 20px;
  background:var(--gold);
  color:var(--bg);
  border-radius:var(--r-sm);
  transition:background .2s;
}
.nav-preview-l:hover { background:var(--gold-lt); }
#nav-burger {
  display:none; flex-direction:column; gap:5px;
  cursor:none; padding:8px;
}
#nav-burger span {
  display:block; width:22px; height:1.5px;
  background:var(--fg); border-radius:2px;
  transition:transform .35s var(--eo), opacity .25s;
}
#nav-burger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
#nav-burger.open span:nth-child(2) { opacity:0; }
#nav-burger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
#mob-nav {
  position:fixed; inset:0;
  background:var(--bg2);
  z-index:800;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:32px;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .55s var(--eo);
}
#mob-nav.open { clip-path:inset(0 0 0% 0); }
#mob-nav a {
  font-family:var(--ff-d);
  font-size:clamp(1.8rem,5vw,2.8rem);
  color:var(--fg2);
  letter-spacing:.04em;
  transition:color .2s;
}
#mob-nav a:hover { color:var(--gold); }

/* ── LAYOUT ───────────────────────────────────────── */
.ctr { max-width:1300px; margin:0 auto; padding:0 48px; }

/* ── TAGS / LABELS ────────────────────────────────── */
.tag {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-b);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  padding:6px 14px;
  border:1px solid var(--border2);
  border-radius:99px;
  color:var(--muted);
}
.tag.gold { border-color:rgba(201,169,110,.25); color:var(--gold); }
.tag::before {
  content:'';
  width:5px; height:5px;
  background:currentColor;
  border-radius:50%;
}

/* ── SECTION LABEL ────────────────────────────────── */
.s-label {
  font-family:var(--ff-b);
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
  display:block;
  margin-bottom:14px;
}

/* ── DIVIDER ──────────────────────────────────────── */
.divider {
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.18;
}

/* ── SCROLL REVEAL ────────────────────────────────── */
.rv  { opacity:0; transform:translateY(40px);  transition:opacity .85s var(--eo), transform .85s var(--eo); }
.rvl { opacity:0; transform:translateX(-40px); transition:opacity .85s var(--eo), transform .85s var(--eo); }
.rvr { opacity:0; transform:translateX(40px);  transition:opacity .85s var(--eo), transform .85s var(--eo); }
.rvs { opacity:0; transform:scale(.95);        transition:opacity .85s var(--eo), transform .85s var(--eo); }
.rv.in,.rvl.in,.rvr.in,.rvs.in { opacity:1; transform:none; }

/* ── BUTTONS ──────────────────────────────────────── */
.btn-gold {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-b);
  font-size:.78rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  padding:16px 36px;
  background:var(--gold);
  color:var(--bg);
  border-radius:var(--r-sm);
  transition:background .25s, transform .2s, box-shadow .25s;
}
.btn-gold:hover {
  background:var(--gold-lt);
  transform:translateY(-2px);
  box-shadow:var(--shadow-gold);
}
.btn-outline {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-b);
  font-size:.78rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  padding:15px 34px;
  background:transparent;
  color:var(--fg2);
  border:1px solid var(--border2);
  border-radius:var(--r-sm);
  transition:background .25s, border-color .25s, color .25s, transform .2s;
}
.btn-outline:hover {
  background:var(--bg3);
  border-color:rgba(201,169,110,.4);
  color:var(--gold);
  transform:translateY(-2px);
}
.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-b);
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  border-bottom:1px solid rgba(201,169,110,.3);
  padding-bottom:3px;
  transition:gap .3s var(--eo), border-color .25s;
}
.btn-ghost:hover { gap:14px; border-color:var(--gold); }

/* ── BROWSER FRAME ────────────────────────────────── */
.browser {
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:var(--shadow-dark);
  border:1px solid var(--border);
}
.browser-chrome {
  background:var(--bg3);
  padding:10px 14px;
  display:flex; align-items:center; gap:8px;
  border-bottom:1px solid var(--border);
}
.b-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.b-dot:nth-child(1) { background:#FF5F57; }
.b-dot:nth-child(2) { background:#FEBC2E; }
.b-dot:nth-child(3) { background:#28C840; }
.browser-url {
  flex:1;
  font-family:var(--ff-b);
  font-size:.7rem;
  color:var(--muted);
  background:var(--bg4);
  border-radius:4px;
  padding:5px 12px;
  margin:0 8px;
}
.browser-img {
  width:100%;
  display:block;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:top;
}

/* ── FOOTER ───────────────────────────────────────── */
footer {
  border-top:1px solid var(--border);
  padding:40px 0;
}
.ft-inner {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:20px;
}
.ft-logo {
  font-family:var(--ff-b);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fg);
}
.ft-logo span { color:var(--gold); }
.ft-copy {
  font-family:var(--ff-b);
  font-size:.78rem;
  color:var(--fg);
}
.ft-links { display:flex; gap:28px; }
.ft-links a {
  font-family:var(--ff-b);
  font-size:.76rem;
  color:var(--fg);
  transition:color .2s;
}
.ft-links a:hover { color:var(--gold); }
.ft-top-link { color:var(--gold) !important; }
.ft-top-link:hover { opacity:.75; }

/* ── RESPONSIVE ───────────────────────────────────── */
@media(max-width:960px) {
  .ctr { padding:0 28px; }
  #nav { padding:0 28px; }
  .nav-ctas, .nav-link, .nav-sep { display:none; }
  #nav-burger { display:flex; }
  .ft-inner { flex-direction:column; align-items:flex-start; gap:16px; }
  .ft-links { flex-wrap:wrap; gap:16px; }
}
@media(max-width:600px) {
  .ctr { padding:0 18px; }
  #nav { padding:0 18px; height:64px; }
  /* make all buttons full-width on very small screens */
  .btn-gold, .btn-outline { width:100%; justify-content:center; }
}
/* prevent horizontal scroll on all screens */
body { max-width:100vw; }
img, video, iframe { max-width:100%; }
@media(max-width:480px) {
  #mob-nav a { font-size:1.8rem; }
}