/* MJ Form site layer: motion and responsive behaviour shared by every entry page.
   Component styling itself comes from the design-system tokens (ds-theme.js) and
   the per-page stylesheets; this file only adds transitions and small-screen rules. */

#root{min-height:100%}
html,body{height:100%}

/* ---------- motion tokens fallbacks (ds-theme.js defines the real ones) ---------- */
:root{
  --mj-dur-fast:var(--duration-fast,100ms);
  --mj-dur:var(--duration-moderate,200ms);
  --mj-dur-slow:var(--duration-slow,300ms);
  --mj-dur-slower:var(--duration-slower,500ms);
  --mj-ease:var(--easing-standard,cubic-bezier(.2,0,0,1));
  --mj-ease-enter:var(--easing-enter,cubic-bezier(0,0,0,1));
  --mj-ease-exit:var(--easing-exit,cubic-bezier(.3,0,1,1));
}

/* ---------- page transition (design system app) ---------- */
@keyframes mj-page-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.mj-page{animation:mj-page-in var(--mj-dur-slower) var(--mj-ease-enter) both}
.mj-page > *{animation:mj-page-in var(--mj-dur-slower) var(--mj-ease-enter) both}
.mj-page > *:nth-child(2){animation-delay:40ms}
.mj-page > *:nth-child(3){animation-delay:80ms}
.mj-page > *:nth-child(4){animation-delay:120ms}

/* ---------- mobile sidebar drawer + scrim ---------- */
@keyframes mj-fade-in{from{opacity:0}to{opacity:1}}
@keyframes mj-slide-in-start{from{transform:translateX(-100%)}to{transform:none}}
[dir="rtl"] .mj-sidebar.is-narrow.is-open{animation-name:mj-slide-in-end}
@keyframes mj-slide-in-end{from{transform:translateX(100%)}to{transform:none}}
.mj-sidebar.is-narrow.is-open{animation:mj-slide-in-start var(--mj-dur-slow) var(--mj-ease-enter) both}
.mj-scrim{position:fixed;inset:60px 0 0 0;z-index:calc(var(--z-overlay,1200) - 1);background:rgba(7,10,16,.45);animation:mj-fade-in var(--mj-dur) var(--mj-ease) both;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}

/* ---------- generic entrance for overlays rendered by the pages ---------- */
[role="menu"],[role="listbox"][style*="position:absolute"],[role="dialog"][style*="position:absolute"]{animation:mj-pop-in var(--mj-dur) var(--mj-ease-enter) both}
@keyframes mj-pop-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- landing page entrance ---------- */
@keyframes mj-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.mj-hero-copy > *{animation:mj-rise 700ms var(--mj-ease-enter) both}
.mj-hero-copy > *:nth-child(1){animation-delay:60ms}
.mj-hero-copy > *:nth-child(2){animation-delay:140ms}
.mj-hero-copy > *:nth-child(3){animation-delay:240ms}
.mj-hero-copy > *:nth-child(4){animation-delay:340ms}
.mj-hero-stage{animation:mj-rise 900ms var(--mj-ease-enter) 200ms both}
.mj-reveal{animation:mj-rise 700ms var(--mj-ease-enter) 420ms both}

/* ---------- smooth scrolling for anchors ---------- */
main{scroll-behavior:smooth}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .mj-page,.mj-page > *,.mj-sidebar,.mj-scrim,.mj-hero-copy > *,.mj-hero-stage,.mj-reveal,[role="menu"],[role="listbox"],[role="dialog"]{animation:none !important}
  main{scroll-behavior:auto}
}

/* =====================================================================
   Responsive layer
   ===================================================================== */

