/* ============================================================
   SHREEJI INTERIOR DECOR — Elite Design System v2
   shared.css
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --bg:          #080808;
  --surface:     #111111;
  --surface-alt: #141414;
  --surface-2:   #181818;
  --text:        #F0EDE6;
  --muted:       #6B6B6B;
  --gold:        #C9A84C;
  --gold-dim:    rgba(201,168,76,0.10);
  --gold-glow:   rgba(201,168,76,0.22);
  --border:      rgba(240,237,230,0.07);
  --border-gold: rgba(201,168,76,0.30);
  --font-d:  'Cormorant Garamond', Georgia, serif;
  --font-b:  'DM Sans', system-ui, sans-serif;
  --font-m:  'Courier New', monospace;
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h:   68px;
  --info-h:  36px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--text);
  font-family:var(--font-b); font-weight:300;
  line-height:1.8; overflow-x:hidden; cursor:none;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { cursor:none; background:none; border:none; font-family:inherit; }
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--gold); }

/* ── SCROLL PROGRESS ─────────────────────────────────────── */
#scroll-progress {
  position:fixed; top:0; left:0; height:2px;
  background:var(--gold); z-index:10002;
  width:0%; transition:width 0.1s linear;
  box-shadow:0 0 8px var(--gold-glow);
}

/* ── PRELOADER ───────────────────────────────────────────── */
#preloader {
  position:fixed; inset:0; z-index:20000;
  background:var(--bg);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:32px;
}
#preloader .pre-logo {
  font-family:var(--font-d); font-size:clamp(32px,5vw,56px);
  font-weight:400; letter-spacing:0.4em; text-transform:uppercase;
  color:var(--text); opacity:0;
}
#preloader .pre-logo span { color:var(--gold); }
#preloader .pre-bar {
  width:200px; height:1px;
  background:var(--border);
  position:relative; overflow:hidden;
}
#preloader .pre-fill {
  position:absolute; left:0; top:0; height:100%;
  background:var(--gold); width:0%;
  transition:width 0.8s var(--ease);
}
#preloader .pre-tag {
  font-family:var(--font-m); font-size:10px;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--muted);
}

/* ── FILM GRAIN ──────────────────────────────────────────── */
#grain {
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:9999;
  opacity:0.04; mix-blend-mode:overlay;
}

/* ── CUSTOM CURSOR ───────────────────────────────────────── */
#cursor {
  position:fixed; top:0; left:0;
  width:22px; height:22px;
  border:1.5px solid var(--gold);
  border-radius:50%; pointer-events:none;
  z-index:10000; will-change:transform;
  transition: width .28s var(--ease), height .28s var(--ease),
              background .28s, border-color .28s, opacity .3s;
}
#cursor-dot {
  position:fixed; top:0; left:0;
  width:4px; height:4px;
  background:var(--gold); border-radius:50%;
  pointer-events:none; z-index:10001; will-change:transform;
}
#cursor-label {
  position:fixed; top:0; left:0;
  font-family:var(--font-m); font-size:9px;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--bg); pointer-events:none;
  z-index:10002; white-space:nowrap;
  opacity:0; transform:translate(-50%,-50%);
  transition:opacity .25s;
}
body.cursor-hover #cursor {
  border-color:var(--gold);
  box-shadow:0 0 14px var(--gold-glow);
}
body.cursor-hover #cursor-label { opacity:1; }

/* ── PAGE CURTAIN ────────────────────────────────────────── */
#curtain {
  position:fixed; inset:0; background:#000;
  z-index:9998; transform:scaleY(0);
  transform-origin:bottom; will-change:transform;
  pointer-events:none;
}

/* ── TOP INFO BAR ────────────────────────────────────────── */
.nav-info-bar {
  position:fixed; top:0; left:0; right:0;
  height:var(--info-h); z-index:1001;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px;
  transition:transform 0.4s var(--ease);
}
.nav-info-bar.hide { transform:translateY(-100%); }
.nav-info-bar .info-left {
  font-family:var(--font-m); font-size:10px;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:24px;
}
.nav-info-bar .info-left span { color:var(--gold); }
.nav-info-bar .info-right {
  font-family:var(--font-m); font-size:10px;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--muted);
}
.nav-info-bar .info-right a { color:var(--muted); transition:color .3s; }
.nav-info-bar .info-right a:hover { color:var(--gold); }

