/* ============================================================
   MizUp — Motion & mobile polish (public marketing pages only)

   PURELY ADDITIVE. Every rule in this file is gated behind one of:
     - html.motion        (added by reveal.js only when the browser
                           supports IntersectionObserver AND the user has
                           not asked for reduced motion)
     - a new class/element introduced by reveal.js
                           (.mizup-progress, .mizup-top)
     - a media query that only *adds* properties

   It never redefines an existing .mkt-*, .lp-*, .btn or .topbar
   selector, so the internal dashboard and the existing marketing
   design system are untouched. Safe to remove this file and its
   <link> tag and the site returns exactly to its previous state.

   Loaded AFTER app.css / landing.css / marketing.css.
   ============================================================ */

/* ------------------------------------------------------------
   1. Scroll-reveal
   Elements start slightly offset and fade up as they enter the
   viewport. Only ever hidden when html.motion is present — so with
   JS off, or with reduced-motion on, content renders normally and
   there is no risk of permanently invisible text.
   ------------------------------------------------------------ */
html.motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity .62s cubic-bezier(.22, .61, .36, 1),
    transform .62s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}

html.motion [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Once revealed, drop the compositor hint so long pages don't hold
   dozens of promoted layers in memory on low-end Android devices. */
html.motion [data-reveal].is-revealed {
  will-change: auto;
}

/* Staggered children — set by reveal.js via --d (in ms) */
html.motion [data-reveal] { transition-delay: var(--d, 0ms); }

/* Sideways variants, used for two-column rows */
html.motion [data-reveal="left"]  { transform: translate3d(-22px, 0, 0); }
html.motion [data-reveal="right"] { transform: translate3d(22px, 0, 0); }
html.motion [data-reveal="scale"] { transform: scale(.965); }
html.motion [data-reveal="left"].is-revealed,
html.motion [data-reveal="right"].is-revealed,
html.motion [data-reveal="scale"].is-revealed { transform: none; }

/* ------------------------------------------------------------
   2. Reading-progress bar
   ------------------------------------------------------------ */
.mizup-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #E63D2E, #ff7a4d);
  z-index: 200;
  pointer-events: none;
}

/* ------------------------------------------------------------
   3. Back-to-top button
   Fixed, so it adds no layout and cannot shift any existing block.
   Honours iOS safe-area so it clears the home indicator.
   ------------------------------------------------------------ */
.mizup-top {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: 44px; height: 44px;          /* 44px = minimum comfortable tap target */
  display: grid; place-items: center;
  border: 1px solid #ECECEA;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #17171A;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .09);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 190;
}
.mizup-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.mizup-top:hover      { border-color: #E63D2E; color: #E63D2E; }
.mizup-top:focus-visible { outline: 2px solid #E63D2E; outline-offset: 2px; }

/* ------------------------------------------------------------
   4. Mobile / touch polish
   Additive only — no existing selector is overridden.
   ------------------------------------------------------------ */
html {
  /* Stop iOS Safari inflating body text in landscape */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body { -webkit-tap-highlight-color: rgba(230, 61, 46, .14); }

/* Never let an image or embed force a horizontal scrollbar on a phone */
img, svg, video, iframe, table { max-width: 100%; }

@media (max-width: 720px) {
  /* Comfortable tap targets on the public nav and footer. Only sets
     min-height / padding-block; colour, font and layout come from
     marketing.css as before. */
  .mkt-mobile-link,
  .mkt-mobile-sub a,
  .mkt-footer-col a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Full-width CTAs read better than centred pills on a phone */
  .mkt-page-hero-ctas .lp-btn,
  .mkt-mobile-ctas .lp-btn { width: 100%; }
}

/* Opt-in helper: turn a card row into a swipeable, snapping strip on
   phones. NOT applied to any existing grid — add class="mizup-snap" to
   a wrapper when you want it, so current layouts are unaffected. */
@media (max-width: 720px) {
  .mizup-snap {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .mizup-snap::-webkit-scrollbar { display: none; }
  .mizup-snap > * {
    scroll-snap-align: start;
    flex: 0 0 82%;
  }
}

/* ------------------------------------------------------------
   5. Smooth in-page scrolling for anchor links (/#faq etc.)
   scroll-padding-top keeps the sticky nav from covering the target.
   ------------------------------------------------------------ */
html.motion { scroll-behavior: smooth; }
html { scroll-padding-top: 84px; }

/* ------------------------------------------------------------
   6. Accessibility backstop
   If the user asks for reduced motion, reveal.js never adds
   html.motion — but this also neutralises anything that slips
   through, and is kept last so it wins on specificity order.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.motion [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .mizup-progress { display: none; }
  .mizup-top { transition: none; }
}

/* Print: never hide content, never print the chrome */
@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .mizup-progress, .mizup-top { display: none !important; }
}

/* ------------------------------------------------------------
   7. Product-line honesty banner (.mkt-status-note)
   Used on /clm ("partial") and /erp/lms ("early-access") to state
   plainly what is live and what is not, above the capability list.
   New selector — overrides nothing.
   ------------------------------------------------------------ */
.mkt-status-note {
  display: block;
  max-width: 62ch;
  margin: 20px 0 4px;
  padding: 14px 16px;
  border: 1px solid #E4E4E1;
  border-left: 3px solid #2E6FE6;
  border-radius: 8px;
  background: #FBFBFA;
  text-align: left;
}
.mkt-status-note.is-early { border-left-color: #C9862E; background: #FDFAF4; }
.mkt-status-note strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #2E6FE6;
  margin-bottom: 5px;
}
.mkt-status-note.is-early strong { color: #C9862E; }
.mkt-status-note span {
  display: block;
  font-size: 14.5px;
  line-height: 1.6;
  color: #5A5B60;
}
@media (min-width: 720px) {
  .mkt-status-note { margin-left: auto; margin-right: auto; }
}