<script setup>
import BoardCall from '../components/BoardCall.vue'
</script>

<div class="crowds-slide">
  <div class="eyebrow">Arup &middot; Hong Kong &middot; 2024</div>

  <BoardCall :stage="$clicks" />

  <!-- Empty v-click markers — register click stops with Slidev so arrow
       presses advance BoardCall's stage instead of changing slide.
       Stage 1: others join + speech. Stage 2: OK + ledger. Stage 3: deepfake reveal. -->
  <div v-click></div>
  <div v-click></div>
  <div v-click></div>
</div>

<style scoped>
.crowds-slide {
  position: absolute;
  inset: 0;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.crowds-slide .eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 1.5rem;
}
.crowds-slide .rule {
  width: 2.5rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  margin: 2rem 0;
}
.crowds-slide .rule.faint {
  background: rgba(255, 255, 255, 0.18);
  margin: 1.5rem 0;
}
.crowds-slide .story {
  font-family: 'DM Serif Display', serif;
  font-size: 1.2rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  max-width: 34rem;
}
.crowds-slide .reveal {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 1.65rem;
  line-height: 1.4;
  color: #ffffff;
  max-width: 32rem;
}
.crowds-slide .punch {
  margin-top: 1rem;
  font-family: 'DM Serif Display', serif;
  font-size: 1.5rem;
  line-height: 1.4;
  color: #ffffff;
}
.crowds-slide .punch em { font-style: italic; color: #ffffff; }
.crowds-slide .kicker {
  margin-top: 1.75rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
</style>

<!--
A few years ago, in Hong Kong, a finance worker got an email from his CFO.

His CFO asked him to make a transfer, of 25Million.

Protocol says that you need visual confirmation for this sort of transfer so that's what the finance worker asked for. 

They got on a call, 

(CLICK) And invited a few more people to join. 

(CLICK) After confirmation, the worker proceeded with the transfer. 

(CLICK) The thing is, that every single person on that call was a deepfake. 

A perfect copy of an existing person, under the control of a single attacker. 

Day to day, the same thing happens, even if at a smaller scale. 

You don't know if you're responding or discussing with a human or a bot online. You can't tell when you use a centralized platform. 

Now luckily, we have solved the same type of problem before. 
-->
