/* Shared by the Zensical and legacy landing pages. */
:root {
  --home-universe-bg: #171717;
}

/* Keep the landing header and static/animated scene on the same opaque surface. */
.md-header.md-header--landing {
  background-color: var(--home-universe-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.home-div.home-universe-bg {
  --hero-starfield-bg-color: var(--home-universe-bg);
  background-color: var(--home-universe-bg);
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: calc(min(100svh, 120vw) - 2.4rem);
  margin-top: 0;
  padding: 0 0 1rem;
  overflow: hidden;
}

/* Keep the map below the header and let captions grow in their own space.
   Absolute positioning clipped the map and overlaid its bottom labels on short screens. */
.home-div.home-universe-bg > .hero-div {
  flex: none;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  margin: 0 auto;
}

.home-div.home-universe-bg > .heading-div {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  padding: 0 .75rem 2rem;
}

.home-div.home-universe-bg > .heading-div p {
  text-wrap: balance;
}

/* Reserve room for the heading and actions on ordinary desktop screens.
   Short landscape screens keep a readable map and scroll instead of shrinking it. */
@media (min-width: 901px) and (min-height: 640px) {
  .home-div.home-universe-bg > .hero-div {
    max-width: min(100%, calc((100svh - 16rem) * 4 / 3));
  }
}

.hero-universe .starfield {
  pointer-events: none;
  background-image:
    linear-gradient(var(--home-universe-bg) 72px, transparent 200px),
    radial-gradient(ellipse at 25% 30%, rgba(85, 174, 166, 0.055), transparent 55%),
    radial-gradient(ellipse at 80% 60%, rgba(130, 144, 187, 0.045), transparent 50%);
}

.hero-universe .hero-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Drift is independent of hover; selection never changes an object's size. */
.hero-universe .hero-div > a > img,
.hero-universe .hero-div > a > span {
  translate: var(--hero-x, 0px) var(--hero-y, 0px);
}

.hero-universe .hero-div > a > img {
  rotate: var(--hero-angle, 0deg);
  transition: transform 240ms ease, filter 240ms ease;
}

.hero-universe .hero-ground,
.hero-universe .hero-links {
  translate: var(--hero-ground-x, 0px) var(--hero-ground-y, 0px);
  pointer-events: none;
}

.hero-universe .hero-links {
  opacity: .72;
  transition: filter 300ms ease;
}

.hero-universe .hero-network-active > .hero-links {
  filter: brightness(1.16) drop-shadow(0 0 2px rgba(126, 207, 196, 0.22));
}

.hero-universe .hero-div > a.hero-selected > img {
  transform: none;
  filter: brightness(1.04) drop-shadow(0 0 3px rgba(147, 213, 204, 0.18));
}

.hero-universe .hero-div > a.hero-selected > span {
  color: var(--md-typeset-btn-color);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* The positioned children, rather than the zero-size inline anchor, show focus. */
.hero-universe .hero-div > a:focus-visible {
  outline: none;
}

.hero-universe .hero-div > a:focus-visible > span {
  outline: 2px solid var(--md-typeset-btn-color);
  outline-offset: 5px;
  border-radius: 2px;
}

.hero-universe .hero-motion-toggle {
  position: absolute;
  bottom: 0.65rem;
  right: 0.65rem;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 11px;
  border: 1px solid rgba(197, 216, 213, 0.25);
  border-radius: 50%;
  background: rgba(30, 30, 30, 0.7);
  color: #bbceca;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}

.hero-universe .hero-motion-toggle:hover,
.hero-universe .hero-motion-toggle:focus-visible {
  color: #e1f3ef;
  border-color: var(--md-typeset-btn-color);
  outline: 2px solid var(--md-typeset-btn-color);
  outline-offset: 3px;
}

.hero-motion-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-motion-toggle .hero-play-icon,
.hero-motion-toggle[data-paused="true"] .hero-pause-icon,
.hero-universe .hero-motion-toggle[hidden] {
  display: none;
}

.hero-motion-toggle[data-paused="true"] .hero-play-icon {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .hero-universe .hero-div > a > img,
  .hero-universe .hero-div > a > span,
  .hero-universe .hero-ground,
  .hero-universe .hero-links {
    translate: none;
    rotate: none;
    transition: none;
  }

  .hero-universe .hero-div > a:hover > img,
  .hero-universe .hero-div > a.hero-selected > img {
    transform: none;
  }
}

/* Chapter labels stay clickable above neighbouring transparent image hit boxes. */
.hero-div > a > span { z-index: 1; }

/* Metadata-only boxes reserve layout and native hit targets without downloading fallback art. */
.hero-div > a > noscript > img { width: auto; position: absolute; }
.hero-div img[data-hero-fallback]:not([src]) { opacity: 0 !important; }

@keyframes hero-object-reveal { from { opacity: 0; } to { opacity: 1; } }
.hero-universe .hero-div > a > img.hero-replaced {
  opacity: 0;
}

.hero-universe .hero-objects-canvas {
  animation: hero-object-reveal 400ms ease-out both;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-universe .hero-objects-canvas[hidden] {
  display: none;
}

/* Original art is a complete fallback; labels and hit areas remain native HTML. */
.hero-universe .hero-div > img.hero-replaced { opacity: 0; }

.hero-universe > .hero-objects-canvas { z-index: 0; }

/* Immediate preference response also covers an already-paused animation clock. */
@media (prefers-reduced-motion: reduce) {
  .hero-universe .hero-objects-canvas,
  .hero-universe .hero-motion-toggle { display: none; }
  .hero-universe .hero-div img.hero-replaced { opacity: 1; }
  .hero-three-active .hero-stars { visibility: visible; }
}

/* Long localized labels need space beside the new volumetric silhouettes. */
.hero-three-active :is(.hero-div--en, .hero-div--ru) > a[href$="chapter_greedy/"] > span {
  margin-left: -4%;
}
.hero-three-active :is(.hero-div--en, .hero-div--ru, .hero-div--ja) > a[href$="chapter_stack_and_queue/"] > span {
  margin-left: 4%;
}

/* Long translated chapter names use readable native links on narrow screens. */
@media screen and (min-width: 901px) {
  /* Keep the original planet silhouettes; move long labels into the open gaps. */
  .hero-universe :is(.hero-div--en, .hero-div--ru, .hero-div--ja, .hero-div--ko) > a[href$="chapter_introduction/"] > span {
    margin-top: .6rem;
  }
  .hero-universe .hero-div--en > a[href$="chapter_divide_and_conquer/"] > span {
    margin-left: -4.5%;
  }
}

@media screen and (max-width: 900px) {
  .home-div.home-universe-bg > :is(.hero-div--en, .hero-div--ru, .hero-div--ja) { aspect-ratio: auto; }
  .hero-universe .hero-div--ko > a[href$="chapter_introduction/"] > span {
    left: 48% !important;
    top: 95% !important;
  }
  .hero-universe .hero-div--ko > a[href$="chapter_divide_and_conquer/"] > span {
    margin-left: -2%;
  }
  .home-div:has(> :is(.hero-div--en, .hero-div--ru, .hero-div--ja)) { display: block; height: auto !important; margin-top: 0 !important; padding: .5rem 0 1rem !important; }
  .home-div > :is(.hero-div--en, .hero-div--ru, .hero-div--ja) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .5rem; width: calc(100% - 1.5rem); height: auto; margin: .5rem auto 1rem; }
  .home-div > :is(.hero-div--en, .hero-div--ru, .hero-div--ja) > img { display: none; }
  .home-div > :is(.hero-div--en, .hero-div--ru, .hero-div--ja) > a { display: flex; align-items: center; gap: .4rem; min-width: 0; min-height: 48px; padding: .3rem .15rem; text-align: left; }
  .home-div > :is(.hero-div--en, .hero-div--ru, .hero-div--ja) > a > noscript > img,
  .home-div > :is(.hero-div--en, .hero-div--ru, .hero-div--ja) > a > img { position: static; flex-shrink: 0; width: 32px !important; height: 32px !important; object-fit: contain; }
  .home-div > :is(.hero-div--en, .hero-div--ru, .hero-div--ja) > a > span { position: static; min-width: 0; transform: none; white-space: normal; font-size: 13px; line-height: 1.3; }
  .home-div > :is(.hero-div--en, .hero-div--ru, .hero-div--ja) + .heading-div { position: relative; left: auto; bottom: auto; transform: none; padding: 0 .75rem; }
}

/* Restore the animated, hand-drawn glass from the accepted motion study. */
.hero-universe .hero-div > a > .hero-hourglass {
  position: absolute;
  width: auto;
  aspect-ratio: 113 / 178;
  overflow: visible;
  pointer-events: none;
  translate: var(--hero-x, 0px) var(--hero-y, 0px);
  rotate: var(--hero-angle, 0deg);
  transition: transform 240ms ease, filter 240ms ease;
}
.hero-universe .hero-div > a.hero-selected > .hero-hourglass {
  transform: none;
  filter: brightness(1.04) drop-shadow(0 0 3px rgba(147, 213, 204, 0.18));
}
@media (prefers-reduced-motion: reduce) {
  .hero-universe .hero-hourglass { display: none !important; }
}

/* Override legacy :hover scaling, including the still-visible original hit targets. */
.hero-universe .hero-div > a:hover > img { transform: none; filter: none; }
.hero-universe .hero-div > a.hero-selected > img { filter: brightness(1.04); }

/* Intrinsic dimensions reserve space without overriding responsive media height. */
.home-div .profile-img { height: auto; }
.home-div video.intro-image { height: auto; }