/* ── NAVIGATION ──────────────────────────────────────────── */
.site-nav {
  position:fixed; top:var(--info-h); left:0; right:0;
  height:var(--nav-h); z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px;
  transition:background .4s, backdrop-filter .4s, top .4s var(--ease);
}
.site-nav.scrolled {
  background:rgba(8,8,8,0.94);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.site-nav.info-hidden { top:0; }

.nav-logo {
  font-family:var(--font-d); font-size:22px; font-weight:400;
  letter-spacing:0.28em; text-transform:uppercase;
  color:var(--text); transition:color .3s; flex-shrink:0;
}
.nav-logo span { color:var(--gold); }
.nav-logo .logo-sub {
  display:block; font-family:var(--font-m);
  font-size:8px; letter-spacing:0.3em;
  color:var(--muted); margin-top:2px; font-weight:300;
}

.nav-center {
  display:flex; align-items:center; gap:36px; list-style:none;
  position:absolute; left:50%; transform:translateX(-50%);
}
.nav-center a {
  font-family:var(--font-b); font-size:12px; font-weight:400;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted); position:relative; padding-bottom:4px;
  transition:color .3s;
}
.nav-center a::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:1px; background:var(--gold);
  transition:width .35s var(--ease);
}
.nav-center a:hover { color:var(--text); }
.nav-center a:hover::after { width:100%; }
.nav-center a.active { color:var(--text); }
.nav-center a.active::after { width:100%; }

.nav-right { display:flex; align-items:center; gap:20px; }
.nav-cta {
  padding:9px 22px;
  border:1px solid var(--gold);
  font-family:var(--font-b); font-size:11px;
  font-weight:400; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--gold);
  background:transparent; position:relative; overflow:hidden;
  transition:color .35s;
}
.nav-cta::before {
  content:''; position:absolute; inset:0;
  background:var(--gold); transform:scaleX(0);
  transform-origin:left; transition:transform .35s var(--ease);
}
.nav-cta:hover { color:var(--bg); }
.nav-cta:hover::before { transform:scaleX(1); }
.nav-cta span { position:relative; z-index:1; }

