/* jessewaites.com look: navy blueprint grid, rust accent, Space Grotesk + Source Serif. */

:root {
  --bg: #0b1a33;
  --bg-deep: #081328;
  --panel: #0f1f3d;
  --panel-2: #142a52;
  --line: rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .24);
  --text: #f0f0f0;
  --soft: #d7deed;
  --muted: #8a96b0;
  --accent: #bf452c;
  --accent-hi: #d4573f;
  --gold: #e8cc6e;
  --pass: #4fbf85;
  --fail: #e5484d;
  --ice: #7fb2ff;

  --f-display: 'Space Grotesk', system-ui, sans-serif;
  --f-body: 'Source Serif 4', Georgia, serif;
  --f-ui: 'Inter', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --f-hand: 'Rock Salt', cursive;

  --grid: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px) 0 0 / 100px 100px,
          linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px) 0 0 / 100px 100px,
          linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 20px 20px,
          linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 20px 20px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body { font-family: var(--f-ui); -webkit-font-smoothing: antialiased; }

/* ---------- simple pages (index, login) ---------- */

.page { min-height: 100%; background: var(--grid), var(--bg); padding: 64px 16px; }
.page-inner { max-width: 760px; margin: 0 auto; }
.page h1 { font-family: var(--f-display); font-size: 2.2rem; margin: 0 0 .25rem; }
.page .sub { color: var(--muted); margin: 0 0 2.5rem; font-family: var(--f-body); }
.deck-card { display: block; padding: 1.4rem 1.6rem; margin-bottom: 1rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; }
.deck-card:hover { border-color: var(--accent); }
.deck-card h2 { font-family: var(--f-display); margin: 0 0 .35rem; font-size: 1.35rem; }
.deck-card p { margin: 0 0 .9rem; color: var(--soft); font-family: var(--f-body); }
.deck-card .links { display: flex; gap: 1rem; font-size: .9rem; }
.deck-card .links a { color: var(--accent-hi); }

.login { max-width: 340px; margin: 18vh auto 0; display: flex; flex-direction: column; gap: .8rem; }
.login h1 { margin: 0 0 .5rem; }
.login input, .login button { font: inherit; font-size: 1.05rem; padding: .85rem 1rem; border-radius: 8px;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); }
.login button { background: var(--accent); border-color: var(--accent); font-weight: 600; cursor: pointer; }
.login .err { color: var(--fail); margin: 0; }

/* ---------- stage ---------- */

.deck-body { overflow: hidden; background: #050b17; }
#viewport { position: fixed; inset: 0; }
#stage {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0;
  background: var(--grid), radial-gradient(ellipse at 70% 20%, #11264a 0%, var(--bg) 55%, var(--bg-deep) 100%);
  overflow: hidden;
}
#blackout { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 50; }
#blackout.on { opacity: 1; }

.slide {
  position: absolute; inset: 0; padding: 110px 140px; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s;
  font-family: var(--f-body); font-size: 40px; line-height: 1.4; color: var(--soft);
}
.slide.active { opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s; }
.slide.center { justify-content: center; }
.slide.middle { align-items: center; text-align: center; }

/* builds: anything with data-step="n" appears at step n */
.slide [data-step] { transition: opacity .45s ease, transform .45s ease, filter .45s ease; }
.slide [data-step]:not(.shown) { opacity: 0; transform: translateY(18px); pointer-events: none; }
.slide [data-step].dim-after.dimmed { opacity: .3; }

#progress { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--accent); transition: width .45s ease; z-index: 5; }
#counter { position: absolute; right: 40px; bottom: 26px; font: 500 22px var(--f-mono); color: var(--muted); z-index: 5; letter-spacing: .05em; }
#sync-dot { position: fixed; right: 12px; top: 12px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--muted); opacity: 0; transition: opacity .6s; z-index: 60; }
#sync-dot.on { background: var(--pass); }
#sync-dot.off { background: var(--fail); }
#sync-dot.flash { opacity: .9; }

/* ---------- slide typography ---------- */

.kicker { font: 500 26px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-hi); margin: 0 0 28px; }
.slide h1 { font: 700 112px/1.02 var(--f-display); color: #fff; margin: 0 0 36px; letter-spacing: -.02em; }
.slide h2 { font: 700 76px/1.08 var(--f-display); color: #fff; margin: 0 0 40px; letter-spacing: -.015em; }
.slide h3 { font: 600 40px/1.2 var(--f-display); color: #fff; margin: 0 0 14px; }
.slide p { margin: 0 0 24px; }
.lede { font-size: 48px; line-height: 1.35; color: var(--soft); max-width: 1400px; }
.muted { color: var(--muted); }
.accent { color: var(--accent-hi); }
.gold { color: var(--gold); }
.pass { color: var(--pass); }
.fail { color: var(--fail); }
.mono { font-family: var(--f-mono); }
.hand { font-family: var(--f-hand); color: var(--gold); }
.slide ul.clean { list-style: none; padding: 0; margin: 0; }
.slide ul.clean li { padding-left: 44px; position: relative; margin-bottom: 22px; }
.slide ul.clean li::before { content: ''; position: absolute; left: 0; top: .55em; width: 18px; height: 3px; background: var(--accent); }

.row { display: flex; gap: 60px; }
.col { flex: 1; min-width: 0; }
.grow { flex: 1; min-height: 0; }
.card { background: rgba(15, 31, 61, .88); border: 1px solid var(--line); border-radius: 18px; padding: 40px 44px; }
.card.hot { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 20px 60px rgba(191, 69, 44, .18); }
.pill { display: inline-block; font: 500 24px var(--f-mono); padding: 6px 18px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--soft); }
.quote { font: italic 400 64px/1.3 var(--f-body); color: #fff; border-left: 6px solid var(--accent); padding-left: 48px; max-width: 1500px; }
.canvas-fill { position: absolute; inset: 0; }
.canvas-fill canvas { display: block; width: 100%; height: 100%; }
.qr { background: #fff; padding: 22px; border-radius: 20px; width: 380px; height: 380px; }
.qr img { width: 100%; height: 100%; display: block; }