/* ===================================================
   HIRANYA INDIA — Shared Luxury Stylesheet
   Design system · animations · hover effects
   Used across all pages (index, about, catalogue, etc.)
   =================================================== */

:root {
  --gold-light: #F9D949;
  --gold: #E5BA73;
  --gold-deep: #C5A880;
  --gold-shimmer: #F4E4BC;
  --cream: #FBF8F1;
  --cream-deep: #F4ECDD;
  --charcoal: #141210;
  --charcoal-soft: #1F1B17;
  --ink: #2A2622;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { background: var(--cream); color: var(--ink); overflow-x: hidden; margin: 0; }

::selection { background: var(--gold); color: var(--charcoal); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--cream-deep); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold-deep), var(--gold)); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ---------- Gold gradient text ---------- */
.gold-text {
  background: linear-gradient(120deg, #C5A880 0%, #F4E4BC 35%, #E5BA73 60%, #C5A880 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gold-text-bright {
  background: linear-gradient(120deg, #E5BA73 0%, #F9D949 50%, #E5BA73 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Thin gold rule / flourish ---------- */
.flourish { display:flex; align-items:center; justify-content:center; gap:14px; }
.flourish span { height:1px; width:60px; background:linear-gradient(90deg,transparent,var(--gold-deep)); }
.flourish span:last-child { background:linear-gradient(90deg,var(--gold-deep),transparent); }

/* ===================================================
   HEADER — always solid deep charcoal for guaranteed
   contrast (gold logo + white nav always readable).
   Subtle elevation increase on scroll.
   =================================================== */
#header-inner {
  background: rgba(20,18,16,.96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(197,168,128,.18);
}
#header.scrolled #header-inner {
  background: rgba(16,14,12,.98);
  box-shadow: 0 10px 40px -18px rgba(0,0,0,.7);
}
body.solid-header #header-inner {
  background: rgba(20,18,16,.96);
}

/* ===================================================
   THREE.JS HERO CANVAS
   =================================================== */
#gold-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}

/* ===================================================
   HERO ZOOM (Ken Burns)
   =================================================== */
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.14); } }
.hero-bg { animation: heroZoom 22s ease-in-out infinite alternate; }

/* ===================================================
   SHIMMER CTA
   =================================================== */
.btn-gold {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--gold-deep), var(--gold), var(--gold-deep));
  color: var(--charcoal);
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(229,186,115,.6); }
.btn-gold::after {
  content:''; position:absolute; top:0; left:-150%;
  width:60%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-20deg); animation: shimmer 3.8s infinite;
}
@keyframes shimmer { 0% { left:-150%; } 55%,100% { left:160%; } }

.btn-outline {
  position: relative; overflow: hidden;
  border: 1.5px solid var(--gold);
  transition: color .4s ease, border-color .4s ease;
  z-index: 0;
}
.btn-outline::before {
  content:''; position:absolute; inset:0; z-index:-1;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.btn-outline:hover { color: var(--charcoal) !important; border-color: var(--gold); }
.btn-outline:hover::before { transform: scaleX(1); }

/* ===================================================
   SCROLL REVEAL — safe by default
   Content is visible unless JS confirms (html.js-ready).
   =================================================== */
/* Base hidden state — uses its own translate, animated via opacity+transform.
   IMPORTANT: tilt & parallax are applied to INNER wrappers only (never to a
   .reveal element), so they can never interrupt this transition mid-flight. */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.js-ready .reveal[data-anim="left"]  { transform: translateX(-46px); }
.js-ready .reveal[data-anim="right"] { transform: translateX(46px); }
.js-ready .reveal[data-anim="scale"] { transform: scale(.93); }
/* Revealed state — force visible, override everything. !important guarantees
   the element can never get stuck partway, even if another script touches it. */
.js-ready .reveal.in {
  opacity: 1 !important;
  transform: none !important;
}
.js-ready .reveal[data-delay="1"] { transition-delay: .1s; }
.js-ready .reveal[data-delay="2"] { transition-delay: .2s; }
.js-ready .reveal[data-delay="3"] { transition-delay: .3s; }
.js-ready .reveal[data-delay="4"] { transition-delay: .4s; }

/* ===================================================
   NAV LINK underline
   =================================================== */
.nav-link { position: relative; }
.nav-link::after {
  content:''; position:absolute; left:0; bottom:-5px;
  width:0; height:1.5px; background: var(--gold);
  transition: width .4s cubic-bezier(.16,1,.3,1);
}
.nav-link:hover::after, .nav-link.active::after { width:100%; }
.nav-link.active { color: var(--gold-deep); }

/* ===================================================
   PREMIUM CARD — lift, glow, image zoom, gold sheen
   =================================================== */
.lux-card {
  position: relative;
  transition: transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s ease;
  will-change: transform;
}
.lux-card:hover { transform: translateY(-12px); box-shadow: 0 36px 70px -28px rgba(197,168,128,.6); }
.lux-card .img-zoom { transition: transform .9s cubic-bezier(.16,1,.3,1); }
.lux-card:hover .img-zoom { transform: scale(1.09); }

/* gold sheen sweep on card hover */
.sheen { position: relative; overflow: hidden; }
.sheen::before {
  content:''; position:absolute; top:0; left:-120%;
  width:60%; height:100%; z-index:2;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg); transition: left .8s ease;
}
.lux-card:hover .sheen::before, .sheen:hover::before { left:140%; }

