/* ---------------------------------------------------------------------------
   Motion layer for every page: soft entrance on load, button and menu feedback,
   dialogs and toasts. Loaded last so its transitions win.

   - Movement uses the individual `translate` / `scale` properties, so it never
     overrides an element's own `transform` (stickers, zoomed paper, hover nudges).
   - Entrances use `animation-fill-mode: backwards`: nothing is left applied once
     they finish, so no stray stacking context or containing block stays behind.
   - Entrances wait for cloud.js: while html.cloud-booting hides the page the rule
     does not match, so the animation starts when the page actually appears.
   - Screen only; print output is untouched. Reduced-motion users get none of it.
   --------------------------------------------------------------------------- */

@media screen {
  :root {
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-fast: 160ms;
    --motion-base: 240ms;
    --motion-enter: 420ms;
  }

  @keyframes motion-rise {
    from { opacity: 0; translate: 0 10px; }
    to { opacity: 1; translate: 0 0; }
  }

  @keyframes motion-drop {
    from { opacity: 0; translate: 0 -8px; }
    to { opacity: 1; translate: 0 0; }
  }

  @keyframes motion-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes motion-pop {
    from { opacity: 0; translate: 0 -6px; scale: 0.97; }
    to { opacity: 1; translate: 0 0; scale: 1; }
  }

  @keyframes motion-dialog {
    from { opacity: 0; translate: 0 12px; scale: 0.97; }
    to { opacity: 1; translate: 0 0; scale: 1; }
  }

  /* ---- Page entrance ---------------------------------------------------- */

  /* Editor pages: navbar, then the form sidebar, then the paper preview. */
  html:not(.cloud-booting) .navbar {
    animation: motion-drop var(--motion-enter) var(--motion-ease) backwards;
  }

  html:not(.cloud-booting) .sidebar-panel,
  html:not(.cloud-booting) .eval-layout {
    animation: motion-rise var(--motion-enter) var(--motion-ease) 60ms backwards;
  }

  html:not(.cloud-booting) .preview-workspace {
    animation: motion-fade var(--motion-enter) ease-out 120ms backwards;
  }

  html:not(.cloud-booting) .preview-workspace .page-wrapper,
  html:not(.cloud-booting) .preview-workspace #page-wrapper {
    animation: motion-rise 520ms var(--motion-ease) 160ms backwards;
  }

  /* Account pages (onboarding, group, Google): cards one after another. */
  html:not(.cloud-booting) .account-main > *,
  html:not(.cloud-booting) .account-choice-grid > * {
    animation: motion-rise var(--motion-enter) var(--motion-ease) backwards;
  }

  html:not(.cloud-booting) .account-main > :nth-child(2),
  html:not(.cloud-booting) .account-choice-grid > :nth-child(2) { animation-delay: 70ms; }
  html:not(.cloud-booting) .account-main > :nth-child(3) { animation-delay: 140ms; }
  html:not(.cloud-booting) .account-main > :nth-child(n + 4) { animation-delay: 200ms; }

  /* Teacher page. */
  html:not(.cloud-booting) .staff-topbar {
    animation: motion-drop var(--motion-enter) var(--motion-ease) backwards;
  }

  html:not(.cloud-booting) .staff-hero,
  html:not(.cloud-booting) .staff-stats,
  html:not(.cloud-booting) .staff-workspace {
    animation: motion-rise var(--motion-enter) var(--motion-ease) backwards;
  }

  html:not(.cloud-booting) .staff-hero { animation-delay: 50ms; }
  html:not(.cloud-booting) .staff-stats { animation-delay: 110ms; }
  html:not(.cloud-booting) .staff-workspace { animation-delay: 170ms; }

  /* Login page. */
  .landing-body .hero-copy {
    animation: motion-rise 480ms var(--motion-ease) backwards;
  }

  .landing-body .document-stage {
    animation: motion-fade 600ms ease-out 120ms backwards;
  }

  .landing-body .feature-card {
    animation: motion-rise var(--motion-enter) var(--motion-ease) 200ms backwards;
  }

  .landing-body .feature-card:nth-child(2) { animation-delay: 270ms; }
  .landing-body .feature-card:nth-child(3) { animation-delay: 340ms; }

  /* ---- Buttons ---------------------------------------------------------- */

  .btn,
  .btn-icon,
  .zoom-btn,
  .zoom-quick-btn,
  .tab-btn,
  .template-switch-btn,
  .nav-user-trigger,
  .page-tools-trigger,
  .cloud-btn,
  .staff-reset,
  .staff-signout {
    transition:
      background-color var(--motion-fast) ease,
      border-color var(--motion-fast) ease,
      color var(--motion-fast) ease,
      box-shadow var(--motion-base) ease,
      transform var(--motion-base) var(--motion-ease),
      scale var(--motion-fast) var(--motion-ease);
  }

  .btn:active:not(:disabled),
  .btn-icon:active:not(:disabled),
  .zoom-btn:active:not(:disabled),
  .zoom-quick-btn:active:not(:disabled),
  .tab-btn:active,
  .template-switch-btn:active,
  .cloud-btn:active:not(:disabled),
  .staff-reset:active,
  .staff-signout:active {
    scale: 0.97;
  }

  .nav-caret,
  .page-tools-chevron {
    transition: transform var(--motion-base) var(--motion-ease);
  }

  /* ---- Menus ------------------------------------------------------------ */

  /* Nav dropdowns switch from display:none, so the entrance plays on each open. */
  .nav-dropdown.open .nav-dropdown-menu,
  .nav-user-menu[open] .nav-user-popover {
    transform-origin: top right;
    animation: motion-pop var(--motion-base) var(--motion-ease);
  }

  .nav-dropdown.open .nav-dropdown-menu {
    transform-origin: top left;
  }

  .page-tools-dropdown[open] .page-action-buttons {
    animation: motion-drop var(--motion-base) var(--motion-ease);
  }

  /* ---- Dialogs ---------------------------------------------------------- */

  /* Guide modals stay in the DOM and toggle a class, so the card eases both ways. */
  .modal-overlay .modal-card,
  .modal-overlay .eval-modal-card {
    translate: 0 12px;
    scale: 0.97;
    transition:
      translate var(--motion-base) var(--motion-ease),
      scale var(--motion-base) var(--motion-ease);
  }

  .modal-overlay.active .modal-card,
  .modal-overlay.open .modal-card,
  .modal-overlay.show .modal-card,
  .modal-overlay.active .eval-modal-card,
  .modal-overlay.open .eval-modal-card,
  .modal-overlay.show .eval-modal-card {
    translate: 0 0;
    scale: 1;
  }

  .modal-overlay {
    transition: opacity var(--motion-base) ease;
  }

  /* cloud.js dialogs and banners are added to the page when needed. */
  .cloud-modal-overlay {
    animation: motion-fade var(--motion-base) ease-out;
  }

  .cloud-modal {
    animation: motion-dialog 300ms var(--motion-ease);
  }

  .cloud-banner {
    animation: motion-drop 300ms var(--motion-ease);
  }

  /* ---- Toasts ----------------------------------------------------------- */

  .toast-msg {
    transform: none;
    translate: 0 16px;
    scale: 0.96;
    transition:
      opacity var(--motion-base) ease,
      translate 320ms var(--motion-ease),
      scale 320ms var(--motion-ease);
  }

  .toast-msg.show {
    translate: 0 0;
    scale: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}