/* User Provided Stylesheet */

/* Remove white background from logo in dark mode */
.myst-home-link-logo {
  background: transparent !important;
  background-color: transparent !important;
}

/* Make split-image hero full-width with banner as background */
.myst-landing-split-img {
  position: relative !important;
  overflow: hidden !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

.myst-landing-split-img-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
}

.myst-landing-split-img-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.myst-landing-split-img-content-wrapper {
  position: relative !important;
  z-index: 1 !important;
  min-height: 60vw !important;
  max-height: 80vh !important;
  display: flex !important;
  align-items: flex-start !important;
  padding-top: 4rem !important;
}

.myst-landing-split-img-content {
  width: 50% !important;
  margin-left: 2rem !important;
}

/* Title: white, bigger, bolder */
.myst-landing-split-img-heading {
  color: #fff !important;
  font-size: 4rem !important;
  font-weight: 800 !important;
  text-shadow: 0 3px 12px rgba(0,0,0,0.7) !important;
}

/* Subtitle: white, bold */
.myst-landing-split-img-subtitle {
  color: #fff !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
}

/* Body text: white, readable */
.myst-landing-split-img-body,
.myst-landing-split-img-body p {
  color: #fff !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6) !important;
}

/* Darken left side for text readability */
.myst-landing-split-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 65%;
  height: 100%;
  background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.3) 70%, transparent);
  z-index: 0;
  pointer-events: none;
}

/* --- Roakey scroll peeks ---------------------------------------------------
   Decorative mascots anchored at predefined points in the landing page. They
   sit absolutely (out of flow, so they never shift content) and slide in from
   the edge as you scroll past, stopping flush against the side. */
.roakey-peek {
  position: absolute;
  height: auto;
  margin: 0;
  pointer-events: none;
  user-select: none;
  z-index: 5;
}

/* Off-screen peeks must not create horizontal scroll. */
html, body {
  overflow-x: clip;
}

/* Anchor the peeks to the full-width content column. The landing block that
   wraps each directive is narrow and centered, so reaching the true screen
   edge from it would require a viewport-based offset that overshoots past the
   clip box (the vertical scrollbar makes the right side fall fully outside,
   hiding the tail). Promoting `main` to the containing block lets us anchor
   flush with a plain `left: 0` / `right: 0`, fully inside the clip box. */
main:has(.roakey-peek) {
  position: relative;
}
.myst-landing-block:has(.roakey-peek) {
  position: static;
}

/* Head peeks in from the left edge */
.roakey-peek-left {
  left: 0;
  width: 170px;
  transform: translateX(-100%);
}

/* Tail peeks in from the right edge */
.roakey-peek-tail {
  right: 0;
  width: 190px;
  transform: translateX(100%);
}

/* Slide in as the peek scrolls through the viewport (Chromium/Edge). */
@supports (animation-timeline: view()) {
  /* Both peeks only reveal on wide viewports, where the gutters beside the
     centered content column have room for them. On narrower screens they would
     cover the content, so they stay hidden off-screen. */
  @media (min-width: 1536px) {
    .roakey-peek-left {
      animation: roakey-peek-left linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    .roakey-peek-tail {
      animation: roakey-peek-tail linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
  }
  @keyframes roakey-peek-left {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(0); }
  }
  /* Stop before the wooden board enters the viewport, so only the tail shows
     (the board occupies the right ~10% of the image). */
  @keyframes roakey-peek-tail {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(13%); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .roakey-peek-left,
  .roakey-peek-tail {
    animation: none;
  }
}