/* =============================================
   PREMIUM WEDDING INVITATION — DESIGN SYSTEM
   Red · Black · White Edition
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Lato:wght@300;400;700&display=swap');

/* ─── CSS Variables (dynamically overridden by PHP) ── */
:root {
  --primary:       var(--cfg-primary,       #c0392b);
  --primary-dark:  var(--cfg-primary-dark,  #922b21);
  --primary-light: var(--cfg-primary-light, #e74c3c);
  --dark:          var(--cfg-dark,          #111111);
  --ivory:         var(--cfg-bg,            #ffffff);
  --bg-soft:       var(--cfg-bg-soft,       #f9f9f9);
  --white:         #ffffff;
  --text-dark:     #111111;
  --text-mid:      #444444;
  --border:        rgba(192, 57, 43, 0.2);

  --serif:  'Playfair Display', Georgia, serif;
  --serif2: 'Cormorant Garamond', serif;
  --sans:   'Lato', sans-serif;

  --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  --shadow-primary: 0 8px 40px rgba(192, 57, 43, 0.3);
  --shadow-soft:    0 20px 60px rgba(17, 17, 17, 0.12);
}

/* ─── Reset ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg-soft);
  color: var(--text-dark);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ─── Scrollbar ─────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }

/* ─── Floating Petals ───────────────────────── */
.petal {
  position: fixed;
  border-radius: 50% 0 50% 0;
  animation: floatPetal linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes floatPetal {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ─── Gold/Red Divider ──────────────────────── */
.divider {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin: 20px auto;
}
.divider::before, .divider::after {
  content: '';
  flex: 1; max-width: 120px; height: 1px;
  background: linear-gradient(to right, transparent, var(--primary), transparent);
}
.divider-icon { color: var(--primary); font-size: 18px; }

/* ─── Primary Button ────────────────────────── */
.btn-invite {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 52px;
  font-family: var(--serif2); font-size: 1.1rem; letter-spacing: 0.12em;
  color: var(--white);
  background: linear-gradient(135deg, var(--primary-light), var(--primary), var(--primary-dark));
  border: none; border-radius: 1px;
  cursor: pointer; text-decoration: none;
  position: relative; overflow: hidden;
  box-shadow: 0 4px 24px rgba(192,57,43,0.5);
  transition: var(--transition);
  font-style: italic;
}
.btn-invite::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent);
  opacity: 0; transition: opacity 0.3s;
}
.btn-invite:hover::before { opacity: 1; }
.btn-invite:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 44px rgba(192,57,43,0.65);
}
/* pulse ring */
.btn-invite::after {
  content: '';
  position: absolute; inset: -4px;
  border: 1.5px solid rgba(192, 57, 43, 0.55);
  border-radius: 3px;
  animation: pulseRing 2.5s ease-in-out infinite;
}
@keyframes pulseRing {
  0%,100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0; transform: scale(1.07); }
}

/* ─── Scroll reveal ─────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.30s; }
.reveal-delay-3 { transition-delay: 0.45s; }
.reveal-delay-4 { transition-delay: 0.60s; }