maverick-wave 5.33.0 → 5.34.0

package/src/scss/components/_deck-blocks.scss

@@ -0,0 +1,963 @@
+@use '../abstracts' as *;
+
+// The content of a slide. Loaded by _deck.scss; every block sizes itself in the
+// deck's type scale and paints with the tone tokens of the slide it sits on.
+
+@layer mw.components {
+  .mw-deck-kicker {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0.35em 1em;
+    color: var(--mw-deck-muted);
+    font-size: var(--mw-deck-text-sm);
+    font-weight: 600;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+
+    b {
+      color: var(--mw-deck-mark);
+      font-weight: 700;
+    }
+  }
+
+  .mw-deck-title {
+    margin-top: 0.45em;
+    font-family: var(--mw-font-family-heading);
+    font-size: var(--mw-deck-text-lg);
+    font-weight: var(--mw-deck-title-weight);
+    line-height: var(--mw-deck-title-leading);
+    letter-spacing: var(--mw-deck-title-tracking);
+    text-transform: var(--mw-deck-title-case);
+    text-wrap: balance;
+
+    // Both, because content marks a phrase with **...** and that arrives as strong
+    :is(em, strong) {
+      color: var(--mw-deck-mark);
+      font-style: normal;
+      font-weight: inherit;
+    }
+  }
+
+  .mw-deck-title-xl {
+    font-size: var(--mw-deck-text-xl);
+  }
+
+  // A unit inside an uppercase title keeps its spelling: kWp, not KWP
+  .mw-deck-unit {
+    text-transform: none;
+  }
+
+  .mw-deck-lead {
+    max-width: 34ch;
+    margin-top: 0.9em;
+    font-size: var(--mw-deck-text-md);
+    line-height: 1.3;
+    text-wrap: pretty;
+  }
+
+  .mw-deck-text {
+    max-width: 46ch;
+    margin-top: 1.1em;
+    color: var(--mw-deck-muted);
+    font-size: var(--mw-deck-text);
+    line-height: 1.55;
+    text-wrap: pretty;
+  }
+
+  .mw-deck-media {
+    display: grid;
+    // Without a fixed row an SVG takes its height from its width and runs down
+    // into the text
+    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
+    place-items: center;
+    min-height: 0;
+
+    > svg,
+    > .mw-deck-image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  // Orientation is the window's, so it only speaks for a deck that fills it -
+  // a portrait deck on a desktop stands in a landscape window
+  .mw-deck-landscape .mw-deck-media {
+    height: 100%;
+    max-height: 68vh;
+
+    @media (orientation: portrait) {
+      max-height: 46vh;
+    }
+  }
+
+  .mw-deck-portrait .mw-deck-media {
+    flex: 1 1 auto;
+  }
+
+  // Label over value, in two columns - three with .mw-deck-facts-3 in landscape
+  .mw-deck-facts {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 1.1em 2em;
+    margin-top: 2em;
+
+    > div {
+      padding-top: 0.7em;
+      border-top: 1px solid var(--mw-deck-line);
+    }
+
+    dt {
+      color: var(--mw-deck-muted);
+      font-size: var(--mw-deck-text-sm);
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+
+    dd {
+      margin-top: 0.2em;
+      font-weight: 600;
+      font-variant-numeric: tabular-nums;
+    }
+  }
+
+  .mw-deck-landscape .mw-deck-facts-3 {
+    @media (orientation: landscape) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+
+  // Big numbers with a line under them. The value comes second in the markup,
+  // where a screen reader wants it, and is turned to the top.
+  .mw-deck-figures {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
+    align-self: end;
+    gap: 4vmin;
+
+    > div {
+      display: flex;
+      flex-direction: column-reverse;
+      justify-content: flex-end;
+      padding-top: 1em;
+      border-top: 1px solid var(--mw-deck-line);
+    }
+
+    dd {
+      font-family: var(--mw-font-family-heading);
+      font-size: var(--mw-deck-text-xl);
+      font-weight: var(--mw-deck-title-weight);
+      font-variant-numeric: tabular-nums;
+      line-height: 1;
+      letter-spacing: var(--mw-deck-title-tracking);
+    }
+
+    dt {
+      max-width: 18ch;
+      margin-top: 0.6em;
+      color: var(--mw-deck-muted);
+      font-size: var(--mw-deck-text-sm);
+      line-height: 1.4;
+    }
+  }
+
+  // A chart and its numbers: side by side on a landscape screen, one above
+  // the other otherwise
+  .mw-deck-columns {
+    display: grid;
+    align-items: end;
+    gap: 6vmin;
+    min-height: 0;
+
+    .mw-deck-figures {
+      grid-template-columns: minmax(0, 1fr);
+      gap: 2.6vmin;
+    }
+
+    .mw-deck-figures dd {
+      font-size: var(--mw-deck-text-lg);
+    }
+  }
+
+  .mw-deck-landscape .mw-deck-columns {
+    @media (orientation: landscape) {
+      grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
+    }
+  }
+
+  .mw-deck-list {
+    margin-top: 1.6em;
+
+    li {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: 1em;
+      padding: 0.7em 0;
+      border-top: 1px solid var(--mw-deck-line);
+    }
+
+    li > :last-child {
+      color: var(--mw-deck-muted);
+      text-align: end;
+    }
+  }
+
+  .mw-deck-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.45em;
+    margin-top: 1.2em;
+
+    > span {
+      padding: 0.35em 0.85em;
+      border: 1px solid var(--mw-deck-line);
+      border-radius: radius('full');
+      font-size: var(--mw-deck-text-sm);
+    }
+  }
+
+  // mw-btn in the deck's type scale, so a button grows with the slide. The
+  // colours are not overridden but the brand tokens retuned to the slide:
+  // hover, active and every button variant of the site follow on their own.
+  .mw-deck-actions {
+    --mw-primary-text-color: var(--mw-deck-mark);
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.6em;
+    margin-top: 1.8em;
+    font-size: var(--mw-deck-text-sm);
+
+    .mw-btn {
+      min-height: 2.9em;
+      padding: 0.85em 1.4em;
+    }
+  }
+
+  // The brand is the surface here, so the solid button turns around
+  .mw-slide-primary .mw-deck-actions {
+    --mw-primary-color: var(--mw-deck-fill);
+    --mw-primary-color-hover: color-mix(
+      in srgb,
+      var(--mw-deck-fill) 86%,
+      var(--mw-deck-fill-ink)
+    );
+    --mw-primary-accent-text-color: var(--mw-deck-fill-ink);
+  }
+
+  // Buttons that jump to a slide, drawn as a row of tiles
+  .mw-deck-jumps {
+    display: grid;
+    grid-auto-columns: minmax(0, 1fr);
+    grid-auto-flow: column;
+    align-self: end;
+    gap: 3vmin;
+
+    button {
+      @include surface;
+      display: flex;
+      flex-direction: column;
+      gap: 0.9em;
+      width: 100%;
+      height: 100%;
+      padding: 1.4em;
+      border: 1px solid var(--mw-deck-line);
+      background: none;
+      text-align: start;
+      cursor: pointer;
+      transition: var(--mw-transition);
+      @include tappable;
+      @include focus-ring(3px, var(--mw-deck-mark));
+
+      &:hover {
+        border-color: var(--mw-deck-mark);
+      }
+
+      &:active {
+        transform: scale(0.98);
+        transition-duration: var(--mw-duration-instant);
+      }
+
+      @include hover-move {
+        transform: translateY(-2px);
+      }
+    }
+
+    strong {
+      font-family: var(--mw-font-family-heading);
+      font-size: var(--mw-deck-text-md);
+      font-weight: var(--mw-deck-title-weight);
+      line-height: 1.15;
+      letter-spacing: var(--mw-deck-title-tracking);
+    }
+  }
+
+  .mw-deck-jump-hint {
+    margin-top: auto;
+    color: var(--mw-deck-mark);
+    font-size: var(--mw-deck-text-sm);
+    font-weight: 700;
+    letter-spacing: 0.04em;
+  }
+
+  // A column of tiles on a phone
+  .mw-deck-portrait .mw-deck-jumps {
+    grid-auto-flow: row;
+  }
+
+  .mw-deck-image {
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--mw-deck-radius);
+    background-color: color-mix(in srgb, currentColor 8%, transparent);
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .mw-deck-image-right img {
+    object-position: 72% 50%;
+  }
+
+  // Portrait: bleeds to the edges under the chrome
+  .mw-deck-image-top {
+    margin: -5.2rem calc(-1 * var(--mw-deck-gutter)) 0;
+    aspect-ratio: 4 / 3.3;
+    border-radius: 0;
+  }
+
+  .mw-deck-image-top-tall {
+    aspect-ratio: 4 / 4.4;
+  }
+
+  .mw-slide-cover {
+    > .mw-deck-image {
+      position: absolute;
+      inset: 0;
+      z-index: 0;
+      border-radius: 0;
+
+      &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+          to top,
+          rgb(0 0 0 / 70%) 8%,
+          transparent 58%
+        );
+      }
+    }
+
+    > :not(.mw-deck-image) {
+      position: relative;
+      z-index: 1;
+    }
+  }
+
+  // One wide picture over two, captions on the pictures
+  .mw-deck-images {
+    display: grid;
+    flex: 1;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-auto-rows: minmax(0, 1fr);
+    gap: spacing('3');
+    min-height: 0;
+
+    .mw-deck-image:first-child {
+      grid-column: 1 / -1;
+    }
+
+    .mw-deck-image::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(to top, rgb(0 0 0 / 55%), transparent 38%);
+    }
+
+    figcaption {
+      position: absolute;
+      right: 0.6rem;
+      bottom: 0.5rem;
+      left: 0.6rem;
+      z-index: 1;
+      color: $fixed-surface-text;
+      font-size: var(--mw-deck-text-sm);
+    }
+  }
+
+  .mw-deck-price {
+    font-family: var(--mw-font-family-heading);
+    font-size: var(--mw-deck-text-lg);
+    font-weight: var(--mw-deck-title-weight);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+
+    small {
+      margin-inline-start: 0.35em;
+      color: var(--mw-deck-muted);
+      font-family: var(--mw-font-family-base);
+      font-size: var(--mw-deck-text-sm);
+      font-weight: 400;
+    }
+  }
+
+  // The base blockquote is a tinted box with Georgia marks in its corners. Here
+  // one big mark stands on a line of its own - inline marks would pick up the
+  // whitespace a formatter puts around the text.
+  .mw-deck-quote {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    font-family: var(--mw-font-family-heading);
+    font-size: var(--mw-deck-text-md);
+    font-style: normal;
+    font-weight: var(--mw-deck-title-weight);
+    line-height: 1.3;
+    text-wrap: pretty;
+
+    &::before {
+      content: open-quote;
+      position: static;
+      display: block;
+      height: 0.62em;
+      color: var(--mw-deck-mark);
+      font-size: 2.6em;
+      line-height: 1;
+      opacity: 1;
+    }
+
+    &::after {
+      content: no-close-quote;
+    }
+  }
+
+  .mw-deck-source {
+    margin-top: 1em;
+    color: var(--mw-deck-muted);
+    font-size: var(--mw-deck-text-sm);
+    letter-spacing: 0.06em;
+  }
+
+  // Steps: side by side on a line, one above the other upright
+  .mw-deck-steps {
+    display: grid;
+    grid-auto-columns: minmax(0, 1fr);
+    grid-auto-flow: column;
+    align-self: end;
+    gap: 3vmin;
+    counter-reset: mw-deck-step;
+
+    li {
+      position: relative;
+      padding-top: 2.2em;
+      counter-increment: mw-deck-step;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0.45em;
+        right: -3vmin;
+        left: 0;
+        height: 1px;
+        background-color: var(--mw-deck-line);
+      }
+
+      // The number cuts the line with the slide's own ground behind it
+      &::after {
+        content: counter(mw-deck-step, decimal-leading-zero);
+        position: absolute;
+        top: 0;
+        left: 0;
+        padding-inline-end: 0.6em;
+        background-color: var(--mw-deck-ground);
+        color: var(--mw-deck-mark);
+        font-size: var(--mw-deck-text-sm);
+        font-weight: 700;
+        letter-spacing: 0.1em;
+      }
+
+      &:last-child::before {
+        right: 0;
+      }
+    }
+
+    h3 {
+      font-family: inherit;
+      font-size: var(--mw-deck-text);
+      font-weight: 700;
+      line-height: 1.3;
+      letter-spacing: 0;
+    }
+
+    p {
+      margin-top: 0.4em;
+      color: var(--mw-deck-muted);
+      font-size: var(--mw-deck-text-sm);
+      line-height: 1.5;
+    }
+  }
+
+  .mw-deck-landscape .mw-deck-steps {
+    @media (orientation: portrait) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      grid-auto-flow: row;
+      row-gap: 4vmin;
+    }
+  }
+
+  .mw-deck-portrait .mw-deck-steps {
+    grid-auto-flow: row;
+    align-self: stretch;
+    gap: 0;
+
+    li {
+      padding: 0 0 1.1em 2.6em;
+
+      &::before {
+        top: 1.5em;
+        right: auto;
+        bottom: 0;
+        left: 0.7em;
+        width: 1px;
+        height: auto;
+      }
+
+      &::after {
+        padding: 0;
+      }
+
+      &:last-child::before {
+        display: none;
+      }
+    }
+  }
+
+  // Prices and positions: the last column is the amount
+  .mw-deck-table {
+    width: 100%;
+    font-variant-numeric: tabular-nums;
+
+    tbody tr:nth-child(even) {
+      background: none;
+    }
+
+    th,
+    td {
+      padding: 0.65em 0;
+      border: 0;
+      border-top: 1px solid var(--mw-deck-line);
+      text-align: start;
+      vertical-align: baseline;
+    }
+
+    :is(td, th):last-child {
+      padding-inline-start: 1.5em;
+      text-align: end;
+      white-space: nowrap;
+    }
+
+    th {
+      background: none;
+      color: var(--mw-deck-muted);
+      font-size: var(--mw-deck-text-sm);
+      font-weight: 600;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+
+    small {
+      display: block;
+      color: var(--mw-deck-muted);
+      font-size: var(--mw-deck-text-sm);
+    }
+  }
+
+  .mw-deck-table-total td {
+    padding-top: 0.9em;
+    border-top: 3px double var(--mw-deck-line);
+    font-family: var(--mw-font-family-heading);
+    font-size: var(--mw-deck-text-md);
+    font-weight: var(--mw-deck-title-weight);
+  }
+
+  // Numbered notes, the numbers matching markers in a drawing next to them
+  .mw-deck-notes {
+    display: grid;
+    gap: 1em;
+    margin-top: 1.8em;
+    counter-reset: mw-deck-note;
+
+    li {
+      display: grid;
+      grid-template-columns: 1.9em minmax(0, 1fr);
+      align-items: baseline;
+      gap: 0.8em;
+      font-size: var(--mw-deck-text-sm);
+      line-height: 1.5;
+      counter-increment: mw-deck-note;
+
+      &::before {
+        content: counter(mw-deck-note);
+        display: grid;
+        place-items: center;
+        width: 1.9em;
+        height: 1.9em;
+        border-radius: radius('full');
+        background-color: var(--mw-deck-fill);
+        color: var(--mw-deck-fill-ink);
+        font-weight: 700;
+      }
+    }
+
+    strong {
+      display: block;
+      font-size: var(--mw-deck-text);
+    }
+  }
+
+  // Drawings: every stroke with pathLength="1" draws itself when its slide
+  // comes up - as long as the SVG also carries .mw-deck-draw
+  .mw-deck-drawing {
+    overflow: visible;
+    fill: none;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+
+    text {
+      fill: var(--mw-deck-muted);
+      stroke: none;
+      font-family: var(--mw-font-family-base);
+      font-size: 13px;
+      letter-spacing: 0.08em;
+    }
+  }
+
+  .mw-deck-stroke,
+  .mw-deck-stroke-bold,
+  .mw-deck-stroke-fine {
+    stroke-dasharray: 1;
+  }
+
+  .mw-deck-stroke {
+    stroke-width: 1.5;
+  }
+
+  .mw-deck-stroke-bold {
+    stroke-width: 4;
+  }
+
+  .mw-deck-stroke-fine {
+    stroke-width: 0.8;
+    opacity: 0.55;
+  }
+
+  // After the stroke classes: a dash pattern of its own, and it never animates
+  .mw-deck-dashed {
+    stroke-dasharray: 5 5;
+  }
+
+  .mw-deck-area {
+    fill: var(--mw-deck-mark);
+    stroke: none;
+  }
+
+  .mw-deck-area-muted {
+    fill: var(--mw-deck-line);
+    stroke: none;
+  }
+
+  .mw-deck-area-light {
+    fill-opacity: 0.28;
+  }
+
+  .mw-deck-marker {
+    circle {
+      fill: var(--mw-deck-fill);
+      stroke: none;
+    }
+
+    text {
+      fill: var(--mw-deck-fill-ink);
+      font-size: 13px;
+      font-weight: 700;
+      letter-spacing: 0;
+      text-anchor: middle;
+      dominant-baseline: central;
+    }
+  }
+
+  // A finished illustration keeps its own colours; only these parts move
+  .mw-deck-illustration {
+    overflow: visible;
+  }
+
+  .mw-deck-flow {
+    fill: none;
+    stroke: var(--mw-deck-mark);
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-dasharray: 3 9;
+    animation: mw-deck-flow motion(1.1s) linear infinite;
+  }
+
+  @keyframes mw-deck-flow {
+    to {
+      stroke-dashoffset: -12;
+    }
+  }
+
+  // Bars and a line over a grid - the bars in the brand ink (the fill stands at
+  // 1.5:1 on a dark slide), the line in the secondary colour, as in the legend
+  .mw-deck-chart {
+    width: 100%;
+    overflow: visible;
+
+    text {
+      fill: var(--mw-deck-muted);
+      font-family: var(--mw-font-family-base);
+      font-size: 12px;
+    }
+  }
+
+  .mw-deck-chart-grid line {
+    stroke: var(--mw-deck-line);
+    stroke-width: 1;
+  }
+
+  .mw-deck-chart-bar {
+    fill: var(--mw-deck-mark);
+    transition: opacity var(--mw-duration-fast) var(--mw-ease-out);
+  }
+
+  // A column the height of the chart, so the pointer hits the month and not
+  // only its bar
+  .mw-deck-chart-hit {
+    fill: transparent;
+  }
+
+  g:hover > .mw-deck-chart-bar {
+    opacity: 0.75;
+  }
+
+  .mw-deck-chart-line {
+    fill: none;
+    stroke: var(--mw-secondary-color);
+    stroke-width: 2;
+    stroke-linejoin: round;
+  }
+
+  .mw-deck-chart-point {
+    fill: var(--mw-secondary-color);
+    stroke: var(--mw-deck-ground);
+    stroke-width: 2;
+  }
+
+  .mw-deck-chart .mw-deck-chart-value {
+    fill: var(--mw-deck-ink);
+    font-weight: 700;
+  }
+
+  .mw-deck-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5em 1.6em;
+    margin-top: 1.2em;
+    color: var(--mw-deck-muted);
+    font-size: var(--mw-deck-text-sm);
+
+    > span {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.55em;
+    }
+
+    i {
+      display: inline-block;
+      width: 0.9em;
+      height: 0.9em;
+      border-radius: radius('xs');
+      background-color: currentColor;
+    }
+  }
+
+  .mw-deck-legend-bar i {
+    background-color: var(--mw-deck-mark);
+  }
+
+  .mw-deck-legend-line i {
+    background-color: var(--mw-secondary-color);
+  }
+
+  // Offers and packages: name and price on one line, the details below
+  .mw-deck-package {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: baseline;
+    gap: 0.2em 1em;
+    padding: 0.95em 0;
+    border-top: 1px solid var(--mw-deck-line);
+
+    h3 {
+      font-family: inherit;
+      font-size: var(--mw-deck-text);
+      font-weight: 700;
+      line-height: 1.3;
+      letter-spacing: 0;
+    }
+
+    p {
+      grid-column: 1 / -1;
+      color: var(--mw-deck-muted);
+      font-size: var(--mw-deck-text-sm);
+      line-height: 1.5;
+    }
+
+    b {
+      font-family: var(--mw-font-family-heading);
+      font-size: var(--mw-deck-text-md);
+      font-weight: var(--mw-deck-title-weight);
+      font-variant-numeric: tabular-nums;
+      white-space: nowrap;
+    }
+  }
+
+  .mw-deck-package-highlight {
+    margin-inline: -0.9rem;
+    padding-inline: 0.9rem;
+    border: 1px solid var(--mw-deck-mark);
+    border-radius: var(--mw-deck-radius);
+
+    + .mw-deck-package {
+      border-top-color: transparent;
+    }
+  }
+
+  // Pushed to the lower edge of a portrait slide
+  .mw-deck-bottom {
+    margin-top: auto;
+  }
+
+  .mw-deck-swipe {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: spacing('1');
+    margin-top: spacing('6');
+    font-size: var(--mw-deck-text-sm);
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    opacity: 0.85;
+
+    svg {
+      width: 1.3rem;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      animation: mw-deck-swipe motion(1.8s) var(--mw-ease-in-out) infinite;
+    }
+  }
+
+  @keyframes mw-deck-swipe {
+    0%,
+    100% {
+      transform: translateY(0.25rem);
+      opacity: 0.4;
+    }
+
+    50% {
+      transform: translateY(-0.25rem);
+      opacity: 1;
+    }
+  }
+
+  // What moves when a slide comes up - only once the script runs
+
+  .mw-deck-ready .mw-deck-draw {
+    :is(.mw-deck-stroke, .mw-deck-stroke-bold, .mw-deck-stroke-fine) {
+      stroke-dashoffset: 1;
+      transition: stroke-dashoffset calc(var(--mw-duration-slower) * 2)
+        var(--mw-ease-out);
+    }
+
+    :is(.mw-deck-area, .mw-deck-area-muted, .mw-deck-marker, text) {
+      opacity: 0;
+      transition: opacity var(--mw-duration-slower) var(--mw-ease-out)
+        var(--mw-duration-slower);
+    }
+  }
+
+  .mw-deck-ready .mw-slide.mw-active .mw-deck-draw {
+    :is(.mw-deck-stroke, .mw-deck-stroke-bold, .mw-deck-stroke-fine) {
+      stroke-dashoffset: 0;
+    }
+
+    :is(.mw-deck-area, .mw-deck-area-muted, .mw-deck-marker, text) {
+      opacity: 1;
+    }
+
+    @for $i from 2 through 16 {
+      > :nth-child(#{$i}) {
+        transition-delay: motion(($i - 1) * 55ms);
+      }
+    }
+  }
+
+  .mw-deck-ready .mw-deck-chart-bar {
+    transform: scaleY(0);
+    transform-box: fill-box;
+    transform-origin: bottom;
+    transition: transform var(--mw-duration-slower) var(--mw-ease-out);
+  }
+
+  .mw-deck-ready .mw-slide.mw-active .mw-deck-chart-bar {
+    transform: none;
+  }
+
+  @for $i from 2 through 12 {
+    .mw-deck-ready
+      .mw-slide.mw-active
+      .mw-deck-chart-bars
+      > :nth-child(#{$i})
+      .mw-deck-chart-bar {
+      transition-delay: motion(($i - 1) * 45ms);
+    }
+  }
+
+  // Parts of an illustration that appear one after the other - solar panels,
+  // seats, rows of a plan
+  .mw-deck-ready .mw-deck-cascade > * {
+    opacity: 0;
+    transition: opacity var(--mw-duration-slow) var(--mw-ease-out);
+  }
+
+  .mw-deck-ready .mw-slide.mw-active .mw-deck-cascade > * {
+    opacity: 1;
+  }
+
+  @for $i from 1 through 24 {
+    .mw-deck-ready .mw-slide.mw-active .mw-deck-cascade > :nth-child(#{$i}) {
+      transition-delay: motion(300ms + $i * 35ms);
+    }
+  }
+
+  // A slow push-in on the picture while its slide is up
+  .mw-deck-ready .mw-deck-image-zoom img {
+    transform: scale(1.08);
+    transition: transform calc(var(--mw-duration-slower) * 10)
+      var(--mw-ease-out);
+  }
+
+  .mw-deck-ready .mw-slide.mw-active .mw-deck-image-zoom img {
+    transform: scale(1);
+  }
+}