/* Portal motion: one timing system for page changes, pop-ups, menus and controls.
   Loaded last in the <head> of every portal page. */

:root{
  --nmp-ease-out:cubic-bezier(.22, 1, .36, 1);
  --nmp-ease-in-out:cubic-bezier(.65, 0, .35, 1);
  --nmp-fast:.15s;
  --nmp-base:.24s;
  --nmp-slow:.34s;
}

/* ---------- Page changes ----------
   No cross-fade between pages: the browser keeps the current page on screen until the next one
   is ready and switches in one step (a fade showed the old page over the new one). */

@view-transition{
  navigation:none;
}

/* ---------- Pop-ups: backdrop fades, panel rises and settles (both ways) ---------- */

.modal-backdrop,
.picker-modal-backdrop,
.session-modal-backdrop{
  opacity:0;
  transition:
    opacity var(--nmp-base) var(--nmp-ease-out),
    display var(--nmp-base) allow-discrete,
    overlay var(--nmp-base) allow-discrete;
}

.modal-backdrop.is-open,
.picker-modal-backdrop.is-open,
.session-modal-backdrop.is-open{
  opacity:1;
}

.modal-backdrop .modal-shell,
.picker-modal-backdrop .picker-modal,
.session-modal-backdrop .session-modal-shell{
  opacity:0;
  transform:translateY(16px) scale(.97);
  transition:
    opacity var(--nmp-base) var(--nmp-ease-out),
    transform var(--nmp-slow) var(--nmp-ease-out);
}

.modal-backdrop.is-open .modal-shell,
.picker-modal-backdrop.is-open .picker-modal,
.session-modal-backdrop.is-open .session-modal-shell{
  opacity:1;
  transform:none;
}

@starting-style{
  .modal-backdrop.is-open,
  .picker-modal-backdrop.is-open,
  .session-modal-backdrop.is-open{
    opacity:0;
  }

  .modal-backdrop.is-open .modal-shell,
  .picker-modal-backdrop.is-open .picker-modal,
  .session-modal-backdrop.is-open .session-modal-shell{
    opacity:0;
    transform:translateY(16px) scale(.97);
  }
}

/* ---------- Phone menu: same curve as everything else ---------- */

.mobile-menu-sheet{
  transition:transform var(--nmp-slow) var(--nmp-ease-out) !important;
}

.mobile-menu-backdrop{
  transition:opacity var(--nmp-base) var(--nmp-ease-out) !important;
}

/* ---------- Messages that appear ---------- */

.flash{
  animation:nmp-drop-in var(--nmp-slow) var(--nmp-ease-out) both;
}

.flash.flash-hiding{
  animation:none;
}

@keyframes nmp-drop-in{
  from{ opacity:0; transform:translateY(-8px); }
}

@keyframes nmp-pop-in{
  from{ opacity:0; transform:translateY(-4px) scale(.97); }
}

@keyframes nmp-rise-in{
  from{ opacity:0; transform:translateY(8px); }
}

@keyframes nmp-slide-in{
  from{ opacity:0; transform:translateX(24px); }
}

/* Small menus that drop down */
.ad-export[open] .ad-export-menu,
.st-menu-list:not([hidden]){
  transform-origin:top right;
  animation:nmp-pop-in .18s var(--nmp-ease-out) both;
}

/* Toasts and inline notices */
.cb-toast:not([hidden]){
  animation:nmp-rise-in var(--nmp-base) var(--nmp-ease-out) both;
}

.st-problem:not([hidden]),
.le-errors,
.bulk-form-errors:not([hidden]),
.quiz-feedback{
  animation:nmp-drop-in var(--nmp-base) var(--nmp-ease-out) both;
}

/* ---------- Controls: consistent hover and press feedback ---------- */

.btn,
.cb-btn,
.ul-add,
.ul-chip,
.ul-manage,
.um-btn,
.ad-tool,
.ad-alert,
.st-tile,
.st-switch,
.st-icon-btn,
.st-primary,
.ol-page,
.ol-add,
.header-pill-link,
.page-back-link,
.nmp-pdf-btn,
.nmp-video-full{
  transition:
    background-color var(--nmp-fast) var(--nmp-ease-out),
    border-color var(--nmp-fast) var(--nmp-ease-out),
    color var(--nmp-fast) var(--nmp-ease-out),
    box-shadow var(--nmp-fast) var(--nmp-ease-out),
    opacity var(--nmp-fast) var(--nmp-ease-out),
    transform var(--nmp-fast) var(--nmp-ease-out);
}

.btn:active,
.cb-btn:active,
.ul-add:active,
.ul-chip:active,
.ul-manage:active,
.um-btn:active,
.ad-tool:active,
.ad-alert:active,
.st-tile:active,
.st-primary:active,
.page-back-link:active,
.nmp-pdf-btn:active{
  transform:scale(.97);
}

/* Switches glide rather than jump */
.st-track,
.st-track span{
  transition:
    background-color var(--nmp-base) var(--nmp-ease-out),
    left var(--nmp-base) var(--nmp-ease-out);
}

/* Rows respond to hover smoothly */
.ul-row,
.ad-list a,
.cb-page{
  transition:background-color var(--nmp-fast) var(--nmp-ease-out), border-color var(--nmp-fast) var(--nmp-ease-out);
}

/* ---------- Course studio: switching pages and panels ---------- */

.st-page.is-entering,
.st-settings.is-entering{
  animation:nmp-rise-in .28s var(--nmp-ease-out) both;
}

@media (max-width:900px){
  .studio.is-editing .studio-main{
    animation:nmp-slide-in .3s var(--nmp-ease-out) both;
  }

  .studio:not(.is-editing) .studio-side{
    animation:nmp-rise-in .26s var(--nmp-ease-out) both;
  }
}

.ol-upload{
  animation:nmp-rise-in .26s var(--nmp-ease-out) both;
}

/* ---------- Anyone who prefers less motion gets none ---------- */

@media (prefers-reduced-motion: reduce){
  @view-transition{
    navigation:none;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}