/* 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);
  --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 keep a modest static blur. Animating backdrop-filter
   forced the browser to re-raster the entire page on every frame. */
: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),
  .sellerengine-saas-shell.is-visible
) {
  animation: sellerengineBackdropIn var(--se-modal-duration) ease-out both !important;
  transition: opacity var(--se-modal-duration) ease-out !important;
  backdrop-filter: blur(var(--se-modal-blur)) saturate(112%) !important;
  -webkit-backdrop-filter: blur(var(--se-modal-blur)) saturate(112%) !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),
  .sellerengine-saas-shell.is-visible
) :is(
  .g-confirm-card,
  .confirm-dialog,
  .modal,
  .lh-flow-dialog,
  .lh-confirm-dialog,
  .billing-paywall-card,
  .sellerengine-saas-card,
  .glass-card,
  [role="dialog"]
) {
  animation: sellerengineDialogIn var(--se-modal-duration) var(--se-motion-ease) both !important;
  will-change: transform, opacity;
}

body .toast.toast {
  transition:
    opacity var(--se-modal-duration) var(--se-motion-ease),
    transform var(--se-modal-duration) var(--se-motion-ease) !important;
}

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: blur(var(--se-modal-blur)) saturate(112%) !important;
  -webkit-backdrop-filter: blur(var(--se-modal-blur)) saturate(112%) !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: blur(0) saturate(112%) !important;
  -webkit-backdrop-filter: blur(0) saturate(112%) !important;
}

.sellerengine-saas-shell.is-visible {
  backdrop-filter: blur(var(--se-modal-blur)) saturate(112%) !important;
  -webkit-backdrop-filter: blur(var(--se-modal-blur)) saturate(112%) !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%);
  }

  html:root body.sellerengine-canonical-app.sellerengine-user-app,
  html:root body.sellerengine-canonical-app.sellerengine-demo-app,
  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.sellerengine-canonical-app,
  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 {
    background: #06080f !important;
    transition: transform 220ms var(--se-motion-ease), opacity 180ms ease !important;
  }

  html:root[data-se-theme="light"] body.sellerengine-canonical-app .sellerengine-app-chrome {
    background: #f5f8fc !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;
  }

  ::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,
    .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,
    .toast
  ) {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  :is(.g-confirm-card, .confirm-dialog, .modal, .lh-flow-dialog, .lh-confirm-dialog, .billing-paywall-card, .sellerengine-saas-card, #progressModal .glass-card, .modal-backdrop [role="dialog"]) {
    animation: none !important;
    transition: none !important;
  }
}