/* Slide 4, second half (call.js): "there is always one call: between you, the founder, and me, your
   technical partner." On "call" the dashboard steps back and a video call opens: the founder's tile
   (camera off: it is the viewer) on the left, Ian's on the right. Under each tile, what that side
   brings lights up word by word, then, under both, what they build together. */
.call-stage { display: none; }

/* The dashboard steps back when the call opens. */
html.is-presenting .dash-stage { transition: opacity .5s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
html.is-presenting .dash-story:has(.call-stage.is-on) .dash-stage { opacity: 0; transform: translateX(-50%) scale(.92); pointer-events: none; }

html.is-presenting .call-stage {
  --tile-height: clamp(96px, calc(100vh - var(--header-height) - var(--covered-bottom, 230px) - 340px), 280px);
  position: absolute;
  top: calc(var(--header-height) + 8px);
  bottom: var(--covered-bottom, 230px);
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  transition: opacity .5s ease .15s, transform .8s cubic-bezier(.2, .8, .2, 1) .15s, visibility 0s linear .65s;
}
html.is-presenting .call-stage.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: .15s, .15s, 0s; }

/* "● One call 00:07": the call's status, as at the top of a call window. */
.call-bar { display: flex; align-items: center; gap: 10px; margin: 0; padding: 7px 14px; border: 1px solid #262626; border-radius: 999px; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #bdbdbd; background: #0b0b0b; }
.call-bar i { width: 8px; height: 8px; border-radius: 50%; background: #5ee08f; box-shadow: 0 0 0 0 rgba(94, 224, 143, .5); animation: call-live 2s ease-out infinite; }
.call-time { font-variant-numeric: tabular-nums; color: var(--ink); }
@keyframes call-live { 70%, 100% { box-shadow: 0 0 0 8px rgba(94, 224, 143, 0); } }

.call-grid { width: min(1000px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: start; }
.call-side { display: grid; gap: 12px; }

/* The two video tiles. Each one "connects" (lights up) when its person is named. */
.call-tile {
  position: relative;
  height: var(--tile-height);
  overflow: hidden;
  border: 1px solid #262626;
  border-radius: 20px;
  background: #0d0d0d;
  transition: border-color .4s ease, box-shadow .4s ease;
}
.call-side.is-on .call-tile { border-color: #3a3a3a; }
/* Whose side the narration is describing gets the "speaking" ring; both on the "together" line. */
.call-stage.s1:not(.s2) .call-you .call-tile, .call-stage.s2:not(.s3) .call-me .call-tile, .call-stage.s3 .call-tile { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(244, 244, 244, .14); }
.call-tag { position: absolute; left: 12px; bottom: 12px; z-index: 1; padding: 5px 11px; border-radius: 999px; font-size: 13px; color: #bdbdbd; background: rgba(0, 0, 0, .66); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.call-tag b { font-weight: 500; color: var(--ink); }

/* The founder: camera off, so a round avatar on the dark tile. */
/* Both round pictures shrink with the tile on short screens. */
.call-avatar { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: min(34%, 104px, calc(var(--tile-height) * .62)); aspect-ratio: 1; border-radius: 50%; color: #8c8c8c; background: #1c1c1c; transform: translate(-50%, -54%); transition: color .4s ease, background-color .4s ease; }
.call-avatar svg { width: 46%; height: 46%; }
.call-you.is-on .call-avatar { color: var(--ink); background: #262626; }
.call-cam { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #8c8c8c; background: rgba(255, 255, 255, .06); }
.call-cam svg { width: 16px; height: 16px; }

/* Ian: his photo fades in when he is named, in a circle the same size and place as the founder's avatar. */
.call-tile img { position: absolute; left: 50%; top: 50%; width: min(34%, 104px, calc(var(--tile-height) * .62)); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: center 30%; opacity: 0; filter: grayscale(1) brightness(.5); transform: translate(-50%, -54%); transition: opacity .8s ease, filter 1.2s ease; }
.call-me.is-on .call-tile img { opacity: 1; filter: grayscale(.15); }

/* The line between the tiles: dashed while the call connects, solid once both are on. */
.call-link { position: relative; height: var(--tile-height); }
.call-link span { position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; border-radius: 1px; background: repeating-linear-gradient(90deg, #555 0 6px, transparent 6px 12px); background-size: 24px 2px; animation: call-dash .8s linear infinite; }
.call-stage:has(.call-me.is-on) .call-link span { background: var(--ink); animation: none; }
@keyframes call-dash { to { background-position: 24px 0; } }

/* What each side brings: two cards for the founder, four for Ian (the technical solution and the launch span a row). */
.call-brings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.call-brings li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 50px;
  padding: 8px 14px;
  border: 1px solid #262626;
  border-radius: 14px;
  font-size: clamp(14px, 1.15vw, 17px);
  color: var(--ink);
  background: #0b0b0b;
  opacity: 0;
  transform: translateY(10px) scale(.97);
  transition: opacity .45s ease, transform .6s cubic-bezier(.3, 1.4, .5, 1), border-color .4s ease;
}
.call-brings li.is-on { opacity: 1; transform: none; border-color: #3a3a3a; }
.call-brings li > svg { flex-shrink: 0; width: 22px; height: 22px; }
.call-stage svg path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* The technical solution: two cogs that start turning, "Building…" then "Ready to work", and the tools it runs on. */
.call-engine { grid-column: 1 / -1; }
.call-engine .call-status { display: block; margin: 3px 0 0; }
.call-gears { position: relative; flex-shrink: 0; width: 34px; height: 26px; }
.call-gears svg { position: absolute; width: 20px; height: 20px; }
.call-gears svg:first-child { left: 0; top: 0; }
.call-gears svg:last-child { right: 0; bottom: 0; width: 15px; height: 15px; }
.call-engine.is-on .call-gears svg:first-child { animation: call-spin 3s linear infinite; }
.call-engine.is-on .call-gears svg:last-child { animation: call-spin 2.2s linear infinite reverse; }
@keyframes call-spin { to { rotate: 360deg; } }
.call-status { position: relative; display: inline-block; margin-left: 8px; font-family: "Reddit Mono", ui-monospace, Menlo, monospace; font-size: 11px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px; }
.call-status b { font-weight: 400; transition: opacity .3s ease; }
.call-status .is-build { color: #8c8c8c; }
.call-status .is-run { position: absolute; left: 0; top: 0; color: #5ee08f; opacity: 0; white-space: nowrap; }
.call-engine.is-on .is-build { opacity: 0; transition-delay: 1.4s; }
.call-engine.is-on .is-run { opacity: 1; transition-delay: 1.5s; }
.call-marks { display: flex; gap: 6px; margin-left: auto; }
.call-mark { padding: 4px 9px; border: 1px solid #3a3a3a; border-radius: 999px; font-size: 12px; font-style: normal; color: #bdbdbd; white-space: nowrap; }

/* Launch: the app goes live. */
.call-live { grid-column: 1 / -1; }
.call-live::after { content: "Live"; display: inline-flex; align-items: center; gap: 8px; font-family: "Reddit Mono", ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #5ee08f; }
.call-live::before { content: ""; order: 2; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: #5ee08f; box-shadow: 0 0 0 0 rgba(94, 224, 143, .5); animation: call-live 2s ease-out infinite; }
.call-live::after { order: 3; }

/* The last line: what both sides build together, under the two tiles. */
.call-together { width: min(1000px, 100%); display: grid; gap: 8px; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.call-together.is-on { opacity: 1; transform: none; }
.call-together-label { display: flex; align-items: center; gap: 14px; margin: 0; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #bdbdbd; }
.call-together-label::before, .call-together-label::after { content: ""; flex: 1; height: 1px; background: #262626; }
.call-together .call-brings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.call-together .call-brings li { justify-content: center; }
.call-together .call-brings li.is-on { border-color: #555; }

@media (prefers-reduced-motion: reduce) {
  .call-stage, .call-stage * { transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important; }
}