/* Mobile page transitions — FlutterFlow-style (fade / slide / scale) */

:root {
  --m-page-duration: 320ms;
  --m-page-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.m-page-root {
  min-height: 100%;
}

@media (max-width: 768px) {
  html.m-page-enter .m-page-root {
    animation-duration: var(--m-page-duration);
    animation-timing-function: var(--m-page-ease);
    animation-fill-mode: both;
  }

  html.m-page-exit .m-page-root {
    animation-duration: var(--m-page-duration);
    animation-timing-function: var(--m-page-ease);
    animation-fill-mode: forwards;
    pointer-events: none;
  }

  /* ─── Enter ─── */
  html.m-page-enter--fade .m-page-root {
    animation-name: m-page-enter-fade;
  }

  html.m-page-enter--slide-left .m-page-root {
    animation-name: m-page-enter-slide-left;
  }

  html.m-page-enter--slide-right .m-page-root {
    animation-name: m-page-enter-slide-right;
  }

  html.m-page-enter--slide-up .m-page-root {
    animation-name: m-page-enter-slide-up;
  }

  html.m-page-enter--slide-down .m-page-root {
    animation-name: m-page-enter-slide-down;
  }

  html.m-page-enter--scale .m-page-root {
    animation-name: m-page-enter-scale;
  }

  /* ─── Exit ─── */
  html.m-page-exit--fade .m-page-root {
    animation-name: m-page-exit-fade;
  }

  html.m-page-exit--slide-left .m-page-root {
    animation-name: m-page-exit-slide-left;
  }

  html.m-page-exit--slide-right .m-page-root {
    animation-name: m-page-exit-slide-right;
  }

  html.m-page-exit--slide-up .m-page-root {
    animation-name: m-page-exit-slide-up;
  }

  html.m-page-exit--slide-down .m-page-root {
    animation-name: m-page-exit-slide-down;
  }

  html.m-page-exit--scale .m-page-root {
    animation-name: m-page-exit-scale;
  }

  /* In-page panel (profile sections) */
  .m-panel-enter {
    animation: m-page-enter-slide-left var(--m-page-duration) var(--m-page-ease) both;
  }

  .m-panel-enter--right {
    animation-name: m-page-enter-slide-right;
  }

  .m-panel-enter--up {
    animation-name: m-page-enter-slide-up;
  }

  .m-panel-exit {
    animation: m-page-exit-slide-left calc(var(--m-page-duration) * 0.75) var(--m-page-ease) forwards;
  }

  .m-panel-exit--right {
    animation-name: m-page-exit-slide-right;
  }
}

@keyframes m-page-enter-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes m-page-exit-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes m-page-enter-slide-left {
  from { opacity: 0.4; transform: translate3d(28%, 0, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes m-page-exit-slide-left {
  from { opacity: 1; transform: none; }
  to { opacity: 0.5; transform: translate3d(-22%, 0, 0); }
}

@keyframes m-page-enter-slide-right {
  from { opacity: 0.4; transform: translate3d(-28%, 0, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes m-page-exit-slide-right {
  from { opacity: 1; transform: none; }
  to { opacity: 0.5; transform: translate3d(22%, 0, 0); }
}

@keyframes m-page-enter-slide-up {
  from { opacity: 0.5; transform: translate3d(0, 24%, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes m-page-exit-slide-up {
  from { opacity: 1; transform: none; }
  to { opacity: 0.4; transform: translate3d(0, -16%, 0); }
}

@keyframes m-page-enter-slide-down {
  from { opacity: 0.5; transform: translate3d(0, -24%, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes m-page-exit-slide-down {
  from { opacity: 1; transform: none; }
  to { opacity: 0.4; transform: translate3d(0, 16%, 0); }
}

@keyframes m-page-enter-scale {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}

@keyframes m-page-exit-scale {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
  html.m-page-enter .m-page-root,
  html.m-page-exit .m-page-root,
  .m-panel-enter,
  .m-panel-exit {
    animation: none !important;
  }
}