/* USER DECISION: the platform owns a presentation's slide geometry, playback, steps, and printing;
   the author owns each slide's composition and choreography. */
:root {
  --vx-deck-scale: 1;
  --vx-deck-backdrop: #0b0b0c;
  --vx-deck-gap: 32px;
}

html,
body {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--vx-deck-backdrop) !important;
}

body > section {
  box-sizing: border-box;
  position: relative !important;
  flex: none !important;
  width: 1920px !important;
  height: 1080px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  /* A slide lays out at its full 1920×1080 and is painted scaled, so text keeps its designed size
     (WebKit enlarges text that zoom shrinks); the negative margins make it occupy its scaled size. */
  margin: 0 calc(1920px * (var(--vx-deck-scale) - 1)) calc(1080px * (var(--vx-deck-scale) - 1)) 0 !important;
  overflow: hidden !important;
  scale: var(--vx-deck-scale);
  transform-origin: 0 0 !important;
}

html[data-vx-deck-mode="scroll"] body,
html[data-vx-deck-mode="flow"] body {
  overflow-x: clip !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--vx-deck-gap) !important;
  padding: var(--vx-deck-gap) 0 !important;
  min-height: 100vh;
  box-sizing: border-box;
}

html[data-vx-deck-mode="present"],
html[data-vx-deck-mode="present"] body {
  height: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html[data-vx-deck-mode="present"][data-vx-idle],
html[data-vx-deck-mode="present"][data-vx-idle] * {
  cursor: none !important;
}

html[data-vx-deck-mode="present"] body {
  display: grid !important;
  place-items: center !important;
  height: 100vh !important;
  height: 100dvh !important;
}

html[data-vx-deck-mode="present"] body > section {
  grid-area: 1 / 1;
}

html[data-vx-deck-mode="present"] body > section:not([data-vx-active]) {
  display: none !important;
}

html[data-vx-deck-mode="print"] body {
  display: block !important;
}

/* The editor's rail scales this column down, so slides sit 120px apart with rounded corners. */
html[data-vx-deck-mode="thumbs"] body {
  display: flex !important;
  flex-direction: column !important;
  gap: 120px !important;
  overflow: hidden !important;
}

html[data-vx-deck-mode="thumbs"] body > section {
  border-radius: 72px !important;
}

/* USER DECISION (Max, 06.10): slides change by one soft crossfade, as in the «Полынь» tea deck; the
   incoming slide builds inside it. Decks do not style their own slide change. The leaving slide fades out
   above the arriving one, so whatever both slides share holds still. USER DECISION (Max, 11.10): no View
   Transitions and no element travelling between slides; Safari snapped every slide at their end. */
html[data-vx-deck-mode="present"] body > section[data-vx-leaving] {
  z-index: var(--vx-leave-layer) !important;
  pointer-events: none !important;
  animation: vx-slide-leave .5s cubic-bezier(.2, .7, .2, 1) forwards !important;
}

@keyframes vx-slide-leave {
  from {
    opacity: var(--vx-leave-from);
  }

  to {
    opacity: 0;
  }
}

@media print {
  vx-deck-opening,
  vx-deck-nav {
    display: none !important;
  }
}

html[data-vx-static] *,
html[data-vx-static] *::before,
html[data-vx-static] *::after {
  animation: none !important;
  transition: none !important;
}

/* A live draft holds its slides back until the studio says which ones the person has seen, then brings in
   the new ones one after another, as the studio's own cards arrive. */
html[data-vx-live-waiting] body > section {
  visibility: hidden !important;
}

html[data-vx-static] body > section[data-vx-arriving] {
  animation: vx-slide-arrive 700ms cubic-bezier(0.22, 1, 0.36, 1) var(--vx-arrive-delay, 0ms) both !important;
}

@keyframes vx-slide-arrive {
  from {
    opacity: 0;
    filter: blur(18px);
    translate: 0 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-vx-static] body > section[data-vx-arriving] {
    animation-name: vx-slide-arrive-still !important;
  }

  @keyframes vx-slide-arrive-still {
    from {
      opacity: 0;
    }
  }
}

/* A slide holds its first frame while the opening covers it and, on a phone, until it scrolls into
   view; then it builds. */
html[data-vx-opening] body > section,
html[data-vx-opening] body > section *,
html[data-vx-opening] body > section *::before,
html[data-vx-opening] body > section *::after,
html[data-vx-deck-mode="flow"] body > section:not([data-vx-in-view]),
html[data-vx-deck-mode="flow"] body > section:not([data-vx-in-view]) *,
html[data-vx-deck-mode="flow"] body > section:not([data-vx-in-view]) *::before,
html[data-vx-deck-mode="flow"] body > section:not([data-vx-in-view]) *::after {
  animation-play-state: paused !important;
}

/* The opening covers the deck until it has loaded, then opens outward from the mark. */
html[data-vx-opening="pending"] body {
  visibility: hidden !important;
}

@property --vx-iris {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

vx-deck-opening {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483646 !important;
  display: grid !important;
  background: var(--vx-opening-background, var(--vx-deck-backdrop)) !important;
  transition: background-color 500ms ease !important;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent calc(var(--vx-iris) - 90px), #000 var(--vx-iris));
  mask: radial-gradient(circle at 50% 50%, transparent calc(var(--vx-iris) - 90px), #000 var(--vx-iris));
}

vx-deck-opening[data-leaving] {
  pointer-events: none !important;
  animation: vx-deck-iris 1050ms cubic-bezier(0.72, 0, 0.16, 1) 160ms forwards;
}

@keyframes vx-deck-iris {
  0% {
    --vx-iris: 0px;
    opacity: 1;
  }
  78% {
    opacity: 1;
  }
  100% {
    --vx-iris: 160vmax;
    opacity: 0;
  }
}

[data-vx-step] {
  transition: opacity 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

html[data-vx-deck-mode="present"]:not([data-vx-static]) [data-vx-step]:not([data-vx-shown]) {
  opacity: 0 !important;
}

@page {
  size: 1920px 1080px;
  margin: 0;
}

@media print {
  html,
  body {
    background: none !important;
  }

  body {
    display: block !important;
  }

  body > section {
    margin: 0 !important;
    scale: none !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  body > section:not(:last-of-type) {
    break-after: page;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}