/* ============================================================
   STYLE.CSS — Design tokens & base components
   ============================================================ */
:root{
  --black: #0a0a0a;
  --charcoal: #171614;
  --ink: #1a1a1a;
  --white: #ffffff;
  --cream: #f7f4ef;
  --sand: #ece6db;
  --gold: #c9a962;
  --gold-light: #e4cd94;
  --gold-deep: #8a6a2f;
  --gray: #8a8578;
  --line: rgba(10,10,10,0.08);
  --line-dark: rgba(247,244,239,0.12);
}

.bg-gold-section{ background:linear-gradient(160deg, var(--gold-deep), var(--gold) 55%, var(--gold-deep)); }
.bg-gold-base{ background:linear-gradient(160deg, var(--gold-light), var(--gold) 70%); }

/* white glow flash when a bordered/frame element is pressed */
.frame:active, .btn:active, .qa-btn:active, .glass:active, .faq-item:active,
.cart-row:active, .form-field:active, .size-option:active, .color-option:active,
.product-card:active .frame, .active-glow:active, .icon-btn:active{
  box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 0 26px rgba(255,255,255,0.7) !important;
  transition: box-shadow 0.15s ease;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:auto; } /* Lenis handles smooth scroll */
body{
  background:#654520;
  color:var(--white);
  font-family:'Inter', sans-serif;
  overflow-x:hidden;
  cursor:none;
}
@media (max-width:1024px){ body{ cursor:auto; } }

::selection{ background:var(--gold); color:var(--black); }
a{ color:inherit; text-decoration:none; }

.font-display{ font-family:'Fraunces', serif; }
.font-mono{ font-family:'JetBrains Mono', monospace; }

.text-gold{ color:var(--gold); }
.bg-black{ background:var(--black); }
.bg-cream{ background:var(--cream); }

.eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--gold);
}