/* ---- video pages: back link over the player ---- */
.mj-video-back{position:fixed;top:12px;left:12px;z-index:50;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:rgba(20,22,27,.55);color:#fff;font:500 12px/1 system-ui,sans-serif;text-decoration:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:.75;transition:opacity 200ms}
.mj-video-back:hover{opacity:1;color:#fff}

/* ---- design system app: tablet ---- */
@media (max-width: 1023px){
  .mj-page{padding:var(--space-8,32px) var(--space-6,24px) var(--space-20,80px) !important}
}

/* ---- design system app: phone ---- */
@media (max-width: 639px){
  .mj-page{padding:var(--space-6,24px) var(--space-4,16px) var(--space-16,64px) !important}
  .mj-topbar{padding:0 var(--space-3,12px) !important;gap:var(--space-1,4px) !important}
  /* breadcrumb: keep only the page name */
  .mj-topbar > div[style*="var(--type-body-sm)"] > span:first-child,
  .mj-topbar > div[style*="var(--type-body-sm)"] > i{display:none !important}
  /* icon-only tool buttons */
  .mj-topbar > button[title="Switch language"],
  .mj-topbar > div > button[title="Figma plugins"],
  .mj-topbar > button[title="Inspect tokens (I)"],
  .mj-topbar > button[title="Inspect tokens (I)"],
  .mj-topbar > button:last-child{width:36px !important;padding:0 !important;justify-content:center !important}
  .mj-topbar > button[title="Switch language"] > span,
  .mj-topbar > div > button[title="Figma plugins"] > span,
  .mj-topbar > div > button[title="Figma plugins"] > i:last-child,
  .mj-topbar > button:last-child > span{display:none !important}
  /* plugin menu becomes a full-width sheet under the bar */
  .mj-topbar [role="menu"][aria-label="Figma plugins"]{position:fixed !important;top:60px !important;inset-inline:var(--space-3,12px) !important;width:auto !important}
  /* sidebar drawer spans the viewport width minus a peek of the page */
  .mj-sidebar.is-narrow{width:min(300px,86vw) !important}
  /* content: wide fixed-size previews scroll sideways instead of breaking the page */
  .mj-page [data-screen-label]{max-width:100%}
  .mj-page table{max-width:100%}
  .mj-page [role="table"],.mj-page table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* inline styles are matched in the browser's serialized form ("prop: value") */
  .mj-page [style*="grid-template-columns: repeat(2, "],
  .mj-page [style*="grid-template-columns: repeat(3, "],
  .mj-page [style*="grid-template-columns: repeat(4, "],
  .mj-page [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr !important}
  .mj-page [style*="columns: 2;"]{columns:1 !important}
  .mj-page h1[style*="type-h1"]{font-size:28px !important}
  .mj-page h2[style*="type-h2"]{font-size:24px !important}
  /* phone-frame previews shrink to fit the viewport */
  .mj-page [style*="width: 390px"],.mj-page [style*="width: 360px"],.mj-page [style*="width: 375px"]{max-width:100% !important}
}

/* ---- workspace demo ---- */
@media (max-width: 639px){
  .mj-flowbar{padding:var(--space-2,8px) var(--space-3,12px) !important;gap:var(--space-1,4px) !important;scrollbar-width:none}
  .mj-flowbar::-webkit-scrollbar{display:none}
}

/* ---- touch targets below 640px (design rule: 44px minimum) ---- */
@media (max-width: 639px) and (pointer: coarse){
  .mj-main button:not([role="gridcell"]):not([role="radio"]):not([role="switch"]),.mj-main a[role="button"]{min-height:44px}
}

/* ---- workspace demo: off-canvas sidebar on phones and small tablets ---- */
.mj-scrim--full{inset:0}
@media (max-width: 767px){
  .mj-demo-side{position:fixed !important;top:0;bottom:0;inset-inline-start:0;z-index:calc(var(--z-overlay,1200));width:min(280px,84vw) !important;transform:translateX(-100%);transition:transform var(--mj-dur-slow) var(--mj-ease-enter) !important;box-shadow:none}
  [dir="rtl"] .mj-demo-side{transform:translateX(100%)}
  .mj-demo-side.is-open{transform:none !important;box-shadow:var(--shadow-4,0 12px 24px -4px rgba(7,10,16,.12))}
  /* the collapsed-rail labels must stay visible inside the drawer */
  .mj-demo-side [style*="display: none"]{display:revert !important}
}
@media (max-width: 639px){
  .mj-demo-topbar{padding:0 var(--space-3,12px) !important;gap:var(--space-2,8px) !important}
  /* the "Search or jump to…" control becomes an icon button */
  .mj-demo-topbar > button:has(> kbd){width:36px !important;min-width:0 !important;padding:0 !important;justify-content:center !important;flex:none !important}
  .mj-demo-topbar > button:has(> kbd) > span,.mj-demo-topbar > button:has(> kbd) > kbd{display:none !important}
  .mj-demo-topbar > button[aria-label="Switch language"] > span{display:none !important}
  .mj-demo-topbar > button[aria-label="Switch language"]{width:36px !important;padding:0 !important;justify-content:center !important}
}