/* ============================================================
   PYRAMID JEWELLERS — Design System
   Palette drawn from the brand's real 22k gold product photography,
   structural DNA shared with Bisetty Attorneys (referral), animation
   density raised to Beds & Pillows level: every revealed element
   gets its own unique entrance animation.
   ============================================================ */

:root{
  --gold:        #A8791A;
  --gold-deep:   #7A5610;
  --gold-bright: #C99A3B;
  --gold-pale:   #E8C876;
  --gold-glow:   rgba(168,121,26,0.16);

  --ink:         #1B1610;
  --ink-2:       #241D14;
  --cream:       #FAF6EE;
  --cream-2:     #F3ECDC;
  --cream-3:     #EBE1CA;
  --paper:       #FFFDF8;

  --text-dim:    rgba(27,22,16,0.55);
  --text-mid:    rgba(27,22,16,0.78);
  --border:      rgba(27,22,16,0.10);
  --border-gold: rgba(168,121,26,0.28);

  --ruby:        #7A1F2B; /* rare accent — sparingly, for "sale/new" tags */

  --display: 'Cormorant Garamond', 'Times New Roman', serif;
  --ui: 'Inter', ui-sans-serif, system-ui, sans-serif;

  --pad: clamp(20px, 4.5vw, 72px);
  --nav-h: 104px;
}

*, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; -webkit-text-size-adjust:100%; }
body{
  background:var(--cream); color:var(--ink);
  font-family:var(--ui); font-size:16.5px; line-height:1.6; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; cursor:none;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:none; border:none; background:none; color:inherit; }
ul{ list-style:none; }
.wrap{ max-width:1440px; margin-inline:auto; padding-inline:var(--pad); }
::selection{ background:var(--gold); color:var(--paper); }

/* ---------- custom cursor (from Bisetty) ---------- */
#cursor{ position:fixed; width:9px; height:9px; background:var(--gold); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width .2s,height .2s,background .2s; }
#cursor-ring{ position:fixed; width:34px; height:34px; border:1.5px solid var(--border-gold); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:transform .15s ease,width .25s,height .25s,border-color .25s; }
body:has(a:hover) #cursor, body:has(button:hover) #cursor{ width:16px; height:16px; background:var(--gold-bright); }
body:has(a:hover) #cursor-ring, body:has(button:hover) #cursor-ring{ width:50px; height:50px; border-color:var(--gold); }
@media (hover:none), (pointer:coarse){ #cursor, #cursor-ring{ display:none; } body{ cursor:auto; } a,button{ cursor:pointer; } }

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--cream-2); }
::-webkit-scrollbar-thumb{ background:var(--gold); border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:var(--gold-bright); }
html{ scrollbar-color:var(--gold) var(--cream-2); scrollbar-width:thin; }

/* ---------- subtle gold-flecked texture ---------- */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}

/* ============================================================
   TYPE PRIMITIVES
   ============================================================ */
.eyebrow{ font-family:var(--ui); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.22em; color:var(--gold); }
.eyebrow.light{ color:var(--gold-pale); }
.display{ font-family:var(--display); font-weight:600; letter-spacing:-.01em; line-height:1.02; color:var(--ink); }
.display em, .section-title em, .lede em, h1 em, h2 em, h3 em, h4 em, p em, em{ font-style:italic; color:var(--gold); }
#timeline em, #heritage .heritage-body .section-title em, .faq-section .section-title em, [style*="var(--cream)"] em{ color:var(--gold-pale); }
.lede{ font-size:clamp(17px,1.6vw,20px); color:var(--text-mid); max-width:56ch; line-height:1.65; }
.section-tag{ font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; display:inline-block; }
.section-title{ font-family:var(--display); font-size:clamp(34px,4.6vw,58px); font-weight:600; line-height:1.06; letter-spacing:-.01em; color:var(--ink); margin-bottom:22px; }
.sec-head{ max-width:720px; margin-bottom:56px; }
.sec-head.center{ margin-inline:auto; text-align:center; }

