/* SellerEngine global motion layer.
   Navigation and overlays use compositor-only transforms/opacity. */

:root {
  --se-route-duration: 220ms;
  --se-route-exit-duration: 96ms;
  --se-modal-duration: 180ms;
  --se-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Exits are shorter than entrances and accelerate away (toasts, small overlays). */
  --se-motion-exit: 120ms;
  --se-motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --se-modal-blur: 8px;
}

html[data-se-motion-hz="60"] {
  --se-route-duration: 220ms;
  --se-modal-duration: 190ms;
  --se-modal-blur: 6px;
}

html[data-se-motion-hz="90"] {
  --se-route-duration: 210ms;
  --se-modal-duration: 175ms;
}

html[data-se-motion-hz="120"] {
  --se-route-duration: 200ms;
  --se-modal-duration: 165ms;
}

html[data-se-motion-hz="144"] {
  --se-route-duration: 190ms;
  --se-modal-duration: 155ms;
}

@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: var(--se-route-duration);
  animation-timing-function: var(--se-motion-ease);
}

::view-transition-image-pair(root) {
  isolation: isolate;
}

::view-transition-old(root) {
  animation: sellerengineRouteOut var(--se-route-duration) var(--se-motion-ease) both;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  animation: sellerengineRouteIn var(--se-route-duration) var(--se-motion-ease) both;
  mix-blend-mode: normal;
}

@keyframes sellerengineRouteOut {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0.78; transform: translate3d(-32px, 0, 0); }
}

