/* ═══════════════════════════════════════════════════════════════
   "We missed you, Natalie" — elegant minimalist splash (TEMPORARY)
   Self-contained + namespaced (.mn-*). Shared by the public site and studio.
   To remove entirely:
     1. delete this file and js/missed-natalie.js
     2. remove the two <!-- MISSED-NATALIE --> blocks (markup + tags) from
        index.html and studio/login.html
   ═══════════════════════════════════════════════════════════════ */

.mn-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 2rem;
  cursor: pointer;
  color: #FAF7F2;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(201, 169, 110, 0.10), transparent 60%),
    linear-gradient(165deg, #131E36 0%, #1B2A4A 60%, #131E36 100%);
}

.mn-splash--out {
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.mn-eyebrow {
  margin: 0 0 0.6rem;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #C9A96E;
  opacity: 0;
  animation: mnFadeUp 1s ease 0.2s forwards;
}

.mn-line {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  line-height: 1.08;
  font-weight: 400;
}

.mn-line--soft {
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  font-style: italic;
  color: rgba(250, 247, 242, 0.86);
  opacity: 0;
  animation: mnFadeUp 1.1s ease 0.5s forwards;
}

.mn-line--name {
  font-size: clamp(3.4rem, 13vw, 7.5rem);
  font-weight: 500;
  color: #C9A96E;
  opacity: 0;
  animation: mnFadeUp 1.3s ease 0.95s forwards;
}

.mn-rule {
  width: 0;
  height: 1px;
  margin: 1.6rem auto 0;
  background: linear-gradient(90deg, transparent, #C9A96E, transparent);
  animation: mnRule 1.4s ease 1.6s forwards;
}

.mn-hint {
  margin-top: 2.4rem;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.45);
  opacity: 0;
  animation: mnFadeUp 1s ease 2.6s forwards, mnHintPulse 2.6s ease-in-out 3.6s infinite;
}

@keyframes mnFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes mnRule {
  from { width: 0; }
  to   { width: clamp(120px, 22vw, 220px); }
}

@keyframes mnHintPulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.16; }
}

@media (prefers-reduced-motion: reduce) {
  .mn-eyebrow, .mn-line--soft, .mn-line--name, .mn-hint {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .mn-rule { animation: none; width: clamp(120px, 22vw, 220px); }
}