/* vagen.html, down from Transformermodellen (`data-id="attn"`).
   Rest is the heading Transformer.
   Next: one square, the word fil.
   Next: zoom out to 16 squares, a 4×4 of tool words.
        Fil has no single center in a 4×4, so it sits in the
        upper-left of the four middle cells, and this click
        eases it there from the middle of the screen.
   Next: zoom out to four such grids. Tools, computer files,
        dairy, and road words. Fil sits in the same cell of each.
   Next: the words become decimal numbers and stay there.
   Next: the grids double, four beside the first four. The numbers
        become points, and once the points are in, the boxes go.
   Next: those eight clusters spread into sixteen, and a few
        paths draw through the points.
   Next: zoom out to the stacked weight grids.
   Next: a horizontal infinity behind that symbol.
        The left loop is input, the right loop is output.
   One more Next leaves the slide. */

html.talk .mode-attn .face-inner {
  position: relative;
  z-index: 2;
}

html.talk .attn {
  --stack: 1;
  --zoom-cell: 3.35;
  --zoom-tools: 1.42;
  --zoom-clusters: 1;
  --zoom-points: 0.92;
  --zoom-spread: 0.54;
  --zoom-symbol: 0.16;
  position: absolute;
  left: 5vw;
  right: 5vw;
  top: 8%;
  bottom: 20%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

html.talk .face.is-cell .attn {
  opacity: 1;
}

html.talk .lens {
  --c: 15.5rem;
  --gap: 0.8rem;
  --quad: calc(2 * var(--c) + var(--gap));
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  translate: calc(var(--c) / -2) calc(var(--c) / -2);
  transform-origin: calc(var(--c) / 2) calc(var(--c) / 2);
  scale: var(--zoom-cell);
}

html.talk .quad {
  display: grid;
  grid-template-columns: var(--c) var(--c);
  gap: var(--gap);
  width: var(--quad);
  flex: none;
}

html.talk .quad.is-more {
  width: 0;
  min-width: 0;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
}

html.talk .band {
  display: flex;
  align-items: flex-start;
  flex: none;
}

html.talk .band.is-far {
  width: 0;
  height: 0;
  min-width: 0;
  min-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
}

html.talk .band.is-far .quad + .quad {
  margin-left: var(--gap);
}

html.talk .face.is-cell:not(.is-tools) .lens { scale: var(--zoom-cell); }
html.talk .face.is-tools:not(.is-clusters) .lens { scale: var(--zoom-tools); }

html.talk .face.is-clusters .lens {
  translate: -50% -50%;
  transform-origin: center;
  scale: var(--zoom-clusters);
}

html.talk .face.is-points:not(.is-spread) .lens {
  scale: var(--zoom-points);
}

html.talk .face.is-points .quad.is-more {
  width: var(--quad);
  margin-left: var(--gap);
  overflow: visible;
  opacity: 1;
}

html.talk .face.is-spread .band.is-far {
  width: calc(2 * var(--quad) + var(--gap));
  height: var(--quad);
  margin-top: var(--gap);
  overflow: visible;
  opacity: 1;
}

html.talk .face.is-spread:not(.is-symbol) .lens {
  scale: var(--zoom-spread);
}

html.talk .face.is-symbol .lens {
  scale: var(--zoom-symbol);
  opacity: 0;
}

html.talk .cluster {
  position: relative;
  width: var(--c);
  height: var(--c);
  flex: none;
  padding: 0.55rem;
  opacity: 0;
}

html.talk .cluster.is-home,
html.talk .face.is-clusters .quad:not(.is-more) .cluster,
html.talk .face.is-points .cluster {
  opacity: 1;
}

html.talk .cluster::before {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(232, 234, 239, 0.5);
  opacity: 0;
}

html.talk .face.is-clusters:not(.is-points) .quad:not(.is-more) .cluster::before {
  opacity: 1;
}

html.talk .face.is-points .cluster::before {
  opacity: 0;
}

html.talk .mini {
  --cell-gap: 4px;
  --fil-shift: calc(12.5% - 0.875 * var(--cell-gap));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: var(--cell-gap);
  width: 100%;
  height: 100%;
}

html.talk .face.is-cell:not(.is-tools) .is-home .mini {
  translate: var(--fil-shift) var(--fil-shift);
}

html.talk .mini span {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  container-type: inline-size;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  text-shadow: var(--title-shadow);
  box-shadow: inset 0 0 0 1px rgba(232, 234, 239, 0.42);
  opacity: 0;
}

html.talk .mini span.is-core,
html.talk .face.is-tools .is-home .mini span,
html.talk .face.is-clusters .quad:not(.is-more) .mini span,
html.talk .face.is-points .mini span {
  opacity: 1;
}

html.talk .face.is-points .mini span {
  box-shadow: none;
}

html.talk .mini b,
html.talk .mini i {
  grid-area: 1 / 1;
}

html.talk .mini b {
  font-size: 15cqw;
  font-weight: 400;
  white-space: nowrap;
}

html.talk .mini b.num {
  opacity: 0;
  font-size: 16cqw;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

html.talk .face.is-nums .mini b:not(.num) {
  opacity: 0;
}

html.talk .face.is-nums:not(.is-points) .mini b.num {
  opacity: 1;
}

html.talk .mini i {
  width: 18%;
  height: 18%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.7);
  opacity: 0;
}

html.talk .face.is-points .mini b {
  opacity: 0;
}

html.talk .face.is-points .mini i {
  opacity: 1;
}

html.talk .face.is-spread .mini i {
  width: 28%;
  height: 28%;
}

html.talk .attn-weights {
  position: relative;
  z-index: 2;
  width: min(22rem, 46vw);
  height: min(22rem, 46vw);
  flex: none;
  margin: calc(48px * var(--stack));
}

html.talk .attn-slab {
  position: absolute;
  inset: 0;
  z-index: var(--d);
  opacity: 0;
  transform: translate(calc(var(--ox) * var(--stack) * 1px), calc(var(--oy) * var(--stack) * 1px));
}

html.talk .face.is-symbol .attn-slab {
  opacity: calc(0.16 + var(--d) * 0.17);
}

html.talk .attn-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  width: 100%;
  height: 100%;
}

