/* BM Taiji Intro — two-phase full-screen video splash */
:root {
  --bm-ti-ink: #1c424e;
  --bm-ti-line: rgba(28, 66, 78, 0.16);
}

html.bm-ti-active,
html.bm-ti-active body {
  overflow: hidden !important;
}

.bm-ti-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: block;
  overflow: hidden;
  opacity: 1;
  overscroll-behavior: contain;
  touch-action: none;
  transition: opacity 300ms cubic-bezier(.22,.61,.36,1);
}

/* Phase B (non-blocking tail): scroll/pointer blocking is lifted — clicks
   and scroll pass straight through to the page underneath. */
.bm-ti-overlay--tail {
  pointer-events: none;
  touch-action: auto;
  overscroll-behavior: auto;
}

.bm-ti-overlay--tail .bm-ti-skip {
  display: none;
}

.bm-ti-overlay--leaving {
  opacity: 0;
  pointer-events: none;
}

/* White backdrop, only present during the blocking phase — fades to
   transparent when the tail phase begins, revealing the page behind it. */
.bm-ti-bg {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 1;
  transition: opacity 500ms ease;
}

.bm-ti-overlay--tail .bm-ti-bg {
  opacity: 0;
}

/* Video keeps playing full-screen through both phases. Its source frames
   sit on a plain white background, so mix-blend-mode: multiply makes the
   white regions disappear against whatever is behind (the bg layer while
   blocking, the real page during the tail) while the dark linework stays
   visible drawn on top. Requires .bm-ti-overlay to NOT create an isolated
   stacking context, so the blend can reach the actual page content. */
.bm-ti-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: multiply;
}

.bm-ti-skip {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  min-height: 42px;
  padding: 0 17px;
  border: 1.5px solid rgba(28, 66, 78, 0.45);
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  color: var(--bm-ti-ink);
  font: 600 13px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(28, 66, 78, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.bm-ti-skip:hover {
  border-color: rgba(28, 66, 78, 0.6);
  background: #ffffff;
  transform: translateY(-1px);
}

.bm-ti-skip:focus-visible {
  outline: 3px solid rgba(44, 108, 120, 0.23);
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .bm-ti-skip {
    min-height: 40px;
    padding-inline: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bm-ti-overlay,
  .bm-ti-bg,
  .bm-ti-skip {
    transition-duration: 1ms !important;
  }
}