/* Modellen, layer 1. A white field, and the waterfall continues from
   that field: the square has no stroke. Its rim is the same white, so
   the plate and the frame read as one surface. Glyphs are born at that
   rim and fade toward the talk dark in the middle.
   In portrait the plate is a 72vmin square. In landscape it becomes a
   wide rectangle, about 90vw by 78vh, so the top and bottom are the
   long sides and it fills more of the slide. Those two long edges
   carry twice as many symbol columns.
   Each side owns the outer 35% as a trapezoid: the outer edge covers the
   whole side and the inner edge stays open (middle 40%), so the four
   falls overlap in the corners and frame the word. Symbols are five
   neutral whites (white, milk, pearl, silver, whitish grey), each with
   its own clarity, rotated so that side is up:
   top 0°, right 90°, bottom 180°,
   left -90°.
   Each side glows inward along that trapezoid, solid white at the rim
   so it meets the field, then softer toward the center. The output word
   sits in the dark middle without a glow, in the same Playfair 5rem as
   the other layer-one headings.
   Down reveals AI, then LLM. The next Down zooms into the middle. The
   white field and the overlay fade to --bg, then the deck lands on 2.0
   on that same dark. The word fades out in 0.42s, before that zoom
   finishes. Right on this face still leaves the chapter. */

html.talk {
  --machine-frame: #fff;
  --machine-edge: 4px;
  --machine-merge: 20px;
  --machine-mist-rim: 1;
  --machine-mist-mid: 0.5;
}

html.talk .mode-machine {
  padding: 0;
  background: var(--machine-frame);
}

html.talk .machine {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  user-select: none;
}

html.talk .machine-square {
  position: relative;
  width: 72vmin;
  height: 72vmin;
  container-type: size;
  overflow: hidden;
  background: var(--bg);
}

html.talk .machine-square::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--machine-frame) var(--machine-edge), transparent var(--machine-merge)),
    linear-gradient(to top, var(--machine-frame) var(--machine-edge), transparent var(--machine-merge)),
    linear-gradient(to right, var(--machine-frame) var(--machine-edge), transparent var(--machine-merge)),
    linear-gradient(to left, var(--machine-frame) var(--machine-edge), transparent var(--machine-merge));
}

@media (orientation: landscape) {
  html.talk .machine-square {
    width: min(90vw, calc(100vw - 5rem));
    height: min(78vh, calc(100vh - 7.5rem));
  }
}

html.talk:has(.mode-machine.is-current) .dot:not(.dot-chapter):not(.is-on)::before {
  background: rgba(10, 12, 16, 0.38);
}

html.talk:has(.mode-machine.is-current) .dot.dot-chapter:not(.is-on)::before {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(10, 12, 16, 0.55);
}

html.talk:has(.mode-machine.is-current) .dot:not(.dot-index):not(.is-on) .mark,
html.talk:has(.mode-machine.is-current) .rail .rail-label {
  color: rgba(10, 12, 16, 0.72);
}

html.talk:has(.mode-machine.is-current) .rail .rail-label::after {
  background: rgba(10, 12, 16, 0.45);
}

html.talk .machine-sideglow {
  position: absolute;
  z-index: 0;
  filter: blur(12px);
  pointer-events: none;
}

html.talk .machine-sideglow span {
  display: block;
  width: 100%;
  height: 100%;
}

html.talk .machine-sideglow.is-top,
html.talk .machine-sideglow.is-bottom {
  left: 0;
  right: 0;
  height: 35cqmin;
}

html.talk .machine-sideglow.is-top { top: 0; }
html.talk .machine-sideglow.is-bottom { bottom: 0; }

html.talk .machine-sideglow.is-left,
html.talk .machine-sideglow.is-right {
  top: 0;
  bottom: 0;
  width: 35cqmin;
}

html.talk .machine-sideglow.is-left { left: 0; }
html.talk .machine-sideglow.is-right { right: 0; }

html.talk .machine-sideglow.is-top span {
  clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%);
  background: linear-gradient(to bottom, rgb(255 255 255 / var(--machine-mist-rim)) 0%, rgb(255 255 255 / var(--machine-mist-mid)) 14%, transparent 42%);
}