html.talk .attn-grid i {
  display: block;
  box-shadow: inset 0 0 0 1px rgba(232, 234, 239, 0.38);
  background-image:
    linear-gradient(rgba(232, 234, 239, 0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 234, 239, 0.55) 1px, transparent 1px);
  background-size: 34% 34%;
  background-repeat: repeat;
}

html.talk .infty {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: min(68rem, 90vw);
  translate: -50% -50%;
  opacity: 0;
}

html.talk .face.is-loop .infty {
  opacity: 1;
}

html.talk .infty svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 22%,
    transparent 36%,
    transparent 64%,
    #000 78%,
    #000 100%
  );
}

html.talk .infty path {
  fill: none;
  stroke: rgba(232, 234, 239, 0.78);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

html.talk .infty-in,
html.talk .infty-out {
  position: absolute;
  top: 50%;
  margin: 0;
  translate: -50% -50%;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  text-shadow: var(--title-shadow);
}

html.talk .infty-in { left: 17%; }
html.talk .infty-out { left: 83%; }

html.talk .traces {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
}

html.talk .face.is-spread .traces {
  opacity: 1;
}

html.talk .traces path {
  fill: none;
  stroke: rgba(232, 234, 239, 0.9);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 3px rgb(var(--accent-rgb) / 0.85));
}

html.talk .face.is-spread .traces path {
  stroke-dashoffset: 0;
}

