/*
 * Small additions on top of dist/styles/main.css (enqueued after it).
 */

/* ---- Swup page transitions ---- */

/* The current page fades out, then the next one fades in */
html.is-changing [data-barba="container"] {
  transition: opacity 0.45s ease;
}

html.is-changing.is-leaving [data-barba="container"] {
  transition-duration: 0.35s;
}

html.is-animating [data-barba="container"] {
  opacity: 0;
}

/* Top loading bar while the next page is fetched (@swup/progress-plugin) */
.swup-progress-bar {
  height: 6px; /* same as the scroll progress .scroll-bar */
  background-color: #000;
  z-index: 10000;
}

/* ---- Lazy video tiles (js/lazy-video.js) ---- */

/* Plain placeholder block until the first frame / the image is there.
   Videos: shows when there's no poster yet. Grid thumbnails get .lv-ph from js/lazy-video.js
   while loading, and lose it on load (so transparent PNGs don't keep a grey background). */
video[data-lazy-video],
img.lv-ph {
  background-color: #ececec;
}

video[data-lazy-video].lv-ready {
  background-color: transparent;
}

/* The width/height attributes are only there to reserve the aspect ratio. Without this,
   the height attribute becomes a fixed CSS height. :where() keeps specificity at zero,
   so any height the theme sets (e.g. .video-fullwidth video, phone mockups) still wins. */
:where(video[data-lazy-video][height]) {
  height: auto;
}

/* These are muted background loops: never show the native player UI */
video[data-lazy-video]::-webkit-media-controls,
video[data-lazy-video]::-webkit-media-controls-start-playback-button,
video[data-lazy-video]::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
}

/* Per-tile buffering bar along the top edge of the video */
.lv-bar {
  position: absolute;
  display: block;
  opacity: 0; /* only shown (.lv-bar--show) if the video isn't ready quickly */
  height: 6px; /* same as the scroll progress .scroll-bar */
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.4s ease;
}

.lv-bar__fill {
  display: block;
  height: 100%;
  background-color: #000;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s linear;
}

/* Before the duration is known: an indeterminate sweep */
.lv-bar--waiting .lv-bar__fill {
  width: 30%;
  transform: none;
  animation: lv-sweep 1s ease-in-out infinite;
}

.lv-bar--show {
  opacity: 1;
}

.lv-bar--done {
  opacity: 0;
}

@keyframes lv-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(340%); }
}

@media (prefers-reduced-motion: reduce) {
  .lv-bar--waiting .lv-bar__fill {
    animation: none;
  }

  html.is-changing [data-barba="container"] {
    transition: none;
  }
}

/* ---- Mobile menu: everything centred ---- */

/* Sub-menus inherited the desktop dropdown's fixed 120px item width and sat left */
#menu-mobile-menu .sub-menu {
  width: 100%;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

#menu-mobile-menu .sub-menu li {
  width: 100% !important;
}

#menu-mobile-menu .sub-menu a {
  text-align: center;
}

/* ---- Hide the page scrollbar (scrolling still works) ---- */

html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}