/* 10-modals.css — Modal Overlay, Designation Modal, Coming-Soon Toast, Completion Gate, Preview Banner */

/* ══════════════════════════════════════
   DESIGNATION MODAL
══════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(28,58,86,0.88);
  backdrop-filter: blur(8px);
  z-index: 150; display: none;
  align-items: center; justify-content: center;
}

.modal-overlay.show { display: flex; }

.modal-card {
  background: var(--cobalt);
  max-width: 520px; width: 90%;
  overflow: hidden;
  animation: fadeUp 0.4s cubic-bezier(0.4,0,0.2,1);
}

.modal-accent { height: 5px; background: linear-gradient(90deg, var(--terracotta), var(--gold)); }
.modal-inner { padding: 48px; text-align: center; }

.modal-emblem {
  width: 68px; height: 68px;
  background: linear-gradient(135deg, var(--terracotta), var(--gold));
  margin: 0 auto 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; position: relative;
}

.modal-emblem::after {
  content: ''; position: absolute; inset: -8px;
  border: 1px solid rgba(184,146,74,0.3); border-radius: 50%;
}

.modal-eyebrow {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: 10px;
}

.modal-title {
  font-family: 'Playfair Display', serif;
  font-size: 36px; font-weight: 400;
  color: white; line-height: 1.15; margin-bottom: 18px;
}

.modal-title em { font-style: italic; color: var(--gold-light); }

.modal-body {
  font-family: 'Spectral', serif;
  font-size: 15px; font-weight: 300; font-style: italic;
  color: rgba(249,244,237,0.78);
  line-height: 1.8; margin-bottom: 32px;
}

.modal-dismiss {
  background: var(--terracotta); color: white;
  border: none; cursor: pointer;
  padding: 15px 40px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  transition: background 0.2s; display: inline-block;
}

.modal-dismiss:hover { background: var(--terra-light); }

@keyframes wbShake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-3px); }
  80%       { transform: translateX(3px); }
}

.wb-nav-next.wb-btn-shake {
  animation: wbShake 0.45s ease;
  background: var(--terracotta) !important;
}

.wb-blocked-msg {
  display: none;
  font-size: 11px; font-weight: 400;
  color: var(--terracotta);
  background: var(--terra-pale);
  border-left: 3px solid var(--terracotta);
  padding: 10px 14px;
  line-height: 1.6;
  margin: 0 24px;
}

@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196,98,45,0); }
  50%       { box-shadow: 0 0 0 8px rgba(196,98,45,0.35); }
}
.cta-pulse { animation: ctaPulse 0.8s ease 3; }

/* ══════════════════════════════════════
   COMING SOON TOAST
══════════════════════════════════════ */
.coming-soon-toast {
  position: fixed;
  bottom: 32px; left: 50%; transform: translateX(-50%) translateY(12px);
  background: var(--cobalt);
  color: white;
  padding: 12px 24px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 400;
  letter-spacing: 0.03em;
  border-left: 3px solid var(--gold);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 200;
  white-space: nowrap;
}

.coming-soon-toast.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ══════════════════════════════════════
   COMPLETION GATE
══════════════════════════════════════ */
@keyframes ctaShake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

.next-phase-cta.cta-blocked {
  animation: ctaShake 0.5s ease;
  background: var(--terracotta) !important;
}

.complete-blocked-msg {
  display: none;
  font-size: 12px; font-weight: 500;
  color: var(--terracotta);
  padding: 8px 14px;
  background: var(--terra-pale);
  border-left: 3px solid var(--terracotta);
  margin-top: 8px;
}

/* ══════════════════════════════════════
   PREVIEW BANNER
══════════════════════════════════════ */
.preview-banner {
  display: flex; align-items: center; gap: 14px;
  background: rgba(184,146,74,0.1);
  border: 1px solid rgba(184,146,74,0.25);
  border-left: 3px solid var(--gold);
  padding: 14px 20px;
  margin: 0 0 0 0;
}

.preview-banner-icon {
  font-size: 18px; flex-shrink: 0;
}

.preview-banner-text {
  font-family: 'Spectral', serif;
  font-size: 13px; font-weight: 300; font-style: italic;
  color: var(--text-mid); line-height: 1.5; flex: 1;
}

.preview-banner-text strong {
  font-style: normal; font-weight: 600; color: var(--gold);
}