/* Quiet decorative motion layered over Reimu's existing layout. */
#header > img.wallpaper-rotator-layer {
  z-index: -1;
  opacity: 0;
  transition: opacity 1.2s ease;
}

#header > img.wallpaper-rotator-layer.is-visible {
  opacity: 1;
}

/* A wallpaper-first home page, while inner pages retain compact banners. */
html.nemo-home {
  --home-overlap: 120px;
  --home-overlap-negative: -120px;
}

html.nemo-home #header {
  height: calc(100svh + var(--home-overlap));
  min-height: 740px;
  isolation: isolate;
}

html.nemo-home #header > img {
  height: 100%;
  object-position: center;
  -webkit-mask: none;
  mask: none;
}

html.nemo-home #header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 14, 24, 0.34), transparent 32%),
    linear-gradient(0deg, rgba(8, 14, 24, 0.72), transparent 42%);
}

html.nemo-home #header-outer::after {
  content: "SCROLL  ↓";
  position: absolute;
  bottom: calc(var(--home-overlap) + 28px);
  left: 50%;
  color: rgba(255, 255, 255, 0.86);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  transform: translateX(-50%);
  animation: nemo-scroll-cue 2.2s ease-in-out infinite;
}

html.nemo-home #content {
  z-index: 3;
  margin-top: var(--home-overlap-negative);
  padding-top: 0;
  isolation: isolate;
}

html.nemo-home #content::before {
  content: "";
  position: absolute;
  top: -150px;
  left: 50%;
  z-index: -1;
  width: 100vw;
  height: 300px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--color-background));
  transform: translateX(-50%);
}

/* Text-first navigation replaces the theme's mixed icon set. */
#main-nav .main-nav-icon {
  display: none;
}

#main-nav .main-nav-link-wrap {
  position: relative;
  padding: 0 17px;
}

#main-nav .main-nav-link {
  padding: 20px 1px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

#main-nav .main-nav-link-wrap::after {
  content: "";
  position: absolute;
  right: 17px;
  bottom: 13px;
  left: 17px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

#main-nav .main-nav-link-wrap:hover::after {
  transform: scaleX(1);
}

html.nemo-home:not(.nemo-scrolled) #header-nav,
html.nemo-home:not(.nemo-scrolled) #header-nav:hover {
  background: linear-gradient(180deg, rgba(5, 10, 18, 0.5), transparent);
  box-shadow: none;
}

html.nemo-home:not(.nemo-scrolled) #header-nav .main-nav-link,
html.nemo-home:not(.nemo-scrolled) #header-nav .main-nav-link-wrap,
html.nemo-home:not(.nemo-scrolled) #header-nav .nav-icon {
  color: #fff;
}

#sidebar .sidebar-wrap {
  border: 1px solid rgba(137, 165, 196, 0.16);
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(16, 32, 52, 0.1);
}

/* Article pages keep a single-purpose table of contents on small screens. */
#mobile-nav .sidebar-common-sidebar,
#mobile-nav .sidebar-btn-wrapper {
  display: none;
}

/* The custom preloader remains compact and locally hosted. */
#loader .loading-taichi img {
  width: 112px;
  height: 112px;
}

#loader .spinner-box .loading-word {
  top: calc(50% + 88px);
  font-size: 1rem;
  letter-spacing: 0.12em;
}

@keyframes nemo-scroll-cue {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.58; }
  50% { transform: translate(-50%, 7px); opacity: 1; }
}

#wrap::before,
#wrap::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(225, 232, 241, 0.85);
  filter: drop-shadow(-7px 3px 5px rgba(82, 123, 168, 0.35));
}

