:root {
  --mti-black: var(--color-primary);
}

/* Observer only preventDefaults touchmove, never touchstart, and while the story is armed body is position:fixed so the document is not scrollable — both make the browser eager to read a downward swipe as pull-to-refresh */
html,
body {
  overscroll-behavior-y: none;
}

.main-contents {
  overflow-x: clip;
}

#stage {
  z-index: 9999;
}

.invisible-h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.global-header,
.global-footer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.8s ease, visibility 0.8s ease, transform 1.2s cubic-bezier(0.71, -0.01, 0.52, 0.99);
}

.global-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  transform: translateY(-100%);
}

body.opening-done .global-footer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.is-header-visible .global-header {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* transform on the header makes position:fixed children use the header box, so
   the overlay would only be ~80px tall unless the header fills the viewport. */
body.is-header-visible .global-header:has(.full-screen-menu.is-open) {
  height: 100vh;
  height: 100dvh;
}

body.opening-done #stage {
  z-index: 1;
}

body.opening-done.is-top-footer-visible .global-header {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.5rem);
}

@media (prefers-reduced-motion: reduce) {
  .global-header,
  .global-footer {
    transition: none;
  }
}