/* Native marketing motion. Content is the default, motion is enhancement. */
:root {
  --motion-fast: 140ms;
  --motion-response: 240ms;
  --motion-arrival: 360ms;
  --motion-reveal: 520ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}
html { scroll-behavior: auto; }
.hero { position: relative; isolation: isolate; overflow: clip; }
.hero::before, .hero::after {
  content: ""; position: absolute; pointer-events: none; z-index: -1;
}
.hero::before {
  inset: 0; max-height: 960px;
  background: radial-gradient(ellipse at 78% 36%, #2dd4bf24, transparent 55%),
    radial-gradient(ellipse at 32% 80%, #087f7015, transparent 48%);
  transform-origin: 70% 40%;
}
.hero::after {
  inset: 0; max-height: 960px; opacity: .17;
  background-image: linear-gradient(#2dd4bf12 1px, transparent 1px), linear-gradient(90deg, #2dd4bf12 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 75% 40%, #000, transparent 66%);
}
[data-theme="light"] .hero::before { opacity: .45; }
.thread__message { position: relative; }
.motion-typing {
  position: absolute; right: 0; top: 24px; display: flex; gap: 5px;
  padding: 14px 16px; border-radius: 16px 16px 6px 16px;
  background: var(--accent-soft); pointer-events: none;
}
.motion-typing i { display: block; width: 5px; height: 5px; background: var(--accent-text); border-radius: 50%; }
.motion-snapshot { position: absolute !important; margin: 0 !important; pointer-events: none !important; z-index: 2; }
.steps { position: relative; }
.steps::after {
  content: ""; position: absolute; top: 52px; bottom: 32px; left: 10px; width: 1px;
  background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 12%, transparent));
  transform-origin: top; pointer-events: none;
}
.price__amount { position: relative; isolation: isolate; display: inline-block; }
.price__amount::before {
  content: ""; position: absolute; inset: -22px -32px; z-index: -1; opacity: 0;
  background: radial-gradient(ellipse, #2dd4bf35, transparent 68%); pointer-events: none;
}
.site-nav { isolation: isolate; }
.site-nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); opacity: 0;
}
.site-nav.motion-compact::before { opacity: 1; }
.site-nav.motion-compact { transform: translateY(-4px); }
.site-nav.motion-compact .site-nav__inner { transform: translateY(2px); }
.motion-bar-wait { transform: translateY(110%); opacity: 0; pointer-events: none; }
.motion-bar-wait:focus-within { transform: none; opacity: 1; pointer-events: auto; }
.motion-toggle { margin-left: auto; background: none; color: var(--text-muted); border: 1px solid var(--border); border-radius: 8px; min-height: 44px; padding: 8px 12px; cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .hero.motion-ambient::before { animation: signal-light 18s ease-in-out infinite alternate; }
  html:not([data-motion="off"]) .hero.motion-ambient::after { animation: signal-grid 24s linear infinite; }
  .hero.motion-sleep::before, .hero.motion-sleep::after { animation-play-state: paused !important; }
  html:not([data-motion="off"]) .btn {
    position: relative; isolation: isolate; overflow: hidden;
    transition: transform var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease);
  }
  html:not([data-motion="off"]) .btn:not([aria-busy="true"])::after {
    content: ""; position: absolute; inset: -30% -50%; pointer-events: none;
    background: linear-gradient(110deg, transparent 38%, #ffffff24 50%, transparent 62%);
    transform: translateX(-75%); opacity: 0;
  }
  html:not([data-motion="off"]) .btn:active { transform: scale(.98); }
  html:not([data-motion="off"]) :is(.chip, .segmented button) { transition: transform var(--motion-fast) var(--motion-ease); }
  html:not([data-motion="off"]) :is(.chip, .segmented button):active { transform: scale(.97); }
  html:not([data-motion="off"]) :is(.site-nav__links, .site-footer) a:not(.brand):not(.btn) { position: relative; }
  html:not([data-motion="off"]) :is(.site-nav__links, .site-footer) a:not(.brand):not(.btn)::after {
    content: ""; position: absolute; height: 1px; left: 0; right: 0; bottom: -4px;
    background: currentColor; transform: scaleX(0); transform-origin: left;
    transition: transform var(--motion-response) var(--motion-ease);
  }
  html:not([data-motion="off"]) :is(.site-nav__links, .site-footer) a:is(:hover, :focus-visible)::after { transform: scaleX(1); }
  html:not([data-motion="off"]) :is(.site-nav, .site-nav__inner) { transition: transform var(--motion-response) var(--motion-ease); }
  html:not([data-motion="off"]) .site-nav::before { transition: opacity var(--motion-response) var(--motion-ease); }
  html:not([data-motion="off"]) .bottom-bar--marketing { transition: transform var(--motion-arrival) var(--motion-ease), opacity var(--motion-arrival) var(--motion-ease); }
  html:not([data-motion="off"]) .motion-price::before { animation: price-light 1000ms var(--motion-ease) both; }
  html:not([data-motion="off"]) .motion-typing i { animation: typing-dot 600ms ease-in-out infinite alternate; }
  .motion-typing i:nth-child(2) { animation-delay: 100ms !important; }
  .motion-typing i:nth-child(3) { animation-delay: 200ms !important; }
  @media (hover: hover) {
    html:not([data-motion="off"]) .btn:not([aria-busy="true"]):hover::after { animation: button-light 480ms var(--motion-ease); }
  }
  @supports (animation-timeline: view()) {
    html[data-motion-timelines="on"]:not([data-motion="off"]) .motion-reveal:not(.motion-done) {
      animation: section-arrival linear both; animation-timeline: view(); animation-range: entry 0% entry 100%;
    }
    html[data-motion-timelines="on"]:not([data-motion="off"]) .steps.motion-line:not(.motion-done)::after {
      animation: step-line linear both; animation-timeline: view(); animation-range: entry 10% cover 55%;
    }
    html[data-motion-timelines="on"]:not([data-motion="off"]) .hero .thread {
      animation: thread-depth linear both; animation-timeline: view(); animation-range: exit 0% exit 100%;
    }
  }
  @supports (animation-timeline: scroll()) {
    html[data-motion-timelines="on"]:not([data-motion="off"]) .hero.motion-ambient::after {
      animation: grid-depth linear both; animation-timeline: scroll(root); animation-range: 0px 1200px;
    }
  }
  html:not([data-motion="off"]) .motion-line-fallback::after { animation: step-line 700ms var(--motion-ease) both; }
}
@keyframes signal-light { from { transform: translate3d(-2%, 1%, 0) scale(1); } to { transform: translate3d(2%, -2%, 0) scale(1.08); } }
@keyframes signal-grid { to { transform: translate3d(0, 32px, 0); } }
@keyframes grid-depth { to { transform: translate3d(0, 48px, 0); } }
@keyframes thread-depth { from { transform: translateY(0); } to { transform: translateY(-12px); } }
@keyframes section-arrival { from { opacity: .65; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes step-line { from { transform: scaleY(0); opacity: .3; } to { transform: scaleY(1); opacity: 1; } }
@keyframes price-light { 0%, 100% { opacity: 0; transform: scale(.9); } 40% { opacity: 1; transform: scale(1); } }
@keyframes typing-dot { from { opacity: .35; transform: translateY(1px); } to { opacity: 1; transform: translateY(-2px); } }
@keyframes button-light { 0% { opacity: 0; transform: translateX(-75%); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(75%); } }
@media (prefers-reduced-transparency: reduce) {
  .site-nav, .site-nav::before, .bottom-bar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; }
html[data-motion="off"] .motion-bar-wait { transform: none; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .motion-bar-wait { transform: none; opacity: 1; pointer-events: auto; }
  .motion-typing { display: none; }
}
@media print {
  .hero::before, .hero::after, .motion-typing, .motion-snapshot, .motion-toggle { display: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}