body.index-page .home-model-stack-scene--orbit { background: transparent !important; }

html body.index-page .home-orbit-panel {
  padding: 0 !important;
  /* The orbit is absolutely positioned against this box: it must never scroll
     internally, or the cards drift out of the ellipse. */
  overflow: hidden !important;
  background: #0b0b0b !important;
  color: #f2efe6;
  isolation: isolate;
  user-select: none;
}

body.index-page .home-orbit-center {
  position: absolute;
  left: 50%;
  top: 51%;
  z-index: 300;
  width: min(960px, calc(100% - 36px));
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

body.index-page .home-orbit-title {
  margin: 0;
  color: #f2efe6;
  font-size: clamp(44px, 4.05vw, 68px);
  /* !important because common.css locks every h2 to weight 300 / tracking 0,
     which was silently winning here and setting the title loose and light. */
  font-weight: var(--cnw-display-weight) !important;
  /* Was 1.01 — below the font's own descender depth, so the tails of g and y
     fell outside the line box and the next line landed on top of them. */
  line-height: 1.08;
  letter-spacing: var(--cnw-display-tracking) !important;
  text-transform: none !important;
  text-wrap: balance;
}

body.index-page .home-orbit-title > span { display: block; white-space: nowrap; }
body.index-page .home-orbit-title i,
body.index-page .home-orbit-title b {
  display: inline-block;
  font: inherit;
  white-space: nowrap;
  /* An inline-block's box stops at the line-height, so descenders hang out of
     it; once promoted to its own layer for the swap animation, whatever hangs
     out gets clipped. Pad the box down and pull the same amount back off, so
     the tails are inside it without the line moving. */
  padding-bottom: .16em;
  margin-bottom: -.16em;
}

body.index-page .home-orbit-title b { color: #7fae90; transition: color 300ms ease; }
body.index-page .home-orbit-title b.is-entering { animation: homeOrbitWordEnter 460ms cubic-bezier(.22, .8, .2, 1) both; }

@keyframes homeOrbitWordEnter {
  from { opacity: 0; transform: translateY(.92em); }
  to { opacity: 1; transform: translateY(0); }
}

body.index-page .home-orbit-button {
  position: relative;
  min-width: 106px;
  height: 38px;
  margin-top: 34px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 7px;
  background: #fff;
  color: #090909;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
  pointer-events: auto;
  isolation: isolate;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

body.index-page .home-orbit-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, .26);
  transform: translateY(105%);
  transition: transform 760ms cubic-bezier(.2, .72, .2, 1);
}

body.index-page .home-orbit-button span { position: relative; z-index: 1; }
body.index-page .home-orbit-button:hover,
body.index-page .home-orbit-button:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .08); }
body.index-page .home-orbit-button:hover::before,
body.index-page .home-orbit-button:focus-visible::before { transform: translateY(0); }

body.index-page .home-orbit-stage { position: absolute; inset: 0; z-index: 10; pointer-events: none; }

body.index-page .home-orbit-card {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: clamp(7px, .7vw, 12px);
  /* Placeholder behind an image that has not decoded yet — on black it has to
     be dark, or every card flashes a pale square on load. */
  background: #1e1e1e;
  box-shadow: 0 7px 22px rgba(0, 0, 0, .38);
  cursor: pointer;
  pointer-events: auto;
  transform-origin: center;
  will-change: transform, opacity;
  /* Deliberately NOT transitioning transform: the ring rewrites it every
     frame, so a transition here would fight that and lag permanently.
     opacity was in this list and had exactly that problem — the ring writes it
     from the depth on the path, so each frame restarted a 240ms transition on
     all twelve cards and none of them ever ran to completion. The depth value
     already moves smoothly, so it needs no transition of its own. */
  transition: box-shadow 240ms ease, filter 240ms ease;
}

body.index-page .home-orbit-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
  pointer-events: none;
}

body.index-page .home-orbit-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  transition: filter 260ms ease, transform 260ms ease;
}

body.index-page .home-orbit-card:hover,
body.index-page .home-orbit-card.is-active { filter: brightness(1.035); box-shadow: 0 14px 34px rgba(0, 0, 0, .16); }
body.index-page .home-orbit-card.is-selected { box-shadow: 0 18px 48px rgba(0, 0, 0, .19), 0 0 0 3px #fff, 0 0 0 5px var(--item-color); }
body.index-page .home-orbit-card.is-active img { transform: scale(1.02); }
body.index-page .home-orbit-panel.is-paused .home-orbit-card:not(.is-active) img { filter: saturate(.7) brightness(.95); }

body.index-page .home-orbit-hint {
  position: absolute;
  left: 50%;
  bottom: 19px;
  z-index: 150;
  margin: 0;
  transform: translateX(-50%);
  color: rgba(242, 239, 230, .5);
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

body.index-page .home-orbit-panel.is-paused .home-orbit-hint { opacity: 1; }

@media (max-width: 760px) {
  body.index-page .home-orbit-center { top: 49%; width: calc(100% - 28px); }
  body.index-page .home-orbit-title { font-size: clamp(34px, 10.8vw, 56px); line-height: .98; }
  body.index-page .home-orbit-title > span { white-space: normal; }
  body.index-page .home-orbit-button { margin-top: 28px; }
}

@media (max-width: 520px) {
  body.index-page .home-orbit-center { top: 47%; width: calc(100% - 24px); }
  body.index-page .home-orbit-title { font-size: clamp(28px, 9.8vw, 44px); line-height: 1; }
  body.index-page .home-orbit-card:nth-child(even) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.index-page .home-orbit-title b,
  body.index-page .home-orbit-button,
  body.index-page .home-orbit-button::before,
  body.index-page .home-orbit-card { animation: none !important; transition-duration: .01ms !important; }
}