/* Product presentation decks (/assets/<Product>-<EN|AR>.html, built by
   tools/product-decks/build-decks.mjs; behaviour in /assets/js/presentation.js).

   A 16:9 slide stage on a dark surround with a control bar under it. Each slide
   is one whole section of the product page; its content ([data-pres-wrap]) is
   laid out at a design width and scaled to the stage. The product page's own
   CSS styles the sections; this sheet only turns them into slides. #pres-deck
   wraps the product root so these rules outrank the pages' id-scoped ones.
   On a phone held upright (.pres-flow) there is no stage: see the end. */

:root {
  color-scheme: dark;
  --pres-surround: #04050f;
  --pres-fg: #fff;
  --pres-dim: var(--nlm-navy-300);
  --pres-accent: var(--nlm-signal);
  --pres-line: rgb(255 255 255 / 16%);
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--pres-surround);
  overflow: hidden;
}

.pres {
  height: 100%;
  height: 100dvh;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  padding: var(--pad, 18px) var(--pad, 18px) 0;
}

/* ----- Stage: the slide ----- */
.pres-stage {
  position: relative;
  width: var(--sw, 100%);
  height: var(--sh, 100%);
  overflow: hidden;
  border-radius: 14px;
  background: var(--nlm-navy-950);
  box-shadow: 0 0 0 1px var(--pres-line), 0 30px 80px rgb(0 0 0 / 55%);
}

#pres-deck,
#pres-deck > [data-pres-root] {
  position: relative;
  height: 100%;
}

#pres-deck > [data-pres-root] {
  color-scheme: light;
  overflow: hidden;
}

#pres-deck > .pres-on > section:not(.is-active) {
  display: none !important;
}

/* !important: ERP'OS styles its sections inline. */
#pres-deck > .pres-on > section.is-active {
  position: absolute !important;
  inset: 0;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 !important;
  min-height: 0 !important;
  animation: pres-in 0.35s ease both;
}

/* A card deck's wrap sits inside its scroll track; a slide has no scroll. */
#pres-deck .fx-track {
  display: contents;
}

#pres-deck > .pres-on > section.is-active [data-pres-wrap] {
  flex: none;
  box-sizing: border-box;
  margin: 0 !important;
  transform-origin: center;
}

/* Slide composition: the title block runs across the top, heading beside its
   intro, so each section fills a 16:9 slide at a readable size. A phone keeps
   the page's own stacked heading. */
.pres:not(.pres-flow) #pres-deck .head {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0 56px;
  align-items: end;
  margin-bottom: 28px;
}

.pres:not(.pres-flow) #pres-deck .head > :first-child,
.pres:not(.pres-flow) #pres-deck .head > .h2:last-child {
  grid-column: 1 / -1;
}

.pres:not(.pres-flow) #pres-deck .head .h2 {
  margin: 0;
}

.pres:not(.pres-flow) #pres-deck .head .lead {
  max-width: none;
}

/* The nehlum logo in the corner of every slide. */
#pres-deck .pres-logo {
  position: absolute;
  z-index: 3;
  inset-block-start: calc(var(--sh, 600px) * 0.03);
  inset-inline-end: calc(var(--sh, 600px) * 0.045);
  height: calc(var(--sh, 600px) * 0.027);
  width: auto;
  max-width: none;
  pointer-events: none;
}

/* Contact details on the closing slide. */
#pres-deck .pres-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid rgb(255 255 255 / 14%);
}

#pres-deck .pres-contact ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#pres-deck .pres-contact li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 16px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 999px;
  font-family: var(--nlm-font-body);
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  user-select: text;
}

#pres-deck .pres-contact li span {
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nlm-navy-300);
}

#pres-deck .pres-contact a {
  color: inherit;
  text-decoration: none;
}

#pres-deck .pres-contact a:hover {
  text-decoration: underline;
}

@keyframes pres-in {
  from {
    opacity: 0;
  }
}

/* The pages reveal these with the scroll position; a slide has none, so they
   play once each time the slide opens, with each page's own keyframes. */
#pres-deck > .pres-on > section.is-active :is(.reveal, .tl-line, .tl-dot) {
  animation-timeline: auto;
}

@media (prefers-reduced-motion: reduce) {
  #pres-deck > .pres-on > section.is-active {
    animation: none;
  }
}

/* ----- Control bar ----- */
.pres-bar {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--sw, 100%);
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
  font-family: var(--nlm-font-body);
  color: var(--pres-fg);
}

.pres-brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}

.pres-brand span {
  font-family: var(--nlm-font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--pres-dim);
}

.pres-dots {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pres-dots li {
  flex: 1;
  min-width: 0;
}

.pres-dots button {
  all: unset;
  display: block;
  width: 100%;
  padding-block: 12px;
  cursor: pointer;
}

.pres-dots button::before {
  content: '';
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--pres-line);
  transition: background 0.25s ease;
}

.pres-dots button.is-past::before {
  background: var(--pres-dim);
}

.pres-dots button[aria-current]::before {
  background: var(--pres-accent);
}

.pres-dots button:hover::before {
  background: var(--pres-fg);
}

.pres-where {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: 13px;
  white-space: nowrap;
}

.pres-where b {
  font-family: var(--nlm-font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--pres-dim);
}

.pres-btns {
  display: flex;
  gap: 6px;
}

.pres-btns button {
  all: unset;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--pres-line);
  cursor: pointer;
  color: var(--pres-fg);
}

.pres-btns button:hover {
  background: var(--pres-line);
}

.pres-btns button:focus-visible,
.pres-dots button:focus-visible {
  outline: 2px solid var(--pres-accent);
  outline-offset: 2px;
}

.pres-btns button[disabled] {
  opacity: 0.35;
  cursor: default;
  background: none;
}

.pres-btns button.pres-next:not([disabled]) {
  background: var(--pres-accent);
  border-color: var(--pres-accent);
}

.pres-btns button[hidden] {
  display: none;
}

.pres-btns svg {
  width: 18px;
  height: 18px;
}

/* Previous and next point the reading direction. */
[dir="rtl"] .pres-btns :is(.pres-prev, .pres-next) svg {
  transform: scaleX(-1);
}

@media (width <= 760px) {
  .pres-bar {
    gap: 10px;
    min-height: 48px;
  }

  .pres-where span,
  .pres-brand span {
    display: none;
  }

  .pres-btns button {
    width: 34px;
    height: 34px;
  }
}

/* The product name is on the slides; on a phone the bar keeps the controls. */
@media (width <= 480px) {
  .pres-brand {
    display: none;
  }
}

/* ----- Phone, portrait (.pres-flow, set by presentation.js) -----
   A 16:9 stage would leave a strip a few hundred pixels wide, so the slide
   takes the whole screen instead: its section at the page's own mobile layout,
   unscaled, scrolling vertically. Swipes and the bar change slides. */
.pres-flow {
  padding: 0;
}

.pres-flow .pres-stage {
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}

#pres-deck > .pres-on > section.is-active:where(.pres-flow *) {
  display: block !important;
  overflow: clip auto;
  overscroll-behavior: contain;
  padding-block: 56px 40px !important;
}

.pres-flow #pres-deck .pres-logo {
  inset-block-start: 18px;
  inset-inline-end: 18px;
  height: 18px;
}

.pres-flow .pres-bar {
  max-width: none;
  padding-inline: 12px;
  border-top: 1px solid var(--pres-line);
  background: var(--nlm-navy-900);
}