@font-face {
  font-family: 'KFGQPC Uthman Taha Naskh';
  src: url('../font/KFGQPC Uthman Taha Naskh Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --gold: #B89C72;
  --gold-deep: #9A7B47;
  --charcoal: #1C1C1C;
}

* { -webkit-tap-highlight-color: transparent; }

html {
  overflow-y: scroll; /* always reserve scrollbar space — prevents layout shift */
}

body {
  background-color: #FDFBF7;
  color: var(--charcoal);
  overflow-x: hidden;
  cursor: none; /* hidden for custom cursor (desktop) */
  text-rendering: optimizeLegibility;
}
body.no-scroll { overflow: hidden; }

::selection { background: #DBCBBA; color: #1C1C1C; }

/* ---------- Lenis recommended ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ---------- Custom Premium Cursor ---------- */
.cursor-dot, .cursor-outline {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 9999;
  pointer-events: none;
}
.cursor-dot {
  width: 6px;
  height: 6px;
  background-color: var(--gold);
}
.cursor-outline {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(184, 156, 114, 0.55);
  transition: width 0.35s ease, height 0.35s ease, background-color 0.35s ease, border-color 0.35s ease;
}
body.cursor-hover .cursor-outline {
  width: 64px;
  height: 64px;
  background-color: rgba(184, 156, 114, 0.12);
  border-color: rgba(184, 156, 114, 0.9);
}
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  .cursor-dot, .cursor-outline { display: none !important; }
}

/* ---------- Noise Overlay ---------- */
.noise-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ---------- Scroll Progress ---------- */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  z-index: 70;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), #E9D9BD);
  pointer-events: none;
}

/* ---------- Preloader Islamic Icon ---------- */
.loader-islamic-icon {
  width: 28px;
  height: 28px;
  opacity: 0.7;
  animation: islamicRotate 12s linear infinite, islamicPulse 4s ease-in-out infinite;
}
@keyframes islamicRotate {
  to { transform: rotate(360deg); }
}
@keyframes islamicPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .loader-islamic-icon { animation: none; }
}

/* ---------- Hero Islamic Icon ---------- */
.hero-islamic-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.65;
  animation: heroIconRotate 18s linear infinite, heroIconPulse 5s ease-in-out infinite;
}
@keyframes heroIconRotate {
  to { transform: rotate(360deg); }
}
@keyframes heroIconPulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-islamic-icon { animation: none; }
}

/* ---------- Typography Helpers ---------- */
.eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--gold);
  font-size: 11px;
}
.ornament::before, .ornament::after {
  content: "";
  height: 1px;
  width: 64px;
}
.ornament::before { background: linear-gradient(90deg, transparent, rgba(184,156,114,0.65)); }
.ornament::after  { background: linear-gradient(270deg, transparent, rgba(184,156,114,0.65)); }

/* Gold shimmer text — refined gradient */
.shimmer-gold {
  background: linear-gradient(100deg, #7c5f33 0%, #b89c72 22%, #e9d5a7 40%, #f7eed6 50%, #e9d5a7 60%, #b89c72 78%, #7c5f33 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 8s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }

/* ---------- Section Ornaments ---------- */
.section-ornament {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ---------- Hero ---------- */
.hero-mask { overflow: hidden; display: block; }
.hero-line { display: inline-block; }
.char { display: inline-block; opacity: 0; will-change: transform, opacity; }

.sparkle {
  position: absolute;
  pointer-events: none;
  animation: sparkleFloat 5.5s ease-in-out infinite;
}
@keyframes sparkleFloat {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(-10px); opacity: 0.9; }
}

.scroll-hint { animation: floaty 2.4s ease-in-out infinite; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

/* ---------- Top Bar ---------- */
#topbar {
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease, box-shadow 0.6s ease;
}
#topbar.topbar-visible {
  transform: translateY(0);
  opacity: 1;
  box-shadow: 0 12px 40px -24px rgba(28, 28, 28, 0.25);
}

/* ---------- Loader Bar ---------- */
.loader-bar-track {
  width: 150px;
  height: 2px;
  background: rgba(184, 156, 114, 0.1);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.loader-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--gold-deep) 70%, transparent 100%);
  border-radius: 999px;
  animation: loaderBarSlide 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes loaderBarSlide {
  0% { left: -45%; }
  100% { left: 100%; }
}

.loader-bar-track-sm {
  width: 80px;
  height: 1.5px;
  background: rgba(184, 156, 114, 0.1);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.loader-bar-track-sm .loader-bar-fill {
  width: 50%;
  animation: loaderBarSlideSm 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes loaderBarSlideSm {
  0% { left: -50%; }
  100% { left: 100%; }
}

.loader-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.loader-word { display: inline-block; opacity: 0; will-change: transform, opacity; }

/* ---------- Minimalist Scrollbar ---------- */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar { width: 3px; }

/* ---------- Countdown ---------- */
.cd-box {
  background: rgba(253, 251, 247, 0.04);
  border: 1px solid rgba(184, 156, 114, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
}
.cd-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px -20px rgba(184, 156, 114, 0.45);
  border-color: rgba(184, 156, 114, 0.5);
}

/* ---------- Timeline ---------- */
.dot-indicator {
  transition: background-color 0.5s ease, box-shadow 0.5s ease;
}
.timeline-item:hover .dot-indicator,
.timeline-item.is-active .dot-indicator {
  background-color: var(--gold);
  box-shadow: 0 0 18px rgba(184, 156, 114, 0.6);
}
.year { transition: color 0.6s ease; }
.timeline-item.is-active .year { color: var(--gold); }

/* ---------- Inputs ---------- */
input:focus-visible, textarea:focus-visible { outline: none; }
#guestMessage { max-height: 220px; overflow-y: auto; }

/* ---------- Pattern Ribbon ---------- */
.pattern-track {
  display: flex;
  width: max-content;
  animation: patternSlide 55s linear infinite;
}
.pattern-tile {
  flex-shrink: 0;
  animation: patternSpin 70s linear infinite;
}
@keyframes patternSlide {
  to { transform: translateX(-50%); }
}
@keyframes patternSpin {
  to { transform: rotate(360deg); }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sparkle, .scroll-hint, .pattern-track, .pattern-tile { animation: none !important; }
  .shimmer-gold { animation: none; background-position: 50% 50%; }
}