/* Webbapp. Slide 2 is the question and a web-app mark.
   Down opens 2.0, headed HTML, with the sides held back.
   Next fades both sides in. Browser icons arrive in grayscale.
   Next again lets them take 2s to reach brand color.
   One more Next leaves the slide.
   2.1 is Obegränsade möjligheter: the .html sheet and six things a file can be.
   2.2 is filnamn.html. The file types in and the blocks stack.
   Next designs the house. Next runs lights, blinds and the door.
   Hitta till Gemini is its own chapter after Hur vågen.
   The Gemini capture lives under Prompten and advances when the film ends.
   The film keeps a sharp core and dissolves into --bg at the edges. */
html.talk .webbapp-mark {
  position: absolute;
  left: 50%;
  top: 43%;
  width: min(22rem, 58vw);
  height: auto;
  transform: translate(-50%, -50%);
  color: #fff;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 16px rgba(91, 159, 212, 0.38));
  pointer-events: none;
}

html.talk .webbapp-mark .dot {
  fill: currentColor;
  stroke: none;
}

html.talk .gemini-mark {
  width: min(13rem, 28vw);
  height: auto;
  filter: drop-shadow(0 0 18px rgba(72, 147, 252, 0.32));
  pointer-events: none;
}

html.talk .webbapp-side {
  position: absolute;
  top: max(7.5rem, 22%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.45rem;
  width: max-content;
  max-width: 50vw;
  opacity: 0;
}

html.talk .webbapp-side.is-surfaces {
  left: 18vw;
}

html.talk .webbapp-side.is-browsers {
  right: 18vw;
}

html.talk .gemini-flow {
  position: absolute;
  left: 7vw;
  right: 8vw;
  top: 16%;
  bottom: 22%;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

html.talk .gemini-routes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3.6rem;
  justify-self: center;
}

html.talk .gemini-flow .webbapp-side {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  max-width: none;
  align-items: center;
  gap: 0.85rem;
}

html.talk .gemini-flow .webbapp-label {
  text-align: center;
}

html.talk .gemini-flow .gemini-mark {
  justify-self: start;
  align-self: center;
}

html.talk .webbapp-label {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.1vw, 1.75rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  text-shadow: var(--title-shadow);
}

html.talk .webbapp-icons {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(1.15rem, 2.3vw, 2.35rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

html.talk .webbapp-icons li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.95rem;
  margin: 0;
}

html.talk .webbapp-icons svg {
  width: clamp(3.15rem, 4.9vw, 4.45rem);
  height: auto;
  overflow: visible;
  color: #fff;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(91, 159, 212, 0.3));
}

html.talk .webbapp-icons svg .solid {
  fill: currentColor;
  stroke: none;
}

html.talk .webbapp-side.is-browsers .webbapp-icons svg {
  width: clamp(2.05rem, 3.1vw, 2.85rem);
  fill: currentColor;
  stroke: none;
}

html.talk .webbapp-side.is-browsers .webbapp-icons svg.is-compass {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
}

html.talk .webbapp-side.is-browsers .webbapp-icons svg.is-compass .needle {
  fill: currentColor;
  stroke: none;
}

html.talk .webbapp-side.is-browsers .webbapp-icons svg.is-compass .needle.is-dim {
  opacity: 0.42;
}

html.talk .browser-mark {
  display: grid;
  width: max-content;
}

html.talk .browser-mark > svg {
  grid-area: 1 / 1;
  justify-self: center;
  align-self: center;
}

html.talk .webbapp-side.is-browsers .webbapp-icons svg.is-brand {
  fill: none;
  stroke: none;
  filter: none;
}

html.talk .browser-mark > svg:not(.is-color) {
  opacity: 0;
}

html.talk .webbapp-side.is-browsers .webbapp-icons svg.is-brand.is-color {
  filter: grayscale(1);
}

html.talk .webbapp-icons span {
  font-family: var(--serif);
  font-size: clamp(0.68rem, 1vw, 0.92rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(232, 234, 239, 0.88);
}

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

html.talk .face.is-current .gemini-flow .webbapp-side,
html.talk .face.is-leaving .gemini-flow .webbapp-side {
  animation: webbapp-in 1.05s cubic-bezier(0.16, 1, 0.3, 1) 1s both;
}

html.talk .face.is-surfaces > .webbapp-side.is-surfaces,
html.talk .face.is-browsers > .webbapp-side.is-browsers {
  opacity: 1;
}

html.talk .face.is-play-surfaces > .webbapp-side.is-surfaces,
html.talk .face.is-play-browsers > .webbapp-side.is-browsers {
  animation: webbapp-in 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.talk .stack-parts {
  position: absolute;
  left: 8vw;
  right: 8vw;
  top: 16%;
  bottom: 24%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3.2rem, 7.5vw, 7.2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

html.talk .stack-part {
  display: flex;
  flex: 0 1 16.5rem;
  flex-direction: column;
  align-items: center;
  gap: 0.95rem;
  width: 16.5rem;
  min-width: 0;
  opacity: 0;
}

html.talk .face.is-current .stack-part,
html.talk .face.is-leaving .stack-part {
  animation: webbapp-in 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(1s + var(--i) * 0.22s);
}

html.talk .stack-mark {
  width: clamp(4.4rem, 7.2vw, 6.1rem);
  height: auto;
  overflow: visible;
  color: #fff;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(91, 159, 212, 0.32));
}

html.talk .stack-mark .solid {
  fill: currentColor;
  stroke: none;
}

html.talk .stack-mark .solid.is-dim {
  opacity: 0.28;
}

html.talk .stack-mark .solid.is-mid {
  opacity: 0.58;
}

html.talk .stack-mark .is-ring {
  opacity: 0.22;
}

html.talk .stack-mark .is-ring.is-mid {
  opacity: 0.4;
}

html.talk .stack-part.is-magic .stack-mark {
  filter: drop-shadow(0 0 16px rgba(91, 159, 212, 0.5));
}

html.talk .stack-lede {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(0.92rem, 1.45vw, 1.2rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  color: rgba(232, 234, 239, 0.72);
}

html.talk .waffle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-content: center;
  place-items: center;
  gap: clamp(0.48rem, 0.8vw, 0.7rem);
  width: clamp(5.6rem, 9vw, 7.1rem);
  aspect-ratio: 1;
  padding: clamp(0.8rem, 1.2vw, 1.05rem);
  border: 1.6px solid rgba(232, 234, 239, 0.88);
  border-radius: 50%;
  filter: drop-shadow(0 0 10px rgba(91, 159, 212, 0.4));
}

html.talk .waffle span {
  display: block;
  width: clamp(0.68rem, 1.05vw, 0.92rem);
  height: clamp(0.68rem, 1.05vw, 0.92rem);
  border-radius: 50%;
  background: #fff;
}

html.talk .address-bar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  width: max-content;
  min-width: 0;
  padding: 0.55rem 0.9rem;
  border: 1.6px solid rgba(232, 234, 239, 0.88);
  border-radius: 999px;
  color: #fff;
  filter: drop-shadow(0 0 8px rgba(91, 159, 212, 0.32));
}

html.talk .address-globe {
  flex: none;
  width: 1.15rem;
  height: auto;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.talk .address-url {
  font-family: var(--mono);
  font-size: clamp(0.82rem, 1.2vw, 1.02rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: none;
}

html.talk .address-caret {
  display: block;
  width: 1.5px;
  height: 1.05em;
  margin-left: -0.15rem;
  background: #fff;
  animation: address-caret 1.1s steps(1) infinite;
}

html.talk .address-enter {
  flex: none;
  width: 1.25rem;
  height: auto;
  margin-left: 0.35rem;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

html.talk .mode-flash.is-blend {
  --blend-core: 30%;
  --blend-fade: 72%;
  background: var(--bg);
}

html.talk .mode-flash.is-blend video {
  background: transparent;
  -webkit-mask-image: radial-gradient(
    ellipse 70% 76% at 50% 48%,
    #000 var(--blend-core),
    transparent var(--blend-fade)
  );
  mask-image: radial-gradient(
    ellipse 70% 76% at 50% 48%,
    #000 var(--blend-core),
    transparent var(--blend-fade)
  );
}

@keyframes browser-color {
  from { filter: grayscale(1); }
  to { filter: grayscale(0); }
}

html.talk .face.is-color .browser-mark > svg.is-color {
  filter: none;
}

html.talk .face.is-play-color .browser-mark > svg.is-color {
  animation: browser-color 4s linear both;
}

@media (prefers-reduced-motion: reduce) {
  html.talk .face.is-current .gemini-flow .webbapp-side,
  html.talk .face.is-leaving .gemini-flow .webbapp-side,
  html.talk .face.is-surfaces > .webbapp-side.is-surfaces,
  html.talk .face.is-browsers > .webbapp-side.is-browsers,
  html.talk .face.is-play-surfaces > .webbapp-side.is-surfaces,
  html.talk .face.is-play-browsers > .webbapp-side.is-browsers,
  html.talk .face.is-current .stack-part,
  html.talk .face.is-leaving .stack-part {
    opacity: 1;
    animation: none;
  }

  html.talk .html-sheet-frame,
  html.talk .html-sheet-mast,
  html.talk .html-sheet .cell {
    opacity: 1;
    animation: none;
    transition: none;
  }

  html.talk .face.is-color .browser-mark > svg.is-color,
  html.talk .face.is-play-color .browser-mark > svg.is-color {
    filter: none;
    animation: none;
  }

  html.talk .address-caret {
    animation: none;
    opacity: 1;
  }
}

@media (max-width: 1400px) {
  html.talk .gemini-mark {
    width: min(11rem, 26vw);
  }
}

@media (max-width: 860px) {
  html.talk .webbapp-side {
    top: 5.4rem;
    gap: 1.25rem;
    max-width: 50vw;
  }

  html.talk .webbapp-side.is-surfaces { left: 8vw; }
  html.talk .webbapp-side.is-browsers { right: 8vw; }

  html.talk .gemini-flow {
    left: 5vw;
    right: 5vw;
    top: 14%;
    bottom: 20%;
  }

  html.talk .address-bar {
    min-width: 0;
    padding: 0.5rem 0.75rem;
    gap: 0.45rem;
  }

  html.talk .address-globe {
    width: 1rem;
  }

  html.talk .address-url {
    font-size: 0.68rem;
  }

  html.talk .waffle {
    width: 4.6rem;
    gap: 0.4rem;
    padding: 0.7rem;
  }

  html.talk .waffle span {
    width: 0.52rem;
    height: 0.52rem;
  }

  html.talk .address-enter {
    width: 1rem;
  }

  html.talk .gemini-mark {
    width: min(7.2rem, 28vw);
  }

  html.talk .webbapp-label {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
  }

  html.talk .webbapp-icons {
    gap: 0.7rem;
  }

  html.talk .webbapp-icons svg {
    width: 2.25rem;
  }

  html.talk .webbapp-side.is-browsers .webbapp-icons svg {
    width: 1.45rem;
  }

  html.talk .webbapp-icons span {
    font-size: 0.56rem;
    letter-spacing: 0.05em;
  }
}