/* ============================================================================
   AURUM — home page only.
   ----------------------------------------------------------------------------
   Ye file SIRF index.php pe load hoti hai ($extra_css). Sab kuch `.aurum`
   ke andar scoped hai, isliye shop/product/cart/checkout pe iska koi asar
   nahi pad sakta — wo sab style.css se hi chalte rehte hain.

   Tokens (--gold, --ivory, --ink-soft ...) style.css me pehle se defined hain.
   ========================================================================= */

:root{
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --glass:rgba(255,255,255,.58);
  --glass-2:rgba(255,255,255,.34);
  --edge:rgba(255,255,255,.75);
  --au-ease:cubic-bezier(.22,.61,.36,1);
  --au-ease-io:cubic-bezier(.65,.05,.36,1);
}

/* =====================================================================
   CUBE-FIELD HERO
   Pehle ye index.php ke andar inline <style> me tha. Yahan aa gaya hai —
   sirf ek badlav: mobile pe piece ka naam ab dikhta hai (pehle chhupa tha).
   ===================================================================== */
.hero-cubes{position:relative;grid-template-columns:1fr;align-items:end;padding:0;overflow:hidden}
.hero-cubes .cube-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 60% at 74% 26%,rgba(217,184,119,.22),transparent 62%),
    radial-gradient(80% 80% at 14% 92%,rgba(176,141,70,.12),transparent 60%),
    linear-gradient(160deg,#faf6ef,#e9dece)}
.hero-cubes #cubeHero{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;
  opacity:0;transition:opacity 1s ease}
.hero-cubes.cubes-ready #cubeHero{opacity:1}
.hero-cubes .cube-overlay{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(246,242,236,.9) 0%,rgba(246,242,236,.4) 44%,rgba(246,242,236,0) 74%),
    linear-gradient(to top,rgba(246,242,236,.72) 0%,rgba(246,242,236,0) 42%)}
.hero-cubes .hero-text{position:relative;z-index:3;max-width:660px;
  padding:130px 5vw clamp(48px,9vh,110px);pointer-events:none}
.hero-cubes .hero-text a,.hero-cubes .hero-text .btns{pointer-events:auto}
.hero-cubes .hero-visual{display:none}
.hero-cubes .cube-piece{position:absolute;right:5vw;bottom:clamp(28px,6vh,60px);z-index:4;
  font-family:'Fraunces',serif;font-style:italic;color:var(--gold);font-size:clamp(.95rem,1.6vw,1.35rem);
  opacity:0;transition:opacity .35s;pointer-events:none;text-align:right}
.hero-cubes .cube-piece small{display:block;font-family:'Manrope',sans-serif;font-style:normal;
  font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}

/* "View piece →" — sirf tab dikhta hai jab koi piece reveal hua ho */
.hero-cubes .cube-piece b{display:block;font-family:'Manrope',sans-serif;font-style:normal;font-weight:800;
  font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:6px}
.hero-cubes .cube-piece b::after{content:" \2192"}

/* Piece reveal hone par hi link tappable/clickable banta hai. Warna ye
   invisible link cubes ke upar padha rehta aur unke taps kha jaata. */
.hero-cubes .cube-piece{pointer-events:none}
.hero-cubes .cube-piece.is-live{pointer-events:auto;cursor:pointer}
/* cube ke upar cursor ho to haath dikhe — clickable hai ye samajh aaye */
.hero-cubes #cubeHero.can-click{cursor:pointer}

@media(max-width:760px){
  .hero-cubes .cube-overlay{background:linear-gradient(to top,rgba(246,242,236,.82) 0%,rgba(246,242,236,.16) 46%,rgba(246,242,236,0) 76%)}
  /* Mobile pe naam ab DIKHTA hai. Neeche hero-text hota hai, isliye ise upar
     nav ke thoda neeche rakha hai — ek chhoti glass patti me, taaki cubes ke
     upar bhi padha ja sake. */
  .hero-cubes .cube-piece{
    right:auto;left:5vw;bottom:auto;top:78px;text-align:left;
    font-size:1.02rem;line-height:1.25;
    background:rgba(246,242,236,.82);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border:1px solid rgba(28,24,21,.08);border-radius:12px;
    padding:8px 13px;max-width:74vw;
    box-shadow:0 10px 26px -14px rgba(38,30,18,.35);
  }
  .hero-cubes .cube-piece small{margin-bottom:2px;font-size:.54rem}
}

/* =====================================================================
   PAGE CHROME — progress hairline + cursor glow
   ===================================================================== */
