/* ============================================================
   wrknode — motion.css
   Feel layer: smooth scroll, spring easing, refined scrollbars,
   upgraded view/toast/modal animations, scroll-reveal.
   Load AFTER wrknode.css and site.css. Never edit those files
   for motion concerns — patch here instead.
   ============================================================ */

/* ============================================================
   1. Animation tokens
   ============================================================ */
:root {
  /* Easing — spring/expo curves inspired by Linear + Stripe */
  --ease-spring:    cubic-bezier(0.16, 1, 0.3, 1);    /* natural spring — use for enter */
  --ease-out-expo:  cubic-bezier(0.19, 1, 0.22, 1);   /* dramatic out — hero / large moves */
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);        /* standard out (Material) */
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);        /* exit */
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);      /* bidirectional */

  /* Durations */
  --dur-instant: 80ms;
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    340ms;
  --dur-xslow:   500ms;
}


/* ============================================================
   2. Smooth scroll — HTML + all overflow containers in the app
   ============================================================ */
html {
  scroll-behavior: smooth;
}

/* App shell scrollable panels */
.nav,
.content-pane,
.p-body,
.sp-body,
.cmdk-list,
.portal-doc,
.portal-phone-body,
.shortcuts-modal,
.floor-plan-wrap {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;  /* momentum on iOS */
}


/* ============================================================
   3. Scrollbar refinement
   Thinner (4 px), fades on track, subtler thumb — matches Linear
   ============================================================ */
*::-webkit-scrollbar              { width: 4px; height: 4px; }
*::-webkit-scrollbar-track        { background: transparent; }
*::-webkit-scrollbar-thumb        {
  background: var(--line);
  border-radius: 2px;
  transition: background var(--dur-fast) var(--ease-out);
}
*::-webkit-scrollbar-thumb:hover  { background: var(--text-3); }
*::-webkit-scrollbar-corner       { background: transparent; }


/* ============================================================
   4. Navigation — premium hover/active transitions
   ============================================================ */
.nav-item {
  transition:
    background  var(--dur-fast) var(--ease-out),
    color       var(--dur-fast) var(--ease-out),
    border-left-color var(--dur-fast) var(--ease-spring);
}

/* Sidebar collapse/expand */
.shell-rail {
  transition: width var(--dur-base) var(--ease-spring) !important;
}


/* ============================================================
   5. Interactive elements — buttons, tabs, pills
   ============================================================ */

/* All clickable/button elements: faster, spring-exit feel */
button,
[role="button"],
.btn,
.btn-cta-prim,
.btn-cta-ghost,
.site-nav-cta a,
.price-cta,
.waitlist-form button {
  transition:
    background     var(--dur-fast) var(--ease-spring),
    color          var(--dur-fast) var(--ease-spring),
    border-color   var(--dur-fast) var(--ease-spring),
    box-shadow     var(--dur-fast) var(--ease-spring),
    opacity        var(--dur-fast) var(--ease-spring);
}

/* Primary CTA — Stripe-style lift on hover */
.btn-cta-prim {
  transition:
    background   var(--dur-fast) var(--ease-spring),
    border-color var(--dur-fast) var(--ease-spring),
    transform    var(--dur-base) var(--ease-spring),
    box-shadow   var(--dur-base) var(--ease-spring);
}
.btn-cta-prim:hover {
  transform: translate(-1px, -2px);
  box-shadow: 3px 4px 0 var(--signal-deep);
}
.btn-cta-prim:active {
  transform: translate(0, 0);
  box-shadow: 1px 1px 0 var(--signal-deep);
  transition-duration: var(--dur-instant);
}

