<script setup>
import BotCounter from '../components/BotCounter.vue'
import Swarm from '../components/Swarm.vue'
</script>

<div class="flood-slide">
  <div class="eyebrow">Estimated share of internet traffic</div>

  <div class="counter">
    <BotCounter :start="49.42" :ceiling="50" :tau="600" :digits="6" />
  </div>

  <div class="rule"></div>

  <div class="swarm-wrap">
    <Swarm :count="240" :cols="30" :lit-start="0.4942" :lit-ceiling="0.5" :tau="600" />
  </div>

  <div class="caption">
    machine-generated &middot; growing &middot; non-linear
  </div>
</div>

<style scoped>
.flood-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;
}
.flood-slide .eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 2.5rem;
}
.flood-slide .counter {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 5.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.1);
}
.flood-slide .rule {
  width: 2.5rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  margin: 2.5rem 0 1.75rem;
}
.flood-slide .swarm-wrap {
  margin-bottom: 1.75rem;
}
.flood-slide .caption {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.flood-slide .kicker {
  margin-top: 2rem;
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.85);
}
</style>

<!--
These machines generate content faster than we can verify it.

And that's only going to get faster. 

We are at a tipping point, where perhaps bots will be the main inhabitant of the web.

Where humans are a minority. 

And we're no longer talking about the old bots from ten years ago. 

-->