#auProg{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:950;pointer-events:none;
  background:linear-gradient(90deg,var(--gold),var(--gold-3));
  box-shadow:0 0 12px rgba(176,141,70,.7);
}
#auGlow{
  position:fixed;top:0;left:0;width:420px;height:420px;z-index:0;pointer-events:none;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .6s;
  background:radial-gradient(circle,rgba(201,165,92,.15),transparent 62%);
}
.au-hover #auGlow{opacity:1}
@media(hover:none){#auGlow{display:none}}

/* =====================================================================
   Everything below is scoped to .aurum (the home <main>)
   ===================================================================== */

/* drifting aurora — depth without any 3D cost */
.aurum .au-aurora{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.aurum .au-aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.45;
  animation:auDrift 26s var(--au-ease-io) infinite alternate}
.aurum .au-aurora i:nth-child(1){width:44vw;aspect-ratio:1;left:-12%;top:-10%;
  background:radial-gradient(circle,rgba(217,184,119,.55),transparent 66%)}
.aurum .au-aurora i:nth-child(2){width:38vw;aspect-ratio:1;right:-10%;top:24%;
  background:radial-gradient(circle,rgba(143,214,208,.24),transparent 66%);animation-duration:34s}
.aurum .au-aurora i:nth-child(3){width:34vw;aspect-ratio:1;left:26%;bottom:-14%;
  background:radial-gradient(circle,rgba(185,167,230,.2),transparent 66%);animation-duration:30s}
@keyframes auDrift{to{transform:translate3d(6%,-5%,0) scale(1.14)}}

/* Home page kabhi side me scroll na ho.
   `clip` chuna hai `hidden` ki jagah — hidden ek scroll container bana deta
   hai jo andar ke position:sticky/fixed ko tod deta hai. clip sirf kaat deta
   hai, kuch todta nahi. */
.aurum{overflow-x:clip}

.aurum section{position:relative}
.aurum section > .wrap,
.aurum .sec-head,
.aurum .hs-outer{position:relative;z-index:1}

/* HUD strip under the hero headline */
.aurum .au-hud{
  position:absolute;left:5vw;bottom:clamp(16px,4vh,34px);z-index:4;
  display:flex;gap:clamp(14px,2.4vw,30px);align-items:center;flex-wrap:wrap;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);pointer-events:none;
}
.aurum .au-hud i{font-style:normal;color:var(--gold);font-weight:700}
.aurum .au-hud span{display:flex;align-items:center;gap:7px}
.aurum .au-hud em{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:auPulse 2.2s infinite}
@keyframes auPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@media(max-width:900px){.aurum .au-hud{display:none}}

/* monospace section numbering */
.aurum .au-num{
  display:flex;align-items:center;gap:14px;margin-bottom:14px;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);font-weight:700;
}
.aurum .au-num::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.aurum .au-num.center{justify-content:center;max-width:420px;margin-inline:auto}
.aurum .au-num.center::before{content:"";flex:1;height:1px;background:linear-gradient(270deg,var(--gold),transparent)}

/* ---------------------------------------------------------------------
   Collection rail — glass panels + gold edge-light following the cursor
   Scoped to .aurum so shop.php cards are untouched.
   --------------------------------------------------------------------- */
.aurum .card .card-inner{
  border-radius:18px;padding:10px;
  background:var(--glass);
  border:1px solid var(--edge);
  box-shadow:0 30px 60px -34px rgba(38,30,18,.4),inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  position:relative;
}
.aurum .card .pic{border-radius:12px}
.aurum .card .card-inner::after{
  content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;z-index:3;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),rgba(240,220,168,.5),transparent 62%);
  opacity:0;transition:opacity .4s;mix-blend-mode:overlay;
}
@media(hover:hover) and (pointer:fine){
  .aurum .card:hover .card-inner::after{opacity:1}
  .aurum .card:hover .card-inner{box-shadow:0 46px 80px -34px rgba(38,30,18,.48),inset 0 1px 0 rgba(255,255,255,.95)}
}
.aurum .card .meta h4{letter-spacing:-.01em}

/* ---------------------------------------------------------------------
   SIGNATURE — the first featured piece, two real photos
   --------------------------------------------------------------------- */
.aurum .sig{padding:clamp(50px,7vw,110px) 0}
.aurum .sig-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4.5vw,72px);align-items:center}
.aurum .sig-media{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:14px;align-items:start}
.aurum .sig-fig{position:relative;border-radius:16px;overflow:hidden;background:var(--sand);
  border:1px solid var(--edge);box-shadow:0 40px 80px -40px rgba(38,30,18,.42)}
.aurum .sig-fig img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--au-ease)}
.aurum .sig-fig-1{aspect-ratio:3/4}
.aurum .sig-fig-2{aspect-ratio:4/5;margin-top:clamp(28px,6vw,80px)}
/* product ki sirf ek photo hai — grid ko ek column kar do, warna aadhi jagah
   khaali dikhti hai */
.aurum .sig-media-one{grid-template-columns:1fr}
.aurum .sig-media-one .sig-fig-1{aspect-ratio:4/5}
@media(hover:hover){.aurum .sig-fig:hover img{transform:scale(1.05)}}

