/* 2.2 filnamn.html. The left frame is the wider of the two.
   Three columns sit in it from the start:
   Struktur / Design / Interaktivitet, then HTML / CSS / JS,
   then the code. The phase names are already typed, in the accent blue.
   The first click types HTML and stacks equal rectangles: tak on vägg,
   and fönster on dörr inside vägg. Next types the style block,
   indented under the style tag and without curly brackets.
   Each block keeps its rectangle until its own selector is typed,
   then turns into the house. Next types the calls inside a script
   tag at the same speed. The light, the rullgardin and the door
   each start with their call. The next call waits until that
   motion has finished and held. */
html.talk .mode-file {
  --type: 80ms;
  --lead: 0.56s;
  --design: 52ms;
  --move: cubic-bezier(0.37, 0.12, 0.18, 1);
}

html.talk .file-stage {
  position: absolute;
  z-index: 1;
  left: 3.2vw;
  right: 3.2vw;
  top: 5.2rem;
  bottom: 10.2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  column-gap: 0.9rem;
  align-items: stretch;
}

html.talk .file-code,
html.talk .file-view {
  min-width: 0;
  min-height: 0;
  border: 1.6px solid rgba(232, 234, 239, 0.88);
  border-radius: 16px;
  background: transparent;
  box-shadow: 0 0 28px rgba(91, 159, 212, 0.12);
}

html.talk .file-code {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 1.1rem;
  align-items: start;
  text-align: left;
  margin: 0;
  padding: 0.95rem 0.85rem 0.7rem;
  overflow: hidden;
  color: #fff;
  font-family: var(--mono);
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  font-weight: 400;
  font-variant-ligatures: none;
  letter-spacing: 0;
  line-height: 1.28;
}

html.talk .file-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

html.talk .file-phase {
  margin: 0 0 1.7rem;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.95vw, 1.82rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: var(--accent);
  white-space: nowrap;
}

html.talk .file-heading {
  flex: 0 0 auto;
  margin: 0 0 1.15rem;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.7vw, 1.9rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: none;
  color: #fff;
  opacity: 0;
}

html.talk .face.is-structure .file-col.is-html .file-heading,
html.talk .face.is-design .file-col.is-css .file-heading,
html.talk .face.is-live .file-col.is-js .file-heading {
  opacity: 1;
}

html.talk .face.is-play-structure .file-col.is-html .file-heading {
  animation: file-phase-in 1.6s ease 0.24s both;
}

html.talk .face.is-play-design .file-col.is-css .file-heading,
html.talk .face.is-play-live .file-col.is-js .file-heading {
  animation: file-phase-in 1.4s ease both;
}

html.talk .file-body {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  min-height: 0;
}

html.talk .file-line {
  display: none;
  height: 0;
  white-space: pre;
}

html.talk .face.is-structure .file-line:not(.is-design):not(.is-live),
html.talk .face.is-design .file-line.is-design,
html.talk .face.is-live .file-line.is-live {
  display: block;
  height: 1.28em;
}



html.talk .file-chunk {
  display: inline-block;
  width: 0;
  overflow: hidden;
  vertical-align: top;
  white-space: pre;
  font: inherit;
  letter-spacing: 0;
  line-height: inherit;
}

html.talk .face.is-play-structure .file-chunk[data-part="structure"] {
  animation-name: file-chunk;
  animation-duration: calc(var(--n) * var(--type));
  animation-delay: calc(var(--lead) + var(--from) * var(--type));
  animation-fill-mode: both;
}

html.talk .face.is-structure:not(.is-play-structure) .file-chunk[data-part="structure"],
html.talk .face.is-design:not(.is-play-design) .file-chunk[data-part="design"],
html.talk .face.is-live:not(.is-play-live) .file-chunk[data-part="live"] {
  width: calc(var(--n) * 1ch);
}

html.talk .face.is-play-design .file-chunk[data-part="design"] {
  animation-name: file-chunk;
  animation-duration: calc(var(--n) * var(--design));
  animation-delay: calc(var(--from) * var(--design));
  animation-fill-mode: both;
}

html.talk .face.is-play-live .file-chunk[data-part="live"] {
  animation-name: file-chunk;
  animation-duration: calc(var(--n) * var(--type));
  animation-delay: calc(var(--wait) + var(--from) * var(--type));
  animation-fill-mode: both;
}