html.talk .machine-sideglow.is-bottom span {
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  background: linear-gradient(to top, rgb(255 255 255 / var(--machine-mist-rim)) 0%, rgb(255 255 255 / var(--machine-mist-mid)) 14%, transparent 42%);
}

html.talk .machine-sideglow.is-left span {
  clip-path: polygon(0 0, 100% 30%, 100% 70%, 0 100%);
  background: linear-gradient(to right, rgb(255 255 255 / var(--machine-mist-rim)) 0%, rgb(255 255 255 / var(--machine-mist-mid)) 14%, transparent 42%);
}

html.talk .machine-sideglow.is-right span {
  clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 70%);
  background: linear-gradient(to left, rgb(255 255 255 / var(--machine-mist-rim)) 0%, rgb(255 255 255 / var(--machine-mist-mid)) 14%, transparent 42%);
}

html.talk .machine-fall {
  position: absolute;
  overflow: hidden;
  z-index: 1;
}

html.talk .machine-fall.is-top,
html.talk .machine-fall.is-bottom {
  left: 0;
  right: 0;
  height: 35cqmin;
}

html.talk .machine-fall.is-top { top: 0; }
html.talk .machine-fall.is-bottom { bottom: 0; }

html.talk .machine-fall.is-left,
html.talk .machine-fall.is-right {
  top: 0;
  bottom: 0;
  width: 35cqmin;
}

html.talk .machine-fall.is-left { left: 0; }
html.talk .machine-fall.is-right { right: 0; }

html.talk .machine-fall.is-top {
  clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, transparent 100%);
}

html.talk .machine-fall.is-bottom {
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  mask-image: linear-gradient(to top, transparent 0%, #000 12%, transparent 100%);
}

html.talk .machine-fall.is-left {
  clip-path: polygon(0 0, 100% 30%, 100% 70%, 0 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 12%, transparent 100%);
}

html.talk .machine-fall.is-right {
  clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 70%);
  mask-image: linear-gradient(to left, transparent 0%, #000 12%, transparent 100%);
}

html.talk .machine-lane {
  position: absolute;
}

html.talk .machine-fall.is-top .machine-lane,
html.talk .machine-fall.is-bottom .machine-lane {
  top: 0;
  left: var(--at);
  width: calc(var(--size) * 1.35);
  height: 100%;
  translate: -50% 0;
}

html.talk .machine-fall.is-left .machine-lane,
html.talk .machine-fall.is-right .machine-lane {
  left: 0;
  top: var(--at);
  width: 100%;
  height: var(--size);
  translate: 0 -50%;
}

html.talk .machine-stream {
  display: flex;
  animation-duration: var(--dur);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: var(--delay);
}

html.talk .machine-fall.is-top .machine-stream,
html.talk .machine-fall.is-bottom .machine-stream {
  flex-direction: column;
  height: 200%;
}

html.talk .machine-fall.is-left .machine-stream,
html.talk .machine-fall.is-right .machine-stream {
  flex-direction: row;
  width: 200%;
  height: 100%;
}

html.talk .machine-fall.is-top .machine-stream { animation-name: machine-in-down; }
html.talk .machine-fall.is-bottom .machine-stream { animation-name: machine-in-up; }
html.talk .machine-fall.is-left .machine-stream { animation-name: machine-in-right; }
html.talk .machine-fall.is-right .machine-stream { animation-name: machine-in-left; }

html.talk .machine-copy {
  flex: 1 0 50%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-width: 0;
  min-height: 0;
  font-family: var(--mono);
  font-size: var(--size);
  font-weight: 400;
  line-height: 1;
}

/* Baseline points at the center once the side is turned upright.
   The glow uses the glyph's own white, so the hue stays visible. */
html.talk .machine-copy > span {
  color: rgb(var(--hue) / var(--clear));
  text-shadow:
    0 0.17em 0.29em rgb(var(--hue) / calc(var(--clear) * 0.65)),
    0 0 0.12em rgb(var(--hue) / calc(var(--clear) * 0.3));
}

html.talk .machine-fall.is-right .machine-copy > span {
  transform: rotate(90deg);
}

html.talk .machine-fall.is-bottom .machine-copy > span {
  transform: rotate(180deg);
}

html.talk .machine-fall.is-left .machine-copy > span {
  transform: rotate(-90deg);
}

html.talk .machine-fall.is-top .machine-copy,
html.talk .machine-fall.is-bottom .machine-copy {
  flex-direction: column;
}

html.talk .machine-word {
  position: absolute;
  z-index: 3;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: visible;
  pointer-events: none;
  color: #fff;
}

html.talk .machine-word span {
  grid-area: 1 / 1;
  justify-self: center;
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: 5rem;
  letter-spacing: 0.1em;
  margin-right: -0.1em;
  line-height: 1.12;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.48s ease;
}

html.talk .machine-word .word-ai {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.06em;
  white-space: normal;
}

html.talk .machine-word .word-ai span {
  opacity: 1;
  white-space: nowrap;
}

html.talk .machine-word .word-llm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  white-space: normal;
}