/* Hamburger */
.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  padding:8px; z-index:1002;
}
.nav-hamburger span {
  display:block; width:24px; height:1px;
  background:var(--text);
  transition:transform .4s var(--ease), opacity .3s;
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* Mobile Overlay */
.nav-overlay {
  position:fixed; inset:0; background:var(--bg);
  z-index:1001; pointer-events:none; opacity:0;
  display:grid; grid-template-columns:1fr 1fr;
  transition:opacity .4s;
}
.nav-overlay.open { opacity:1; pointer-events:all; }
.nav-overlay-links {
  display:flex; flex-direction:column;
  justify-content:center; padding:80px 64px; gap:8px;
  border-right:1px solid var(--border);
}
.nav-overlay-info {
  display:flex; flex-direction:column;
  justify-content:flex-end; padding:80px 64px;
  gap:32px;
}
.overlay-link {
  font-family:var(--font-d); font-size:clamp(40px,6vw,72px);
  font-weight:300; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.04em;
  opacity:0; transform:translateY(24px);
  transition:color .3s;
  display:flex; align-items:center; gap:16px;
}
.overlay-link .ov-num {
  font-family:var(--font-m); font-size:11px;
  letter-spacing:.2em; color:var(--gold);
  transform:translateY(-4px);
}
.overlay-link:hover { color:var(--text); }
.overlay-info-item { font-size:13px; color:var(--muted); line-height:1.7; }
.overlay-info-item strong { color:var(--text); font-weight:400; display:block; margin-bottom:4px; }
.overlay-info-item a { color:var(--muted); transition:color .3s; }
.overlay-info-item a:hover { color:var(--gold); }

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
.t-label { font-family:var(--font-m); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.t-label-g { font-family:var(--font-m); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.t-body { font-family:var(--font-b); font-weight:300; font-size:15px; line-height:1.9; color:var(--muted); }
.t-muted { color:var(--muted); }
.t-gold  { color:var(--gold); }

/* ── LAYOUT ──────────────────────────────────────────────── */
.container { max-width:1320px; margin:0 auto; padding:0 56px; }
.section-pad { padding:130px 0; }
.page-top { padding-top:calc(var(--info-h) + var(--nav-h)); }

/* ── REVEAL ──────────────────────────────────────────────── */
[data-reveal] { opacity:0; transform:translateY(28px); }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn-ghost {
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 38px; border:1px solid var(--gold);
  font-family:var(--font-b); font-size:12px; font-weight:400;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--gold); background:transparent;
  position:relative; overflow:hidden; transition:color .4s;
}
.btn-ghost::before {
  content:''; position:absolute; inset:0;
  background:var(--gold); transform:scaleX(0);
  transform-origin:left; transition:transform .4s var(--ease);
}
.btn-ghost:hover { color:var(--bg); }
.btn-ghost:hover::before { transform:scaleX(1); }
.btn-ghost span,.btn-ghost svg { position:relative; z-index:1; }
.btn-ghost svg { transition:transform .3s; }
.btn-ghost:hover svg { transform:translateX(5px); }

.btn-gold {
  display:inline-flex; align-items:center; gap:12px;
  padding:17px 44px; background:var(--gold);
  font-family:var(--font-b); font-size:12px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--bg);
  position:relative; overflow:hidden; transition:transform .3s, box-shadow .3s;
}
.btn-gold:hover { transform:translateY(-3px); box-shadow:0 12px 40px var(--gold-glow); }

/* ── SECTION HEADER ─────────────────────────────────────── */
.section-header { margin-bottom:80px; }
.section-header .s-num {
  font-family:var(--font-m); font-size:11px; letter-spacing:.2em;
  color:var(--gold); text-transform:uppercase;
  display:block; margin-bottom:16px;
}
.section-header h2 {
  font-family:var(--font-d);
  font-size:clamp(48px,7vw,96px); font-weight:400;
  line-height:1.0; color:var(--text);
}

/* ── PRODUCT CARD ────────────────────────────────────────── */
.product-card {
  background:var(--surface); position:relative;
  overflow:hidden; display:flex; flex-direction:column;
  border:1px solid var(--border);
  transition:border-color .4s, transform .45s var(--ease), box-shadow .4s;
}
.product-card:hover {
  border-color:var(--gold); transform:translateY(-10px);
  box-shadow:0 24px 64px rgba(201,168,76,0.10);
}
.product-card .card-image { overflow:hidden; aspect-ratio:4/3; position:relative; }
.product-card .card-image img {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.82) saturate(.65);
  transition:transform .65s var(--ease), filter .4s;
}
.product-card:hover .card-image img { transform:scale(1.05); filter:brightness(.9) saturate(.8); }
.product-card .card-body { padding:30px 30px 34px; flex:1; display:flex; flex-direction:column; gap:8px; }
.product-card .card-category { font-family:var(--font-m); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.product-card .card-name { font-family:var(--font-d); font-size:22px; font-weight:400; color:var(--text); line-height:1.2; }
.product-card .card-material { font-size:13px; color:var(--muted); font-weight:300; }
.product-card .card-price {
  font-size:14px; font-weight:400; color:var(--gold);
  margin-top:auto; padding-top:16px; border-top:1px solid var(--border);
}

/* ── MARQUEE ─────────────────────────────────────────────── */
.marquee-track {
  overflow:hidden; border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:20px 0; background:var(--surface);
}
.marquee-inner {
  display:flex; animation:marqueeScroll 30s linear infinite;
  width:max-content;
}
.marquee-inner span {
  font-family:var(--font-m); font-size:11px; letter-spacing:.25em;
  text-transform:uppercase; color:var(--gold);
  padding:0 44px; white-space:nowrap; opacity:.65;
}
.marquee-inner .sep { color:var(--muted); opacity:.35; padding:0; }
@keyframes marqueeScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── SVG NOISE ───────────────────────────────────────────── */
.svg-noise-defs { position:absolute; width:0; height:0; overflow:hidden; }

/* ── FULL FOOTER ─────────────────────────────────────────── */
.site-footer {
  background:var(--surface);
  border-top:1px solid var(--border);
}
.footer-main {
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:64px; padding:80px 56px 64px;
  border-bottom:1px solid var(--border);
}
.footer-brand .footer-logo {
  font-family:var(--font-d); font-size:28px; font-weight:400;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--text); margin-bottom:16px; display:block;
}
.footer-brand .footer-logo span { color:var(--gold); }
.footer-brand p { font-size:13px; color:var(--muted); line-height:1.85; max-width:260px; }
.footer-col h4 {
  font-family:var(--font-m); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold);
  margin-bottom:24px;
}
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
.footer-col ul li a {
  font-size:13px; color:var(--muted);
  transition:color .3s; letter-spacing:.03em;
}
.footer-col ul li a:hover { color:var(--text); }
.footer-bottom {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
  padding:24px 56px;
}
.footer-copy { font-size:12px; color:var(--muted); letter-spacing:.05em; }
.footer-tagline {
  font-family:var(--font-d); font-size:14px;
  font-style:italic; color:var(--muted);
}