/* ===================================================
   TILT (mouse-driven, set via JS variables)
   =================================================== */
.tilt { transition: transform .25s ease; transform-style: preserve-3d; }

/* ===================================================
   MARQUEE
   =================================================== */
.marquee { display:flex; width:max-content; animation: scrollX 34s linear infinite; }
.marquee-wrap:hover .marquee { animation-play-state: paused; }
@keyframes scrollX { to { transform: translateX(-50%); } }

/* ===================================================
   KARAT ring spin
   =================================================== */
.karat-ring { transition: transform .9s cubic-bezier(.16,1,.3,1); }
.karat-card:hover .karat-ring { transform: rotate(120deg); }

/* ===================================================
   WHATSAPP pulse
   =================================================== */
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
  70% { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.wa-pulse { animation: pulseRing 2.4s infinite; }

/* ===================================================
   DRAWER
   =================================================== */
.drawer { transition: transform .5s cubic-bezier(.16,1,.3,1); }

/* ===================================================
   PAGE HERO (interior pages)
   =================================================== */
.page-hero { position: relative; overflow: hidden; }
.page-hero::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,18,16,.55), rgba(20,18,16,.82));
}

/* ===================================================
   FLOAT — gentle ambient bob
   =================================================== */
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.float-slow { animation: floatY 6s ease-in-out infinite; }

/* ===================================================
   SCROLL PROGRESS BAR
   =================================================== */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light));
  z-index: 60; transition: width .1s linear;
}

/* ===================================================
   CURSOR GLOW (desktop only)
   =================================================== */
#cursor-glow {
  position: fixed; top: 0; left: 0; width: 380px; height: 380px;
  border-radius: 50%; pointer-events: none; z-index: 5;
  background: radial-gradient(circle, rgba(229,186,115,.10), transparent 65%);
  transform: translate(-50%, -50%); opacity: 0;
  transition: opacity .4s ease; mix-blend-mode: screen;
}

/* ===================================================
   IMAGE FRAME — luxe gold corner accents
   =================================================== */
.frame-gold { position: relative; }
.frame-gold::before, .frame-gold::after {
  content:''; position:absolute; width:46px; height:46px; z-index:3;
  border-color: var(--gold); border-style: solid;
}
.frame-gold::before { top:14px; left:14px; border-width:1.5px 0 0 1.5px; }
.frame-gold::after  { bottom:14px; right:14px; border-width:0 1.5px 1.5px 0; }

/* ===================================================
   FORM controls
   =================================================== */
.field {
  width:100%; background: transparent;
  border:1px solid rgba(197,168,128,.4);
  border-radius: 14px; padding: 14px 16px;
  color: var(--ink); font-size: 15px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.field::placeholder { color: rgba(42,38,34,.45); }
.field:focus { outline:none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(229,186,115,.14); }
.field-dark {
  border-color: rgba(244,228,188,.22); color: #fff;
}
.field-dark::placeholder { color: rgba(255,255,255,.4); }
.field-dark:focus { border-color: var(--gold); }

/* ===================================================
   REDUCED MOTION
   =================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js-ready .reveal { opacity: 1 !important; transform: none !important; }
  #cursor-glow, #gold-canvas { display: none !important; }
}

/* ===================================================
   ARTICLE PROSE (blog detail)
   =================================================== */
.article-prose p {
  color: rgba(42,38,34,.82);
  font-size: 1.075rem;
  line-height: 1.85;
  margin: 0 0 1.35em;
}
.article-prose p:first-child {
  font-size: 1.2rem;
  color: var(--charcoal);
  line-height: 1.75;
}
.article-prose p:first-child::first-letter {
  font-family: "Playfair Display", serif;
  font-size: 3.1rem;
  line-height: .8;
  float: left;
  padding: .08em .12em 0 0;
  color: var(--gold-deep);
}

/* ===================================================
   LINE CLAMP (blog sidebar excerpts)
   =================================================== */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Hero background slider ===== */
.hero-slider { overflow: hidden; }
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  z-index: 1;
  transform: scale(1.05);
  transition: opacity 1.4s ease-in-out, transform 6s ease-out;
  pointer-events: none;
  will-change: opacity;
}
.hero-slide.is-active {
  opacity: 1;
  z-index: 2;
  transform: scale(1);
}