@keyframes sellerengineRouteIn {
  from { opacity: 0.68; transform: translate3d(48px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.sellerengine-route-cover {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147482998 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translateZ(0) !important;
  background: rgba(2, 3, 4, 0.16) !important;
  transition: opacity var(--se-route-exit-duration) linear !important;
  will-change: auto !important;
}

html[data-se-theme="light"] .sellerengine-route-cover {
  background: rgba(232, 239, 248, 0.22) !important;
}

html.sellerengine-route-leaving,
html.sellerengine-route-leaving > body {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

html.sellerengine-route-leaving #app {
  opacity: 0.86 !important;
  transform: translate3d(-10px, 0, 0) !important;
  transition:
    opacity var(--se-route-exit-duration) ease-out,
    transform var(--se-route-exit-duration) ease-out !important;
}

html.sellerengine-route-leaving .sellerengine-route-cover,
html.sellerengine-route-leaving .sellerengine-route-cover.is-leaving {
  opacity: 1 !important;
  pointer-events: auto !important;
}

html.sellerengine-route-entered > body {
  animation: none !important;
}

html.sellerengine-route-entered [data-se-route-content] {
  animation: sellerengineFallbackRouteIn var(--se-route-duration) var(--se-motion-ease) both !important;
}

@keyframes sellerengineFallbackRouteIn {
  from { opacity: 0.92; transform: translate3d(32px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Full-viewport overlays fade in over a flat backdrop. No blur: the page behind a dialog is dimmed, not smeared,
   and a backdrop-filter re-rasters the entire page. */
:is(
  .g-confirm-overlay.visible,
  .confirm-backdrop.show,
  .modal-backdrop.show,
  .taxledger-app .modal-backdrop:not(.hidden),
  .lh-flow-modal:not([hidden]),
  .lh-confirm-modal,
  .billing-paywall:not([hidden]),
  #progressModal:not(.hidden),
  #confirmToastBackdrop.visible,
  .settings-confirm-overlay,
  .sellerengine-saas-shell.is-visible
) {
  animation: sellerengineBackdropIn var(--se-modal-duration) ease-out backwards !important;
  transition: opacity var(--se-modal-duration) ease-out !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

:is(
  .g-confirm-overlay.visible,
  .confirm-backdrop.show,
  .modal-backdrop.show,
  .taxledger-app .modal-backdrop:not(.hidden),
  .lh-flow-modal:not([hidden]),
  .lh-confirm-modal,
  .billing-paywall:not([hidden]),
  #progressModal:not(.hidden),
  #confirmToastBackdrop.visible,
  .settings-confirm-overlay,
  .sellerengine-saas-shell.is-visible
) :is(
  .g-confirm-card,
  .confirm-dialog,
  .modal,
  .lh-flow-dialog,
  .lh-confirm-dialog,
  .billing-paywall-card,
  .sellerengine-saas-card,
  .confirm-toast-card,
  .settings-confirm-dialog,
  .glass-card,
  [role="dialog"]
) {
  animation: sellerengineDialogIn var(--se-modal-duration) var(--se-motion-ease) backwards !important;
  will-change: transform, opacity;
}

/* Exits mirror the entrance, shorter and accelerating away: the backdrop fades over --se-motion-exit and keeps its
   display until the fade ends (allow-discrete; a transition outranks the display:none !important of Tailwind's
   .hidden and [hidden]), the card fades and settles to .98. Each overlay closes its own way: a class it loses, .hidden,
   [hidden], or .is-closing on the two the script removes once the fade ends. A closing overlay lets clicks through,
   and its own legacy keyframes stay off so they cannot replay on the way out. Reduce Motion keeps the instant exit.
   The entrances above fill backwards, not both: an animation still filling forwards holds opacity and transform, and
   Chrome then starts no exit transition from it (the overlay would vanish at its first closed frame). */
@media (prefers-reduced-motion: no-preference) {
  html:root :is(
    .g-confirm-overlay:not(.visible),
    .confirm-backdrop:not(.show),
    body:not(.taxledger-app) .modal-backdrop:not(.show),
    .taxledger-app .modal-backdrop.hidden,
    .lh-flow-modal[hidden],
    .lh-confirm-modal.is-closing,
    .billing-paywall[hidden],
    #progressModal.hidden,
    #confirmToastBackdrop:not(.visible),
    .settings-confirm-overlay.is-closing,
    .sellerengine-saas-shell:not(.is-visible)
  ) {
    opacity: 0 !important;
    pointer-events: none !important;
    animation: none !important;
    transition:
      opacity var(--se-motion-exit) var(--se-motion-ease-in),
      display var(--se-motion-exit) allow-discrete !important;
  }

  html:root :is(
    .g-confirm-overlay:not(.visible),
    .confirm-backdrop:not(.show),
    body:not(.taxledger-app) .modal-backdrop:not(.show),
    .taxledger-app .modal-backdrop.hidden,
    .lh-flow-modal[hidden],
    .lh-confirm-modal.is-closing,
    .billing-paywall[hidden],
    #progressModal.hidden,
    #confirmToastBackdrop:not(.visible),
    .settings-confirm-overlay.is-closing,
    .sellerengine-saas-shell:not(.is-visible)
  ) > :is(.g-confirm-card, .confirm-dialog, .modal, .lh-flow-dialog, .lh-confirm-dialog, .billing-paywall-card, .sellerengine-saas-card, .confirm-toast-card, .settings-confirm-dialog, .glass-card, [role="dialog"]) {
    opacity: 0 !important;
    transform: scale(0.98) !important;
    animation: none !important;
    transition:
      opacity var(--se-motion-exit) var(--se-motion-ease-in),
      transform var(--se-motion-exit) var(--se-motion-ease-in) !important;
  }
}

/* The toast's transition is owned by se-toast-global.css (display allow-discrete + @starting-style). An equal
   rule here would load later and drop the display transition, so the toast would blink again. */
body .toast.toast.visible,
body .toast.toast.is-visible {
  will-change: transform, opacity;
}

body.sellerengine-canonical-app .sellerengine-demo-notice {
  transition: opacity var(--se-modal-duration) var(--se-motion-ease) !important;
}

body.sellerengine-canonical-app .sellerengine-demo-notice::before,
.standalone-demo-toast::before {
  transition: opacity var(--se-modal-duration) var(--se-motion-ease) !important;
}

body.sellerengine-canonical-app .sellerengine-demo-notice.is-visible::before,
.standalone-demo-toast.is-visible::before {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.sellerengine-canonical-app .sellerengine-demo-notice-shell {
  transition:
    opacity var(--se-modal-duration) var(--se-motion-ease),
    transform var(--se-modal-duration) var(--se-motion-ease) !important;
}

.sellerengine-saas-shell {
  transition: opacity var(--se-modal-duration) var(--se-motion-ease) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.sellerengine-saas-card,
.sellerengine-sync-banner,
.lh-kw-progress,
.sync-toast,
.notification-toast {
  transition:
    opacity var(--se-modal-duration) var(--se-motion-ease),
    transform var(--se-modal-duration) var(--se-motion-ease) !important;
}

@keyframes sellerengineBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sellerengineDialogIn {
  from { opacity: 0; transform: translate3d(16px, 0, 0) scale(0.992); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Native scroll: paint the brand canvas with the document, not through several
   viewport-sized blur/mask/blend surfaces. Keep overlays and route motion intact. */
@media screen {
  html:has(> body:is(.se-public-shell, [data-auth-page="app"]))::before,
  html:has(> body:is(.se-public-shell, [data-auth-page="app"]))::after,
  html:root body:is(.se-public-shell, [data-auth-page="app"], .sellerengine-canonical-app)::before,
  html:root body:is(.se-public-shell, [data-auth-page="app"], .sellerengine-canonical-app)::after,
  html:root body.sellerengine-canonical-app .ambient-bg {
    content: none !important;
    display: none !important;
  }

  html:root body:is(.se-public-shell, [data-auth-page="app"]) {
    background-attachment: scroll !important;
  }

  html:root body.se-public-shell:not(.landing-page) {
    background:
      radial-gradient(120% 62% at 50% -8%, rgba(66, 133, 244, 0.12), transparent 60%),
      radial-gradient(90% 55% at 88% 6%, rgba(155, 114, 203, 0.08), transparent 62%),
      linear-gradient(180deg, #090b11 0%, #07080c 46%, #060709 100%);
  }

  /* Tools paint one flat page colour in both themes (the --se-ui-page token of app-core). */
  html:root body.sellerengine-canonical-app.sellerengine-user-app,
  html:root body.sellerengine-canonical-app.sellerengine-demo-app,
  html:root[data-se-theme="light"] body.sellerengine-canonical-app {
    background: var(--se-ui-page, #101314) !important;
  }

  html:root body[data-auth-page="app"] {
    background:
      radial-gradient(100% 100vh at 50% -12vh, rgba(66, 133, 244, 0.18), transparent 38%),
      radial-gradient(100% 100vh at 80% 84vh, rgba(217, 101, 112, 0.10), transparent 42%),
      #020304 !important;
  }

  html:root[data-se-theme="light"] body[data-auth-page="app"] {
    background: #e8eff8 !important;
  }

  html:root:is([data-theme="day"], [data-se-theme="light"]) body.se-public-shell {
    background: linear-gradient(180deg, #f8fafd, #ebeff6) !important;
  }

  html:root body.sellerengine-canonical-app .sellerengine-app-chrome,
  html:root body.sellerengine-canonical-app .sellerengine-app-chrome :is(.sellerengine-user-app-link, .sellerengine-demo-app-link),
  html:root body.sellerengine-canonical-app .sidebar-build-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html:root body.sellerengine-canonical-app .sellerengine-app-chrome {
    transition: transform 220ms var(--se-motion-ease), opacity 180ms ease !important;
  }

  /* Revealed sections no longer need permanent compositor layers. */
  [data-se-reveal="in"] {
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:root body.sellerengine-canonical-app .sellerengine-app-chrome {
    transition: none !important;
  }

  /* Smooth scrolling and the sliding rail are motion too: jumps and the rail switch at once. */
  html:root {
    scroll-behavior: auto !important;
  }
  :is(.app-shell-sidebar, .app-shell-main, .glass-card) {
    transition: none !important;
  }

  /* .toast is not listed: #progressModal gives this :is() ID specificity, so transform:none would beat the
     toast's translate(-50%) centring and push it half off-screen. se-toast-global.css has its own
     reduced-motion rule (opacity only, centring pinned). */
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root),
  html.sellerengine-route-leaving #app,
  html.sellerengine-route-entered [data-se-route-content],
  :is(
    .g-confirm-overlay,
    .confirm-backdrop,
    .modal-backdrop,
    .lh-flow-modal,
    .lh-confirm-modal,
    .billing-paywall,
    #progressModal,
    #confirmToastBackdrop,
    .settings-confirm-overlay,
    .sellerengine-saas-shell,
    .sellerengine-saas-card,
    .sellerengine-sync-banner,
    .lh-kw-progress,
    .sync-toast,
    .notification-toast,
    .sellerengine-demo-notice,
    .sellerengine-demo-notice-shell,
    .standalone-demo-toast
  ) {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  /* html:root: the entrance rule above is :is(#…) :is(.…) = 1,2,0, and this list alone is 1,1,0, so without the
     prefix the dialog cards still slid and scaled in under Reduce Motion. */
  html:root :is(.g-confirm-card, .confirm-dialog, .modal, .lh-flow-dialog, .lh-confirm-dialog, .billing-paywall-card, .sellerengine-saas-card, .confirm-toast-card, .settings-confirm-dialog, #progressModal .glass-card, .modal-backdrop [role="dialog"]) {
    animation: none !important;
    transition: none !important;
  }

  /* No fade to wait for: an overlay the script removes after its exit is hidden at once (removal follows). */
  html:root :is(.lh-confirm-modal, .settings-confirm-overlay).is-closing {
    visibility: hidden !important;
  }
}