/* ============================================================
   REVEAL ANIMATION LIBRARY — every element gets a unique motion.
   Elements start hidden (.reveal) and play once when .in is added
   by the IntersectionObserver. prefers-reduced-motion disables all.
   ============================================================ */
.reveal{ opacity:0; will-change:transform,opacity,clip-path,filter; }
.reveal.in{ opacity:1; }
.reveal.in[data-anim]{ animation-duration:.9s; animation-fill-mode:both; animation-timing-function:cubic-bezier(.2,.7,.2,1); }

[data-anim="rise"].in{ animation-name:a_rise; }
@keyframes a_rise{ from{opacity:0;transform:translateY(44px)} to{opacity:1;transform:none} }
[data-anim="drop"].in{ animation-name:a_drop; }
@keyframes a_drop{ from{opacity:0;transform:translateY(-40px)} to{opacity:1;transform:none} }
[data-anim="left"].in{ animation-name:a_left; }
@keyframes a_left{ from{opacity:0;transform:translateX(56px)} to{opacity:1;transform:none} }
[data-anim="right"].in{ animation-name:a_right; }
@keyframes a_right{ from{opacity:0;transform:translateX(-56px)} to{opacity:1;transform:none} }
[data-anim="zoomin"].in{ animation-name:a_zoomin; }
@keyframes a_zoomin{ from{opacity:0;transform:scale(.8)} to{opacity:1;transform:scale(1)} }
[data-anim="zoomout"].in{ animation-name:a_zoomout; }
@keyframes a_zoomout{ from{opacity:0;transform:scale(1.18)} to{opacity:1;transform:scale(1)} }
[data-anim="flipx"].in{ animation-name:a_flipx; }
@keyframes a_flipx{ from{opacity:0;transform:perspective(900px) rotateX(56deg);transform-origin:top} to{opacity:1;transform:perspective(900px) rotateX(0)} }
[data-anim="flipy"].in{ animation-name:a_flipy; }
@keyframes a_flipy{ from{opacity:0;transform:perspective(900px) rotateY(-60deg);transform-origin:left} to{opacity:1;transform:perspective(900px) rotateY(0)} }
[data-anim="swing"].in{ animation-name:a_swing; }
@keyframes a_swing{ 0%{opacity:0;transform:rotate(-7deg) translateY(-26px)} 60%{opacity:1;transform:rotate(3deg)} 100%{transform:rotate(0)} }
[data-anim="blur"].in{ animation-name:a_blur; }
@keyframes a_blur{ from{opacity:0;filter:blur(14px);transform:scale(1.04)} to{opacity:1;filter:blur(0);transform:none} }
[data-anim="wipeup"].in{ animation-name:a_wipeup; }
@keyframes a_wipeup{ from{opacity:0;clip-path:inset(100% 0 0 0)} to{opacity:1;clip-path:inset(0 0 0 0)} }
[data-anim="wipedown"].in{ animation-name:a_wipedown; }
@keyframes a_wipedown{ from{opacity:0;clip-path:inset(0 0 100% 0)} to{opacity:1;clip-path:inset(0 0 0 0)} }
[data-anim="wipeleft"].in{ animation-name:a_wipeleft; }
@keyframes a_wipeleft{ from{opacity:0;clip-path:inset(0 0 0 100%)} to{opacity:1;clip-path:inset(0 0 0 0)} }
[data-anim="wiperight"].in{ animation-name:a_wiperight; }
@keyframes a_wiperight{ from{opacity:0;clip-path:inset(0 100% 0 0)} to{opacity:1;clip-path:inset(0 0 0 0)} }
[data-anim="skew"].in{ animation-name:a_skew; }
@keyframes a_skew{ from{opacity:0;transform:skewY(6deg) translateY(38px)} to{opacity:1;transform:none} }
[data-anim="pop"].in{ animation-name:a_pop; }
@keyframes a_pop{ 0%{opacity:0;transform:scale(.5)} 70%{opacity:1;transform:scale(1.07)} 100%{transform:scale(1)} }
[data-anim="tilt"].in{ animation-name:a_tilt; }
@keyframes a_tilt{ from{opacity:0;transform:rotate(-8deg) translate(-22px,22px)} to{opacity:1;transform:none} }
[data-anim="growx"].in{ animation-name:a_growx; }
@keyframes a_growx{ from{opacity:0;transform:scaleX(0)} to{opacity:1;transform:scaleX(1)} }
[data-anim="spiral"].in{ animation-name:a_spiral; }
@keyframes a_spiral{ from{opacity:0;transform:rotate(-26deg) scale(.62)} to{opacity:1;transform:none} }
[data-anim="diagUL"].in{ animation-name:a_diagUL; }
@keyframes a_diagUL{ from{opacity:0;transform:translate(44px,44px)} to{opacity:1;transform:none} }
[data-anim="diagUR"].in{ animation-name:a_diagUR; }
@keyframes a_diagUR{ from{opacity:0;transform:translate(-44px,44px)} to{opacity:1;transform:none} }
[data-anim="curtain"].in{ animation-name:a_curtain; }
@keyframes a_curtain{ from{opacity:0;clip-path:inset(0 50% 0 50%)} to{opacity:1;clip-path:inset(0 0 0 0)} }
[data-anim="float"].in{ animation-name:a_float; }
@keyframes a_float{ from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }
[data-anim="bounce"].in{ animation-name:a_bounce; }
@keyframes a_bounce{ 0%{opacity:0;transform:translateY(48px)} 55%{opacity:1;transform:translateY(-9px)} 100%{transform:translateY(0)} }
[data-anim="rollin"].in{ animation-name:a_rollin; }
@keyframes a_rollin{ from{opacity:0;transform:rotate(-110deg) scale(.45)} to{opacity:1;transform:none} }
[data-anim="iris"].in{ animation-name:a_iris; }
@keyframes a_iris{ from{opacity:0;clip-path:circle(0% at 50% 50%)} to{opacity:1;clip-path:circle(75% at 50% 50%)} }
[data-anim="peel"].in{ animation-name:a_peel; }
@keyframes a_peel{ from{opacity:0;transform:perspective(900px) rotateY(28deg) rotateX(-9deg)} to{opacity:1;transform:none} }
[data-anim="shutter"].in{ animation-name:a_shutter; }
@keyframes a_shutter{ from{opacity:0;clip-path:inset(0 0 100% 0)} 50%{clip-path:inset(0 0 0 0)} to{opacity:1;clip-path:inset(0 0 0 0)} }
[data-anim="rubber"].in{ animation-name:a_rubber; }
@keyframes a_rubber{ 0%{opacity:0;transform:scale(.32,1.35)} 50%{opacity:1;transform:scale(1.08,.92)} 100%{transform:scale(1,1)} }
[data-anim="slantup"].in{ animation-name:a_slantup; }
@keyframes a_slantup{ from{opacity:0;transform:translateY(56px) rotate(3deg)} to{opacity:1;transform:none} }
[data-anim="tuck"].in{ animation-name:a_tuck; }
@keyframes a_tuck{ from{opacity:0;transform:translateX(28px) scale(.92)} to{opacity:1;transform:none} }
[data-anim="spring"].in{ animation-name:a_spring; }
@keyframes a_spring{ 0%{opacity:0;transform:scale(0)} 70%{opacity:1;transform:scale(1.13)} 100%{transform:scale(1)} }
[data-anim="unfold"].in{ animation-name:a_unfold; }
@keyframes a_unfold{ from{opacity:0;transform:perspective(800px) rotateX(-72deg)} to{opacity:1;transform:perspective(800px) rotateX(0)} }
[data-anim="sparkle"].in{ animation-name:a_sparkle; }
@keyframes a_sparkle{ 0%{opacity:0;transform:scale(.7) rotate(-10deg);filter:brightness(1.8)} 60%{opacity:1;filter:brightness(1.15)} 100%{transform:scale(1) rotate(0);filter:brightness(1)} }
[data-anim="facet"].in{ animation-name:a_facet; }
@keyframes a_facet{ from{opacity:0;clip-path:polygon(50% 0,100% 100%,0 100%)} to{opacity:1;clip-path:polygon(50% -20%,150% 120%,-50% 120%)} }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.in, .reveal.in[data-anim]{ animation:none!important; opacity:1!important; transform:none!important; filter:none!important; clip-path:none!important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   NAV
   ============================================================ */
nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:0 var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:var(--nav-h);
  background:transparent; backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:background .4s ease, border-color .4s ease, backdrop-filter .4s ease, height .3s ease;
  animation:navIn .9s cubic-bezier(.16,1,.3,1) both;
}
nav.scrolled{ background:rgba(250,246,238,.96); backdrop-filter:blur(20px); border-bottom-color:var(--border-gold); height:82px; }
@keyframes navIn{ from{transform:translateY(-100%);opacity:0} to{transform:translateY(0);opacity:1} }

