/* ============================================================
   CFC demo — code-unlock splash + dismissable demo ribbon.
   Both layers live outside the app's React root. Brand tokens
   come from brand.css (:root --cfc-*). Editorial, not SaaS-soft:
   radius <= 4px, Söhne display + Domaine italic accent.
   ============================================================ */

/* ---- Dismissable demo ribbon (labs .demo-banner convention) ---- */
.cfc-ribbon {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  background: var(--cfc-iris-0);
  border-bottom: 1px solid var(--cfc-rule-warm);
  color: var(--cfc-bone-mute);
  font-family: var(--cfc-sans);
  font-size: 11px;
  letter-spacing: 0.02em;
  flex: none;
}
.cfc-ribbon[hidden] { display: none; }
.cfc-ribbon__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cfc-amber); flex: none;
  box-shadow: 0 0 0 3px rgba(224,174,124,0.14);
}
.cfc-ribbon__label {
  font-family: var(--cfc-display);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cfc-brass-lift);
  flex: none;
}
.cfc-ribbon__text { color: var(--cfc-bone-mute); }
.cfc-ribbon__text b { color: var(--cfc-bone); font-weight: 600; }
.cfc-ribbon__spacer { margin-left: auto; }
.cfc-ribbon__dismiss {
  background: none;
  border: 1px solid var(--cfc-rule);
  border-radius: 2px;
  color: var(--cfc-bone-mute);
  font-family: var(--cfc-sans);
  font-size: 11px;
  line-height: 1;
  padding: 5px 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 160ms var(--cfc-ease), color 160ms var(--cfc-ease);
}
.cfc-ribbon__dismiss:hover { border-color: var(--cfc-brass); color: var(--cfc-bone-strong); }

/* ---- Full-screen unlock splash ---- */
.cfc-gate {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--cfc-bone);
  background:
    radial-gradient(ellipse 50% 16% at 14% 4%,  rgba(95,180,196,0.13) 0%, transparent 60%),
    radial-gradient(ellipse 52% 16% at 86% 40%, rgba(167,139,250,0.19) 0%, transparent 62%),
    radial-gradient(ellipse 58% 20% at 82% 84%, rgba(192,132,252,0.22) 0%, transparent 62%),
    radial-gradient(ellipse 46% 16% at 22% 72%, rgba(224,174,124,0.14) 0%, transparent 60%),
    linear-gradient(180deg, #1E1724 0%, #1B1623 42%, #18141F 100%);
  opacity: 1;
  transition: opacity 520ms var(--cfc-ease);
}
.cfc-gate.is-unlocked { opacity: 0; pointer-events: none; }
.cfc-gate[hidden] { display: none; }

/* subtle real-data field behind the card */
.cfc-gate__field {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0.16;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 46%, transparent 0%, #000 78%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 46%, transparent 0%, #000 78%);
}
/* film grain, matching the instrument */
.cfc-gate::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.05; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cfc-gate__card {
  position: relative;
  z-index: 1;
  width: min(468px, 100%);
  padding: clamp(28px, 4vw, 44px);
  background: linear-gradient(180deg, rgba(44,33,53,0.72), rgba(24,20,31,0.82));
  border: 1px solid var(--cfc-rule-warm);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(237,227,208,0.05), 0 24px 64px rgba(20,16,27,0.62);
  animation: cfcCardIn 640ms var(--cfc-ease) both;
}
@keyframes cfcCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cfc-gate, .cfc-gate__card { animation: none; transition: none; }
}

.cfc-gate__logo { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; }
.cfc-gate__logo img.mark { width: 34px; height: 34px; filter: drop-shadow(0 2px 10px rgba(20,16,27,0.6)); }
.cfc-gate__logo img.word { height: 18px; }

.cfc-gate__eyebrow {
  display: inline-block;
  padding-bottom: 11px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--cfc-rule);
  font-family: var(--cfc-display);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cfc-brass-lift);
}
.cfc-gate__title {
  font-family: var(--cfc-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.4vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--cfc-bone-strong);
  margin: 0 0 12px;
}
.cfc-gate__title em {
  font-family: var(--cfc-italic);
  font-style: italic;
  color: var(--cfc-amber);
}
.cfc-gate__sub {
  color: var(--cfc-bone-mute);
  font-family: var(--cfc-sans);
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 40ch;
}

.cfc-gate__form { display: flex; gap: 9px; align-items: stretch; }
.cfc-gate__input {
  flex: 1; min-width: 0;
  background: rgba(20,16,27,0.62);
  border: 1px solid var(--cfc-rule);
  border-radius: 2px;
  padding: 12px 14px;
  color: var(--cfc-bone-strong);
  font-family: var(--cfc-mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  transition: border-color 180ms var(--cfc-ease), box-shadow 180ms var(--cfc-ease);
}
.cfc-gate__input::placeholder { color: var(--cfc-bone-dim); letter-spacing: 0.06em; }
.cfc-gate__input:focus {
  outline: none;
  border-color: rgba(130,196,208,0.36);
  box-shadow: 0 0 0 3px rgba(95,180,196,0.12);
}
.cfc-gate__btn {
  flex: none;
  font-family: var(--cfc-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 12px 20px;
  background: linear-gradient(180deg, rgba(52,39,65,0.92) 0%, rgba(36,27,44,0.96) 100%);
  color: var(--cfc-bone-strong);
  border: 1px solid rgba(167,139,250,0.55);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 220ms var(--cfc-ease), box-shadow 220ms var(--cfc-ease);
}
.cfc-gate__btn:hover, .cfc-gate__btn:focus-visible {
  outline: none;
  border-color: var(--cfc-violet);
  box-shadow: 0 0 28px rgba(167,139,250,0.32);
}

.cfc-gate__error {
  min-height: 18px;
  margin: 14px 0 0;
  font-family: var(--cfc-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--cfc-terra);
  opacity: 0;
  transition: opacity 160ms var(--cfc-ease);
}
.cfc-gate__error.is-shown { opacity: 1; }
.cfc-gate.is-error .cfc-gate__card { animation: cfcShake 420ms var(--cfc-ease) both; }
@keyframes cfcShake {
  10%,90% { transform: translateX(-1px); }
  20%,80% { transform: translateX(2px); }
  30%,50%,70% { transform: translateX(-4px); }
  40%,60% { transform: translateX(4px); }
}

.cfc-gate__foot {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--cfc-rule);
  display: flex; align-items: center; gap: 8px;
  font-family: var(--cfc-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--cfc-bone-dim);
}
.cfc-gate__foot .pip {
  width: 5px; height: 5px; border-radius: 50%; background: var(--cfc-sage);
  box-shadow: 0 0 0 3px rgba(148,163,129,0.14);
}