/* Style for W3C slides to be used together with the Shower script or
   the b6+ script.

   For usage instructions, see
   https://www.w3.org/Talks/Tools/shower2.html (for Shower) or
   https://www.w3.org/Talks/Tools/b6plus.html (for b6+).

   This is an improved version of the TPAC 2018 style. It reduces
   the risk of differences between list mode and slide mode, by using
   the same base font size (viz., the user's default font size) in
   both modes. Slides in slide mode are linearly scaled up versions of
   the slidesin list mode. Especially images, even without an explicit
   size set in em, should now look the same. (But it is still
   recommended to set their size in em, to avoid differences when
   viewed by users with a different base font size.)

   TODO: Styles for tables? blockquotes?

   +---------------------------------------+-------+
   |                   1em                 |       |
   |   +-------------------------------+   |       |
   |   |                               |   |       |  ^
   |   |                               |   |       |  |
   |1em|                               |1em| 5.5em | 23em
   |   |                               |   |       |  |
   |   |                               |   |       |  v
   |   +-------------------------------+   |       |
   |                   1em                 | LOGO  |
   +---------------------------------------+-------+

   A = 16/9  = aspect ratio
   N = 23    = height in rem (i.e., 21 lines + 2 x 1 rem padding)
   L = 5.5   = logo width in rem
   H = 1     = logo aspect ratio (width/height)
   C = 2     = font size (and logo size) multiplier for cover pages
   w = N*A   = width of slide in rem

   TODO: Find out why the "rightin" animation work in b6+ but not in
   Shower3. The translate(100%,0) is executed, but the viewport is
   constantly recentered on the slide instead of staying on the body
   element. It works when the body has 'direction: rtl'.

   Created: 4 March 2019
   Author: Bert Bos <bert@w3.org>

   Copyright © 2020 World Wide Web Consortium, (Massachusetts
   Institute of Technology, European Research Consortium for
   Informatics and Mathematics, Keio University, Beihang). All Rights
   Reserved. This work is distributed under the W3C® Software
   License[1] in the hope that it will be useful, but WITHOUT ANY
   WARRANTY; without even the implied warranty of MERCHANTABILITY or
   FITNESS FOR A PARTICULAR PURPOSE.

   [1] http://www.w3.org/Consortium/Legal/copyright-software
*/

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: normal;
  src: url(Gill_Sans.eot) format("embedded-opentype"),
    url(Gill_Sans.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: bold;
  src: url(Gill_Sans_Bold.eot) format("embedded-opentype"),
    url(Gill_Sans_Bold.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: oblique;
  font-weight: bold;
  src: url(Gill_Sans_Bold_Italic.eot) format("embedded-opentype"),
    url(Gill_Sans_Bold_Italic.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: oblique;
  font-weight: normal;
  src: url(Gill_Sans_Italic.eot) format("embedded-opentype"),
    url(Gill_Sans_Italic.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: 300;
  src: url(Gill_Sans_Light.eot) format("embedded-opentype"),
    url(Gill_Sans_Light.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: oblique;
  font-weight: 300;
  src: url(Gill_Sans_Light_Italic.eot) format("embedded-opentype"),
    url(Gill_Sans_Light_Italic.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: 600;
  src: url(Gill_Sans_SemiBold.eot) format("embedded-opentype"),
    url(Gill_Sans_SemiBold.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: oblique;
  font-weight: 600;
  src: url(Gill_Sans_SemiBold_Italic.eot) format("embedded-opentype"),
    url(Gill_Sans_SemiBold_Italic.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: 1000;
  src: url(Gill_Sans_UltraBold.eot) format("embedded-opentype"),
    url(Gill_Sans_UltraBold.woff) format("woff")}

@font-face {
  font-family: LeagueGothicRegular;
  src: url(League_Gothic-webfont.woff) format('woff');
  font-weight: normal;
  font-style: normal}

/* Common layout independent of slide mode */
body {background: url(../../Icons/linen.png) #595b60; counter-reset: slide; margin: 2em;
  color: white}
body .slide h1, body .slide h2 {all: unset; display: block;
  font: 2em/1.1 League Gothic, LeagueGothicRegular,
  sans-serif;
  letter-spacing: 0.03em; margin: 0 0 0.3em 0;
  color: #015ca4}
.slide h3 {font-size: 1.17em; margin: 1em 0}
/* Computing the scaling doesn't work with em, needs rem :-( */
.full, .slide {width: 40.889rem; /*= w */ height: 23rem; /*= N */}
.slide {font: 1rem/1.3 Gill Sans MT, Gill Sans, My Gill Sans,
  Liberation Sans, DejaVu Sans, sans-serif; font-size-adjust: 0.45;
  font-variant-numeric: oldstyle-nums tabular-nums}
.slide {color: black; box-shadow: 0 0.4em 0.6em #000; line-height: 1.6;
  padding: 1em 6.5em /*= L + 1 */ 1em 1em; position: relative;
  box-sizing: border-box; z-index: 0; display: inline-block;
  margin: 4em 2em 0 0; vertical-align: bottom; counter-increment: slide;
  border-radius: 0.5em;
  text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white;
  background: 36.389em /*= w - L + 1 */ 18.5em /*= N - L/H + 1 */
    / 3.5em /*= L - 2 */ auto url(../../Icons/W3C-circle.png) no-repeat,
    bottom right / 5.5em /*= L */ 100% url(../../Icons/ramp.png) no-repeat
    #fff;
  background: 36.389em /*= w - L + 1 */ 18.5em /*= N - L/H + 1 */
    / 3.5em /*= L - 2 */ auto url(../../Icons/W3C-circle.svg) no-repeat,
    bottom right / 5.5em /*= L */ 100%
    linear-gradient(hsl(211,45%,25%), hsl(205,42%,92%)) no-repeat #fff}
.slide:target {outline: lime solid 0.5em; outline-offset: 1em}

/* Lists with blue squares as list bullets, and less indented */
.slide ul, .slide ol {padding-left: 0}
.slide ul > li {margin-left: 1em; list-style: none}
.slide ul > li::before {content: "\25A0"; display: inline-block; width: 1em;
  margin-left: -1em; color: #015ca4}
.slide ol > li {margin-left: 2em}
.slide li ul, .slide li ol {margin: 0}

/* Slides with a image on the left (.side) or right (.side.right) one third */
.slide.side {padding-left: 11.717em /*= (w - 1 - (L + 1) - 1) * 30% + 2 */}
.slide.side.right, .slide.side.r {padding-left: 1em;
  padding-right: 17.217em; /*= (w - 1 - (L + 1) - 1) * 30% + (L + 1) + 1 */}
.slide.side .side {position: absolute; top: 4.3478% /*= 1/N */;
  left: 2.4457%; /*= 1/w */
  max-height: 91.304% /*= (N - 2)/N */; object-fit: contain;
  width: 23.764%; /*= (w - 1 - (L + 1) - 1) * 30%  / w */}
.slide.side.right .side, .slide.side.r .side {
  left: 59.606% /*= ((w - L) * 70% - 40%)/w */}
@supports (transform: translate(-50%,-50%)) {
  .slide.side .side {top: 50%; transform: translate(-50%,-50%);
    left: 14.327%; /*= ((w - 1 - (L + 1) - 1) * 30% / 2 + 1 ) / w */}
  .slide.side.right .side, .slide.side.r .side {
    left: 72.221% /*= ((w - L - 1) * 85% + 30%) / w */}
}

/* Slides with a big image on the left or right two-thirds */
.slide.side.big {padding-left: 22.729em /*= (w - L - 3) * 64% + 2 */}
.slide.side.right.big, .slide.side.r.big {padding-left: 1em;
  padding-right: 28.229em /*= (w - L - 3) * 64% + L + 2 */}
.slide.side.big .side {width: 50.696% /*= (w - L - 3) * 64% / w */}
.slide.side.big.right .side, .slide.side.big.r .side {
  left: 33.408% /*= (1 + (w - L - 3) * (100% - 64%) + 1)/w */}
@supports (transform: translate(-50%,-50%)) {
  .slide.side.big .side {left: 27.793% /*= ((w - L - 3) * 64%/2 + 1) / w */}
  .slide.side.big.right .side, .slide.side.big.r .side {
    left: 58.755% /*= (1 + (w - L - 3) * (100% - 64%/2) + 1)/w */}
}

/* Notes in a smaller font */
.slide .note {all: unset; font-size: 80%}

/* EM elements get a highlighter-like background */
.slide em {font-style: normal;
  background: 0 0 / 100% 100% url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKgAAAAfCAYAAABzhIZ5AAAABGdBTUEAANbY1E9YMgAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAL4SURBVHja7Vw7rpwwFJ0dsASWMEtAygZcp6KKUkVWujRPVprXsgSyA5ZAkTYSUqT8XpRQRa8cKUqR7gYkT+Q4Bq7B/IZj6UwF2IyPr8/9mNNpwfaOnsQNEg3ZQDUoGpQ9KPR1V0jjGckJDc2TfDbxqga0EC66z0yPIdVjOmOGjkfGVBOhXJCAoQhcmATGjN4GKc+akPWOCOmD2iAuSBuWO5Epy5iIuA8XN0zKMagGNLMLuaWjfSFGTLAvJGMcff5CHdBQKDZBJ66Y60uB4MCQ7FKz+AqGc6S0pSh1p/jzAbKsrL0jRKEtYmqZekzAcSVO3iFBzj0yQnRIh8whGdQYK5mO1FA5tnmAaW1bLRyHDrr3ETeDtQW0gera7mfRnvLgxJvTax+CXMCrH8Se4lxXXVrBUrC9Vm5qd0rY6TzjnLtknxmGqhj/Q67vj0M4RrnROYh2+1uxuVAiBzltTnCRuRab78pA7HIe7XXxtKbmffUIMjjxkZ7n3+h1+Z3uix/0RrUgomRBKCbEqfmJux70i76IdvDtyzzQq/ozvaT39HRwUtrrWnyiFxWs7vr4QM/+zgkHX+mOmnnvxYXe0k+q/sNveiSj1Q1KBwoHGU3u8eKj7YXcVdGS2YfEwKE9+KJDU0dzpTUVskeARw1D4SBnPJc3ZxYZDGUQkAZdvpilcBR5hAh1iTWiB6HL8/ZYM3r0mG7RQ8R4ayTrquNLe0qx4P1PL9/jBvrzkZ58HWjcWbDUJNPiIeC+nQC+HS9Md7mVBiBmYmkUX68MZN5nOtYXUzVrassEq/JJhCKzucVDW8Lqu7Rr6jq6YUR8KkYpnxxybhQs5CFjlC5rmYRwlBy7tavPf6WLZrXUN2LCbqsIxalhV4ro2PqZf8TD2razFXUKJycNMq5vZeuJulhuLmQVcDUKvYggPfbhpOXX+tWjnrk2D+yBtOt+CENuMqC/o8/wIIngt5VnHRmlCCxbRrgLjw8UbEn/Vp7V+HLXRzbQgh4gPOa5n5naH6O0itHwx3iJAAAAAElFTkSuQmCC)}

/* Miscellaneous styles */
.slide img {max-width: 100%}
.slide .num {font-variant-numeric: oldstyle-nums tabular-nums
  diagonal-fractions}
.slide code, .slide pre {font-family: Andale Mono, Courier, monospace}
.slide code {background: #eee; padding: 0.1em 0.3em; border-radius: 0.3em}
.slide sub, .slide sup {line-height: 0.5}
.slide pre {padding: 0 0.2em; background: black; color: hsl(120,100%,70%);
  text-shadow: none}

/* Cover pages */
.slide.cover {text-align: right;
  background-position: 33.639em /*= w - C * L + 1 + L/2 */
    18.5em /*= N - L/H + 1 */, bottom right;
  background-size: 3.5em /*= L - 2 */ auto, 11em /*= C * L */ 100%;
  padding-right: 12em /*= C * L + 1 */}
.slide.cover address {font-family: Garamond Premier Pro, Garamond, serif;
  line-height: 1.3; font-size: 2em /*= C * 1 */;
  position: absolute; bottom: 4.3478% /*= 1/N */;
  left: 2.4457% /*= 1/w */; right: 29.348% /*= (C * L + 1)/w */}
.slide.cover h1, .slide.cover h2 {font-size: 4em; /*= C * 2 */}

/* Explicit placement on a 3x3 grid */
.slide .place {position: absolute; box-sizing: border-box;
  max-width: 25.589%; /*= (w - 1 - (L + 1) - 2) / 3 / w */
  top: 50%; left: 43.274%; /*= ((w - 1 - (L + 1)) / 2 + 1) / w */
  transform: translate(-50%, -50%); text-align: center}
.slide .place.t, .slide .place.top {top: 4.3478%; /*= 1/N */
  transform: translate(-50%,0)}
.slide .place.b, .slide .place.bottom {top: auto; bottom: 4.3478% /*= 1/N */;
  transform: translate(-50%,0)}
.slide .place.l, .slide .place.left {left: 2.4457%; /*= 1/w*/
  transform: translate(0,-50%); text-align: left}
.slide .place.r, .slide .place.right {left: auto;
  right: 15.897%; /*= (L + 1)/w */
  transform: translate(0,-50%); text-align: right}
.slide .place.t.l, .slide .place.top.left, .slide .place.t.r,
.slide .place.top.right, .slide .place.b.l, .slide .place.bottom.left,
.slide .place.b.r, .slide .place.bottom.right {transform: none}

/* Numbered lines in a PRE */
.slide pre.numbered {padding-left: 2em; overflow-y: hidden; position: relative}
.slide pre.numbered::before {color: #aaa; text-align: right;
  white-space: pre-line; text-shadow: none;
  content: "1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20";
  position: absolute; top: 0; left: 0; width: 1.2em; font-family: serif;
  border-right: thin solid; padding-right: 0.2em}

/* White-on-black slides, either individual slides or all slides (body.white) */
.slide.white, .white .slide {color: white; background-color: black;
  text-shadow: 0 0 0.05em black, 0 0 0.05em black, 0 0 0.05em black,
    0 0 0.05em black, 0 0 0.05em black, 0 0 0.05em black, 0 0 0.05em black,
    0 0 0.05em black}
.slide.white, .white .slide {
  background: 36.389em /*= w - L + 1 */ 18.5em /*= N - L/H + 1 */
    / 3.5em /*= L - 2 */ auto url(../../Icons/W3C-circle.svg) no-repeat,
    bottom right / 5.5em /*= L */ 100%
    linear-gradient(hsl(211,45%,12%), hsl(205,42%,35%)) no-repeat black}
.slide.white ul > li::before,
.white .slide ul > li::before,
.slide.white h1, .slide.white h2,
.white .slide h1, .white .slide h2 {color: hsl(207,99%,75%)}
.slide.white code, .white .slide code {background: #444; text-shadow: none}
.slide.white :link, .white .slide :link {color: hsl(240,100%,90%)}
.slide.white :visited, .white .slide :visited {color: hsl(270,100%,90%)}
.slide.white :link, .slide.white :visited,
.white .slide :link, .white .slide :visited {padding: 0.1em 0.3em;
  border-radius: 0.3em; background: hsla(0,0%,0%,0.3)}
.white table.striped tr:nth-child(2n+2) {background: #333}
.white .slide em {background: 0 0 / 100% 100% url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKgAAAAfCAMAAABEWnZLAAAABGdBTUEAANbY1E9YMgAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAflBMVEUAAABMfwBMfwBMfwBMfwBMfwBMfwBMfwBMfwBMfwBMfwBMfwBMfwBMfwBMfwBMfwBWfwBdfwFefwdlfyF/f39/f39/f39/f390f1pafwBXfwB/f39/f39/f39/f39MfwBYfwBSfwBVfwBbfwBlfyFvf0Nyf094f2d/f3////9GIg70AAAAH3RSTlMAHz9vf6+/z++PXy/fD0+fn7+vfz9/Tx9P38/fv68PolOnnQAAAAFiS0dEKcq3hSQAAAAHdElNRQfkCBwRIS4mE4G5AAAB+0lEQVQYGc3BiVbbMBAF0NH46UmWZbmU0EK3CV35/y+snY0kJJBDFudeeYVTreA55wFUqirXw2kFz2B7RdZI2siIXKppB4v0SCoX19TZ3iN7qJxeq2taWSnZjha4psOmontUWPCcybYto5XdWoXPdhUi0cguTtEx2uhIAkVbeaHVBE8bU2AHFNVGZwoGNXuQZ04T1nXZrgQrJ9ucasJMTRtZJgmURnapaEfhXIfdKn2LHA4+2IlEznksFF1qZCenCfBksLnYJSfrWk3oSBtHpgdaEXHouKYGUFSeOZ/t1DIZzSxyKWa+8OHm4+3tZL+7lU/yeTJzf3vzMH20hen0C2nn9XP67NfvhT9/B/+enr5+G3y/600mkx+y8mOycv8wfbTxZZIeQNFWdmkR7ToE0gNFnexUATpTwGjnEUh6TxLbis40cqgm1bTLIOkBFFUnB2h1kNDzzHY6gb0OSx3XZdsS6srJPg18sDOKJGsASXuNvJd60pYyGewi+BK2JHUijWqRbaoJtHFF0gNJtRVpEWwQ2FUy0yQw2Dgye+ipqpMN6jkAtBGRtvJ2WZE9AElVXtFoD42saELNDdjChWjnlElm28DKybuUOtiFsKtUjqLogp1PpEelTk7EaQXPbKeRSdZAUW3lXJqCgWcv2psCBx6DSgcyHqc7yZH+Aw4OcuEIV4giAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTA4LTI4VDE1OjMzOjQ2KzAyOjAwHXQI0wAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wOC0yOFQxNTozMzo0NiswMjowMGwpsG8AAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAAAAElFTkSuQmCC)}

/* Full-size image overlays */
.slide img.cover, .slide img.fit {position: absolute; z-index: -1; top: 0;
  left: 0; width: 86.549%; /*= (w - L) / w */ height: 100%; object-fit: cover;
  padding: 0}
.slide img.fit {object-fit: contain}
.slide.cover img.cover, .slide.cover img.fit {
  width: 73.098%; /*= (w - 11) / w */}

/* Slide numbers in upper right corner */
.slide::after {content: counter(slide); color: white; position: absolute;
  top: 1em; line-height: 1; font-weight: bold; right: 0; width: 5.5em /*= L */;
  text-shadow: none; text-align: center}
.slide.clear::after {content: none}

/* A list as a tree structure with box-drawing characters */
.tree {list-style: none; font: 1em/1 monospace;
  white-space: nowrap; padding: 0.2em 0; overflow: auto}
.tree li::before {content: none}
.tree code {background: none; font-family: Gill Sans MT, Gill Sans,
  My Gill Sans, Liberation Sans, sans-serif}
.comment .tree code {font-family: serif}

/* Two columns, and alternate elements in the left and right column */
.slide .columns > * {box-sizing: border-box;
  width: 47.005% /*= (w - L - 4)/2/(w - L - 2) */; float: right}
.slide .columns > *:nth-child(odd) {clear: both; float: left}
.slide .columns {overflow: hidden}
@supports (display: grid) {
  .slide .columns {overflow: visible; display: grid; grid: "a  b" / 1fr 1fr;
     grid-gap: 0 2em}
  .slide .columns > * {width: auto}
}

/* Striped tables */
.slide table.striped {border-collapse: collapse}
.slide table.striped td, table.striped th {padding: 0 0.3em}
.slide table.striped tr:nth-child(2n+2) {background: #EEE}

/* Takahashi method (very big text, very few words) */
.slide .shout {font-size: 400%; line-height: 1.1}
.slide p.shout {margin: 0.25em 0}

/* Notes between the slides */
.comment {background: hsl(50,80%,90%); color: black; padding: 1em 1em;
  columns: 37em; font-family: serif; border-radius: 0.5em; margin: 4em 0 0;
  widows: 2; orphans: 2}
.comment :first-child {margin-top: 0}

/* Layout in slide mode (when body has class=full) */
.full, .full .slide {position: absolute; overflow: hidden}
.full {top: 50%; left: 50%; background: black;
  margin: -11.5em /*= -N/2 */ 0 0 -20.444em /*= -w/2 */}
.full .slide {visibility: hidden; top: 0; left: 0; margin: 0}
.full .slide.active {visibility: visible}
.full .comment {display: none}
.full .slide:target {outline: none}

.full .progress {position: absolute; top: 0; left: 0; height: 1px;
  background: linear-gradient(to right, hsla(0,100%,50%,0),hsla(0,100%,50%,1));
  z-index: 1; transition: 0.5s}

/* Reveal elements one by one */
.full .next:not(.active):not(.visited) {visibility: hidden}

/* Animation of a slowly growing element */
.full .grow {transition: 3s 1s ease-in-out transform;
  position: relative; transform: scale(0.1); transform-origin: 0 50%}
.slide.active .grow {transform: scale(1)}

/* Dim previously revealed elements (only with b6+) */
.full .incremental > .visited,
.full .overlay > .visited,
.full .next.visited {opacity: 0.3}

/* Transitions between slides */
.full .slide.active ~ .visited {animation: none} /* Moving backwards */

/* Transition: fade-in */
.full .slide.fade-in.visited,
.fade-in .slide.visited {animation: delay 1s 1}
.full .slide.fade-in + .active:not(.visited),
.full .slide.fade-in + .comment + .active:not(.visited),
.fade-in .slide.active:not(.visited) {animation: fade-in 1s 1}
@keyframes delay {
    from {visibility: visible}
    to {visibility: visible}
}
@keyframes fade-in {
    from {opacity: 0}
    to {opacity: 1}
}

/* Transition: slide-in */
.full .slide.slide-in.visited,
.slide-in .slide.visited {animation: leftout 1s 1}
.full .slide.slide-in + .active:not(.visited),
.full .slide.slide-in + .comment + .active:not(.visited),
.slide-in .slide.active:not(.visited) {animation: leftin 1s 1}
@keyframes leftout {
    from {transform: translate(0%, 0); visibility: visible}
    to {transform: translate(-100%, 0); visibility: visible}
}
@keyframes leftin {
    from {transform: translate(-100%, 0); visibility: visible}
    to {transform: translate(0%, 0); visibility: visible}
}

/* Transition: move-left. This doesn't work with Shower3, but does with b6+. */
.full .slide.move-left.visited,
.move-left .slide.visited {animation: leftout 1s 1}
.full .slide.move-left + .active:not(.visited),
.full .slide.move-left + .comment + .active:not(.visited),
.move-left .slide.active:not(.visited) {animation: rightin 1s 1}
@keyframes rightin {
    from {transform: translate(100%, 0); visibility: visible}
    to {transform: translate(0%, 0); visibility: visible}
}

/* Transition: move-up */
.full .slide.move-up.visited,
.move-up .slide.visited {animation: topout 1s 1}
.full .slide.move-up + .active:not(.visited),
.full .slide.move-up + .comment + .active:not(.visited),
.move-up .slide.active:not(.visited) {animation: bottomin 1s 1}
@keyframes topout {
    from {transform: translate(0, 0%); visibility: visible}
    to {transform: translate(0, -100%); visibility: visible}
}
@keyframes bottomin {
    from {transform: translate(0, 100%); visibility: visible}
    to {transform: translate(0, 0%); visibility: visible}
}

/* Transition: flip-up */
.full {perspective: 1000px; perspective: 1000}
.full .slide.flip-up.visited,
.flip-up .slide.visited {animation: turn-down 1s 1 ease-in}
.full .slide.flip-up + .active:not(.visited),
.full .slide.flip-up + .comment + .active:not(.visited),
.flip-up .slide.active:not(.visited) {animation: turn-up 1s 1 ease-out}
@keyframes turn-down {
    from {transform: rotateX(0deg); visibility: visible}
    50%, to {transform: rotateX(90deg); visibility: hidden}
}
@keyframes turn-up {
    from, 50% {transform: rotateX(-90deg); visibility: visible}
    to {transform: rotateX(0deg); visibility: visible}
}

/* Transition: flip-left */
.full .slide.flip-left.visited,
.flip-left .slide.visited {animation: flip-left1 1s 1 ease-in}
.full .slide.flip-left + .active:not(.visited),
.full .slide.flip-left + .comment + .active:not(.visited),
.flip-left .slide.active:not(.visited) {animation: flip-left2 1s 1 ease-out}
@keyframes flip-left1 {
    from {transform: rotateY(0deg); visibility: visible}
    50%, to {transform: rotateY(-90deg); visibility: hidden}
}
@keyframes flip-left2 {
    from, 50% {transform: rotateY(90deg); visibility: visible}
    to {transform: rotateY(0deg); visibility: visible}
}

/* Transition: center-out */
.full .slide.center-out.visited,
.center-out .slide.visited {animation: gray 1s 1}
.full .slide.center-out + .active:not(.visited),
.full .slide.center-out + .comment + .active:not(.visited),
.center-out .slide.active:not(.visited) {animation: center-out 1s 1}
@keyframes gray {
    from, to {opacity: 0.5; visibility: visible}
}
@keyframes center-out {
    from {clip-path: circle(0)}
    to {clip-path: circle(100%)}
}

/* Transition: wipe-left. This doesn't work with Shower3, but does with b6+. */
.full .slide.wipe-left.visited,
.wipe-left .slide.visited {animation: gray 1s 1}
.full .slide.wipe-left + .active:not(.visited),
.full .slide.wipe-left + .comment + .active:not(.visited),
.wipe-left .slide.active:not(.visited) {animation: rightin 1s 1}

/* Transition: zigzag-left */
.full .slide.zigzag-left.visited,
.zigzag-left .slide.visited {animation: gray 1s 1}
.full .slide.zigzag-left + .active:not(.visited),
.full .slide.zigzag-left + .comment + .active:not(.visited),
.zigzag-left .slide.active:not(.visited) {animation: zigzag-left 1s 1}
@keyframes zigzag-left {
    from {clip-path:
      polygon(120% 0%, 120% 0%, 100% 30%, 120% 60%, 110% 100%, 120% 100%)}
    to   {clip-path:
      polygon(120% 0%,   0% 0%, -20% 30%,   0% 60%, -10% 100%, 120% 100%)}
}

/* Transition: zigzag-right */
.full .slide.zigzag-right.visited,
.zigzag-right .slide.visited {animation: gray 1s 1}
.full .slide.zigzag-right + .active:not(.visited),
.full .slide.zigzag-right + .comment + .active:not(.visited),
.zigzag-right .slide.active:not(.visited) {animation: zigzag-right 1s 1}
@keyframes zigzag-right {
    from {clip-path:
      polygon(-20% 0%,  -20% 0%, 0% 30%,  -20% 60%, -10% 100%, -20% 100%)}
    to   {clip-path:
      polygon(-20% 0%, 100% 0%, 120% 30%, 100% 60%, 110% 100%, -20% 100%)}
}

/* Transition: cut-in */
.full .slide.cut-in.visited,
.cut-in .slide.visited {animation: gray 1s 1}
.full .slide.cut-in + .active:not(.visited),
.full .slide.cut-in + .comment + .active:not(.visited),
.cut-in .slide.active:not(.visited) {animation: cut-in 1s 1}
@keyframes cut-in {
  from {transform: translate(-100%, -100%)}
  to {transform: translate(0%, 0%)}
}

/* Not sure why Shower makes a section with class=region... */
section.region {display: none}


@page {
  margin: 1cm;
}
@media print {
  html {font-size: 10pt}
  body {background: none; margin: 0; columns: 41em}
  .slide {border: 0.5pt solid black; margin: 1rem 1rem 1rem 0; display: block;
    overflow: hidden}
  ul {margin: 0.9em 0} /* Compensate slight differences in fonts & margins */
}