/* ============================================================
   Aurora™ — Interactive demo page. Extends site.css / styles.css.
   Tokens only; no new colors. Frames the live app in a window
   with a guided launch splash + scenario switcher.
   ============================================================ */

/* ---- Compact demo hero ---- */
.demo-hero { padding: 116px 0 44px; }
.demo-hero .hero-inner { max-width: 900px; }
.demo-hero h1 { font-size: clamp(34px, 5vw, 60px); line-height: 1.05; max-width: 17ch; margin: 0 0 22px; color: #fff; }
.demo-hero .lede { max-width: 640px; margin-bottom: 0; }
.demo-eyebrow-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.demo-live-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px;
  border-radius: var(--radius-pill); background: rgba(5,150,105,0.14);
  border: 1px solid rgba(5,150,105,0.4); color: var(--success);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}
.demo-live-pill .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(5,150,105,0.5); animation: gs-pulse 2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .demo-live-pill .pulse { animation: none; } }

/* ---- Stage section (dark, so the app reads as the focal point) ---- */
.demo-stage { background: var(--navy-dark); padding: 40px 0 72px; }

/* Toolbar above the window */
.demo-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.scenario-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.scenario-tab {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 15px; border-radius: var(--radius-md);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-on-dark-muted); font-family: var(--font-body);
  font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap;
  transition: background var(--dur-normal) var(--ease-standard),
              border-color var(--dur-normal) var(--ease-standard),
              color var(--dur-normal) var(--ease-standard);
}
.scenario-tab:hover { color: #fff; border-color: rgba(255,255,255,0.32); }
.scenario-tab.active { background: var(--royal); border-color: var(--royal); color: #fff; }
.scenario-tab .lucide { width: 15px; height: 15px; }
.demo-tools { display: flex; align-items: center; gap: 8px; }
.demo-tool {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 9px 14px; border-radius: var(--radius-md);
  background: transparent; border: 1px solid rgba(255,255,255,0.16);
  color: var(--text-on-dark-muted); font-family: var(--font-body); font-size: var(--text-sm);
  transition: color var(--dur-normal) var(--ease-standard), border-color var(--dur-normal) var(--ease-standard);
}
.demo-tool:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.demo-tool .lucide { width: 15px; height: 15px; }

/* ---- Browser-window chrome ---- */
.demo-window {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-dark); border: 1px solid var(--grey-800);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7);
}
.demo-window-bar {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: #0d1424; border-bottom: 1px solid var(--grey-800);
}
.demo-window-dots { display: flex; gap: 8px; }
.demo-window-dots .dot { width: 11px; height: 11px; border-radius: 50%; }
.demo-window-addr {
  flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0;
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04); border: 1px solid var(--grey-800);
  font-family: var(--font-mono); font-size: 12px; color: var(--grey-400);
}
.demo-window-addr .lucide { width: 13px; height: 13px; color: var(--sky); flex-shrink: 0; }
.demo-window-addr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-window-tag {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 5px 11px; border-radius: var(--radius-pill);
  background: rgba(199,154,59,0.14); border: 1px solid rgba(199,154,59,0.45);
  color: var(--gold, #d0a850); font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
}
.demo-window-tag .lucide { width: 12px; height: 12px; }

/* The live frame */
.demo-frame-shell { position: relative; height: min(80vh, 860px); min-height: 620px; background: #050912; }
.demo-frame-shell.is-full { height: 100vh; min-height: 0; }
.demo-frame { width: 100%; height: 100%; border: 0; display: block; }

/* Fullscreen takeover */
.demo-window.is-full {
  position: fixed; inset: 0; z-index: 2000; border-radius: 0; border: 0;
  box-shadow: none; display: flex; flex-direction: column;
}
.demo-window.is-full .demo-frame-shell { flex: 1; height: auto; }

/* ---- Guided launch splash (over the frame until launched) ---- */
.demo-splash {
  position: absolute; inset: 0; z-index: 5; overflow: auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  background:
    radial-gradient(ellipse 90% 80% at 80% 10%, rgba(19,89,223,0.18), transparent 60%),
    var(--navy-dark);
}
.demo-splash.hidden { display: none; }
.demo-splash-grid {
  position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
  background-image: linear-gradient(rgba(74,154,205,0.09) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(74,154,205,0.09) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 78% 12%, #000, transparent 72%);
          mask-image: radial-gradient(ellipse 70% 80% at 78% 12%, #000, transparent 72%);
}
.demo-splash-main { position: relative; padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; }
.demo-splash-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sky); margin-bottom: 16px; }
.demo-splash-scenario-name { font-family: var(--font-display); font-weight: var(--weight-thin); font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; letter-spacing: -0.01em; color: #fff; margin: 0 0 8px; }
.demo-splash-class { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-on-dark-muted); margin-bottom: 20px; }
.demo-splash-class .lucide { width: 13px; height: 13px; color: var(--sky); }
.demo-splash-blurb { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--text-on-dark-muted); max-width: 48ch; margin: 0 0 30px; }
.demo-launch-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 11px; cursor: pointer;
  padding: 16px 28px; border-radius: var(--radius-md); border: 0;
  background: var(--royal); color: #fff; font-family: var(--font-body);
  font-size: var(--text-base); font-weight: var(--weight-semibold);
  transition: background var(--dur-normal) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.demo-launch-btn:hover { background: var(--royal-dark); }
.demo-launch-btn:active { transform: translateY(0.5px) scale(0.99); }
.demo-launch-btn .lucide { width: 19px; height: 19px; }
.demo-launch-note { margin: 16px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--text-muted); }