html.talk .machine-word .llm-name {
  font-size: clamp(0.85rem, 1.6vw, 1.2rem);
  letter-spacing: 0.18em;
  margin-right: 0;
  line-height: 1;
  opacity: 1;
}

html.talk .machine-word .llm-mark {
  font-size: 5rem;
  letter-spacing: 0.1em;
  margin-right: -0.1em;
  opacity: 1;
}

html.talk .face.is-ai:not(.is-llm) .word-ai,
html.talk .face.is-llm .word-llm,
html.talk .face.is-transformer .word-transformer {
  opacity: 1;
}

html.talk .mode-machine.is-zoom {
  background: var(--bg);
}

html.talk .mode-machine.is-zoom .machine {
  opacity: 0;
}

html.talk .mode-machine.is-zoom::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--bg);
  pointer-events: none;
}

html.talk .mode-machine.is-play-zoom {
  animation: machine-field 1.25s ease both;
}

html.talk .mode-machine.is-play-zoom .machine {
  transform-origin: center;
  animation: machine-zoom 1.25s cubic-bezier(0.45, 0, 0.15, 1) both;
}

html.talk .mode-machine.is-play-zoom .machine-word {
  animation: machine-word-out 0.42s ease-in both;
}

html.talk .mode-machine.is-play-zoom::before {
  animation: machine-black 1.25s ease-in both;
}

html.talk:has(.mode-machine.is-current.is-zoom) .chrome {
  opacity: 0;
}

html.talk:has(.mode-machine.is-current.is-play-zoom) .chrome {
  animation: machine-chrome 1.25s ease both;
}

@keyframes machine-zoom {
  0% { transform: scale(1); opacity: 1; }
  55% { opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes machine-word-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes machine-black {
  0% { opacity: 0; }
  30% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes machine-field {
  from { background-color: var(--machine-frame); }
  to { background-color: var(--bg); }
}

@keyframes machine-chrome {
  0% { opacity: 1; }
  45% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes machine-in-down {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}

@keyframes machine-in-up {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@keyframes machine-in-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@keyframes machine-in-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 1100px) {
  html.talk .machine-word span,
  html.talk .machine-word .llm-mark {
    font-size: min(5rem, 7.2vw);
  }
}

@media (max-width: 768px) {
  html.talk .machine-word span,
  html.talk .machine-word .llm-mark {
    font-size: min(2.75rem, 8.2vw);
    letter-spacing: 0.05em;
    margin-right: -0.05em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.talk .machine-word span {
    transition: none;
  }

  html.talk .machine-stream,
  html.talk .mode-machine.is-play-zoom,
  html.talk .mode-machine.is-play-zoom .machine,
  html.talk .mode-machine.is-play-zoom .machine-word,
  html.talk .mode-machine.is-play-zoom::before,
  html.talk:has(.mode-machine.is-current.is-play-zoom) .chrome {
    animation: none;
  }
}