#wrap::before {
  box-shadow:
    -96vw 82vh 0 0 rgba(225, 232, 241, 0.6),
    -83vw 35vh 0 1px rgba(137, 165, 196, 0.42),
    -69vw 68vh 0 0 rgba(245, 247, 250, 0.5),
    -55vw 91vh 0 1px rgba(82, 123, 168, 0.4),
    -42vw 46vh 0 0 rgba(225, 232, 241, 0.65),
    -28vw 73vh 0 1px rgba(137, 165, 196, 0.48),
    -14vw 22vh 0 0 rgba(245, 247, 250, 0.52),
    0 58vh 0 1px rgba(82, 123, 168, 0.38);
  animation: nemo-stardust-near 38s linear infinite;
}

#wrap::after {
  width: 3px;
  height: 3px;
  background: rgba(137, 165, 196, 0.6);
  box-shadow:
    -92vw 54vh 0 0 rgba(137, 165, 196, 0.4),
    -71vw 88vh 0 0 rgba(225, 232, 241, 0.38),
    -49vw 28vh 0 1px rgba(82, 123, 168, 0.32),
    -25vw 65vh 0 0 rgba(245, 247, 250, 0.4),
    -3vw 94vh 0 1px rgba(137, 165, 196, 0.3);
  animation: nemo-stardust-far 56s linear -19s infinite;
}

#wrap {
  background: transparent;
}

#header-title,
#content,
#footer {
  z-index: 3;
}

#footer {
  position: relative;
}

.footer-line {
  position: relative;
  width: 100%;
  height: 84px;
  margin: 2px 0 22px;
  opacity: 0.48;
  overflow: hidden;
  background: url("../images/decor/asteroid-belt.svg") repeat-x 0 50% / 520px 70px;
  filter: drop-shadow(0 0 3px rgba(54, 95, 141, 0.35));
  animation: nemo-asteroids 30s linear infinite;
  transform: rotate(-0.6deg);
  transition: opacity 0.4s;
  -webkit-mask-image: radial-gradient(ellipse 55% 78% at center, #000 68%, transparent 100%);
  mask-image: radial-gradient(ellipse 55% 78% at center, #000 68%, transparent 100%);
}

.footer-line::before,
.footer-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: 0.45;
}

.footer-line::before {
  background-size: 390px 54px;
  animation: nemo-asteroids-near 22s linear infinite;
}

.footer-line::after {
  background-size: 680px 76px;
  opacity: 0.22;
  animation: nemo-asteroids-far 44s linear infinite reverse;
}

#footer:hover .footer-line {
  opacity: 0.62;
}

@keyframes nemo-asteroids {
  to { background-position-x: -520px; }
}

@keyframes nemo-asteroids-near {
  to { background-position-x: -390px; }
}

@keyframes nemo-asteroids-far {
  to { background-position-x: -680px; }
}

@keyframes nemo-stardust-near {
  0% { transform: translate3d(-8vw, 12vh, 0); opacity: 0; }
  8%, 90% { opacity: 0.72; }
  100% { transform: translate3d(116vw, -26vh, 0); opacity: 0; }
}

@keyframes nemo-stardust-far {
  0% { transform: translate3d(-6vw, 8vh, 0); opacity: 0; }
  10%, 88% { opacity: 0.46; }
  100% { transform: translate3d(112vw, -18vh, 0); opacity: 0; }
}

@media (max-width: 600px) {
  html.nemo-home {
    --home-overlap: 72px;
    --home-overlap-negative: -72px;
  }

  html.nemo-home #header {
    height: calc(88svh + var(--home-overlap));
    min-height: 592px;
  }

  html.nemo-home #content {
    padding-top: 0;
  }

  .footer-line {
    height: 62px;
    background-size: 420px 54px;
  }

  .footer-line::before {
    background-size: 330px 44px;
  }

  .footer-line::after {
    background-size: 540px 58px;
  }

  #wrap::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.nemo-home #header-outer::after {
    animation: none;
  }

  #wrap::before,
  #wrap::after,
  .footer-line,
  .footer-line::before,
  .footer-line::after {
    animation: none;
  }

  #wrap::before,
  #wrap::after {
    display: none;
  }
}