/* Landing page. Loaded only by overrides/home.html.
   Styled after the NX Redux UI: a black screen, MiSans Semibold, a white pill
   on the selected row, and round button hints along the bottom. */

.md-main { display: none; }

.nx-home {
  --nx-black: #000;
  --nx-white: #fff;
  --nx-grey: #8c8c8c;
  --nx-soft: #c8c8c8;
  --nx-outline: #3a3a3a;
  font-family: "MiSans NX", var(--md-text-font-family), sans-serif;
  font-weight: 600;
}

/* The screen: always black, like the device, in both colour schemes. */
.nx-screen {
  background: var(--nx-black);
  color: var(--nx-white);
  overflow-x: clip;  /* the glow and tilted devices never widen the page */
}

/* The first screen sits above the second so the devices can hang over the
   boundary into the features. */
.nx-screen:not(.nx-features) { position: relative; z-index: 2; }
.nx-features { position: relative; z-index: 1; }

.nx-screen__inner {
  max-width: 61rem;
  margin: 0 auto;
  padding: 1.6rem 1.2rem 1.4rem;
}

.nx-screen__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
  padding: 1.2rem 0 2.2rem;
}

/* Menu rows. The first row carries the pill until the pointer or keyboard
   focus moves into the menu; then the pill follows it. */
.nx-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nx-menu li { margin: 0; }

.nx-menu a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-left: -0.55em;
  padding: 0.18em 0.55em;
  border-radius: 999px;
  font-size: 1.7rem;
  line-height: 1.3;
  color: var(--nx-white);
  transition: background-color 120ms ease, color 120ms ease;
}

.nx-menu:not(:hover):not(:focus-within) li:first-child a,
.nx-menu a:hover,
.nx-menu a:focus-visible {
  background: var(--nx-white);
  color: var(--nx-black);
}

.nx-menu a:focus-visible,
.nx-hint:focus-visible {
  outline: 0.1rem solid var(--md-accent-fg-color);
  outline-offset: 0.15rem;
}

/* A row's badge (the Handheld version, Mobile's Coming soon): a small accent pill, black on the selected row's white pill. */
.nx-menu__badge {
  padding: 0.3em 0.7em;
  border-radius: 999px;
  background: var(--md-accent-fg-color);
  color: var(--nx-black);
  font-size: 0.38em;
  line-height: 1;
  letter-spacing: 0.02em;
  transition: background-color 120ms ease, color 120ms ease;
}

.nx-menu:not(:hover):not(:focus-within) li:first-child .nx-menu__badge,
.nx-menu a:hover .nx-menu__badge,
.nx-menu a:focus-visible .nx-menu__badge {
  background: var(--nx-black);
  color: var(--nx-white);
}

.nx-screen__tagline {
  max-width: 24rem;
  margin: 1.4rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--nx-grey);
}

/* Devices: posed together like a product shot. The Brick Pro stands behind
   on the left, tilted back; the phone stands in front on the right, lower
   and tilted the other way, covering only the Brick's artwork side so its
   menu stays readable. Everything is sized in em so the whole pose scales
   with one font-size per breakpoint. */
.nx-showcase { justify-self: end; text-align: center; }

.nx-devices {
  position: relative;
  width: 20em;
  height: 19.4em;
  font-size: clamp(0.8rem, 1.9vw, 1.25rem);
  /* Overhang the bottom of the screen: the hint row and padding below the
     devices (about 5.3rem), plus 3rem into the next section. */
  margin-bottom: -8.3rem;
}

/* A faint pool of light behind the pair, so their shadows have something
   to fall on against the black. */
.nx-devices::before {
  content: "";
  position: absolute;
  inset: -3em -4em -2em;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.09), transparent);
  pointer-events: none;
}

.nx-device {
  position: absolute;
  margin: 0;
  transform: var(--nx-pose);
  animation: nx-settle 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.nx-device--handheld { --nx-pose: rotate(-5deg); left: 0.4em; top: 0.3em; }
.nx-device--mobile { --nx-pose: rotate(4deg); right: 0.2em; bottom: 0; animation-delay: 90ms; }

/* The one moment of motion: on load, each device settles from upright into
   its pose. */
@keyframes nx-settle {
  from { opacity: 0; transform: translateY(0.8em) rotate(0deg); }
  to { opacity: 1; transform: var(--nx-pose); }
}

.nx-device__frame {
  position: relative;
  width: 11em;
  filter: drop-shadow(0 1.2em 1.4em rgba(0, 0, 0, 0.7));
}

/* Product renders. The Brick Pro and the folded Z Fold 8 are about the same
   size in hand (and their renders share almost the same proportions), so both
   frames get one width. Each screen box is the screen's position in its
   render, in percent. */
.nx-device__photo { position: relative; display: block; width: 100%; height: auto; }

.nx-device__screen {
  position: absolute;
  z-index: 0;
  isolation: isolate;  /* slide z-indexes stay inside, so the Fold's photo (camera, bezel) always sits on top */
  display: grid;
  background: #000;
}

.nx-device__screen .nx-slide {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
}

/* Brick Pro: the screenshots sit on top of the render's screen. It is a
   touch taller than 4:3, so screenshots fit its width and the thin bands
   above and below stay black. */
.nx-device--handheld .nx-device__screen { left: 2.765%; top: 1.089%; width: 94.355%; height: 50%; }
.nx-device--handheld .nx-slide { object-fit: contain; }

/* Z Fold 8: the render's screen is cut out, so the capture shows through
   from behind and the real bezel, corners and camera stay on top. */
.nx-device--mobile .nx-device__screen { left: 6.231%; top: 3.183%; width: 88.468%; height: 93.634%; }  /* measured hole + a hairline overlap under the bezel */
.nx-device--mobile .nx-slide { object-fit: cover; }

/* Crossfade without a dip: the incoming image fades in on top while the
   outgoing one stays fully opaque underneath, and only drops once covered. */
.nx-slide { opacity: 0; transition: opacity 0s linear 0.7s; }
.nx-slide.is-active { opacity: 1; z-index: 1; transition: opacity 0.7s ease; }

/* Button hints, as along the bottom of every NX Redux screen. */
.nx-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
}