html.talk .face.is-play-cell .is-core {
  animation: cell-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.talk .face.is-play-tools .lens {
  --a: var(--zoom-cell);
  --b: var(--zoom-tools);
  animation: lens-zoom 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.talk .face.is-play-tools .is-home .mini {
  animation: fil-settle 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.talk .face.is-play-tools .is-home .mini span:not(.is-core):not(.is-ring) {
  animation: cell-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.16s + var(--i) * 0.03s);
}

html.talk .face.is-play-clusters .lens {
  --a: var(--zoom-tools);
  --b: var(--zoom-clusters);
  --ta: calc(var(--c) / -2);
  --tb: -50%;
  animation: lens-recenter 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.talk .face.is-play-clusters .quad:not(.is-more) .cluster:not(.is-home),
html.talk .face.is-play-clusters .quad:not(.is-more) .cluster::before {
  animation: cell-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

html.talk .face.is-play-nums .quad:not(.is-more) .mini b:not(.num) {
  animation: word-leave 1.35s linear both;
}

html.talk .face.is-play-nums .quad:not(.is-more) .mini b.num {
  animation: num-in 1.35s linear both;
}

html.talk .face.is-play-points .lens {
  --a: var(--zoom-clusters);
  --b: var(--zoom-points);
  animation: lens-zoom 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.talk .face.is-play-points .quad.is-more {
  overflow: hidden;
  animation: quad-open 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.talk .face.is-play-points .mini b.num {
  animation: num-out 1.8s linear both;
}

html.talk .face.is-play-points .mini i {
  animation: dot-in 1.8s linear both;
}

html.talk .face.is-play-points .mini span {
  animation: box-leave 1.8s linear both;
}

html.talk .face.is-play-points .cluster::before {
  animation: frame-leave 1.8s linear both;
}

html.talk .face.is-play-spread .lens {
  --a: var(--zoom-points);
  --b: var(--zoom-spread);
  animation: lens-zoom 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.talk .face.is-play-spread .band.is-far {
  overflow: hidden;
  animation: band-open 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.talk .face.is-play-spread .mini i {
  animation: dot-grow 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.talk .face.is-play-spread .traces path {
  animation: infty-draw 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.48s;
}

html.talk .face.is-play-spread .traces path:nth-child(2) { animation-delay: 0.6s; }
html.talk .face.is-play-spread .traces path:nth-child(3) { animation-delay: 0.72s; }
html.talk .face.is-play-spread .traces path:nth-child(4) { animation-delay: 0.84s; }

html.talk .face.is-play-symbol .lens {
  --a: var(--zoom-spread);
  --b: var(--zoom-symbol);
  animation: lens-away 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.talk .face.is-play-symbol .attn-slab {
  animation: attn-slab-in 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--d) * 0.08s);
}

html.talk .face.is-play-loop .infty path {
  animation: infty-draw 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.talk .face.is-play-loop .infty-in,
html.talk .face.is-play-loop .infty-out {
  animation: cell-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

@keyframes cell-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes lens-zoom {
  from { scale: var(--a); }
  to { scale: var(--b); }
}

@keyframes fil-settle {
  from { translate: var(--fil-shift) var(--fil-shift); }
  to { translate: 0 0; }
}

@keyframes lens-recenter {
  from { scale: var(--a); translate: var(--ta) var(--ta); }
  to { scale: var(--b); translate: var(--tb) var(--tb); }
}

@keyframes word-leave {
  0% { opacity: 1; }
  16% { opacity: 1; }
  34% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes num-in {
  0% { opacity: 0; }
  28% { opacity: 0; }
  72% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes num-out {
  0% { opacity: 1; }
  18% { opacity: 1; }
  46% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes dot-in {
  0% { opacity: 0; }
  30% { opacity: 0; }
  58% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes box-leave {
  0%, 58% { box-shadow: inset 0 0 0 1px rgba(232, 234, 239, 0.42); }
  100% { box-shadow: inset 0 0 0 0 rgba(232, 234, 239, 0); }
}

@keyframes frame-leave {
  0%, 58% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes quad-open {
  from { width: 0; margin-left: 0; opacity: 0; }
  30% { opacity: 1; }
  to { width: var(--quad); margin-left: var(--gap); opacity: 1; }
}

@keyframes band-open {
  from { width: 0; height: 0; margin-top: 0; opacity: 0; }
  30% { opacity: 1; }
  to {
    width: calc(2 * var(--quad) + var(--gap));
    height: var(--quad);
    margin-top: var(--gap);
    opacity: 1;
  }
}

@keyframes dot-grow {
  from { width: 18%; height: 18%; }
  to { width: 28%; height: 28%; }
}

@keyframes lens-away {
  from { scale: var(--a); opacity: 1; }
  to { scale: var(--b); opacity: 0; }
}

@keyframes attn-slab-in {
  from {
    opacity: 0;
    transform: translate(0, 0) scale(0.86);
  }
  to {
    opacity: calc(0.16 + var(--d) * 0.17);
    transform: translate(calc(var(--ox) * var(--stack) * 1px), calc(var(--oy) * var(--stack) * 1px)) scale(1);
  }
}

@keyframes infty-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@media (max-width: 860px) {
  html.talk .attn {
    left: 0.85rem;
    right: 0.85rem;
    top: 8%;
    bottom: 18%;
    --stack: 0.62;
    --zoom-cell: 3.15;
    --zoom-tools: 1.55;
    --zoom-points: 0.5;
    --zoom-spread: 0.5;
    --zoom-symbol: 0.14;
  }

  html.talk .lens {
    --c: 10.6rem;
    --gap: 0.35rem;
  }

  html.talk .cluster {
    padding: 0.28rem;
  }

  html.talk .mini span {
    letter-spacing: 0;
  }
  html.talk .mini b {
    font-size: 14cqw;
  }

  html.talk .mini b.num {
    font-size: 13cqw;
  }

  html.talk .attn-weights {
    width: 11rem;
    height: 11rem;
  }

  html.talk .infty {
    width: calc(100% + 0.4rem);
  }

  html.talk .infty-in,
  html.talk .infty-out {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
  }

  html.talk .infty-in { left: 12%; }
  html.talk .infty-out { left: 88%; }
}

@media (prefers-reduced-motion: reduce) {
  html.talk .face.is-cell .attn,
  html.talk .lens,
  html.talk .band,
  html.talk .quad,
  html.talk .cluster,
  html.talk .cluster::before,
  html.talk .mini,
  html.talk .mini span,
  html.talk .mini b,
  html.talk .mini i,
  html.talk .attn-slab,
  html.talk .infty,
  html.talk .infty path,
  html.talk .infty-in,
  html.talk .infty-out,
  html.talk .traces,
  html.talk .traces path {
    animation: none;
  }

  html.talk .face.is-symbol .lens {
    opacity: 0;
    scale: var(--zoom-symbol);
  }

  html.talk .face.is-symbol .attn-slab {
    opacity: calc(0.16 + var(--d) * 0.17);
    transform: translate(calc(var(--ox) * var(--stack) * 1px), calc(var(--oy) * var(--stack) * 1px));
  }

  html.talk .face.is-loop .infty path {
    stroke-dashoffset: 0;
  }
}