✨🖍🐛 Lightbox captions changes. (ampproject#22189)

- Refactor lightbox captions into a separate file.
- Fix downwards movement at the start of the captions expanding by
having consistent padding both before and after the expansion.
- Allow opening lightbox with the captions already expanded via an
action.
- Apply captions fading mask when switching slides, which is less
jarring when the new slide's captions are overflowing.
- Keep the close and gallery view buttons visible when the caption is
expanded. This is important when opening when captions already expanded.
  * Added a fade out effect to the top of the text, so it does not clash
  with the buttons.
- Change the caption fade out mask to use `mask-image` instead of a
gradient. This works well when the captions are overlaying the image
(e.g. if you enter pan-zoom mode or the image is in portrait).
  * Add a text-shadow around the captions as a replacement, so when the
  captions are on top of an image, they are still readable. This also
  improves the contrast when the captions are expanded.
- Fix stacking order bug when fading in.

extensions/amp-lightbox-gallery/0.1/amp-lightbox-gallery.css

@@ -14,6 +14,29 @@
  * limitations under the License.
  */
 
+@import './lightbox-caption.css';
+
+[i-amphtml-lbg-fade] {
+  animation-fill-mode: forwards;
+  /* Keep in sync with FADE_DURATION */
+  animation-duration: 400ms;
+}
+
+[i-amphtml-lbg-fade="in"] {
+  animation-name: fadeIn;
+}
+
+[i-amphtml-lbg-fade="out"] {
+  animation-name: fadeOut;
+}
+
+amp-lightbox-gallery[i-amphtml-lbg-fade] {
+  position: relative;
+  /* The highest z-index supported by most browsers - 5. See: css/Z_INDEX.md */
+  z-index: 2147483642;
+  animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
+}
+
 amp-lightbox-gallery .amp-carousel-button {
   display: none;
 }
@@ -148,69 +171,17 @@ amp-lightbox-gallery amp-carousel {
   }
 }
 
-.i-amphtml-lbg-controls.i-amphtml-lbg-hidden {
+.i-amphtml-lbg-controls:not([i-amphtml-lbg-fade]) {
   opacity: 0;
   visibility: hidden;
 }
 
-.i-amphtml-lbg-controls.i-amphtml-lbg-fade-in {
-  animation: fadeIn ease-in 0.4s 1 forwards;
-}
-
-.i-amphtml-lbg-controls.i-amphtml-lbg-fade-out
- {
-  animation: fadeOut linear 0.4s 1 forwards;
-}
-
-.i-amphtml-lbg-desc-box {
-  position: absolute !important;
-  left: 0 !important;
-  right: 0 !important;
-  bottom: 0 !important;
-  color: #ffffff;
-}
-
-.i-amphtml-lbg-desc-box.i-amphtml-lbg-standard {
-  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
-  max-height: 6rem !important;
-  transition: max-height ease-out 0.3s !important;
-  overflow: hidden !important;
+.i-amphtml-lbg-controls[i-amphtml-lbg-fade="in"] {
+  animation-timing-function: ease-in;
 }
 
-.i-amphtml-lbg-desc-box.i-amphtml-lbg-overflow {
-  overflow-y: auto !important;
-  -webkit-overflow-scrolling: touch !important;
-  max-height: 100% !important;
-  transition: max-height ease-out 0.7s !important;
-}
-
-.i-amphtml-lbg-desc-mask {
-  width: 100% !important;
-  position: fixed !important;
-  bottom: 0 !important;
-}
-
-.i-amphtml-lbg-desc-text {
-  padding: 20px !important;
-  position: relative !important;
-  z-index: 1 !important;
-}
-
-.i-amphtml-lbg-desc-box.i-amphtml-lbg-overflow .i-amphtml-lbg-desc-text {
-  padding-top: 40px !important;
-}
-
-.i-amphtml-lbg-desc-box.i-amphtml-lbg-standard .i-amphtml-lbg-desc-mask {
-  z-index: 1 !important;
-  height: 1rem !important;
-  background: linear-gradient(transparent, rgba(0,0,0,0.9));
-  transition: background-color ease-out 0.5s !important;
-}
-.i-amphtml-lbg-desc-box.i-amphtml-lbg-overflow .i-amphtml-lbg-desc-mask {
-  background-color: rgba(0,0,0,0.4) !important;
-  top: 0 !important;
-  z-index: 0 !important;
-  transition: background-color ease-in 0.4s !important;
+.i-amphtml-lbg-controls[i-amphtml-lbg-fade="out"] {
+  animation-timing-function: linear;
 }
 
 .i-amphtml-lbg[gallery-view] .i-amphtml-lbg-gallery {
@@ -278,7 +249,8 @@ amp-lightbox-gallery amp-carousel {
   }
 }
 
-.i-amphtml-lbg[gallery-view] .i-amphtml-lbg-button-gallery {
+.i-amphtml-lbg[gallery-view] .i-amphtml-lbg-button-gallery,
+.i-amphtml-lbg[gallery-view] .i-amphtml-lbg-caption {
   display: none;
 }
 
@@ -310,11 +282,4 @@ amp-lightbox-gallery .i-amphtml-slide-item > * {
     opacity: 0;
     visibility: hidden;
    }
-}
-
-@keyframes slideUp {
-  from { max-height: 6rem; }
-  to {
-    max-height: 100%;
-  }
-}
+}