.nx-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.8rem;
  color: var(--nx-white);
  text-transform: uppercase;
}

.nx-hint:hover { color: var(--md-accent-fg-color); }

.nx-hint__button {
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--nx-white);
  color: var(--nx-black);
  font-size: 0.85em;
}

/* Features: a second screen laid out like the NX Redux game list. Rows are
   tabs: clicking one moves the pill to it and shows its screenshot and text
   on the right, the way a game's artwork does on the device. */


.nx-features__title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--nx-grey);
}

.nx-features__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  align-items: start;
  gap: 2.4rem;
  padding: 1.2rem 0 2rem;
}

/* Clear space for the devices hanging down from the first screen. */
.nx-features .nx-screen__inner { padding-top: 6.4rem; }

.nx-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nx-feature { margin: 0; }

.nx-list button {
  margin: 0 0 0 -0.55em;
  padding: 0.18em 0.55em;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 1.15rem;
  line-height: 1.35;
  text-align: left;
  color: var(--nx-white);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.nx-list button:hover { background: rgba(255, 255, 255, 0.12); }

.nx-list button[aria-selected="true"] {
  background: var(--nx-white);
  color: var(--nx-black);
}

.nx-list button:focus-visible,
.nx-features__link:focus-visible {
  outline: 0.1rem solid var(--md-accent-fg-color);
  outline-offset: 0.15rem;
}

/* With the script, panes share one cell and only the selected one shows;
   without it they stack so every description stays readable. */
.nx-features__preview { display: grid; gap: 2rem; }

.nx-features.is-enhanced .nx-features__pane { grid-area: 1 / 1; visibility: hidden; }
.nx-features.is-enhanced .nx-features__pane.is-active { visibility: visible; }

/* Only the incoming screenshot fades in, so two descriptions never overlap. */
/* Switching features fades the new pane's screenshot in once; cycling
   within a pane uses the crossfade below instead. */
.nx-features.is-enhanced .nx-features__pane.is-active .nx-features__shots { animation: nx-shot-in 180ms ease; }

/* Several screenshots share one cell and crossfade; single ones just show. */
.nx-features__shots { display: grid; }
.nx-features__shots .nx-features__shot { grid-area: 1 / 1; opacity: 0; transition: opacity 0s linear 0.7s; }
.nx-features__shots .nx-features__shot.is-active { opacity: 1; z-index: 1; transition: opacity 0.7s ease; }

@keyframes nx-shot-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.nx-features__shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.3rem;
  outline: 1px solid var(--nx-outline);
}

.nx-features__pane p {
  max-width: 26rem;
  margin: 0.9rem 0 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--nx-soft);
}

.nx-features__pane .nx-feature__platform {
  margin-top: 0.4rem;
  font-size: 0.6rem;
  color: var(--nx-grey);
}

.nx-features__link {
  color: var(--md-accent-fg-color);
  white-space: nowrap;
}

.nx-features__link:hover { text-decoration: underline; }

.nx-features kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.4em;
  padding: 0 0.35em;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.85em;
  background: var(--nx-white);
  color: var(--nx-black);
}

/* 404: an NX Redux dialog. The screen fills the window below the header,
   with the message and its button hints centred. */
.nx-error__inner {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 6rem);
}

.nx-error__message .nx-error__label {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--nx-grey);
}

.nx-error__message {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
  text-align: center;
}

.nx-error__message h1 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--nx-white);
}

.nx-error__message p {
  max-width: 30rem;
  text-wrap: balance;
  margin: 0.8rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--nx-soft);
}

.nx-error__hints { justify-content: center; margin-top: 1.8rem; }
.nx-error__hints label { cursor: pointer; }

/* Mobile main menu demo: the nx-mobile mockup in a frame (tools/build_menu_demo.py),
   its options above the phone screen and the pad below. */
.nx-demo .nx-screen__inner { padding-top: 2.4rem; padding-bottom: 3rem; }
.nx-demo__text { margin: 0.4rem 0 1.4rem; color: var(--nx-soft); font-size: 0.8rem; line-height: 1.5; max-width: 40rem; }
.nx-demo__frame { display: block; width: 100%; height: 70rem; border: 0; background: var(--nx-black); color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
  .nx-slide,
  .nx-slide.is-active,
  .nx-menu a,
  .nx-list button { transition: none; }
  .nx-device { animation: none; }
  .nx-features.is-enhanced .nx-features__pane.is-active .nx-features__shots { animation: none; }
  .nx-features__shots .nx-features__shot,
  .nx-features__shots .nx-features__shot.is-active { transition: none; }
}

@media screen and (max-width: 44.9375em) {
  .nx-screen__body { grid-template-columns: 1fr; gap: 2.2rem; }
  .nx-menu a { font-size: 1.3rem; }
  .nx-showcase { justify-self: center; }
  .nx-devices { font-size: 0.72rem; margin-bottom: 0; }
  .nx-features .nx-screen__inner { padding-top: 3.2rem; }
  .nx-features__body { grid-template-columns: 1fr; gap: 1.6rem; }
  .nx-list button { font-size: 1.05rem; }
}