/* Tab buttons in the topbar */
.tab-btn {
  transition:
    background   var(--dur-fast) var(--ease-out),
    color        var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

/* Site nav links */
.site-nav-links a {
  transition: color var(--dur-fast) var(--ease-out);
}

/* Site nav CTA button */
.site-nav-cta a.prim {
  transition:
    background   var(--dur-fast) var(--ease-spring),
    border-color var(--dur-fast) var(--ease-spring),
    transform    var(--dur-base) var(--ease-spring);
}
.site-nav-cta a.prim:hover {
  transform: translateY(-1px);
}


/* ============================================================
   6. Feature cards — subtle lift on hover (site)
   ============================================================ */
.feature-card {
  transition:
    background     var(--dur-base) var(--ease-out),
    border-color   var(--dur-base) var(--ease-out),
    transform      var(--dur-base) var(--ease-spring);
  will-change: transform;
}
.feature-card:hover {
  transform: translateY(-3px);
}
.feature-card:active {
  transform: translateY(-1px);
  transition-duration: var(--dur-instant);
}


/* ============================================================
   7. Upgraded view animation
   Was: fadein 0.18s ease — flat, generic.
   Now: fade + slide-up with spring easing, slightly longer.
   The .view-wrap class is re-mounted on every React view change.
   ============================================================ */
@keyframes view-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.view-wrap {
  animation: view-enter var(--dur-slow) var(--ease-spring) both !important;
}


/* ============================================================
   8. Upgraded overlay / modal entrance
   ============================================================ */

/* Overlay backdrop — faster fade */
.cmdk-overlay,
.shortcuts-overlay {
  animation: overlay-fade var(--dur-fast) var(--ease-out) both !important;
}
@keyframes overlay-fade {
  from { opacity: 0; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
  to   { opacity: 1; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
}

/* Modal panel — scale + slide up from center */
.cmdk-modal,
.shortcuts-modal {
  animation: modal-enter var(--dur-base) var(--ease-spring) both !important;
}
@keyframes modal-enter {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}


/* ============================================================
   9. Upgraded toast animations
   ============================================================ */
.toast {
  animation: toast-enter var(--dur-base) var(--ease-spring) both !important;
}
@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateX(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.toast.exiting {
  animation: toast-exit var(--dur-fast) var(--ease-in) forwards !important;
}
@keyframes toast-exit {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(12px) scale(0.96);
  }
}


/* ============================================================
   10. Topbar — subtle slide-down entrance on page load
   ============================================================ */
.topbar {
  animation: topbar-enter var(--dur-slow) var(--ease-spring) both;
}
@keyframes topbar-enter {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Site nav sticky header — smoother backdrop */
.site-nav {
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}


/* ============================================================
   11. Scroll-reveal system (marketing pages)
   Add class="reveal" to any section/element you want to fade in
   as the user scrolls down. scroll-reveal.js handles .visible toggling.
   Use reveal-delay-N for staggered child elements.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity   var(--dur-slow)  var(--ease-spring),
    transform var(--dur-slow)  var(--ease-spring);
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for grid children */
.reveal-delay-1 { transition-delay: 60ms;  }
.reveal-delay-2 { transition-delay: 120ms; }
.reveal-delay-3 { transition-delay: 180ms; }
.reveal-delay-4 { transition-delay: 240ms; }
.reveal-delay-5 { transition-delay: 300ms; }

/* Horizontal reveal variant (slide in from left) */
.reveal-left {
  opacity: 0;
  transform: translateX(-18px);
  transition:
    opacity   var(--dur-slow) var(--ease-spring),
    transform var(--dur-slow) var(--ease-spring);
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}


/* ============================================================
   12. FAQ accordion — smoother expand
   ============================================================ */
.faq-body {
  transition: grid-template-rows var(--dur-base) var(--ease-spring) !important;
}
.faq-q {
  transition: color var(--dur-fast) var(--ease-out) !important;
}
.faq-chevron {
  transition: transform var(--dur-base) var(--ease-spring) !important;
}


/* ============================================================
   13. Price card featured highlight — subtle pulse on load
   ============================================================ */
.price-card.featured {
  animation: card-appear var(--dur-slow) var(--ease-spring) both;
}
@keyframes card-appear {
  from { opacity: 0; transform: scale(0.98) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}


/* ============================================================
   14. Marquee — smoother with proper easing reset
   ============================================================ */
@keyframes marq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   15. prefers-reduced-motion — safety net
   Collapses ALL motion enhancements for users who need it.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Disable scroll-reveal */
  .reveal,
  .reveal-left {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Collapse all custom animations */
  .view-wrap,
  .cmdk-modal,
  .shortcuts-modal,
  .cmdk-overlay,
  .shortcuts-overlay,
  .toast,
  .toast.exiting,
  .topbar,
  .price-card.featured {
    animation: none !important;
    transition: none !important;
  }

  /* Collapse hover transforms */
  .feature-card:hover,
  .btn-cta-prim:hover,
  .btn-cta-prim:active,
  .site-nav-cta a.prim:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}