/* ================================================================
   ARUNE INTERIORS — ULTRA PREMIUM DESIGN SYSTEM
   Target: High-net-worth clients, Luxury Interior segment
   Fonts: Cormorant Garant (display) + Jost (body) + Cinzel (labels)
   Palette: Obsidian #0a0a0a | Champagne Gold #C9A84C | Ivory #F5F0E8
================================================================ */

/* ── Google Fonts import (Cormorant + Jost + Cinzel) ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garant:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Jost:wght@200;300;400;500;600&family=Cinzel:wght@400;500;600;700&display=swap');

/* ── CSS Custom Properties ────────────────────────────────────── */
:root {
  --gold:        #C9A84C;
  --gold-light:  #E8C97A;
  --gold-dark:   #9C7B2F;
  --obsidian:    #0a0a0a;
  --charcoal:    #1a1a1a;
  --ivory:       #F5F0E8;
  --cream:       #EDE8DE;
  --silver:      #C0C0C0;
  --font-display:'Cormorant Garant', 'Times New Roman', serif;
  --font-label:  'Cinzel', 'Georgia', serif;
  --font-body:   'Jost', 'Helvetica Neue', sans-serif;
}

/* ── Global Font Override ─────────────────────────────────────── */
body {
  font-family: var(--font-body) !important;
  font-weight: 300;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Premium Heading Typography ──────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  letter-spacing: 0.04em;
  line-height: 1.15;
}

h1 { font-weight: 300; font-size: clamp(2.5rem, 5vw, 4.5rem); }
h2 { font-weight: 400; font-size: clamp(2rem,   4vw, 3.5rem); }
h3 { font-weight: 400; font-size: clamp(1.4rem, 2.5vw, 2rem); }

/* Section label tags ("About", "Services", etc.) */
.sec-title p,
.sec-title > p:first-child {
  font-family: var(--font-label) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.35em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  font-weight: 500 !important;
}

/* ── Gold Shimmer 3D Text Effect ─────────────────────────────── */
@keyframes goldShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

h1, h2 {
  background: linear-gradient(
    105deg,
    #C9A84C 0%,
    #F0D98C 30%,
    #C9A84C 50%,
    #9C7B2F 70%,
    #E8C97A 85%,
    #C9A84C 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmer 6s linear infinite;
  /* 3D depth */
  filter: drop-shadow(2px 3px 6px rgba(0,0,0,0.4));
}

/* Override gold shimmer for dark-on-light sections */
.about-style2-text h1,
.about-style2-text h2,
.sec-title .title h1,
.sec-title .title h2,
.sec-title .title,
.main-header h1,
.main-header h2 {
  background: linear-gradient(
    105deg,
    #7A5C1E 0%,
    #C9A84C 30%,
    #9C7B2F 50%,
    #C9A84C 70%,
    #7A5C1E 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmer 6s linear infinite;
}

/* Keep white for hero headings */
.hero-3d h1,
.hero-3d h2,
.hero-content h1,
.hero-content h2 {
  background: linear-gradient(
    105deg,
    #fff 0%,
    #F0D98C 25%,
    #fff 50%,
    #F0D98C 75%,
    #fff 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmer 4s linear infinite;
}

/* ── 3D Card Depth System ─────────────────────────────────────── */
.single-service-style1,
.single-service-style2,
.single-highlight-box,
.single-working-process,
.single-testimonial-style2,
.single-portfolio-item {
  transform-style: preserve-3d;
  transform: perspective(1000px) translateZ(0);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}

.single-service-style1:hover,
.single-service-style2:hover {
  transform: perspective(1000px) translateZ(20px) rotateX(-2deg) rotateY(2deg);
  box-shadow:
    -10px 20px 60px rgba(201, 168, 76, 0.15),
     0px 30px 60px rgba(0, 0, 0, 0.25) !important;
}

.single-highlight-box:hover {
  transform: perspective(800px) translateZ(25px) translateY(-10px) !important;
  box-shadow:
    0 40px 80px rgba(201, 168, 76, 0.12),
    0 20px 40px rgba(0, 0, 0, 0.2) !important;
}

/* ── Gold Divider Lines ───────────────────────────────────────── */
.sec-title::after,
.sec-title .title::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 20px auto 0;
}

/* ── Premium Button Styles ───────────────────────────────────── */
.btn-one,
a.btn-one {
  font-family: var(--font-label) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
  border: 1px solid rgba(201, 168, 76, 0.4) !important;
}

.btn-one::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.15), transparent);
  transition: left 0.5s ease;
}

