/* Unified motion system: calm, responsive and GPU-friendly. */
:root {
  --motion-fast: 140ms;
  --motion-base: 240ms;
  --motion-slow: 420ms;
  --motion-reveal: 620ms;
  --motion-standard: cubic-bezier(.2, .8, .2, 1);
  --motion-emphasized: cubic-bezier(.16, 1, .3, 1);
  --motion-exit: cubic-bezier(.4, 0, 1, 1);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

.public-landing {
  overflow-x: clip;
  overflow-y: visible;
}

/* Content remains fully visible if JavaScript is unavailable. */
.motion-js .motion-reveal {
  opacity: 0;
  filter: blur(3px);
  transform: translate3d(0, 26px, 0) scale(.988);
  transition:
    opacity var(--motion-reveal) var(--motion-emphasized),
    transform var(--motion-reveal) var(--motion-emphasized),
    filter var(--motion-slow) var(--motion-standard);
  transition-delay: calc(var(--motion-order, 0) * 65ms);
}

.motion-js .motion-reveal.is-visible {
  opacity: 1;
  filter: none;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Landing: a restrained, cinematic first impression. */
.landing-header {
  position: sticky;
  top: 0;
  transition:
    min-height var(--motion-base) var(--motion-standard),
    background-color var(--motion-base) var(--motion-standard),
    border-color var(--motion-base) var(--motion-standard),
    box-shadow var(--motion-base) var(--motion-standard),
    backdrop-filter var(--motion-base) var(--motion-standard);
}

.landing-header.is-scrolled {
  min-height: 70px;
  border-color: rgb(148 163 184 / 20%);
  border-radius: 0 0 18px 18px;
  background: rgb(7 11 20 / 82%);
  box-shadow: 0 18px 44px rgb(0 0 0 / 22%);
  backdrop-filter: blur(18px) saturate(135%);
}

.motion-js .landing-header > *,
.motion-js .landing-hero__copy > *,
.motion-js .landing-product {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}

.motion-ready .landing-header > *,
.motion-ready .landing-hero__copy > *,
.motion-ready .landing-product {
  animation: motion-hero-enter var(--motion-reveal) var(--motion-emphasized) both;
}

.motion-ready .landing-header > :nth-child(1) { animation-delay: 40ms; }
.motion-ready .landing-header > :nth-child(2) { animation-delay: 90ms; }
.motion-ready .landing-header > :nth-child(3) { animation-delay: 140ms; }
.motion-ready .landing-hero__copy > :nth-child(1) { animation-delay: 120ms; }
.motion-ready .landing-hero__copy > :nth-child(2) { animation-delay: 180ms; }
.motion-ready .landing-hero__copy > :nth-child(3) { animation-delay: 250ms; }
.motion-ready .landing-hero__copy > :nth-child(4) { animation-delay: 320ms; }
.motion-ready .landing-hero__copy > :nth-child(5) { animation-delay: 390ms; }
.motion-ready .landing-product { animation-delay: 290ms; }

@keyframes motion-hero-enter {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.landing-product {
  transform-origin: 50% 30%;
}

.motion-ready .landing-product {
  animation-name: motion-hero-enter, motion-product-float;
  animation-duration: var(--motion-reveal), 9s;
  animation-delay: 290ms, 1.1s;
  animation-timing-function: var(--motion-emphasized), ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both;
}

@keyframes motion-product-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}

.product-window__dot,
.status-dot,
.live-dot {
  animation: motion-live-pulse 2.4s ease-in-out infinite;
}

@keyframes motion-live-pulse {
  0%, 100% { opacity: .55; box-shadow: 0 0 0 0 currentColor; }
  50% { opacity: 1; box-shadow: 0 0 0 5px transparent; }
}

.journey-preview-step,
.product-preview-card,
.product-mini-sidebar > *,
.feature-private > * {
  transition:
    transform var(--motion-base) var(--motion-emphasized),
    opacity var(--motion-base) var(--motion-standard),
    border-color var(--motion-base) var(--motion-standard),
    background-color var(--motion-base) var(--motion-standard);
}

.journey-preview-step:hover,
.product-preview-card:hover,
.feature-private > *:hover {
  transform: translate3d(0, -3px, 0);
}

/* Pointer-following light and premium surface lift. */
.motion-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform var(--motion-base) var(--motion-emphasized),
    border-color var(--motion-base) var(--motion-standard),
    background-color var(--motion-base) var(--motion-standard),
    box-shadow var(--motion-base) var(--motion-standard);
}

.motion-surface::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--motion-x, 50%) var(--motion-y, 50%), rgb(106 151 255 / 14%), transparent 62%);
  content: '';
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-base) var(--motion-standard);
}