/* gold light sweeping across the metal */
.aurum .au-sheen{position:absolute;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:screen}
.aurum .au-sheen::before{content:"";position:absolute;top:-60%;left:-140%;width:58%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,246,222,.34),transparent);
  transform:rotate(16deg);animation:auSweep 5.6s var(--au-ease-io) infinite}
@keyframes auSweep{0%{left:-140%}56%,100%{left:190%}}

.aurum .au-seal{
  position:absolute;z-index:4;right:-6px;top:-18px;width:clamp(76px,9vw,100px);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(140deg,var(--gold-3),var(--gold));color:#3a2c0c;
  display:grid;place-items:center;text-align:center;
  font-family:var(--mono);font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;line-height:1.6;
  box-shadow:0 18px 36px -14px rgba(176,141,70,.7);
}
.aurum .au-seal::before{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px dashed rgba(176,141,70,.5);animation:auSpin 26s linear infinite}
@keyframes auSpin{to{transform:rotate(360deg)}}

.aurum .sig-copy h2{font-size:clamp(1.8rem,4vw,3rem);margin-bottom:18px}
.aurum .sig-copy > p{color:var(--ink-soft);margin-bottom:18px;max-width:52ch}
.aurum .sig-price{display:flex;align-items:baseline;gap:12px;margin-bottom:26px}
.aurum .sig-price b{font-size:1.5rem;font-weight:800}
.aurum .sig-price s{color:var(--ink-soft);font-size:1rem}
.aurum .sig-cta{display:flex;flex-wrap:wrap;gap:12px}

@media(max-width:900px){
  .aurum .sig-in{grid-template-columns:1fr}
  .aurum .sig-media{order:2}
  .aurum .sig-copy{order:1}
  /* Phone pe .wrap ka padding sirf ~5vw hota hai, to right:-6px wala seal
     screen se bahar nikal ke page ko side me scroll karwa deta tha.
     Yahan use andar le aaya gaya hai. */
  .aurum .au-seal{right:8px;top:-12px}
}

/* ---------------------------------------------------------------------
   CATEGORIES
   --------------------------------------------------------------------- */
.aurum .cats-sec{padding:clamp(20px,4vw,50px) 0 clamp(50px,7vw,100px)}
.aurum .cats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.8vw,22px);
}
@media(max-width:1100px){.aurum .cats-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.aurum .cats-grid{grid-template-columns:repeat(2,1fr)}}

.aurum .cat{
  position:relative;display:flex;align-items:flex-end;
  aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  background:var(--sand);border:1px solid var(--edge);
  box-shadow:0 26px 50px -30px rgba(38,30,18,.4);
  transition:transform .5s var(--au-ease),box-shadow .5s var(--au-ease);
}
.aurum .cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.5s var(--au-ease)}
.aurum .cat::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 36%,rgba(16,13,10,.82))}
@media(hover:hover) and (pointer:fine){
  .aurum .cat:not(.is-soon):hover{transform:translateY(-4px);box-shadow:0 40px 70px -30px rgba(38,30,18,.5)}
  .aurum .cat:not(.is-soon):hover img{transform:scale(1.07)}
}

.aurum .cat-t{position:relative;z-index:2;padding:clamp(14px,2vw,24px);color:#fff;width:100%}
.aurum .cat-t span{display:block;font-family:var(--mono);font-size:.52rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-3);font-weight:700;margin-bottom:3px}
.aurum .cat-t b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(1rem,1.7vw,1.4rem);line-height:1.15}

/* Photo na ho to stock photo nahi lagate — ye saaf gold tile dikhti hai.
   Admin se category ki photo daalte hi ye apne aap hat jayegi. */
.aurum .cat-blank{position:absolute;inset:0;
  background:radial-gradient(120% 90% at 30% 20%,#f4ecdd,#e0cfae 52%,#c9ab77)}
.aurum .cat-blank i{position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:26px 26px;opacity:.35}

/* Coming soon — click nahi hota, isliye dikhne me bhi thoda shaant rakha */
.aurum .cat.is-soon{cursor:default}
.aurum .cat.is-soon img,.aurum .cat.is-soon .cat-blank{filter:saturate(.75) brightness(.94)}
.aurum .cat-soon{
  position:absolute;z-index:3;top:10px;right:10px;
  background:rgba(255,255,255,.94);color:var(--ink);
  font-family:var(--mono);font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  padding:6px 11px;border-radius:100px;
}

/* glassy stat tiles */
.aurum .stats .stat{
  border-radius:16px;
  background:var(--glass-2);border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}

/* =====================================================================
   reduced motion
   ===================================================================== */
@media(prefers-reduced-motion:reduce){
  .aurum .au-aurora i,
  .aurum .au-sheen::before,
  .aurum .au-seal::before,
  .aurum .au-hud em{animation:none}
}