/* =========================================================
   ALPHA — theme-v6.css · "Sovereign" layer
   Loads LAST (after v5). Pure luxe polish; no duplicate motion.
   Rules: transform/opacity-only · lite/reduced guarded · RTL ·
   dark-aware · zero new requests. main.js owns .scrolled;
   styles.css owns .btn-gold shine; theme-v3 owns hero shimmer.
   ========================================================= */

/* ---------- 0) Token refinements ---------- */
:root{
  --gold-foil: linear-gradient(105deg,#8a6a1f 0%,#c9a227 18%,#f6e4a8 38%,#fff8dc 50%,#f6e4a8 62%,#c9a227 82%,#8a6a1f 100%);
  --shadow-luxe: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06), 0 24px 64px rgba(154,123,21,.10);
  --ring-gold: 0 0 0 3px rgba(201,162,39,.22);
}

/* ---------- 1) Global luxe details ---------- */
::selection{ background:rgba(201,162,39,.28); color:var(--ink); }
:focus-visible{ outline:none; box-shadow:var(--ring-gold); border-radius:8px; }

@media (pointer:fine){
  ::-webkit-scrollbar{ width:11px; }
  ::-webkit-scrollbar-track{ background:var(--bg); }
  ::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#d8b03f,#a98517);
    border-radius:99px; border:3px solid var(--bg);
  }
  ::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#e8c474,#c9a227); }
}

/* ---------- 2) Headings — deep rich gold (readable on light bg, no near-white stops).
     Hero h1 + offer-month keep their bright treatment via later/stronger rules. ---------- */
h2 .gold-text, .mani-text .gold-text, .stats-band .gold-text{
  background:linear-gradient(110deg,#7a5d18 0%,#a97f15 25%,#d8b03f 50%,#b8901f 75%,#8a6a1f 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:100% 100%; background-position:0 0;
  animation:none;
}
/* chapters sit on a DARK video stage — bright gold there */
.chapter h2 .gold-text{
  background:linear-gradient(110deg,#d8b03f 0%,#f6e4a8 35%,#ffedb0 50%,#e8c474 70%,#c9a227 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- 3) Hero — sovereign eyebrow pill ---------- */
.hero-h1{ text-wrap:balance; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 18px; border-radius:999px;
  border:1px solid rgba(201,162,39,.35);
  background:linear-gradient(120deg,rgba(255,255,255,.75),rgba(246,228,168,.28));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 4px 18px rgba(154,123,21,.10), inset 0 1px 0 rgba(255,255,255,.7);
  font-weight:700;
}
.hero-eyebrow::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 0 rgba(201,162,39,.55);
  animation:pulseDot 2.4s ease-out infinite;
}
@keyframes pulseDot{
  0%{ box-shadow:0 0 0 0 rgba(201,162,39,.55); }
  70%{ box-shadow:0 0 0 9px rgba(201,162,39,0); }
  100%{ box-shadow:0 0 0 0 rgba(201,162,39,0); }
}
html.reduced .hero-eyebrow::before{ animation:none; }

/* ---------- 4) Header — gold hairline when scrolled ---------- */
.site-header::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(201,162,39,.55),transparent);
  opacity:0; transition:opacity .4s var(--out);
}
.site-header.scrolled::after{ opacity:1; }
.site-header.scrolled{
  -webkit-backdrop-filter:blur(22px) saturate(1.7); backdrop-filter:blur(22px) saturate(1.7);
}

/* ---------- 5) Cards — gold-thread border on hover + shine on products ---------- */
.product::after, .feature::after, .bento-cell::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:1px;
  background:linear-gradient(135deg,rgba(246,228,168,.9),rgba(201,162,39,.55) 40%,rgba(169,133,23,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s var(--out);
}
@media (pointer:fine){
  .product:hover::after, .feature:hover::after, .bento-cell:hover::after{ opacity:1; }
  .product:hover, .feature:hover{ box-shadow:var(--shadow-luxe); }
}

.product::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.32) 48%,rgba(255,248,220,.5) 52%,transparent 68%);
  background-size:260% 100%; background-position:130% 0; background-repeat:no-repeat;
  opacity:0; z-index:1;
}
@media (pointer:fine){
  .product:hover::before{ opacity:1; animation:shinePass .9s var(--out) 1; }
}
@keyframes shinePass{ from{ background-position:130% 0; } to{ background-position:-40% 0; } }
html.reduced .product::before{ display:none; }