.btn-one:hover::before {
  left: 100%;
}

.btn-one:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 30px rgba(201, 168, 76, 0.3) !important;
  border-color: var(--gold) !important;
}

/* ── Gold Accent Navigation ──────────────────────────────────── */
.main-menu .navigation > li > a {
  font-family: var(--font-label) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.2em !important;
  font-weight: 500 !important;
}

.main-menu .navigation > li > a:hover,
.main-menu .navigation > li.current > a {
  color: var(--gold) !important;
}

/* ── Premium Image Overlay Effect (handled in 3d-global.css) ─── */
/* Keeping only the smooth scale transition here */
.img-holder img {
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.img-holder:hover img {
  transform: scale(1.07) !important;
}

/* ── Gold Border Accent ───────────────────────────────────────── */
.single-service-style1::before,
.single-service-style2.glass-3d::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 0;
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
  transition: height 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 0 0 3px 0;
}

.single-service-style1:hover::before,
.single-service-style2.glass-3d:hover::before {
  height: 100%;
}

/* ── Floating Gold Particle Animation ────────────────────────── */
@keyframes floatParticle {
  0%   { transform: translateY(0) rotate(0deg);   opacity: 0.4; }
  50%  { transform: translateY(-30px) rotate(180deg); opacity: 0.8; }
  100% { transform: translateY(0) rotate(360deg); opacity: 0.4; }
}

/* ── Section Background Textures ─────────────────────────────── */
.highlights-area {
  background: linear-gradient(135deg, #fafaf8 0%, #f0ebe0 100%) !important;
}

.about-style2-area {
  position: relative;
}

.about-style2-area::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.slogan-area {
  background: linear-gradient(135deg, var(--obsidian) 0%, #1a1208 50%, var(--obsidian) 100%) !important;
  border-top: 1px solid rgba(201, 168, 76, 0.2);
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
}

/* ── Premium Testimonial Style ───────────────────────────────── */
.single-testimonial-style2 p {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-style: italic;
  font-weight: 300;
  line-height: 1.8;
  color: #444;
}

.single-testimonial-style2 h3 {
  font-family: var(--font-label) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase;
  -webkit-text-fill-color: var(--gold);
  background: none;
  animation: none;
  color: var(--gold);
}

/* ── Counter / Stats Premium Style ──────────────────────────── */
.counter-box h3,
.single-funfact-style2 h3 {
  font-family: var(--font-display) !important;
  font-size: clamp(2.5rem, 4vw, 4rem) !important;
  font-weight: 300 !important;
}

/* ── Scroll Reveal Fade-up ───────────────────────────────────── */
@keyframes premiumFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px) translateZ(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateZ(0);
  }
}

.wow.fadeInUp {
  animation: premiumFadeUp 0.9s cubic-bezier(0.23, 1, 0.32, 1) both !important;
}

/* ── Top Bar Premium Style ───────────────────────────────────── */
.top-bar-style2 {
  background: var(--obsidian) !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.15) !important;
}

.top-bar-style2 li,
.top-bar-style2 a {
  font-family: var(--font-label) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.2em !important;
}

/* ── Footer Premium Style ────────────────────────────────────── */
.footer-area h3,
.footer-area h4,
.footer-area .footer-title {
  font-family: var(--font-label) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  -webkit-text-fill-color: var(--gold) !important;
  background: none !important;
  animation: none !important;
}

/* ── Gold Underline on Hover for Links ───────────────────────── */
a {
  transition: color 0.3s ease !important;
}

.footer-area a:hover,
.main-menu a:hover {
  color: var(--gold) !important;
}

/* ── Glassmorphism Premium Panels ────────────────────────────── */
.glass-3d {
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(201, 168, 76, 0.12) !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(201,168,76,0.1) !important;
}

/* ── Scrollbar Premium Style ─────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--obsidian); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--gold-dark), var(--gold));
  border-radius: 3px;
}

/* ── Text Selection Color ────────────────────────────────────── */
::selection {
  background: var(--gold);
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
::-moz-selection {
  background: var(--gold);
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}