/* ── RESPONSIVE ──────────────────────────────────────────── */

/* 1280px — Large tablet / small desktop */
@media (max-width:1280px) {
  .container { max-width:100%; }
  .footer-main { gap:40px; }
}

/* 1100px — Compact desktop */
@media (max-width:1100px) {
  .nav-center { gap:20px; }
  .nav-center a { font-size:11px; }
  .footer-main { grid-template-columns:1.2fr 1fr 1fr 1fr; gap:32px; }
}

/* 900px — Tablet / mobile */
@media (max-width:900px) {
  :root { --nav-h:60px; --info-h:0px; }

  /* Nav */
  .nav-info-bar { display:none; }
  .site-nav { top:0; padding:0 20px; }
  .nav-center { display:none; }
  .nav-hamburger { display:flex; }
  .nav-cta { display:none; }
  .nav-logo { font-size:18px; letter-spacing:.2em; }
  .logo-sub { display:none; }

  /* Mobile overlay */
  .nav-overlay { grid-template-columns:1fr; }
  .nav-overlay-info { display:none; }
  .nav-overlay-links { padding:80px 32px 60px; gap:4px; }
  .overlay-link { font-size:clamp(32px,8vw,52px); }

  /* Layout */
  .container { padding:0 20px; }
  .section-pad { padding:80px 0; }

  /* Typography */
  .section-header { margin-bottom:56px; }
  .section-header h2 { font-size:clamp(36px,8vw,64px); }

  /* Buttons */
  .btn-ghost { padding:13px 28px; font-size:11px; }
  .btn-gold  { padding:14px 32px; font-size:11px; }

  /* Product card */
  .product-card .card-body { padding:20px 20px 24px; }
  .product-card .card-name { font-size:19px; }

  /* Marquee */
  .marquee-inner span { padding:0 28px; font-size:10px; }

  /* Footer */
  .footer-main { grid-template-columns:1fr 1fr; gap:36px; padding:48px 20px 40px; }
  .footer-bottom { padding:18px 20px; flex-direction:column; align-items:flex-start; gap:8px; }
  .footer-tagline { display:none; }
}

/* 600px — Mobile portrait */
@media (max-width:600px) {
  :root { --nav-h:56px; }

  /* Nav */
  .site-nav { padding:0 16px; }
  .nav-logo { font-size:16px; letter-spacing:.18em; }
  .nav-overlay-links { padding:72px 24px 48px; }
  .overlay-link { font-size:clamp(28px,9vw,44px); gap:10px; }
  .overlay-link .ov-num { font-size:9px; }

  /* Layout */
  .container { padding:0 16px; }
  .section-pad { padding:60px 0; }

  /* Section header */
  .section-header { margin-bottom:40px; }
  .section-header h2 { line-height:1.05; }

  /* Buttons — full width on very small screens */
  .btn-ghost,.btn-gold { width:100%; justify-content:center; }

  /* Product card */
  .product-card .card-image { aspect-ratio:16/10 !important; }

  /* Footer */
  .footer-main { grid-template-columns:1fr; gap:28px; padding:40px 16px 32px; }
  .footer-brand p { max-width:100%; }
  .footer-col h4 { margin-bottom:16px; }
  .footer-bottom { padding:16px; }

  /* Marquee */
  .marquee-track { padding:14px 0; }
  .marquee-inner span { font-size:9px; padding:0 20px; }

  /* Preloader */
  #preloader .pre-logo { font-size:clamp(24px,8vw,40px); }
}

/* 400px — Small mobile */
@media (max-width:400px) {
  .site-nav { padding:0 12px; }
  .container { padding:0 12px; }
  .section-pad { padding:48px 0; }
  .nav-overlay-links { padding:64px 16px 40px; }
}