.nav-logo{ display:flex; align-items:center; flex-shrink:0; }
.nav-logo img{ height:56px; width:auto; animation:logoFade 1s .3s both; transition:height .3s ease; }
nav.scrolled .nav-logo img{ height:46px; }
@keyframes logoFade{ from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }

.nav-right{ display:flex; align-items:center; gap:30px; margin-left:auto; }
.nav-links{ display:flex; gap:30px; animation:linksIn .8s .5s both; flex-wrap:nowrap; white-space:nowrap; }
@keyframes linksIn{ from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
.nav-links a{ color:var(--text-mid); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; position:relative; transition:color .3s; }
.nav-links a.active{ color:var(--gold); }
.nav-links a::after{ content:''; position:absolute; bottom:-6px; left:0; width:0; height:1.5px; background:var(--gold); transition:width .3s; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }

.nav-cta{ background:var(--ink); color:var(--cream); border:1px solid var(--ink); padding:11px 24px; font-size:.76rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; transition:background .3s,transform .2s,color .3s,border-color .3s; animation:ctaIn .8s .7s both; display:inline-flex; align-items:center; gap:9px; flex-shrink:0; white-space:nowrap; }
@keyframes ctaIn{ from{opacity:0;transform:translateX(18px)} to{opacity:1;transform:translateX(0)} }
.nav-cta:hover{ background:var(--gold); border-color:var(--gold); transform:translateY(-1px); }
.nav-cta svg{ width:15px; height:15px; }

.hamburger{ display:none; flex-direction:column; gap:5px; justify-content:center; align-items:center; background:transparent; border:none; padding:10px; width:44px; height:44px; flex-shrink:0; }
.hamburger span{ display:block; width:24px; height:2px; background:var(--gold); transition:all .3s; }
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary, .btn-secondary, .btn-whatsapp{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 32px; font-size:.82rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  transition:background .3s,transform .2s,color .3s,border-color .3s,box-shadow .3s;
}
.btn-primary{ background:var(--ink); color:var(--cream); border:1px solid var(--ink); }
.btn-primary:hover{ background:var(--gold); border-color:var(--gold); transform:translateY(-2px); box-shadow:0 12px 28px -8px var(--gold-glow); }
.btn-secondary{ background:transparent; color:var(--ink); border:1px solid var(--border-gold); }
.btn-secondary:hover{ border-color:var(--gold); background:var(--cream-2); transform:translateY(-2px); }
.btn-whatsapp{ background:#25D366; color:#fff; border:1px solid #25D366; }
.btn-whatsapp:hover{ background:#1EBE5A; transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(37,211,102,.4); }
.btn-primary svg, .btn-secondary svg, .btn-whatsapp svg{ width:17px; height:17px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background:var(--ink); color:var(--cream); padding:88px 0 32px; margin-top:0; position:relative; overflow:hidden; }
footer .wrap{ position:relative; z-index:1; }
.footer-top{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:56px; margin-bottom:56px; }
.footer-brand img{ height:50px; width:auto; margin-bottom:20px; }
.footer-tagline{ font-family:var(--display); font-size:1.15rem; font-style:italic; color:var(--gold-pale); margin-bottom:16px; }
.footer-desc{ font-size:.88rem; color:rgba(250,246,238,.55); line-height:1.7; max-width:320px; }
.footer-col h4{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-pale); margin-bottom:20px; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col ul li a{ font-size:.88rem; color:rgba(250,246,238,.62); transition:color .3s; }
.footer-col ul li a:hover{ color:var(--gold-pale); }
.footer-social{ display:flex; gap:12px; margin-top:20px; }
.footer-social a{ width:38px; height:38px; border:1px solid rgba(250,246,238,.2); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:border-color .3s,background .3s,transform .3s; }
.footer-social a:hover{ border-color:var(--gold); background:var(--gold); transform:translateY(-3px); }
.footer-social svg{ width:16px; height:16px; }
.footer-bottom{ border-top:1px solid rgba(250,246,238,.12); padding-top:26px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.footer-bottom p{ font-size:.78rem; color:rgba(250,246,238,.45); }
.footer-bottom-links{ display:flex; gap:20px; }
.footer-bottom-links a{ font-size:.78rem; color:rgba(250,246,238,.45); }
.footer-bottom-links a:hover{ color:var(--gold-pale); }

/* footer faceted watermark */
.footer-mark{ position:absolute; right:-60px; top:-80px; width:420px; height:420px; opacity:.05; pointer-events:none; }

/* ============================================================
   WHATSAPP FLOATING BUTTON
   ============================================================ */
.wa-float{
  position:fixed; right:26px; bottom:26px; z-index:900;
  width:60px; height:60px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px -6px rgba(37,211,102,.55);
  animation:waPulse 2.6s ease-in-out infinite;
  transition:transform .25s ease;
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:30px; height:30px; }
@keyframes waPulse{ 0%,100%{ box-shadow:0 10px 30px -6px rgba(37,211,102,.55);} 50%{ box-shadow:0 10px 40px -2px rgba(37,211,102,.75);} }

/* ============================================================
   SHARED: marquee / ticker
   ============================================================ */
.ticker-wrap{ background:var(--ink); overflow:hidden; padding:16px 0; border-top:1px solid var(--border-gold); border-bottom:1px solid var(--border-gold); }
.ticker{ display:flex; gap:52px; white-space:nowrap; animation:scrollx 32s linear infinite; width:max-content; }
.ticker span{ font-family:var(--display); font-style:italic; font-size:1.05rem; color:var(--gold-pale); display:inline-flex; align-items:center; gap:16px; }
.ticker span svg{ width:14px; height:14px; opacity:.7; }
@keyframes scrollx{ to{ transform:translateX(-50%); } }

/* ============================================================
   RESPONSIVE NAV (mobile)
   ============================================================ */
@media (max-width: 900px){
  .nav-links{ position:fixed; top:0; right:0; height:100vh; width:min(320px,80vw); background:var(--paper); flex-direction:column; justify-content:center; align-items:flex-start; gap:26px; padding:40px; transform:translateX(100%); transition:transform .4s cubic-bezier(.16,1,.3,1); box-shadow:-20px 0 60px rgba(0,0,0,.15); animation:none; }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ font-size:1rem; }
  .hamburger{ display:flex; }
  .nav-cta{ display:none; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:40px; }
  .footer-brand{ grid-column:1/-1; }
}
@media (max-width: 560px){
  .footer-top{ grid-template-columns:1fr; }
  :root{ --nav-h:84px; }
}