/* First-paint cover. Colours and size match the supplied canvas transition. */
html.mk-cover::after{
  content: "";
  position: fixed;
  /* overscan above and below: some mobile browsers show more than 100lvh while their bars move */
  top: -30vh; left: 0; right: 0; bottom: auto;
  height: 160vh; height: calc(100lvh + 60vh);
  z-index: 2147483646;
  background: #0212ee;
  pointer-events: auto;
}
/* The logo of that cover, centred on what is on screen (50dvh) like the canvas logo,
   so it does not jump between the cover and the curtain while the bars move. */
html.mk-cover::before{
  content: "";
  position: fixed; z-index: 2147483647;
  left: 50%; top: 50vh; top: 50dvh;
  width: min(38vw, 340px); aspect-ratio: 286 / 87;
  translate: -50% -50%;
  background: url('/assets/brand/myrak-transition-logo.svg') center / 100% 100% no-repeat;
  pointer-events: none;
}

/* First arrival: plain blue until the introduction has drawn its first frame. */
html.mk-intro::after{
  content: "";
  position: fixed;
  /* overscan above and below: some mobile browsers show more than 100lvh while their bars move */
  top: -30vh; left: 0; right: 0; bottom: auto;
  height: 160vh; height: calc(100lvh + 60vh);
  z-index: 2147483646;
  background: #0212ee;
}

/* While a loader is up the page background is blue too: no light strip at the edges.
   Under a page-change cover (arriving, or leaving once the curtain is closed) the page is hidden,
   so whatever a mobile browser shows around the cover while its bars move is blue as well. */
html.mk-cover, html.mk-intro, html.mk-leaving{ background-color: #0212ee; }
html.mk-cover body, html.mk-leaving body{ visibility: hidden; }
html.mk-leaving .myrak-transition-canvas{ visibility: visible; }

/* The intro owns the hero entrance. Keep its destination still, even on skip.
   This page-scoped class stays after the intro so old entrance animations
   cannot restart when the overlay is removed. Scroll-driven motion is intact. */
html.mk-intro-page body.page-enter main{
  animation: none !important;
}
html.mk-intro-page .hero-v2-heading.reveal{
  opacity: 1;
  transform: none;
  transition: none;
}

/* The inline footer logo needs its own paths, not the old mask/blue filter. */
.site-footer .footer-v2-mark svg.myrak-footer-animated,
[data-myrak-footer-logo] svg.myrak-footer-animated{
  color: var(--ink, #241916);
  filter: none !important;
  background: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  overflow: visible;
}