/*
 * Mailnaptic motion. Everything here is progressive: without JavaScript, or with "reduce motion" switched on in the visitor's
 * system, the page looks exactly as it did before. motion.js tags the elements (data-mn on the thing that is revealed,
 * data-mnx on what moves inside it); the rules below only move opacity, transform and translate, so nothing shifts the layout.
 */

@media (prefers-reduced-motion: no-preference) {
  :root {
    --mn-ease: cubic-bezier(.22, .8, .24, 1);
    --mn-dur: .75s;
  }

  /* ---- 1. Entrance: reveal on scroll --------------------------------------------------------------------------------- */
  html [data-mn][data-mn] {
    opacity: 0;
    transition: opacity var(--mn-dur) var(--mn-ease), transform var(--mn-dur) var(--mn-ease);
    transition-delay: calc(var(--mn-i, 0) * 80ms);
    will-change: opacity, transform;
  }
  html [data-mn="up"][data-mn]    { transform: translate3d(0, 28px, 0); }
  html [data-mn="left"][data-mn]  { transform: translate3d(-40px, 0, 0); }
  html [data-mn="right"][data-mn] { transform: translate3d(40px, 0, 0); }
  html [data-mn="zoom"][data-mn]  { transform: translate3d(0, 30px, 0) scale(.95); }
  html [data-mn="group"][data-mn] { opacity: 1; will-change: auto; transition: none; }
  html [data-mn][data-mn].mn-in   { opacity: 1; transform: none; }

  /* what moves inside a revealed element: it arrives a moment after its container, one after the other */
  html [data-mnx][data-mnx] {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity .6s var(--mn-ease), transform .6s var(--mn-ease);
    transition-delay: calc(.2s + var(--mn-i, 0) * 70ms);
  }
  html [data-mnx="bar"][data-mnx]  { transform: scaleX(0); transform-origin: left center; transition-duration: .6s, 1.1s; }
  html [data-mnx="dot"][data-mnx]  { transform: scale(.2); }
  html [data-mnx="pop"][data-mnx]  { transform: scale(.82); }
  html [data-mnx="img"][data-mnx]  { transform: scale(1.05); transition-duration: .9s, 1.4s; }
  html .mn-in [data-mnx][data-mnx], html [data-mnx][data-mnx].mn-in { opacity: 1; transform: none; }

  /* the check marks pop in a little after their line */
  .mx-check[data-mn]::before, [data-mnx].mx-check::before {
    transform: scale(.3);
    transition: transform .55s var(--mn-ease) calc(.2s + var(--mn-i, 0) * 70ms);
  }
  .mx-check.mn-in::before, .mn-in .mx-check::before { transform: none; }

  /* small screens: sideways slides become plain rises */
  @media (max-width: 860px) {
    html [data-mn="left"][data-mn], html [data-mn="right"][data-mn] { transform: translate3d(0, 28px, 0); }
    html [data-mn][data-mn].mn-in { transform: none; }
  }

  /* ---- 2. Hero: plays on load, in order -------------------------------------------------------------------------------- */
  @keyframes mn-rise { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }
  @keyframes mn-pop  { from { opacity: 0; transform: translate3d(0, 34px, 0) scale(.94); } to { opacity: 1; transform: none; } }
  @keyframes mn-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

  .mx-secHero .mx-stack > *, .mx-secHero .mx-headL > * { animation: mn-rise .8s var(--mn-ease) both; }
  .mx-secHero .mx-stack > :nth-child(1), .mx-secHero .mx-headL > :nth-child(1) { animation-delay: .05s; }
  .mx-secHero .mx-stack > :nth-child(2), .mx-secHero .mx-headL > :nth-child(2) { animation-delay: .15s; }
  .mx-secHero .mx-stack > :nth-child(3), .mx-secHero .mx-headL > :nth-child(3) { animation-delay: .27s; }
  .mx-secHero .mx-stack > :nth-child(4) { animation-delay: .38s; }
  .mx-secHero .mx-stack > :nth-child(5) { animation-delay: .48s; }
  .mx-secHero .mx-wrap > .mx-row > * { animation: mn-rise .8s var(--mn-ease) .4s both; }
  .mx-secHero .mx-split > .mx-win { animation: mn-pop 1s var(--mn-ease) .3s both, mn-float 7s ease-in-out 1.6s infinite; }
  /* hero window: its content arrives after the frame, row by row (the delays come from motion.js) */
  .mx-secHero .mx-win [data-mnx] { transition-delay: calc(.75s + var(--mn-i, 0) * 70ms); }

  /* nothing that slides in from the side or drifts behind may widen the page */
  .mx-sec { overflow-x: clip; }

  /* ---- 3. Backdrops that move behind the content --------------------------------------------------------------------- */
  .mx-dark, .mx-indigo { isolation: isolate; }
  .mx-dark::before, .mx-dark::after, .mx-indigo::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
  }
  .mx-dark::before  { width: 520px; height: 520px; left: -140px; top: -180px; background: radial-gradient(circle, rgba(99,102,241,.55), transparent 70%); animation: mn-drift-a 22s ease-in-out infinite alternate; }
  .mx-dark::after   { width: 460px; height: 460px; right: -120px; bottom: -200px; background: radial-gradient(circle, rgba(168,85,247,.45), transparent 70%); animation: mn-drift-b 26s ease-in-out infinite alternate; }
  .mx-indigo::before { width: 600px; height: 600px; right: -160px; top: -240px; background: radial-gradient(circle, rgba(255,255,255,.35), transparent 70%); animation: mn-drift-b 24s ease-in-out infinite alternate; }
  @keyframes mn-drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(140px, 90px, 0) scale(1.15); } }
  @keyframes mn-drift-b { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-120px, -80px, 0) scale(.95); } }

  /* ---- 4. Hover and press ------------------------------------------------------------------------------------------- */
  .mx-card.mx-card { transition: border-color .15s ease, transform .35s var(--mn-ease), box-shadow .35s ease; }
  a.mx-card:hover, .mx-g2 > .mx-card:hover, .mx-g3 > .mx-card:hover, .mx-g4 > .mx-card:hover {
    transform: translate3d(0, -5px, 0);
    box-shadow: 0 18px 36px -22px rgba(14, 19, 48, .45);
  }
  .mx-card .mx-ico { transition: transform .4s var(--mn-ease); }
  .mx-card:hover .mx-ico { transform: translate3d(0, -3px, 0) scale(1.14) rotate(-5deg); }
  .mx-card .mx-link { transition: translate .3s var(--mn-ease); }
  .mx-card:hover .mx-link { translate: 5px 0; }

  .mx-btn.mx-btn { transition: background-color .15s ease, border-color .15s ease, transform .25s var(--mn-ease), box-shadow .25s ease; }
  .mx-btn:hover { transform: translate3d(0, -2px, 0); }
  .mx-btnP:hover { box-shadow: 0 12px 24px -12px rgba(79, 70, 229, .75); }
  .mx-btn:active { transform: scale(.97); transition-duration: .08s; }

  /* windows: screenshots lean towards the pointer (motion.js sets --tx and --ty between -1 and 1) */
  .mx-win.mn-tilt {
    transform: perspective(1400px) rotateX(calc(var(--ty, 0) * -2.2deg)) rotateY(calc(var(--tx, 0) * 2.8deg));
    transition: transform .25s ease-out;
  }
  .mx-win.mn-tilt > img { transform: translate3d(calc(var(--tx, 0) * -7px), calc(var(--ty, 0) * -5px), 0) scale(1.035); transition: transform .25s ease-out; }

  /* ---- 5. Scroll-linked depth (browsers that support scroll timelines; others simply skip it) ------------------------ */
  @supports (animation-timeline: view()) {
    @keyframes mn-depth { from { translate: 0 34px; } to { translate: 0 -34px; } }
    @keyframes mn-depth-slow { from { translate: 0 -40px; } to { translate: 0 40px; } }
    .mx-sec:not(.mx-secHero) .mx-split > .mx-win { animation: mn-depth linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .mx-dark::before { animation: mn-drift-a 22s ease-in-out infinite alternate, mn-depth-slow linear both; animation-timeline: auto, view(); animation-range: normal, cover 0% cover 100%; }
    @keyframes mn-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .mn-progress { animation: mn-progress linear both; animation-timeline: scroll(root); }
  }

  /* ---- 6. Moving between pages ----------------------------------------------------------------------------------------- */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
}

/* reading progress on articles (the bar is added by motion.js) */
.mn-progress { position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #6366f1, #a855f7); transform: scaleX(0); transform-origin: left center; pointer-events: none; }

@media print {
  [data-mn], [data-mnx] { opacity: 1 !important; transform: none !important; }
}