/* ============================================================
   NOVRE · A Standard of Taste
   Design system :: noir espresso + vivid amber gold
   (layout & motion DNA adapted from the Stellarshell system)
   ============================================================ */

:root{
  --bg:#1A110A;
  --bg-2:#221711;
  --surface:rgba(253,246,234,0.05);
  --surface-hover:rgba(240,184,82,0.08);
  --border:rgba(253,246,234,0.13);
  --border-hover:rgba(240,184,82,0.7);
  --heading:#FDF6EA;
  --text-soft:#EBDCC6;
  --text-muted:#B7A084;
  --gold:#F0B852;
  --gold-deep:#C9862B;
  --gold-soft:#F7D08A;
  --crimson:#FF3B5C;
  --crimson-deep:#D62246;
  --copper:#D62246;
  --copper-deep:#B01B3A;
  --ember:#F7D08A;
  /* RGB triplets for Tailwind theme-aware utilities (alpha via <alpha-value>) */
  --gold-rgb:240 184 82;
  --gold-deep-rgb:201 134 43;
  --gold-soft-rgb:247 208 138;
  --crimson-rgb:255 59 92;
  --crimson-deep-rgb:214 34 70;
  --ember-rgb:247 208 138;
  --glass-blur:14px;
  --orb-opacity:0.75;
  --grid-line:rgba(240,184,82,0.06);
  --topbar-bg:rgba(26,17,10,0.55);
  --mobilemenu-bg:rgba(26,17,10,0.97);
  --btn-text:#231303;
  color-scheme:dark;
}

html.light{
  --bg:#FAF3E7;
  --bg-2:#F2E7D3;
  --surface:rgba(43,27,13,0.04);
  --surface-hover:rgba(180,126,28,0.08);
  --border:rgba(43,27,13,0.12);
  --border-hover:rgba(180,126,28,0.7);
  --heading:#2B1B0D;
  --text-soft:#57422B;
  --text-muted:#8B7357;
  --gold:#8F6A1C;
  --gold-deep:#6E5212;
  --gold-soft:#A2761F;
  --crimson:#C41030;
  --crimson-deep:#9E0B26;
  --copper:#C41030;
  --copper-deep:#9E0B26;
  --ember:#A2761F;
  /* deep bronze triplets: no saffron on the bright theme */
  --gold-rgb:143 106 28;
  --gold-deep-rgb:110 82 18;
  --gold-soft-rgb:162 118 31;
  --crimson-rgb:196 16 48;
  --crimson-deep-rgb:158 11 38;
  --ember-rgb:162 118 31;
  --orb-opacity:0.5;
  --grid-line:rgba(43,27,13,0.05);
  --topbar-bg:rgba(250,243,231,0.6);
  --mobilemenu-bg:rgba(250,243,231,0.97);
  --btn-text:#FDF6EA;
  color-scheme:light;
}

*{ -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--text-soft);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
  transition:background .45s ease, color .45s ease;
}
::selection{ background:rgba(255,185,59,.45); color:#1E1002; }

.text-heading{ color:var(--heading); }
.text-soft{ color:var(--text-soft); }
.text-muted2{ color:var(--text-muted); }
.text-gold{ color:var(--gold); }
.text-crimson{ color:var(--crimson); }

/* crimson accent system: brand glyph ✦, scarcity badges, guardrails, required marks */
.chip-crimson{ color:var(--crimson); border-color:color-mix(in srgb,var(--crimson) 55%,transparent); background:rgba(255,59,92,.09); }
html.light .chip-crimson{ background:rgba(196,16,48,.06); }
html.light .icon-badge{ background:rgba(143,106,28,.12); border-color:rgba(143,106,28,.38); }
html.light .btn-grad{ box-shadow:0 12px 30px -14px rgba(143,106,28,.5); }
.chip-crimson:hover{ border-color:var(--crimson); }
.sum-marker{ transition:transform .3s ease; color:var(--crimson); }
details[open] .sum-marker{ transform:rotate(45deg); }

/* vivid gradient accent text: ember gold into crimson */
.grad-text{
  background:linear-gradient(100deg,var(--gold-soft) 0%,var(--gold) 40%,var(--crimson) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,120,70,.22));
}
html.light .grad-text{ filter:none; }

.font-display{ font-family:'Fraunces',serif; }

/* ---------- glass surfaces ---------- */
.glass{ background:var(--surface); border:1px solid var(--border); backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur)); }
.glass-hover{ transition:all .35s cubic-bezier(.2,.7,.3,1); }
.glass-hover:hover{ transform:translateY(-6px); border-color:var(--border-hover); background:var(--surface-hover); box-shadow:0 30px 64px -20px rgba(0,0,0,.6), 0 0 34px -6px rgba(255,170,40,.22); }
html.light .glass-hover:hover{ box-shadow:0 30px 60px -26px rgba(120,75,10,.3), 0 0 30px -8px rgba(143,106,28,.22); }

.icon-badge{ background:rgba(255,185,59,.14); border:1px solid rgba(255,185,59,.42); }
html.light .icon-badge{ background:rgba(200,134,10,.12); border-color:rgba(200,134,10,.38); }

