/* Light, linework and atmosphere around the original two compendia. */
.home-container {
  position: relative;
  isolation: isolate;
}
.home-container::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 0 0 auto;
  height: 600px;
  background: radial-gradient(ellipse at 86% 15%, #dae9e84a, transparent 56%),
    radial-gradient(ellipse at 8% 12%, #f0e3ce40, transparent 48%);
}
.home-container .welcome {
  isolation: isolate;
  background: radial-gradient(ellipse at 82% 0%, #fff4dc 0%, transparent 48%),
    radial-gradient(ellipse at 100% 100%, #cfE3e7 0%, transparent 56%),
    linear-gradient(110deg, #f5f5ec 0%, #ecf2e8 48%, #e0ece7 100%);
  box-shadow: inset 0 0 0 1px #ffffffd9, 0 18px 45px -25px #294d5038, 0 2px 8px #294d5005;
}
.welcome-scene,
.scene-depth,
.scene-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.welcome-scene { z-index: 0; overflow: hidden; border-radius: inherit; }
.scene-depth {
  inset: -18px;
  transform: translate3d(var(--scene-x, 0px), var(--scene-y, 0px), 0);
  transition: transform 900ms cubic-bezier(.2,.65,.3,1);
}
.scene-glow {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(35px);
  animation: scene-drift 20s ease-in-out infinite alternate;
}
.scene-glow-sage {
  width: 53%; height: 120%; left: 39%; top: 6%;
  background: radial-gradient(ellipse, #a5c9b9a6, #c4dac25e 40%, transparent 70%);
}
.scene-glow-sun {
  width: 46%; height: 110%; left: 64%; top: -56%;
  background: radial-gradient(ellipse, #fff0c8f0, #f9e6bf70 43%, transparent 71%);
  animation-delay: -9s; animation-duration: 24s;
}
.scene-glow-sky {
  width: 42%; height: 100%; right: -10%; bottom: -38%;
  background: radial-gradient(ellipse, #8eb9c29c, #bad9da52 45%, transparent 70%);
  animation-delay: -15s; animation-duration: 26s;
}
.scene-beam {
  position: absolute;
  left: 60%; top: -55%; height: 190%; width: 22%;
  background: linear-gradient(90deg, transparent, #ffffef63 48%, transparent);
  transform: rotate(29deg);
  filter: blur(15px);
}
.scene-grain {
  background-image: radial-gradient(#345d5b29 .65px, transparent .8px);
  background-size: 17px 17px;
  -webkit-mask-image: linear-gradient(90deg, transparent 42%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 42%, #000 100%);
  opacity: .55;
}
.home-container .welcome-copy { z-index: 2; }
.home-container .welcome-copy > p:not(.eyebrow) { color: #49665f; }
.home-container .welcome .eyebrow { color: #4d7364; }
.home-container .welcome-books { z-index: 1; background: none; }
.hero-orbits {
  position: absolute;
  left: -15%; top: -9%; width: 130%; height: 119%;
  overflow: visible;
  pointer-events: none;
  stroke-width: 1;
  transform: translate3d(var(--scene-x, 0px), var(--scene-y, 0px), 0);
  transition: transform 1100ms cubic-bezier(.2,.65,.3,1);
}
.orbit-outer { stroke: #ffffffb8; }
.orbit-inner { stroke: #5d8f832e; }
.orbit-dashed { stroke: #6090874a; stroke-dasharray: 2 11; }
.orbit-node { fill: #88aa9f; stroke: #ffffffc9; stroke-width: 2.5; }
.orbit-node-warm { fill: #c7a568; }
.orbit-leaf { stroke: #5f8e7a4d; stroke-linecap: round; stroke-linejoin: round; }
.scene-star { stroke: #779f8a; stroke-linecap: round; animation: scene-float 9s ease-in-out infinite alternate; }
.scene-star-two { stroke: #9d9b73; animation-delay: -5s; animation-duration: 11s; }
.scene-star-three { fill: #ffffffb8; stroke: none; animation-delay: -3s; }
.home-container .hero-book {
  z-index: 2;
  box-shadow: 1px 1px 0 #faf9ed, 2px 2px 0 #b5c7bd, 3px 3px 0 #f6f5eb,
    5px 7px 11px #2347441b, 10px 21px 29px -9px #23474440;
}
.home-container .hero-spark { z-index: 3; color: #ac9153; filter: drop-shadow(0 2px 5px #fff9df); }
.home-container .hero-caption {
  z-index: 3;
  left: 14%; bottom: 1px;
  display: flex; align-items: center; gap: 9px;
  max-width: 80%;
  color: #4f7168; font-size: 8px; font-weight: 650;
  letter-spacing: 1.5px; text-transform: uppercase;
  transform: none;
}
.hero-caption > span { width: 21px; height: 1px; background: #6b93856b; }
.home-container .welcome-actions .button {
  transition: background-color 180ms, box-shadow 180ms, transform 180ms;
}
.home-container .welcome-actions .button-primary { box-shadow: 0 5px 13px #173d521a; }
.home-container .welcome-actions .button-outline { background: #ffffffb8; border-color: #bdcfc5; }
.home-container .welcome-actions .button:hover { transform: translateY(-2px); box-shadow: 0 7px 16px #173d521c; }
.hero-motion-toggle {
  position: absolute; z-index: 4;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid #ffffffa6; border-radius: 50%;
  background: #ffffff66; color: #58786e;
  transition: background-color 180ms;
}
.hero-motion-toggle:hover { background: #ffffffd9; }
.hero-motion-toggle svg { width: 17px; height: 17px; }
.hero-motion-toggle .motion-play { display: none; }
.hero-motion-toggle[aria-pressed="true"] .motion-pause { display: none; }
.hero-motion-toggle[aria-pressed="true"] .motion-play { display: block; }
.welcome[data-effects-paused="true"] .scene-glow,
.welcome[data-effects-paused="true"] .scene-star { animation-play-state: paused; }
@keyframes scene-drift {
  from { transform: translate3d(-14px, -6px, 0) scale(.98); }
  to { transform: translate3d(19px, 14px, 0) scale(1.06); }
}
@keyframes scene-float {
  from { transform: translateY(-3px); opacity: .5; }
  to { transform: translateY(5px); opacity: 1; }
}
@media (max-width: 1000px) and (min-width: 541px) {
  .home-container .hero-caption { left: 6%; font-size: 7px; letter-spacing: 1.1px; gap: 7px; }
  .hero-caption > span { width: 14px; }
}
@media (max-width: 760px) {
  .scene-grain { background-size: 19px 19px; opacity: .4; }
  .hero-orbits { left: -18%; width: 136%; }
  .hero-motion-toggle { width: 30px; height: 30px; top: 11px; right: 11px; }
}
@media (max-width: 540px) {
  .home-container .welcome {
    background: radial-gradient(ellipse at 80% 66%, #d2e3d2b8, transparent 65%),
      linear-gradient(145deg, #f6f5eb, #eaf1e8 58%, #dfedeb);
  }
  .scene-glow-sage { left: 17%; top: 39%; width: 95%; height: 69%; }
  .scene-glow-sun { left: 47%; top: -21%; width: 74%; height: 66%; }
  .scene-glow-sky { right: -26%; bottom: -17%; width: 84%; height: 65%; }
  .scene-grain {
    -webkit-mask-image: linear-gradient(0deg, #000, transparent 70%);
    mask-image: linear-gradient(0deg, #000, transparent 70%);
  }
  .scene-beam { left: 75%; width: 38%; opacity: .6; }
  .hero-orbits { left: -7%; top: -10%; width: 114%; height: 121%; }
  .home-container .hero-caption { left: 50%; bottom: 0; width: max-content; max-width: none; font-size: 7px; letter-spacing: 1.2px; transform: translateX(-50%); }
  .hero-caption > span { width: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-container .scene-glow, .home-container .scene-star { animation: none; }
  .home-container .scene-depth, .home-container .hero-orbits { transform: none; transition: none; }
  .home-container .welcome-actions .button { transition: none; }
  .home-container .welcome-actions .button:hover { transform: none; }
  .hero-motion-toggle { display: none; }
}