.text-black{ color:#f5ead2 !important; }
.text-gray-300,.text-gray-400,.text-gray-500,.text-gray-600,.text-gray-700{ color:#d9c2a0 !important; }
.border-gray-200{ border-color:rgba(212,175,55,0.4) !important; }

/* ============================================================ CURSOR ============================================================ */
.cursor-dot{ position:fixed; top:0; left:0; width:6px; height:6px; border-radius:50%; background:var(--black); pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:background 0.3s; }
.cursor-ring{ position:fixed; top:0; left:0; width:36px; height:36px; border-radius:50%; border:1px solid rgba(10,10,10,0.35); pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:width 0.25s,height 0.25s,border-color 0.25s,background 0.25s; }
.cursor-ring.on-dark{ border-color:rgba(247,244,239,0.5); }
.cursor-dot.on-dark{ background:var(--white); }
.cursor-ring.product{ width:90px; height:90px; border-color:var(--gold); background:rgba(201,169,98,0.08); }
.cursor-ring.btn{ width:52px; height:52px; background:var(--gold); border-color:var(--gold); mix-blend-mode:difference; }
@media(max-width:1024px){ .cursor-dot,.cursor-ring{ display:none; } }

.bg-black{ background:#654520 !important; }
.bg-gold-section{ background:#654520 !important; }
.promo-solid{ background:#57391a; }

/* ============================================================ NAV ============================================================ */
.navbar{ position:fixed; top:0; left:0; right:0; z-index:100; padding:1.4rem 4vw; display:flex; align-items:center; justify-content:space-between; transition:background 0.4s,padding 0.4s,box-shadow .4s; }
.navbar.scrolled{ background:rgba(230,211,160,0.9); backdrop-filter:blur(14px); border-bottom:1px solid rgba(10,10,10,0.08); box-shadow:0 4px 30px rgba(0,0,0,0.05); }
.nav-link{ position:relative; font-size:0.82rem; letter-spacing:0.02em; }
.nav-link::after{ content:''; position:absolute; left:0; bottom:-3px; width:0; height:1px; background:currentColor; transition:width 0.3s; }
.nav-link:hover::after{ width:100%; }
.icon-btn{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:background 0.3s; position:relative; }
.icon-btn:hover{ background:rgba(10,10,10,0.06); }
.cart-badge{ position:absolute; top:-2px; right:-2px; width:16px; height:16px; border-radius:50%; background:var(--gold); color:var(--black); font-size:9px; display:flex; align-items:center; justify-content:center; font-weight:700; }

/* ============================================================ BUTTONS ============================================================ */
.btn{ position:relative; display:inline-flex; align-items:center; gap:0.6rem; font-size:0.8rem; letter-spacing:0.05em; padding:1rem 2.2rem; border-radius:100px; overflow:hidden; transition:transform 0.3s ease; }
.btn-dark{ background:var(--black); color:var(--white); }
.btn-gold{ background:linear-gradient(120deg,var(--gold),var(--gold-light)); color:var(--black); }
.btn-outline{ border:1px solid var(--black); color:var(--black); }
.btn-outline.on-dark{ border-color:var(--line-dark); color:var(--white); }
.btn:hover{ transform:translateY(-2px); }
.btn .arrow{ transition:transform 0.3s ease; }
.btn:hover .arrow{ transform:translateX(4px); }
.btn::after{ content:''; position:absolute; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.6); left:var(--rx,50%); top:var(--ry,50%); transform:translate(-50%,-50%) scale(0); pointer-events:none; }
.btn:active::after{ animation:rippleGo 0.6s ease-out; }
@keyframes rippleGo{ to{ transform:translate(-50%,-50%) scale(20); opacity:0; } }

/* ============================================================ GLASS ============================================================ */
.glass{ background:rgba(255,255,255,0.55); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.4); }
.glass-dark{ background:rgba(10,10,10,0.45); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.08); }

/* ===================== GOLD GLOWING FRAME ===================== */
@keyframes goldPulse{ 0%,100%{ box-shadow:0 0 10px rgba(201,169,98,0.4), inset 0 0 0 1.5px var(--gold); } 50%{ box-shadow:0 0 22px rgba(228,205,148,0.75), inset 0 0 0 1.5px var(--gold-light); } }
.product-card .frame, .glass, .glass-dark, .faq-item, .cart-row, .form-field,
.step-dot, .qty-control, .size-option, .color-option, .product-3d-stage,
.gold-frame, .swiper-slide.active-glow, .icon-btn{
  border:1.5px solid var(--gold) !important;
  animation: goldPulse 3s ease-in-out infinite;
}

/* ============================================================ PRODUCT CARD ============================================================ */
.product-card{ position:relative; }
.product-card .frame{ position:relative; aspect-ratio:3/4; border-radius:18px; overflow:hidden; background:var(--sand); }
.product-card .img-primary,.product-card .img-secondary{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity 0.5s ease, transform 0.6s ease; }
.product-card .img-secondary{ opacity:0; }
.product-card:hover .img-primary{ opacity:0; transform:scale(1.06); }
.product-card:hover .img-secondary{ opacity:1; transform:scale(1.06); }
.product-card .frame::after{ content:''; position:absolute; inset:0; border-radius:18px; box-shadow:inset 0 0 0 1px transparent; transition:box-shadow 0.4s ease; }
.product-card:hover .frame::after{ box-shadow:inset 0 0 0 1.5px var(--gold), 0 0 24px rgba(201,169,98,0.25); }
.product-card .badge{ position:absolute; top:12px; left:12px; font-family:'JetBrains Mono',monospace; font-size:0.65rem; letter-spacing:0.08em; padding:0.3rem 0.7rem; border-radius:100px; background:var(--black); color:var(--white); z-index:2; }
.product-card .quick-actions{ position:absolute; bottom:12px; left:12px; right:12px; display:flex; gap:0.5rem; opacity:0; transform:translateY(10px); transition:opacity 0.35s ease, transform 0.35s ease; z-index:2; }
.product-card:hover .quick-actions{ opacity:1; transform:translateY(0); }
.qa-btn{ flex:1; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; gap:0.4rem; font-size:0.72rem; background:rgba(255,255,255,0.92); color:#0a0a0a !important; backdrop-filter:blur(6px); transition:background 0.3s; }
.qa-btn i{ color:#0a0a0a !important; }
.qa-btn:hover{ background:var(--black); color:var(--white); }
.qa-btn.wishlist{ flex:0 0 40px; }
.qa-btn.wishlist.active{ background:var(--gold); color:var(--black); }
.product-card .info{ margin-top:0.9rem; display:flex; justify-content:space-between; align-items:flex-start; }
.product-card .price{ font-family:'JetBrains Mono',monospace; font-size:0.85rem; }
.product-card .price .old{ text-decoration:line-through; color:var(--gray); margin-right:0.4rem; font-size:0.75rem; }

/* Layer reveal for product card (background > product > shadow > badge > price > button) */
.layer-fx{ opacity:0; transform:translateY(24px); transition:opacity 0.6s ease, transform 0.6s ease; }
.layer-fx.in{ opacity:1; transform:translateY(0); }

/* ============================================================ IMAGE REVEAL (mask) ============================================================ */
.mask-reveal{ position:relative; overflow:hidden; }
.mask-reveal img{ transform:scale(1.25); opacity:0; transition:transform 1.1s cubic-bezier(.16,.8,.24,1), opacity 0.8s ease; }
.mask-reveal.in img{ transform:scale(1); opacity:1; }
.mask-reveal::before{ content:''; position:absolute; inset:0; background:var(--gold); transform-origin:bottom; z-index:2; transform:scaleY(1); transition:transform 0.9s cubic-bezier(.76,0,.24,1); }
.mask-reveal.in::before{ transform:scaleY(0); }

/* ============================================================ SECTION HEAD ============================================================ */
.sec-head h2{ font-size:clamp(2rem,4.5vw,3.4rem); line-height:1.05; }

/* ============================================================ LOADER ============================================================ */
.loader{ position:fixed; inset:0; z-index:999; background:var(--black); display:flex; align-items:center; justify-content:center; flex-direction:column; transition:opacity 0.7s ease, visibility 0.7s ease; }
.loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-logo{ font-family:'Fraunces',serif; font-size:2rem; color:var(--white); letter-spacing:0.02em; overflow:hidden; }
.loader-bar{ width:200px; height:1px; background:rgba(255,255,255,0.15); margin-top:1.6rem; overflow:hidden; }
.loader-bar-fill{ height:100%; width:0%; background:var(--gold); }
.loader-pct{ font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--gold); margin-top:0.8rem; letter-spacing:0.1em; }

/* ============================================================ SCROLL PROGRESS ============================================================ */
.scroll-progress{ position:fixed; top:0; left:0; height:2px; width:0%; background:var(--gold); z-index:200; }

/* ============================================================ MOBILE BOTTOM NAV ============================================================ */
.bottom-nav{ display:none; }
@media(max-width:768px){
  .bottom-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:100;
    background:rgba(247,244,239,0.92); backdrop-filter:blur(16px);
    border-top:1px solid var(--line); padding:0.7rem 0.5rem env(safe-area-inset-bottom);
    justify-content:space-around;
  }
  .bottom-nav a{ display:flex; flex-direction:column; align-items:center; gap:0.2rem; font-size:0.6rem; color:var(--gray); position:relative; }
  .bottom-nav a.active{ color:var(--black); }
  body{ padding-bottom:70px; }
}

/* ============================================================ FLOATING SEARCH (mobile) ============================================================ */
.floating-search{ display:none; }
@media(max-width:768px){
  .floating-search{ display:flex; position:fixed; bottom:80px; right:16px; z-index:99; width:48px; height:48px; border-radius:50%; background:var(--black); color:var(--white); align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,0.25); }
}