/* Animated "OCEAN DYNAMICS" banner in the header, over the Landsat photo.
   Built in the group-logo repository; files in img/banner/.
   The trails video is an ordinary MP4 with white trails on pure black, drawn with "screen"
   blending: black adds nothing, so only the trails show, over any background and in every browser,
   without a transparent video. The lettering is a separate sharp image on top. */


/* The photo starts 150 px down, under a dark teal fade that is solid behind the menu and the top of
   the animation and clear by the button. On desktop the header fills the window; the photo is
   enlarged if needed so it always reaches the bottom (2145 x 1136 is its size in pixels). */
header.masthead {
  background: linear-gradient(to bottom, rgb(14,36,37) 0px, rgb(14,36,37) 230px,
                              rgba(14,36,37,0.7) 360px, rgba(14,36,37,0) 500px),
              url(../img/Landsat.jpg) center 150px / max(100%, calc((100vh - 150px) * 2145 / 1136)) auto no-repeat
              !important;
  background-color: rgb(14,36,37) !important;
}
header.masthead .intro-text { padding-top: 90px; padding-bottom: 90px; }
@media (min-width: 768px) { header.masthead { min-height: 100vh; } }

.od-banner { position: relative; width: 100%; max-width: 1100px; margin: 0 auto -10px auto; }
/* fade the video's outer edge into the header, so any tiny colour difference never shows as a box */
.od-banner video, .od-banner .od-still {
  position: relative; width: 100%; display: block; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent),
                      linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent),
                      linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
          mask-composite: intersect;
}
.od-banner .od-still { display: none; }
/* playback refused (js/banner.js): the still frame covers the video, which stays in the layout so it
   can still start, and the browser's own play button is hidden */
.od-banner.od-paused video { opacity: 0; }
.od-banner.od-paused .od-still { display: block; position: absolute; left: 0; top: 0; height: 100%; }
.od-banner video::-webkit-media-controls,
.od-banner video::-webkit-media-controls-start-playback-button,
.od-banner video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }
.od-banner .od-letters { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

@media (max-width: 767px) {
  header.masthead { overflow: hidden; }
  header.masthead .intro-text { padding-top: 90px; padding-bottom: 60px; }
  .od-banner { width: 125vw; max-width: none; margin-left: calc(50% - 62.5vw); margin-right: 0; margin-bottom: -6px; }
}

@media (prefers-reduced-motion: reduce) {
  .od-banner video { display: none; }
  .od-banner .od-still { display: block; }
}