/* =====================================================
   Noor Al-Zawaj — Muslim Wedding Card Designer
   Premium CSS Design System
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Great+Vibes&family=Inter:wght@300;400;500;600;700&family=Lateef:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600&family=Noto+Nastaliq+Urdu&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Scheherazade+New:wght@400;500;600;700&family=Tajawal:wght@300;400;500;700&display=swap');

:root {
  --canvas-bg: #080a0e;
  --panel-bg: rgba(12, 15, 20, 0.9);
  --panel-border: rgba(40, 50, 65, 0.5);
  --gold: #c9a84c;
  --gold-light: #f0d48a;
  --gold-dark: #8a6a1a;
  --card-width: 480px;
  --card-height: 672px;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: rgba(10,12,18,0.8); }
::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.25); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.45); }

/* ---- Card Perspective & Tilt ---- */
.card-perspective { perspective: 1400px; }

.card-preview-element {
  width: var(--card-width);
  height: var(--card-height);
  transform-style: preserve-3d;
  transition: transform 0.12s ease, box-shadow 0.35s ease;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.8),
    0 0 60px rgba(201,168,76,0.06);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  user-select: none;
}

/* Sheen effect */
.card-preview-element::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(125deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
  pointer-events: none;
  z-index: 10;
}
.card-preview-element:hover::after { transform: translateX(120%); }

/* ===== TEMPLATE BACKGROUNDS ===== */

/* 1. Royal Emerald Palace */
.bg-emerald-palace {
  background-color: #061a10;
  background-image:
    repeating-linear-gradient(45deg, rgba(201,168,76,0.04) 0px, rgba(201,168,76,0.04) 1px, transparent 1px, transparent 24px),
    repeating-linear-gradient(-45deg, rgba(201,168,76,0.04) 0px, rgba(201,168,76,0.04) 1px, transparent 1px, transparent 24px),
    radial-gradient(circle at 50% 0%, rgba(201,168,76,0.08) 0%, transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(201,168,76,0.06) 0%, transparent 50%);
}

/* 2. Sapphire & Pearl */
.bg-sapphire-pearl {
  background-color: #08122b;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(100,130,255,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(201,168,76,0.1) 0%, transparent 50%),
    repeating-conic-gradient(rgba(201,168,76,0.025) 0% 25%, transparent 0% 50%) 0 0 / 28px 28px;
}

/* 3. Rose Musk Ivory */
.bg-rose-musk {
  background-color: #fcf5ee;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(180,100,100,0.06) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(140,80,60,0.06) 0%, transparent 40%),
    repeating-linear-gradient(45deg, rgba(180,130,100,0.04) 0px, rgba(180,130,100,0.04) 1px, transparent 1px, transparent 20px);
}

/* 4. Obsidian Midnight */
.bg-obsidian {
  background-color: #09080d;
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(130,70,190,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(201,168,76,0.1) 0%, transparent 50%),
    repeating-linear-gradient(0deg, rgba(201,168,76,0.02) 0px, rgba(201,168,76,0.02) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg, rgba(201,168,76,0.02) 0px, rgba(201,168,76,0.02) 1px, transparent 1px, transparent 32px);
}

/* ===== BORDERS ===== */
.border-arabesque-gold {
  border: 3px double rgba(201,168,76,0.9);
  box-shadow: inset 0 0 0 6px transparent, inset 0 0 0 7px rgba(201,168,76,0.15);
}
.border-palace-pearl {
  border: 1px solid rgba(201,168,76,0.5);
  box-shadow: inset 0 0 0 5px rgba(201,168,76,0.06), 0 0 30px rgba(201,168,76,0.08);
}
.border-ivory-thin {
  border: 2px solid rgba(180,130,100,0.4);
  outline: 1px solid rgba(180,130,100,0.2);
  outline-offset: -6px;
}
.border-obsidian-frame {
  border: 2px solid rgba(130,70,190,0.4);
  box-shadow: inset 0 0 0 6px rgba(130,70,190,0.05);
}
.border-none { border: none; }

/* ===== ANIMATIONS ===== */

@keyframes float {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-9px); }
}
.animate-float { animation: float 7s ease-in-out infinite; }

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.animate-spin-slow { animation: spin-slow 20s linear infinite; }

@keyframes pulse-glow-gold {
  0%,100% { box-shadow: 0 0 18px rgba(201,168,76,0.35); }
  50%     { box-shadow: 0 0 35px rgba(201,168,76,0.75); }
}
.glow-btn { animation: pulse-glow-gold 3s ease-in-out infinite; }

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.text-shimmer {
  background: linear-gradient(90deg, var(--gold-dark) 0%, var(--gold-light) 40%, var(--gold-dark) 60%, var(--gold-light) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 5s linear infinite;
}

/* ===== PRINT ===== */
@media print {
  body * { visibility: hidden; }
  #card-preview, #card-preview * { visibility: visible; }
  #card-preview {
    position: absolute; left: 0; top: 0;
    width: 100% !important; height: 100% !important;
    box-shadow: none !important; transform: none !important;
  }
}