@media (hover: hover) and (pointer: fine) {
  .motion-surface:hover {
    transform: translate3d(0, -5px, 0);
    border-color: color-mix(in srgb, var(--md-sys-color-primary, #4f8cff) 38%, transparent);
    box-shadow: 0 20px 48px rgb(8 15 32 / 14%);
  }

  .public-landing .motion-surface:hover {
    box-shadow: 0 24px 64px rgb(0 0 0 / 30%);
  }

  .motion-surface:hover::before { opacity: 1; }
}

button,
a,
md-filled-button,
md-filled-tonal-button,
md-outlined-button,
md-text-button,
md-icon-button,
md-filled-icon-button,
md-primary-tab,
.account-list-item {
  transition:
    transform var(--motion-fast) var(--motion-standard),
    color var(--motion-fast) var(--motion-standard),
    background-color var(--motion-fast) var(--motion-standard),
    border-color var(--motion-fast) var(--motion-standard),
    box-shadow var(--motion-fast) var(--motion-standard),
    opacity var(--motion-fast) var(--motion-standard);
}

button:active,
a.landing-button:active,
.motion-pressed {
  transform: translate3d(0, 1px, 0) scale(.975) !important;
}

:where(button, a, input, select, textarea, md-filled-button, md-outlined-button, md-text-button, md-icon-button, md-primary-tab):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--md-sys-color-primary, #4f8cff) 42%, transparent);
  outline-offset: 3px;
}

/* Workspace transitions. The old competing view animations are disabled. */
.view { animation: none !important; }

.view.motion-view-enter {
  animation: motion-view-right var(--motion-slow) var(--motion-emphasized) both !important;
}

.view.motion-view-enter.motion-view-left {
  animation-name: motion-view-left !important;
}

@keyframes motion-view-right {
  from { opacity: 0; transform: translate3d(18px, 6px, 0) scale(.992); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes motion-view-left {
  from { opacity: 0; transform: translate3d(-18px, 6px, 0) scale(.992); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.motion-account-change {
  animation: motion-account-refresh 520ms var(--motion-emphasized) both;
}

@keyframes motion-account-refresh {
  0% { opacity: .55; transform: translate3d(0, 7px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

.motion-confirm {
  animation: motion-confirm 600ms var(--motion-emphasized) both;
}

@keyframes motion-confirm {
  0% { filter: brightness(1); transform: scale(1); }
  36% { filter: brightness(1.12); transform: scale(1.035); }
  100% { filter: brightness(1); transform: scale(1); }
}

.motion-list-item {
  animation: motion-list-enter var(--motion-slow) var(--motion-emphasized) both;
  animation-delay: calc(var(--motion-order, 0) * 42ms);
}

@keyframes motion-list-enter {
  from { opacity: 0; transform: translate3d(-10px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.journey-step,
.status-hero,
.dashboard-card,
.settings-section,
.view-tabs-container,
.account-list-item,
.app-drawer,
.drawer-scrim {
  transition:
    transform var(--motion-base) var(--motion-emphasized),
    opacity var(--motion-base) var(--motion-standard),
    color var(--motion-base) var(--motion-standard),
    background-color var(--motion-base) var(--motion-standard),
    border-color var(--motion-base) var(--motion-standard),
    box-shadow var(--motion-base) var(--motion-standard);
}

.journey-step[aria-current='step'],
.journey-step.is-current,
.account-list-item--selected {
  transform: translate3d(3px, 0, 0);
}

md-dialog[open],
dialog[open] {
  animation: motion-dialog-enter var(--motion-base) var(--motion-emphasized) both;
}

@keyframes motion-dialog-enter {
  from { opacity: 0; filter: blur(3px); }
  to { opacity: 1; filter: none; }
}

.toast,
.app-toast,
[role='status'].show {
  animation: motion-toast-enter var(--motion-slow) var(--motion-emphasized) both;
}

@keyframes motion-toast-enter {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.97); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 720px) {
  .landing-header { top: 0; }
  .landing-header.is-scrolled { min-height: 64px; border-radius: 0 0 14px 14px; }
  .motion-js .motion-reveal { transform: translate3d(0, 18px, 0); }
  .motion-ready .landing-product { animation-name: motion-hero-enter; animation-duration: var(--motion-reveal); animation-iteration-count: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

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

  .motion-js .motion-reveal,
  .motion-js .landing-header > *,
  .motion-js .landing-hero__copy > *,
  .motion-js .landing-product {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .motion-surface:hover,
  .journey-preview-step:hover,
  .product-preview-card:hover,
  .feature-private > *:hover,
  .journey-step[aria-current='step'],
  .journey-step.is-current,
  .account-list-item--selected {
    transform: none !important;
  }
}