@import "tailwindcss";

:root {
  --background: #050a14;
  --background-mid: #0a1128;
  --foreground: #f6f0e6;
  --foreground-muted: #b8aa92;
  --accent: #d4af37;
  --accent-soft: #c9a227;
  --copper: #a66f3a;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-outfit);
  --font-serif: var(--font-cormorant);
}

body {
  background-color: var(--background);
  background-image:
    radial-gradient(ellipse 100% 70% at 50% -25%, rgba(212, 175, 55, 0.11), transparent 55%),
    radial-gradient(ellipse 70% 55% at 110% 60%, rgba(166, 111, 58, 0.09), transparent 50%),
    radial-gradient(ellipse 50% 45% at -10% 80%, rgba(10, 17, 40, 0.9), transparent 55%),
    linear-gradient(180deg, var(--background) 0%, var(--background-mid) 45%, #050812 100%);
  color: var(--foreground);
  font-family: var(--font-outfit), system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: 0.015em;
}

.font-arabic {
  font-family: var(--font-amiri), Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.02em;
}

html[dir="rtl"] .font-serif {
  font-family: var(--font-amiri), Georgia, serif;
  font-weight: 700;
}

/* Luxury display: gradient headline (LTR + RTL safe) */
.hero-gradient {
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.08;
  background: linear-gradient(
    165deg,
    #fffef9 12%,
    #f0e6d4 38%,
    #e8d4a8 58%,
    #c9a227 95%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 28px rgba(212, 175, 55, 0.18));
}

html[dir="rtl"] .hero-gradient {
  letter-spacing: 0.02em;
}

.glass-panel {
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.02) 45%,
    rgba(0, 0, 0, 0.22) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 6px -1px rgba(0, 0, 0, 0.12),
    0 28px 56px -20px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(18px) saturate(145%);
}

.gold-glow {
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.45),
    0 0 40px rgba(212, 175, 55, 0.22),
    0 12px 32px -8px rgba(0, 0, 0, 0.35);
}

.hero-vignette {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 65% 55% at 50% 50%,
    transparent 0%,
    rgba(5, 10, 20, 0.55) 100%
  );
}

.hero-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(88px);
  opacity: 0.32;
  animation: pulse-drift 18s ease-in-out infinite alternate;
}

@keyframes pulse-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(10px, -18px, 0) scale(1.06);
  }
  100% {
    transform: translate3d(-14px, 12px, 0) scale(0.96);
  }
}

.nav-link-lux {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* 3D scene helpers */
.scene-3d {
  perspective: 1600px;
  transform-style: preserve-3d;
}

.card-3d {
  transform-style: preserve-3d;
  will-change: transform, box-shadow, border-color;
  transition:
    transform 0.45s cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 0.45s cubic-bezier(0.19, 1, 0.22, 1),
    border-color 0.4s ease;
}

.card-3d:hover {
  transform: translate3d(0, -8px, 0) rotateX(4deg) rotateY(-3deg);
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.6),
    0 0 44px rgba(212, 175, 55, 0.24);
  border-color: rgba(212, 175, 55, 0.55);
}

.card-3d::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.12), transparent 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.card-3d:hover::after {
  opacity: 1;
}