@keyframes file-chunk {
  from { width: 0; }
  to { width: calc(var(--n) * 1ch); }
}

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

html.talk .file-view {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

html.talk .file-block {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid rgba(232, 234, 239, 0.82);
  background: #0c0e13;
  color: #fff;
  opacity: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition:
    top 1.8s var(--move),
    left 1.8s var(--move),
    width 1.8s var(--move),
    height 1.8s var(--move),
    background 1.8s ease,
    border-color 1.5s ease,
    border-width 1.5s ease,
    clip-path 1.8s var(--move),
    box-shadow 1.5s ease,
    border-radius 1.5s var(--move),
    z-index 0s linear;
}

html.talk .face.is-play-structure .file-block {
  animation: file-block-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--lead) + var(--at) * var(--type));
}

html.talk .face.is-structure:not(.is-play-structure) .file-block {
  opacity: 1;
}

html.talk .file-label {
  position: absolute;
  z-index: 4;
  left: 0.7rem;
  bottom: 0.42rem;
  font-family: var(--mono);
  font-size: clamp(0.78rem, 1.05vw, 0.98rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  color: rgba(232, 234, 239, 0.94);
  transition: opacity 0.56s ease;
}

html.talk .face.is-design .file-label {
  opacity: 0;
}

html.talk .face.is-play-design .is-tak .file-label,
html.talk .face.is-play-design .is-vagg .file-label,
html.talk .face.is-play-design .is-fonster .file-label,
html.talk .face.is-play-design .is-dorr .file-label {
  transition: none;
  animation: file-label-out 0.56s ease both;
  animation-delay: calc(var(--design-at) * var(--design));
}

html.talk .is-tak { left: 16%; top: 16%; width: 68%; height: 30%; z-index: 1; }
html.talk .is-vagg { left: 16%; top: 46%; width: 68%; height: 32%; z-index: 2; }
html.talk .is-vagg .is-fonster { left: 10%; top: 12%; width: 80%; height: 32%; z-index: 1; }
html.talk .is-vagg .is-dorr { left: 10%; top: 48%; width: 80%; height: 32%; z-index: 1; }

/* Holds the structure rectangle until that selector is typed.
   --design-at is the character offset of the selector, set from the text. */
html.talk .face.is-play-design .is-tak,
html.talk .face.is-play-design .is-vagg,
html.talk .face.is-play-design .is-fonster,
html.talk .face.is-play-design .is-dorr {
  transition: none;
}

html.talk .face.is-play-design .is-tak {
  animation: file-morph-tak 1.8s var(--move) calc(var(--design-at) * var(--design)) both;
}

html.talk .face.is-play-design .is-vagg {
  animation: file-morph-vagg 1.8s var(--move) calc(var(--design-at) * var(--design)) both;
}

html.talk .face.is-play-design .is-fonster {
  animation: file-morph-fonster 1.8s var(--move) calc(var(--design-at) * var(--design)) both;
}

html.talk .face.is-play-design .is-dorr {
  animation: file-morph-dorr 1.8s var(--move) calc(var(--design-at) * var(--design)) both;
}

html.talk .face.is-design .is-tak {
  left: 13%;
  top: 7%;
  width: 74%;
  height: 38%;
  z-index: 3;
  border-width: 0;
  background: linear-gradient(#a35048, #7c3832);
  clip-path: polygon(50% 0, 100% 100%, 100% 100%, 0 100%);
}

html.talk .face.is-design .is-vagg {
  left: 22%;
  top: 42%;
  width: 56%;
  height: 42%;
  z-index: 2;
  border-width: 0;
  background: #f3eee4;
  box-shadow: 0 16px 28px rgba(28, 36, 48, 0.14);
}

html.talk .face.is-design .is-fonster {
  left: 12.5%;
  top: 19.05%;
  width: 30.36%;
  height: 42.86%;
  z-index: 1;
  border: 0.48rem solid #f7f4ee;
  background: #c5dfef;
  box-shadow: inset 0 0 0 1px rgba(28, 36, 48, 0.12);
}

html.talk .face.is-design .is-dorr {
  left: 55.36%;
  top: 14.29%;
  width: 28.57%;
  height: 85.71%;
  z-index: 1;
  border-width: 0;
  background: #6e4b36;
  perspective: 900px;
}

html.talk .glow,
html.talk .mullion,
html.talk .blind,
html.talk .interior,
html.talk .door {
  position: absolute;
  inset: 0;
}

html.talk .glow {
  background: #f6c56a;
  opacity: 0;
  transition: opacity 0.44s linear;
}

html.talk .face.is-live .glow {
  opacity: 1;
  box-shadow: 0 0 26px 8px rgba(246, 197, 106, 0.55);
}

html.talk .face.is-play-live .glow {
  transition: none;
  animation: file-glow 0.44s linear var(--light-at, 0.64s) both;
}

@keyframes file-glow {
  from { opacity: 0; box-shadow: 0 0 0 0 rgba(246, 197, 106, 0); }
  to { opacity: 1; box-shadow: 0 0 26px 8px rgba(246, 197, 106, 0.55); }
}

html.talk .mullion {
  inset: 0.15rem;
  opacity: 0;
  background:
    linear-gradient(#f7f4ee, #f7f4ee) center / 3px 100% no-repeat,
    linear-gradient(#f7f4ee, #f7f4ee) center / 100% 3px no-repeat;
  transition: opacity 0.7s ease;
}

html.talk .face.is-design .mullion { opacity: 1; }
html.talk .face.is-play-design .mullion {
  transition: none;
  animation: file-fade-in 0.7s ease calc(var(--design-at) * var(--design) + 0.7s) both;
}

html.talk .blind {
  inset: 0.42rem;
  background: repeating-linear-gradient(
    to bottom,
    #3c4652 0 7px,
    #2a313a 7px 13px
  );
  transform: scaleY(0);
  transform-origin: top center;
  opacity: 0;
  transition: transform 0.7s ease, opacity 0.6s ease;
}

html.talk .face.is-design .blind { opacity: 1; }
html.talk .face.is-play-design .blind {
  transition: none;
  animation: file-fade-in 0.7s ease calc(var(--design-at) * var(--design) + 0.7s) both;
}

html.talk .face.is-play-live .blind {
  transition: opacity 0.6s ease;
  animation: file-blinds 3.1s cubic-bezier(0.4, 0, 0.2, 1) var(--blinds-at, 2.48s) both;
}

@keyframes file-blinds {
  0% { transform: scaleY(0); }
  34% { transform: scaleY(1); }
  50% { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}

html.talk .interior {
  background: linear-gradient(#f2c56e, #c47832 72%, #6e4124);
  opacity: 0;
  transition: opacity 0.6s ease;
}

html.talk .face.is-live .interior { opacity: 1; }

html.talk .face.is-play-live .interior {
  transition: none;
  animation: file-fade-in 0.6s ease var(--light-at, 0.64s) both;
}

html.talk .door {
  background:
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)) 50% 70% / 62% 20% no-repeat,
    #6e4b36;
  transform-origin: left center;
  opacity: 0;
  transition: transform 1s var(--move), opacity 1.1s ease;
}

html.talk .face.is-design .door { opacity: 1; }
html.talk .face.is-play-design .door {
  transition: none;
  animation: file-fade-in 1.1s ease calc(var(--design-at) * var(--design)) both;
}

html.talk .face.is-play-live .door {
  transition: opacity 1.1s ease;
  animation: file-door 2.1s var(--move) var(--door-at, 6.78s) both;
}

html.talk .face.is-live:not(.is-play-live) .door {
  transform: rotateY(-76deg);
}

@keyframes file-door {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-76deg); }
}

html.talk .lite,
html.talk .knob {
  position: absolute;
  display: block;
}

html.talk .lite {
  top: 12%;
  left: 18%;
  width: 64%;
  height: 20%;
  background: #9bb4c6;
  box-shadow: inset 0 0 0 2px rgba(243, 239, 230, 0.9);
  transition: background 0.44s linear, box-shadow 0.7s ease;
}

html.talk .face.is-live .lite {
  background: #f6c56a;
  box-shadow:
    inset 0 0 0 2px rgba(243, 239, 230, 0.95),
    0 0 12px rgba(246, 197, 106, 0.9);
}

html.talk .face.is-play-live .lite {
  transition: none;
  animation: file-lite 0.44s linear var(--light-at, 0.64s) both;
}

@keyframes file-lite {
  from {
    background: #9bb4c6;
    box-shadow: inset 0 0 0 2px rgba(243, 239, 230, 0.9);
  }
  to {
    background: #f6c56a;
    box-shadow:
      inset 0 0 0 2px rgba(243, 239, 230, 0.95),
      0 0 12px rgba(246, 197, 106, 0.9);
  }
}

html.talk .knob {
  top: 54%;
  right: 14%;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: #e4c48a;
  box-shadow: 0 0 0 1px rgba(70, 42, 24, 0.35);
}

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

@keyframes file-label-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

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

@keyframes file-morph-tak {
  from {
    left: 16%;
    top: 16%;
    width: 68%;
    height: 30%;
    border-width: 1px;
    background: #0c0e13;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  to {
    left: 13%;
    top: 7%;
    width: 74%;
    height: 38%;
    border-width: 0;
    background: linear-gradient(#a35048, #7c3832);
    clip-path: polygon(50% 0, 100% 100%, 100% 100%, 0 100%);
  }
}

@keyframes file-morph-vagg {
  from {
    left: 16%;
    top: 46%;
    width: 68%;
    height: 32%;
    border-width: 1px;
    background: #0c0e13;
    box-shadow: none;
  }
  to {
    left: 22%;
    top: 42%;
    width: 56%;
    height: 42%;
    border-width: 0;
    background: #f3eee4;
    box-shadow: 0 16px 28px rgba(28, 36, 48, 0.14);
  }
}

@keyframes file-morph-fonster {
  from {
    left: 10%;
    top: 12%;
    width: 80%;
    height: 32%;
    border-width: 1px;
    border-color: rgba(232, 234, 239, 0.82);
    background: #0c0e13;
    box-shadow: none;
  }
  to {
    left: 12.5%;
    top: 19.05%;
    width: 30.36%;
    height: 42.86%;
    border-width: 0.48rem;
    border-color: #f7f4ee;
    background: #c5dfef;
    box-shadow: inset 0 0 0 1px rgba(28, 36, 48, 0.12);
  }
}

@keyframes file-morph-dorr {
  from {
    left: 10%;
    top: 48%;
    width: 80%;
    height: 32%;
    border-width: 1px;
    background: #0c0e13;
  }
  to {
    left: 55.36%;
    top: 14.29%;
    width: 28.57%;
    height: 85.71%;
    border-width: 0;
    background: #6e4b36;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.talk .face.is-structure .file-chunk[data-part="structure"],
  html.talk .face.is-design .file-chunk[data-part="design"],
  html.talk .face.is-live .file-chunk[data-part="live"] {
    width: calc(var(--n) * 1ch);
    animation: none;
  }

  html.talk .file-block,
  html.talk .face.is-play-structure .file-block,
  html.talk .file-heading,
  html.talk .face.is-play-structure .file-col.is-html .file-heading,
  html.talk .face.is-play-design .file-col.is-css .file-heading,
  html.talk .face.is-play-live .file-col.is-js .file-heading,
  html.talk .file-label,
  html.talk .door,
  html.talk .face.is-play-live .door,
  html.talk .blind,
  html.talk .face.is-play-live .blind,
  html.talk .glow,
  html.talk .face.is-play-live .glow,
  html.talk .mullion,
  html.talk .interior,
  html.talk .face.is-play-live .interior,
  html.talk .lite,
  html.talk .face.is-play-live .lite,
  html.talk .face.is-play-design .is-tak,
  html.talk .face.is-play-design .is-vagg,
  html.talk .face.is-play-design .is-fonster,
  html.talk .face.is-play-design .is-dorr,
  html.talk .face.is-play-design .is-tak .file-label,
  html.talk .face.is-play-design .is-vagg .file-label,
  html.talk .face.is-play-design .is-fonster .file-label,
  html.talk .face.is-play-design .is-dorr .file-label,
  html.talk .face.is-play-design .mullion,
  html.talk .face.is-play-design .blind,
  html.talk .face.is-play-design .door {
    animation: none;
    transition: none;
  }

  html.talk .face.is-structure .file-block,
  html.talk .face.is-structure .file-col.is-html .file-heading,
  html.talk .face.is-design .file-col.is-css .file-heading,
  html.talk .face.is-live .file-col.is-js .file-heading {
    opacity: 1;
  }

  html.talk .face.is-live .door {
    transform: rotateY(-76deg);
  }

  html.talk .face.is-live .blind {
    transform: scaleY(0);
  }
}