/* Right pane — "what to try" pointers */
.demo-splash-side {
  position: relative; padding: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 52px);
  border-left: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.22); display: flex; flex-direction: column; justify-content: center;
}
.demo-side-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-on-dark-muted); margin: 0 0 22px; }
.demo-steps { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.demo-step { position: relative; display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.07); }
.demo-step:first-child { border-top: 0; }
.demo-step-num {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(19,89,223,0.16);
  border: 1px solid rgba(74,154,205,0.4); color: var(--sky);
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
}
.demo-step-t { font-size: var(--text-base); font-weight: var(--weight-semibold); color: #fff; margin: 3px 0 4px; }
.demo-step-d { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-on-dark-muted); margin: 0; }

@media (max-width: 900px) {
  .demo-splash { grid-template-columns: 1fr; }
  .demo-splash-side { border-left: 0; border-top: 1px solid rgba(255,255,255,0.08); }
  .demo-frame-shell { height: min(88vh, 760px); }
}

/* ---- Verified-access gate (hard email capture before launch) ---- */
.demo-gate {
  position: absolute; inset: 0; z-index: 6; overflow: auto;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(24px, 4vw, 48px);
  background: radial-gradient(120% 120% at 80% 0%, rgba(19,89,223,0.16), transparent 60%), var(--navy-dark);
}
.demo-gate.hidden { display: none; }
.demo-gate-card {
  position: relative; z-index: 1; width: 100%; max-width: 560px;
  background: rgba(9,15,28,0.72); border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-lg); padding: clamp(26px, 3.4vw, 40px);
  backdrop-filter: blur(6px);
}
.demo-gate-title { font-family: var(--font-display); font-weight: var(--weight-thin); font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.01em; color: #fff; margin: 8px 0 10px; }
.demo-gate-sub { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--text-on-dark-muted); margin: 0 0 26px; max-width: 46ch; }
.demo-gate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-bottom: 18px; }
.demo-field { display: flex; flex-direction: column; gap: 7px; }
.demo-field span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-on-dark-muted); }
.demo-field input, .demo-field select {
  width: 100%; padding: 11px 13px; border-radius: var(--radius-md);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14);
  color: #fff; font-family: var(--font-sans); font-size: 14px;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.demo-field input::placeholder { color: rgba(255,255,255,0.32); }
.demo-field input:focus, .demo-field select:focus { outline: none; border-color: var(--royal); background: rgba(19,89,223,0.10); }
.demo-field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa7bd' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.demo-field select option { color: #0b1220; }
.demo-consent { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; font-size: 12.5px; line-height: 1.5; color: var(--text-on-dark-muted); }
.demo-consent input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--royal); flex-shrink: 0; }
.demo-consent a { color: var(--sky); }
.demo-gate-error {
  display: flex; gap: 9px; align-items: flex-start; margin-bottom: 16px;
  padding: 11px 13px; border-radius: var(--radius-md);
  background: rgba(220,38,38,0.12); border: 1px solid rgba(220,38,38,0.35);
  color: #fca5a5; font-size: 13px; line-height: 1.45;
}
.demo-gate-error[hidden] { display: none; }
.demo-gate .demo-launch-btn { width: 100%; justify-content: center; }
@media (max-width: 560px) { .demo-gate-grid { grid-template-columns: 1fr; } }

/* ---- "How to read it" band under the window ---- */
.demo-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); margin-top: 40px; }
.demo-note { padding: 22px 24px; border-radius: var(--radius-lg); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
.demo-note .lucide { width: 22px; height: 22px; color: var(--sky); }
.demo-note h3 { font-size: var(--text-base); font-family: var(--font-body); font-weight: var(--weight-semibold); color: #fff; margin: 14px 0 6px; }
.demo-note p { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-on-dark-muted); margin: 0; }
@media (max-width: 860px) { .demo-notes { grid-template-columns: 1fr; } }

.demo-disclaimer {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 32px;
  padding: 16px 20px; border-left: 2px solid var(--sky); border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03);
  font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-on-dark-muted);
}
.demo-disclaimer .lucide { width: 17px; height: 17px; color: var(--sky); flex-shrink: 0; margin-top: 3px; }
.demo-disclaimer b { color: var(--ice); font-weight: var(--weight-semibold); }