/* Cloudflare SASE deck — custom reveal.js theme.
   Dark "connectivity cloud" aesthetic with Cloudflare orange accent. */

:root {
  --cf-orange: #f6821f;
  --cf-orange-2: #faae40;
  --cf-ink: #0a1526;
  --cf-ink-2: #0f1e35;
  --cf-panel: #14243e;
  --cf-line: #26426b;
  --cf-fg: #eaf1fb;
  --cf-dim: #9fb2ce;
  --cf-dimmer: #64789a;
  --cf-teal: #37c6a8;
  --cf-red: #ff6b57;
  --cf-blue: #5aa0ff;

  /* reveal core variables */
  --r-background-color: var(--cf-ink);
  --r-main-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-main-font-size: 30px;
  --r-main-color: var(--cf-fg);
  --r-heading-font: "Inter", system-ui, sans-serif;
  --r-heading-color: #ffffff;
  --r-heading-font-weight: 700;
  --r-heading-line-height: 1.1;
  --r-heading-letter-spacing: -0.02em;
  --r-heading1-size: 3.0em;
  --r-heading2-size: 1.7em;
  --r-heading3-size: 1.2em;
  --r-link-color: var(--cf-orange);
  --r-link-color-hover: var(--cf-orange-2);
  --r-selection-background-color: var(--cf-orange);
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

.reveal {
  font-family: var(--r-main-font);
  font-size: var(--r-main-font-size);
  color: var(--cf-fg);
  -webkit-font-smoothing: antialiased;
}

.reveal-viewport {
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(246, 130, 31, 0.10), transparent 60%),
    radial-gradient(900px 600px at 5% 110%, rgba(90, 160, 255, 0.08), transparent 55%),
    var(--cf-ink);
}

.reveal h1, .reveal h2, .reveal h3 {
  color: var(--r-heading-color);
  letter-spacing: var(--r-heading-letter-spacing);
  line-height: var(--r-heading-line-height);
  font-weight: 700;
  margin-bottom: 0.35em;
}
.reveal h1 { font-size: var(--r-heading1-size); }
.reveal h2 { font-size: var(--r-heading2-size); }
.reveal h3 { font-size: var(--r-heading3-size); }

.reveal p, .reveal li { line-height: 1.4; }
.reveal strong { color: #fff; font-weight: 700; }
.reveal em { color: var(--cf-orange-2); font-style: normal; font-weight: 600; }

/* Slide layout helpers */
.reveal .slides section { text-align: left; top: 0 !important; }
.reveal .slides section.center-slide { text-align: center; }

.eyebrow {
  display: inline-block;
  color: var(--cf-orange);
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.6em;
}
.subtle { color: var(--cf-dim); }
.dimmer { color: var(--cf-dimmer); }

.lede {
  color: var(--cf-dim);
  font-size: 1.05em;
  line-height: 1.5;
  max-width: 22ch;
}
.center-slide .lede { max-width: 26ch; margin-left: auto; margin-right: auto; }

/* Brand mark */
.brand-row { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; }
.brand-row .cf-logo { width: 54px; height: 54px; }
.brand-row .brand-text { font-size: 0.7em; color: var(--cf-dim); font-weight: 600; letter-spacing: 0.02em; }

/* Pills / chips */
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.5em; font-weight: 600; color: var(--cf-orange-2);
  background: rgba(246, 130, 31, 0.1);
  border: 1px solid rgba(246, 130, 31, 0.3);
  border-radius: 999px; padding: 8px 18px; margin-bottom: 26px;
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cf-orange); animation: cfpulse 2.2s infinite; }
@keyframes cfpulse { 0% { box-shadow: 0 0 0 0 rgba(246,130,31,0.5);} 70% { box-shadow: 0 0 0 10px rgba(246,130,31,0);} 100% { box-shadow: 0 0 0 0 rgba(246,130,31,0);} }

/* Two-column split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.split.wide-left { grid-template-columns: 1.3fr 0.7fr; }
.split.wide-right { grid-template-columns: 0.8fr 1.2fr; }

/* Feature list with ticks */
.reveal ul.ticks { list-style: none; margin-left: 0; }
.reveal ul.ticks li { position: relative; padding-left: 40px; margin-bottom: 18px; font-size: 0.92em; }
.reveal ul.ticks li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 24px; height: 24px; border-radius: 7px;
  background: rgba(55, 198, 168, 0.14);
  border: 1px solid rgba(55, 198, 168, 0.4);
}
.reveal ul.ticks li::after {
  content: ""; position: absolute; left: 8px; top: 9px; width: 8px; height: 13px;
  border: solid var(--cf-teal); border-width: 0 2.5px 2.5px 0; transform: rotate(42deg);
}

/* Cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 20px; }
.card {
  background: linear-gradient(180deg, var(--cf-panel), var(--cf-ink-2));
  border: 1px solid var(--cf-line); border-radius: 16px; padding: 26px 24px;
}
.card .card-ic { width: 46px; height: 46px; margin-bottom: 16px; color: var(--cf-orange); }
.card h3 { font-size: 0.8em; margin-bottom: 8px; }
.card p { font-size: 0.62em; color: var(--cf-dim); line-height: 1.45; margin: 0; }

/* Stat row */
.stats { display: flex; gap: 46px; margin-top: 30px; flex-wrap: wrap; }
.stat b { display: block; font-size: 1.5em; font-weight: 800; color: #fff; letter-spacing: -0.02em;
  background: linear-gradient(120deg, var(--cf-orange), var(--cf-orange-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat span { font-size: 0.5em; color: var(--cf-dim); }

/* Comparison old vs new */
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: stretch; margin-top: 10px; }
.vs .vs-col { background: var(--cf-panel); border: 1px solid var(--cf-line); border-radius: 16px; padding: 28px; }
.vs .vs-col.old { border-color: rgba(255, 107, 87, 0.35); }
.vs .vs-col.new { border-color: rgba(55, 198, 168, 0.4); }
.vs .vs-col h3 { font-size: 0.8em; margin-bottom: 16px; }
.vs .vs-col.old h3 { color: var(--cf-red); }
.vs .vs-col.new h3 { color: var(--cf-teal); }
.vs .vs-col ul { list-style: none; margin: 0; }
.vs .vs-col li { font-size: 0.6em; color: var(--cf-dim); padding: 7px 0; line-height: 1.4; }
.vs .vs-arrow { display: flex; align-items: center; color: var(--cf-orange); font-size: 1.4em; }

/* Callout box */
.callout {
  background: linear-gradient(135deg, rgba(246,130,31,0.1), rgba(90,160,255,0.08));
  border: 1px solid rgba(246, 130, 31, 0.3); border-radius: 14px;
  padding: 22px 26px; font-size: 0.72em; color: var(--cf-fg); margin-top: 24px;
}
.callout b { color: var(--cf-orange-2); }

/* Footer chrome on every slide */
.deck-footer {
  position: fixed; bottom: 18px; left: 26px; right: 26px; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--cf-dimmer); pointer-events: none;
}
.deck-footer .df-left { display: flex; align-items: center; gap: 9px; }
.deck-footer .df-left svg { width: 18px; height: 18px; }
.reveal .slide-number { color: var(--cf-dimmer); background: transparent; font-size: 14px; }

/* Progress bar in Cloudflare orange */
.reveal .progress { color: var(--cf-orange); height: 4px; }

/* Fragment caption used with the diagram */
.diagram-caption {
  min-height: 2.4em; margin-top: 18px; font-size: 0.66em; color: var(--cf-dim);
  border-left: 3px solid var(--cf-orange); padding-left: 16px; line-height: 1.4;
}
.diagram-caption b { color: #fff; }

/* Bridge-to-demo box */
.demo-bridge {
  display: flex; align-items: center; gap: 20px; margin-top: 24px;
  background: var(--cf-panel); border: 1px solid var(--cf-line); border-radius: 14px; padding: 20px 24px;
}
.demo-bridge .db-ic { width: 44px; height: 44px; color: var(--cf-teal); flex: 0 0 auto; }
.demo-bridge a { font-size: 0.7em; font-weight: 700; }
.demo-bridge .db-sub { font-size: 0.5em; color: var(--cf-dim); }

/* Keyboard hint on title */
.kbd-hint { margin-top: 34px; font-size: 0.42em; color: var(--cf-dimmer); }
.kbd { display: inline-block; padding: 2px 9px; border: 1px solid var(--cf-line); border-bottom-width: 2px;
  border-radius: 6px; background: var(--cf-panel); color: var(--cf-dim); font-size: 0.9em; margin: 0 2px; }

.reveal .slides section .fragment.step-cap { position: absolute; }