/* ---------- 6) Gold buttons — deeper metal + tactile press ---------- */
.btn-gold{
  box-shadow:0 2px 6px rgba(154,123,21,.28), 0 10px 26px rgba(154,123,21,.24), inset 0 1px 0 rgba(255,248,220,.55);
}
.btn-gold:active{ transform:translateY(-1px) scale(.97); }

/* ---------- 7) Section heads — kicker line + underline draw ---------- */
.kicker{ display:inline-flex; align-items:center; gap:8px; }
.kicker::before{
  content:""; width:14px; height:2px; border-radius:2px;
  background:var(--gold-grad); flex:none;
}
.section-head h2{ position:relative; padding-bottom:16px; }
.section-head h2::after{
  content:""; position:absolute; left:50%; bottom:0; width:64px; height:3px; border-radius:3px;
  margin-left:-32px;
  background:var(--gold-grad);
  transform:scaleX(0); transform-origin:center;
  transition:transform .8s var(--out) .25s;
}
.section-head.in h2::after{ transform:scaleX(1); }
html.reduced .section-head h2::after{ transform:scaleX(1) !important; }

/* ---------- 8) Reveal — cinematic blur rise (desktop, non-reduced) ---------- */
@media (pointer:fine) and (min-width:821px){
  html:not(.reduced) .reveal{
    filter:blur(9px);
    transition:opacity var(--t-slow) var(--out), transform var(--t-slow) var(--spring), filter .7s var(--out);
  }
  html:not(.reduced) .reveal.in{ filter:blur(0); }
}

/* ---------- 9) Stats band — royal glass ---------- */
.stats-band{
  position:relative;
  border:1px solid rgba(201,162,39,.22);
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(251,251,253,.75));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:var(--shadow-luxe);
}
.stats-band::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(246,228,168,.9),transparent);
}

/* ---------- 10) Marquee — soft edge mask ---------- */
.marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}

/* ---------- 11) Product modal — sovereign frame ---------- */
#product-modal .modal-card, .modal-card, .modal-panel{
  border:1px solid rgba(201,162,39,.30);
  box-shadow:0 8px 24px rgba(0,0,0,.12), 0 48px 120px rgba(0,0,0,.28), 0 0 0 8px rgba(201,162,39,.05);
}

/* ---------- 12) Cart FAB — breathing gold + magnet ---------- */
#cart-fab{ box-shadow:0 6px 18px rgba(154,123,21,.30), 0 18px 48px rgba(154,123,21,.26); }
@media (pointer:fine) and (min-width:821px){
  html:not(.reduced) #cart-fab:not(:hover){ animation:fabBreath 3.6s ease-in-out infinite; }
  [data-magnet]{
    transform:translate(calc(var(--mx,0) * 1px), calc(var(--my,0) * 1px));
    transition:transform .25s var(--out);
    will-change:transform;
  }
}
@keyframes fabBreath{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}

/* ---------- 13) Trust chips — soft gold hover ---------- */
.trust .t{ transition:transform var(--t-fast) var(--out), box-shadow var(--t-fast); }
@media (pointer:fine){
  .trust .t:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(154,123,21,.14); }
}

/* ---------- 14) Dark theme harmony ---------- */
[data-theme="dark"] .hero-eyebrow{
  background:linear-gradient(120deg,rgba(28,26,20,.7),rgba(74,60,20,.30));
  border-color:rgba(216,176,63,.4);
}
[data-theme="dark"] .stats-band{
  background:linear-gradient(180deg,rgba(30,30,32,.85),rgba(24,24,26,.75));
  border-color:rgba(216,176,63,.28);
}
[data-theme="dark"] ::selection{ color:#fff; }

/* ---------- 15) Reduced motion — hard stop ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-eyebrow::before{ animation:none !important; }
  #cart-fab{ animation:none !important; }
  .reveal{ filter:none !important; }
  .product::before{ display:none !important; }
  .section-head h2::after{ transform:scaleX(1) !important; transition:none !important; }
}