/* ---------- buttons ---------- */
.btn-grad{
  background:linear-gradient(120deg,var(--gold-soft) 0%,var(--gold) 55%,var(--gold-deep) 100%);
  color:var(--btn-text);
  transition:all .25s ease;
  box-shadow:0 12px 34px -10px rgba(255,160,40,.6);
}
.btn-grad:hover{ transform:translateY(-2px); box-shadow:0 20px 46px -10px rgba(255,160,40,.75); filter:brightness(1.06); }
.btn-outline{
  border:1px solid var(--border);
  color:var(--heading);
  transition:all .25s ease;
}
.btn-outline:hover{ border-color:var(--border-hover); background:var(--surface-hover); transform:translateY(-2px); }

/* ---------- hero / ambient ---------- */
.orb{ position:absolute; border-radius:9999px; filter:blur(90px); pointer-events:none; opacity:var(--orb-opacity); }
.grid-bg{
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 30%,transparent 75%);
}
.float-slow{ animation:floaty 6s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }
.spin-slower{ animation:spin 40s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }

.steam path{ stroke-dasharray:6 10; animation:steamflow 5s linear infinite; }
@keyframes steamflow{ to{ stroke-dashoffset:-64; } }

/* ---------- ticker ---------- */
.ops-ticker{ position:relative; overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-2); }
.ops-ticker-track{ display:flex; width:max-content; animation:tick 42s linear infinite; white-space:nowrap; }
.ops-ticker:hover .ops-ticker-track{ animation-play-state:paused; }
@keyframes tick{ to{ transform:translateX(-50%); } }

/* ---------- hero swiper ---------- */
.hero-swiper{ overflow:hidden; }
.hero-swiper .swiper-pagination{ position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:20; display:flex; gap:.5rem; }
.hero-swiper .swiper-pagination-bullet{ width:1.75rem; height:.3rem; border-radius:99px; background:var(--text-muted); opacity:.4; transition:all .3s ease; }
.hero-swiper .swiper-pagination-bullet-active{ opacity:1; background:var(--gold); width:2.5rem; box-shadow:0 0 12px rgba(255,170,40,.8); }
.hero-swiper .swiper-button-next,.hero-swiper .swiper-button-prev{
  width:2.75rem; height:2.75rem; border-radius:9999px; background:var(--surface); border:1px solid var(--border);
  backdrop-filter:blur(var(--glass-blur)); color:var(--heading); top:50%; transform:translateY(-50%);
}
.hero-swiper .swiper-button-next{ right:1.25rem; }
.hero-swiper .swiper-button-prev{ left:1.25rem; }
.hero-swiper .swiper-button-next:after,.hero-swiper .swiper-button-prev:after{ font-size:1rem; font-weight:700; }
.hero-swiper .swiper-button-next:hover,.hero-swiper .swiper-button-prev:hover{ border-color:var(--border-hover); }

/* content is visible by default; rise animation is pure enhancement
   (never hide hero copy behind JS state) */
@keyframes rise{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:translateY(0);} }
.swiper-slide-active .hero-anim{ animation:rise .8s .15s cubic-bezier(.2,.7,.3,1) both; }
.swiper-slide-active .hero-anim-2{ animation:rise .8s .3s cubic-bezier(.2,.7,.3,1) both; }
.swiper-slide-active .hero-anim-3{ animation:rise .8s .45s cubic-bezier(.2,.7,.3,1) both; }

/* ---------- header ---------- */
.topbar{ background:var(--topbar-bg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
.site-header{ position:sticky; top:0; z-index:50; transition:all .35s ease; border-bottom:1px solid transparent; }
.site-header.scrolled{ background:color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom-color:var(--border); }
.nav-link{ position:relative; color:var(--text-soft); font-weight:500; font-size:.9rem; transition:color .25s ease; padding:.35rem 0; }
.nav-link:hover,.nav-link.active{ color:var(--heading); }
.nav-link.active::after{ content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--gold),var(--crimson)); box-shadow:0 0 8px rgba(255,170,40,.7); }

/* ---------- misc ---------- */
.divider-fade{ height:1px; background:linear-gradient(90deg,transparent,var(--border-hover),transparent); }
.num-chip{ font-family:'Fraunces',serif; font-style:italic; color:var(--gold); }
.chip-note{ background:var(--surface); border:1px solid var(--border); border-radius:9999px; padding:.3rem .75rem; font-size:.72rem; letter-spacing:.04em; }

/* ---------- custom order builder options ---------- */
.opt{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-soft);
  border-radius:9999px;
  padding:.55rem 1.15rem;
  font-size:.85rem;
  font-weight:500;
  cursor:pointer;
  transition:all .22s ease;
}
.opt:hover{ border-color:var(--border-hover); color:var(--heading); }
.opt.selected{
  background:color-mix(in srgb,var(--gold) 16%,transparent);
  border-color:var(--gold);
  color:var(--heading);
  font-weight:600;
  box-shadow:0 6px 18px -8px color-mix(in srgb,var(--gold) 55%,transparent);
}
.opt:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
input,textarea,select{ color:var(--heading); }
input::placeholder,textarea::placeholder{ color:var(--text-muted); }
.field{ background:var(--surface); border:1px solid var(--border); border-radius:.9rem; transition:border-color .25s ease, background .25s ease; }
.field:focus{ outline:none; border-color:var(--border-hover); background:var(--surface-hover); }

/* scroll reveals are progressive enhancement; novre.js force-reveals
   anything AOS hasn't animated within 1.2s */

@media (prefers-reduced-motion:reduce){
  .float-slow,.spin-slower,.ops-ticker-track,.steam path{ animation:none !important; }
}