/*
 * The start page, built to stand on a projector at DevCon: the title, the session in two acts (the
 * overview video, then the demo) and beside them the real run's proof, a wipe between firstspirit.com
 * and the copy fs-migrator wrote of it. It is one screen: on a laptop, a desktop or a 16:9 projector
 * it fits the window without scrolling (tools/walk.ps1 checks 1920x1080 down to 1280x600), and its
 * type grows with the window, like a slide's. Below 900 px it stacks and scrolls.
 * It builds on demo.css (tokens, head band, buttons) and, like the demo, is light. The one dark
 * surface is the theater the video plays in: the lights go down for the film.
 */
@property --wipe { syntax: '<percentage>'; inherits: true; initial-value: 50%; }

:root { --start-w: 1680px; }
body.start-page { min-height: 100vh; display: flex; flex-direction: column; }
/* The room: a fine dot grid, densest behind the picture, and a slow purple bloom. Both are fixed,
   so neither can make the page scroll. */
body.start-page::before, body.start-page::after { content: ''; position: fixed; z-index: -1; pointer-events: none; }
body.start-page::before {
  inset: 0;
  background-image: radial-gradient(rgba(143, 24, 255, .2) 1px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(58% 72% at 76% 48%, #000 0%, transparent 74%);
  mask-image: radial-gradient(58% 72% at 76% 48%, #000 0%, transparent 74%);
}
body.start-page::after {
  width: 64vmax; height: 64vmax; right: -18vmax; top: -30vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(189, 46, 255, .2), rgba(181, 168, 255, .12) 55%, transparent);
  animation: start-drift 26s ease-in-out infinite alternate;
}
@keyframes start-drift { to { transform: translate(-8vmax, 10vmax) scale(1.12); } }

/* The head band's brand sits on the same line as the title below it. */
.start-page .side-head {
  padding-left: max(var(--gutter), calc((100% - var(--start-w)) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc((100% - var(--start-w)) / 2 + var(--gutter)));
}

/* Title and acts on the left, the picture on the right. The title starts right under the head band,
   the acts stand at the foot of the window, and the picture fills the height between. */
.start {
  flex: 1 0 auto; width: 100%; max-width: var(--start-w); margin: 0 auto;
  padding: clamp(20px, 4.5vh, 52px) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(36px, 4.5vw, 96px);
}
.start-intro { display: flex; flex-direction: column; min-width: 0; }
.start-eyebrow {
  margin: 0 0 clamp(10px, 2vh, 22px); font-size: clamp(11px, 1.45vh, 14px); font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--grape);
}
.start-eyebrow::before {
  content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 12px; vertical-align: .12em;
  border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 4px rgba(189, 46, 255, .18);
}
.start h1 {
  margin: 0; font-size: clamp(40px, min(6.3vw, 11.4vh), 112px); font-weight: 800;
  letter-spacing: -.045em; line-height: .98; color: var(--ink);
}
.start h1 span { display: block; }
/* The descender of the p would be cut off by the clipped background without the extra room. */
.start h1 span + span {
  padding-bottom: .1em; margin-bottom: -.1em;
  background: linear-gradient(100deg, var(--grape) 0%, var(--purple) 72%, #d65bff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.start-lede {
  margin: clamp(14px, 3vh, 32px) 0 0; max-width: 34em;
  font-size: clamp(15px, min(1.3vw, 2.25vh), 21px); line-height: 1.55;
}
.start-lede code { font-size: .86em; padding: 1px 7px; }
.start-noscript { margin-top: 24px; }

/* ── the two acts ─────────────────────────────────────────────────────────── */
.start-acts { margin-top: auto; padding-top: clamp(18px, 4vh, 44px); }
.acts { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(10px, 1.6vh, 16px); max-width: 720px; }
.act {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 1.3vw, 22px);
  width: 100%; margin: 0; padding: clamp(8px, 1.2vh, 12px) clamp(14px, 1.5vw, 22px) clamp(8px, 1.2vh, 12px) clamp(8px, 1.2vh, 12px);
  text-align: left; font: inherit; color: inherit; text-decoration: none; cursor: pointer;
  background: rgba(255, 255, 255, .9); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--bloom-sm);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.act:hover, .act:focus-visible { transform: translateY(-2px); border-color: var(--purple); outline: none; }
/* The act to press next: the overview first, the demo once the overview has run. */
.act.is-next { border-color: var(--glow); box-shadow: 0 0 0 4px var(--lavender), var(--bloom); }
.act.is-next:hover, .act.is-next:focus-visible { border-color: var(--purple); }
.act.is-done { background: rgba(255, 255, 255, .66); box-shadow: none; }
.act.is-done .act-title { color: var(--text); }
.act-thumb {
  position: relative; display: block; width: clamp(104px, min(10vw, 17vh), 184px); aspect-ratio: 16 / 9;
  overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: var(--tint);
}
.act-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.act-play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(26, 22, 22, .05); }
.act-play::before, .act-play::after { content: ''; grid-area: 1 / 1; }
.act-play::before {
  width: clamp(28px, 3.8vh, 44px); aspect-ratio: 1; border-radius: 50%;
  background: var(--purple); box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 8px 22px -6px rgba(143, 24, 255, .8);
}
.act-play::after {
  margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
}
.act-text { display: block; min-width: 0; }
.act-kicker { display: block; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.act.is-next .act-kicker { color: var(--grape); }
.act-title {
  display: block; margin-top: 2px; font-size: clamp(17px, min(1.55vw, 2.8vh), 27px); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.15; color: var(--ink);
}
.act-blurb { display: block; margin-top: 3px; font-size: clamp(12.5px, min(.95vw, 1.7vh), 15.5px); line-height: 1.4; }
.act-go {
  display: grid; place-items: center; width: clamp(36px, 4.6vh, 48px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--line); background: var(--pane); color: var(--grape);
  transition: transform .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
}
.act-go svg, .btn-lg svg {
  width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.act.is-next .act-go { background: var(--purple); border-color: var(--purple); color: #fff; }
.act:hover .act-go, .act:focus-visible .act-go { transform: translateX(3px); }

/* ── the proof: the original and the copy, wiped against each other ─────── */
/* It fills its column from the eyebrow down to the foot of the acts, so the two columns end level. */
.proof { position: relative; margin: 0; align-self: stretch; min-height: 0; max-height: 1000px; }
.proof-frame {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--pane); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 0 0 6px rgba(239, 237, 251, .75), 0 44px 90px -40px rgba(143, 24, 255, .55);
  cursor: ew-resize; touch-action: pan-y;
  animation: proof-wipe 10s cubic-bezier(.65, 0, .35, 1) infinite;
}
/* Over the picture the pointer holds the line; after it leaves, the line runs by itself again. */
.proof-frame.is-manual { animation: none; }
@keyframes proof-wipe {
  0%, 12% { --wipe: 26%; }
  46%, 58% { --wipe: 74%; }
  92%, 100% { --wipe: 26%; }
}
.proof-bar { flex: none; display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--tint); border-bottom: 1px solid var(--line); }
.proof-bar i { width: 9px; height: 9px; border-radius: 50%; background: #d9dce6; }
.proof-url {
  margin-left: 10px; padding: 2px 12px; font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  background: var(--pane); border: 1px solid var(--line); border-radius: var(--r-pill);
}
.proof-view { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.proof-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.proof-copy { clip-path: inset(0 0 0 var(--wipe)); }
.proof-line {
  position: absolute; top: 0; bottom: 0; left: var(--wipe); width: 2px; margin-left: -1px; background: #fff;
  box-shadow: 0 0 0 1px rgba(143, 24, 255, .5), 0 0 24px rgba(189, 46, 255, .55);
}
.proof-line::after {
  content: ''; position: absolute; top: 38%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  background: var(--purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px no-repeat;
  box-shadow: 0 0 0 4px #fff, 0 10px 26px -6px rgba(143, 24, 255, .8);
}
.proof-tag {
  position: absolute; top: 14px; padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.proof-tag.is-left { right: 10px; background: rgba(26, 22, 22, .8); }
.proof-tag.is-right { left: 10px; background: var(--purple); }
/* The number, on a card that hangs over the picture's left edge. */
.proof-stat {
  position: absolute; z-index: 2; left: clamp(-44px, -2.4vw, -20px); bottom: 8%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: clamp(200px, 17vw, 270px);
  padding: clamp(12px, 1.8vh, 18px) clamp(14px, 1.3vw, 20px);
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--bloom), 0 2px 6px rgba(26, 22, 22, .06);
}
.proof-stat .real-tag { order: -1; margin-bottom: 4px; }
.proof-pct {
  font-size: clamp(30px, min(3vw, 5.4vh), 54px); font-weight: 800; letter-spacing: -.04em; line-height: 1;
  background: linear-gradient(100deg, var(--grape), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.proof-what { font-size: clamp(11.5px, min(.85vw, 1.55vh), 13.5px); line-height: 1.45; }

/* ── the entrance ─────────────────────────────────────────────────────────── */
@keyframes start-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes start-show { from { opacity: 0; transform: scale(.97); } }
.start-eyebrow, .start h1 span, .start-lede, .start-acts { animation: start-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.start h1 span:first-child { animation-delay: .08s; }
.start h1 span + span { animation-delay: .18s; }
.start-lede { animation-delay: .3s; }
.start-acts { animation-delay: .42s; }
.proof { animation: start-show 1s cubic-bezier(.2, .7, .2, 1) .2s both; }

/* ── the theater: the overview, full window, and the card it ends on ─────── */
.theater {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  overflow: hidden; color: #e9e6f2;
  background: radial-gradient(70% 55% at 50% 0%, rgba(143, 24, 255, .24), transparent 70%), #0e0a14;
}
.theater:focus { outline: none; }
.theater[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); animation: theater-in .38s ease-out; }
.theater::backdrop { background: #0e0a14; }
@keyframes theater-in { from { opacity: 0; } }
.theater-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(16px, 2.4vw, 32px); }
.theater-title { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(233, 230, 242, .7); }
.theater-title b { margin-right: 8px; color: var(--purple); }
/* "→ again to skip": the first → during the film only asks. */
.theater-ask { margin-left: auto; font-size: 13px; font-weight: 700; color: rgba(233, 230, 242, .9); }
.theater-close {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 16px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; color: #e9e6f2;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r-pill);
}
.theater-close:hover, .theater-close:focus-visible { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); outline: none; }
.theater kbd {
  padding: 2px 7px; font-family: var(--mono); font-size: 11px; color: inherit;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .22); border-radius: 6px;
}
.theater-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 clamp(16px, 2.4vw, 32px) clamp(16px, 2.4vw, 32px); }
.theater video {
  display: block; width: min(100%, calc((100vh - 100px) * 16 / 9)); aspect-ratio: 16 / 9; max-height: 100%;
  background: #000; border-radius: 14px; box-shadow: 0 40px 120px -30px rgba(143, 24, 255, .45);
}
.theater video:focus { outline: none; }
.theater-end {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(60% 60% at 50% 42%, rgba(143, 24, 255, .3), transparent 70%), rgba(14, 10, 20, .9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s;
}
.theater.is-over .theater-end { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.theater-end-inner { max-width: 780px; text-align: center; }
.theater-end .kicker { margin-bottom: 14px; color: var(--glow); }
.theater-end h2 {
  margin: 0; font-size: clamp(32px, min(5vw, 8vh), 72px); font-weight: 800; letter-spacing: -.04em; line-height: 1.04; color: #fff;
}
.theater-end h2 span {
  background: linear-gradient(100deg, #c9a6ff, var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.theater-end p { margin: 18px auto 0; max-width: 40em; font-size: clamp(15px, 2.1vh, 19px); color: rgba(233, 230, 242, .78); }
.theater-end a:not(.btn) { color: #d9c2ff; }
.theater-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(22px, 4vh, 36px); }
.btn-lg { font-size: 16px; padding: 13px 26px; }
.btn-lg svg { width: 18px; height: 18px; }
.btn-dark { background: transparent; border-color: rgba(255, 255, 255, .25); color: #e9e6f2; }
.btn-dark:hover, .btn-dark:focus-visible { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .55); color: #fff; }
/* The page's purple focus ring would vanish on the dark card and on the purple button. */
.theater-end .btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.theater-end .theater-keys { margin-top: 22px; font-size: 13px; color: rgba(233, 230, 242, .5); }
/* Only when the file did not play: the card then says so, above the way on. */
.theater-end .theater-fail {
  display: none; margin: 0 auto 26px; padding: 10px 16px; font-size: 14px; color: #ffd7cf;
  border: 1px dashed rgba(255, 180, 168, .5); border-radius: 12px;
}
.theater.is-failed .theater-fail { display: block; }

/* ── narrow ───────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .start { grid-template-columns: minmax(0, 1fr); row-gap: 40px; padding-top: 28px; }
  .start h1 { font-size: clamp(40px, 11.5vw, 72px); }
  .start-lede { font-size: 16px; }
  .start-acts { margin-top: 0; padding-top: 28px; }
  .act-title { font-size: 18px; }
  .act-blurb { font-size: 13px; }
  .proof { height: auto; aspect-ratio: auto; width: 100%; max-width: 560px; justify-self: start; }
  .proof-frame { position: relative; inset: auto; aspect-ratio: 9 / 8; }
  .proof-stat { position: relative; left: auto; bottom: auto; width: auto; margin: -28px 14px 0; }
}
@media (max-width: 520px) {
  .act-thumb { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.start-page::after, .proof-frame, .proof, .start-eyebrow, .start h1 span, .start-lede, .start-acts, .theater[open] { animation: none; }
  .act, .act-go, .theater-end { transition: none; }
}