/* Neko Photo motion layer (ink-vermilion-motion-1).
   Presentation only. Animates transform, opacity, filter and clip-path.
   Every entrance is gated by prefers-reduced-motion; neko-system.css also
   disables all animation/transition under reduce. Initial hidden states for
   scroll reveals exist only after neko-motion.js adds .nm-js, so content is
   never hidden without JavaScript. */
:root{--nm-out:cubic-bezier(.16,1,.3,1);--nm-ease:cubic-bezier(.22,1,.36,1);--nm-spring:cubic-bezier(.34,1.56,.64,1)}

/* ---------- Keyframes ---------- */
@keyframes nm-rise{from{opacity:0;transform:translateY(16px);filter:blur(6px)}}
@keyframes nm-fade{from{opacity:0}}
@keyframes nm-word{from{transform:translateY(108%)}}
@keyframes nm-shot{from{opacity:0;transform:perspective(1400px) rotateX(9deg) rotateY(-9deg) translateY(44px) scale(.95)}}
@keyframes nm-develop{from{filter:grayscale(1) blur(8px) brightness(1.12);transform:scale(1.08)}}
@keyframes nm-swap{from{opacity:0;transform:translateY(14px) scale(.95);filter:blur(6px)}}
@keyframes nm-pop{from{opacity:0;transform:translateY(12px) scale(.96)}}
@keyframes nm-badge{from{transform:scale(.4);opacity:0}}
@keyframes nm-row{from{opacity:0;transform:translateY(8px)}}
@keyframes nm-lift{from{opacity:0;transform:translateY(12px)}}
@keyframes nm-grow-x{from{transform:scaleX(0)}}
@keyframes nm-grow-y{from{transform:scaleY(0)}}
@keyframes nm-icon{from{transform:rotate(-100deg) scale(.4);opacity:0}}
@keyframes nm-drop{from{opacity:0;transform:translateY(-8px)}}
@keyframes nm-vt-out{to{opacity:0;filter:blur(3px)}}
@keyframes nm-vt-in{from{opacity:0;transform:translateY(10px)}}
@keyframes nm-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Always-on micro-interactions (transitions only) ---------- */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{content:'';position:absolute;inset:0 auto 0 -60%;width:45%;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg) translateX(0);transition:transform .75s var(--nm-ease)}
.btn-primary:hover::after{transform:skewX(-18deg) translateX(420%)}
.btn-primary:hover{box-shadow:0 10px 26px -14px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn-primary span[aria-hidden],.np-text-link span[aria-hidden]{display:inline-block;transition:transform .35s var(--nm-spring)}
.btn-primary:hover span[aria-hidden]{transform:translateY(3px)}
.np-text-link:hover span[aria-hidden]{transform:translate(3px,-3px)}
.btn:active{transition-duration:.06s}

.nc-links>a{position:relative}
.nc-links>a::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:1.5px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--nm-ease)}
.nc-links>a:hover::after,.nc-links>a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nc-links>a[aria-current]{text-decoration:none}
.nc-links>a{transition:color .2s}

.nc-header{transition:box-shadow .35s var(--nm-ease),background-color .35s}
.nc-header.nm-scrolled{box-shadow:0 10px 30px -26px rgba(38,36,38,.55)}
.nc-brand img{transition:transform .5s var(--nm-spring)}
.nc-brand:hover img{transform:rotate(-8deg) scale(1.08)}

input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select,textarea{transition:border-color .2s,box-shadow .25s var(--nm-ease),background-color .2s}
input:not([type=hidden]):not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-2) 16%,transparent)}

.nav-link{transition:background-color .2s,color .2s}
.nav-link svg{transition:transform .35s var(--nm-spring)}
.nav-link:hover svg{transform:translateX(2px) scale(1.08)}

.roadmap-card{transition:transform .3s var(--nm-ease),box-shadow .3s var(--nm-ease),border-color .3s}
.roadmap-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px -14px rgba(38,36,38,.28);border-color:color-mix(in srgb,var(--accent-2) 30%,var(--border))}

/* Screenshots: gentle zoom on hover */
.np-editor>a,.np-gallery-image a{overflow:hidden;display:block}
.np-editor img,.np-gallery-image img{transition:transform .7s var(--nm-ease)}
.np-editor>a:hover img{transform:scale(1.015)}
.np-gallery-image a:hover img{transform:scale(1.035)}

/* FAQ: rotating plus, smooth open where supported */
.np-answers summary::after{transition:transform .35s var(--nm-spring)}
.np-answers details[open] summary::after{content:'+';transform:rotate(45deg)}
.np-answers summary{transition:color .2s}
.np-answers summary:hover{color:var(--accent-2)}
@supports (interpolate-size:allow-keywords){
  .np-answers{interpolate-size:allow-keywords}
  .np-answers details::details-content{block-size:0;overflow:clip;transition:block-size .4s var(--nm-ease),content-visibility .4s allow-discrete}
  .np-answers details[open]::details-content{block-size:auto}
}

/* Gallery tabs: sliding selection pill (indicator injected by neko-motion.js) */
.np-tabs{position:relative}
.np-tabs button{position:relative;z-index:1;transition:color .25s}
.np-tabs.nm-has-ind button[aria-selected=true]{background:transparent;border-color:transparent}
.nm-tab-ind{position:absolute;left:0;top:0;z-index:0;pointer-events:none;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--control-radius)}
.np-tabs.nm-ind-live .nm-tab-ind{transition:transform .5s var(--nm-spring),width .45s var(--nm-ease)}

/* Hero preview: 3D tilt and light sheen driven by CSS variables */
.np-product-preview{position:relative;transform:perspective(1300px) rotateX(var(--nm-rx,0deg)) rotateY(var(--nm-ry,0deg)) translateY(var(--nm-py,0px));transition:transform .6s var(--nm-ease),box-shadow .6s var(--nm-ease)}
.np-product-preview::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(520px circle at var(--nm-mx,50%) var(--nm-my,0%),rgba(255,255,255,.26),transparent 46%);opacity:0;transition:opacity .45s}
.np-product-preview.nm-tilting{box-shadow:0 36px 80px -46px #24538b70}
.np-product-preview.nm-tilting::after{opacity:1}

/* Kinetic headline colors: first line stays ink, second line keeps the accent */
.np-hero h1 .nm-l1,.np-hero h1 .nm-l1 .nm-w{color:var(--text)}

/* Scroll progress (public pages) */
.nm-progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:90;pointer-events:none;background:var(--accent-2);transform:scaleX(0);transform-origin:left}



/* ---------- Motion allowed ---------- */
@media (prefers-reduced-motion:no-preference){
  /* Cross-document page transitions (Chromium; others navigate normally) */
  @view-transition{navigation:auto}
  .nc-header{view-transition-name:nm-header}
  @media (min-width:768px){.sidebar{view-transition-name:nm-sidebar}}
  ::view-transition-old(root){animation:nm-vt-out .16s var(--nm-ease) both}
  ::view-transition-new(root){animation:nm-vt-in .4s var(--nm-out) both}
  /* Theme switch uses a circular reveal from the toggle instead */
  html.nm-theme-vt::view-transition-old(root),html.nm-theme-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}
  html.nm-theme-vt .nc-header,html.nm-theme-vt .sidebar{view-transition-name:none}

  /* Home: ambient light behind the hero */
  .np-home{overflow-x:clip}
  .np-hero{position:relative;isolation:isolate}
  .np-hero::before{content:'';position:absolute;z-index:-1;pointer-events:none;width:min(760px,70vw);aspect-ratio:1;right:-4%;top:-18%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 17%,transparent),transparent 66%);transform:translate3d(var(--nm-gx,0px),var(--nm-gy,0px),0);transition:transform 1.2s var(--nm-out);animation:nm-fade 1.6s ease-out both}

  /* Home: kinetic headline */
  .np-hero h1 .nm-line{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .1em;margin:0 -.08em -.1em}
  .np-hero h1 .nm-w{display:inline-block;animation:nm-word .95s var(--nm-out) backwards}
  .np-hero h1 .nm-l1 .nm-w:nth-child(1){animation-delay:.08s}
  .np-hero h1 .nm-l1 .nm-w:nth-child(2){animation-delay:.16s}
  .np-hero h1 .nm-l2 .nm-w:nth-child(1){animation-delay:.26s}
  .np-hero h1 .nm-l2 .nm-w:nth-child(2){animation-delay:.34s}
  .np-hero h1{animation:none}
  .np-hero-copy>.np-eyebrow{animation:nm-rise .6s var(--nm-out) backwards}
  .np-hero .np-lead{animation:nm-rise .7s var(--nm-out) .42s backwards}
  .np-hero .np-hero-description{animation:nm-rise .7s var(--nm-out) .5s backwards}
  .np-hero .np-actions{animation:nm-rise .7s var(--nm-out) .58s backwards}
  .np-hero .np-availability{animation:nm-rise .7s var(--nm-out) .66s backwards}
  .np-product-preview{animation:nm-shot 1.1s var(--nm-out) .06s backwards}
  .np-product-preview img{animation:nm-develop 1.6s var(--nm-out) .3s backwards}

  /* Scroll-driven progress where supported (off main thread) */
  @supports (animation-timeline:scroll()){
    .nm-progress{animation:nm-progress linear both;animation-timeline:scroll(root)}
  }

  /* Generic scroll reveal */
  .nm-js .nm-r{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity .8s var(--nm-out),transform .95s var(--nm-out),filter .8s var(--nm-out);transition-delay:calc(var(--nm-i,0) * 70ms)}
  .nm-js .nm-r.nm-in{opacity:1;transform:none;filter:none}

  /* Welcome screenshot "develops" from monochrome as it arrives */
  .nm-js .np-editor.nm-r:not(.nm-in) img{filter:grayscale(1) blur(8px) brightness(1.12);transform:scale(1.08)}
  .np-editor.nm-in img{animation:nm-develop 1.8s var(--nm-out) .12s backwards}

  /* Privacy panel expands open from a smaller frame */
  .nm-js .np-privacy.nm-r{transform:none;filter:none;clip-path:inset(12% 9% round 32px);transition:clip-path 1.1s var(--nm-out),opacity .55s ease-out}
  .nm-js .np-privacy.nm-r.nm-in{clip-path:inset(0 round var(--radius))}
  .np-privacy.nm-in>div>*{animation:nm-rise .75s var(--nm-out) backwards}
  .np-privacy.nm-in>div:first-child>*:nth-child(1){animation-delay:.35s}
  .np-privacy.nm-in>div:first-child>*:nth-child(2){animation-delay:.43s}
  .np-privacy.nm-in>div:last-child>*:nth-child(1){animation-delay:.52s}
  .np-privacy.nm-in>div:last-child>*:nth-child(2){animation-delay:.6s}

  /* Plans table rows cascade in */
  .plan-catalog.nm-in tbody tr{animation:nm-row .55s var(--nm-out) backwards}
  .plan-catalog.nm-in tbody tr:nth-child(1){animation-delay:.1s}
  .plan-catalog.nm-in tbody tr:nth-child(2){animation-delay:.14s}
  .plan-catalog.nm-in tbody tr:nth-child(3){animation-delay:.18s}
  .plan-catalog.nm-in tbody tr:nth-child(4){animation-delay:.22s}
  .plan-catalog.nm-in tbody tr:nth-child(5){animation-delay:.26s}
  .plan-catalog.nm-in tbody tr:nth-child(6){animation-delay:.3s}
  .plan-catalog.nm-in tbody tr:nth-child(n+7){animation-delay:.34s}
  .plan-catalog.nm-in .pt-mark{animation:nm-badge .45s var(--nm-spring) .4s backwards}

  /* Gallery: new panel swaps in */
  .np-gallery-panel:not([hidden]) .np-gallery-image img{animation:nm-swap .6s var(--nm-out) backwards}
  .np-gallery-panel:not([hidden]) .np-gallery-copy{animation:none}
  .np-gallery-panel:not([hidden]) .np-gallery-copy>*{animation:nm-rise .55s var(--nm-out) backwards}
  .np-gallery-panel:not([hidden]) .np-gallery-copy>*:nth-child(2){animation-delay:.06s}
  .np-gallery-panel:not([hidden]) .np-gallery-copy>*:nth-child(3){animation-delay:.12s}
  .np-gallery-panel:not([hidden]) .np-gallery-copy>*:nth-child(4){animation-delay:.18s}

  /* FAQ answer text */
  .np-answers details[open] p{animation:nm-rise .45s var(--nm-out) .05s backwards}

  /* Lightbox (::backdrop is not matched by the global * reset, so keep it gated here) */
  .np-lightbox[open]{animation:nm-pop .38s var(--nm-out)}
  .np-lightbox[open]::backdrop{animation:nm-fade .3s ease-out}

  /* Theme icon swap: the newly shown icon spins in */
  .theme-toggle svg,.theme-toggle-sm svg{animation:nm-icon .5s var(--nm-spring) backwards}

  /* Mobile public menu */
  @media (max-width:767px){.nc-links:not([hidden]){animation:nm-drop .28s var(--nm-out)}}

  /* Auth pages */
  .auth-story>*{animation:nm-rise .75s var(--nm-out) backwards}
  .auth-story>*:nth-child(2){animation-delay:.08s}
  .auth-story>*:nth-child(3){animation-delay:.16s}
  .auth-story>*:nth-child(4){animation-delay:.24s}
  .auth-card{animation:nm-pop .7s var(--nm-out) .1s backwards}
  .auth-card form>*{animation:nm-rise .6s var(--nm-out) backwards}
  .auth-card form>*:nth-child(2){animation-delay:.22s}
  .auth-card form>*:nth-child(3){animation-delay:.28s}
  .auth-card form>*:nth-child(4){animation-delay:.34s}
  .auth-card form>*:nth-child(n+5){animation-delay:.4s}

  /* Workspace (member + admin): restrained entrance, <=0.32s stagger */
  .nc-page>*{animation:nm-lift .55s var(--nm-out) backwards}
  .nc-page>*:nth-child(2){animation-delay:.04s}
  .nc-page>*:nth-child(3){animation-delay:.08s}
  .nc-page>*:nth-child(4){animation-delay:.12s}
  .nc-page>*:nth-child(5){animation-delay:.16s}
  .nc-page>*:nth-child(6){animation-delay:.2s}
  .nc-page>*:nth-child(7){animation-delay:.24s}
  .nc-page>*:nth-child(n+8){animation-delay:.28s}
  .stat-grid .stat{animation:nm-lift .55s var(--nm-out) backwards}
  .stat-grid .stat:nth-child(2){animation-delay:.05s}
  .stat-grid .stat:nth-child(3){animation-delay:.1s}
  .stat-grid .stat:nth-child(4){animation-delay:.15s}
  .stat-grid .stat:nth-child(n+5){animation-delay:.2s}
  .nc-page tbody tr,.token-list>*,.activity-list>*,.notification-row{animation:nm-row .45s var(--nm-out) backwards}
  .nc-page tbody tr:nth-child(2),.token-list>*:nth-child(2),.activity-list>*:nth-child(2){animation-delay:.03s}
  .nc-page tbody tr:nth-child(3),.token-list>*:nth-child(3),.activity-list>*:nth-child(3){animation-delay:.06s}
  .nc-page tbody tr:nth-child(4),.token-list>*:nth-child(4),.activity-list>*:nth-child(4){animation-delay:.09s}
  .nc-page tbody tr:nth-child(5),.token-list>*:nth-child(5),.activity-list>*:nth-child(5){animation-delay:.12s}
  .nc-page tbody tr:nth-child(6),.token-list>*:nth-child(6),.activity-list>*:nth-child(6){animation-delay:.15s}
  .nc-page tbody tr:nth-child(7),.token-list>*:nth-child(7),.activity-list>*:nth-child(7){animation-delay:.18s}
  .nc-page tbody tr:nth-child(n+8),.token-list>*:nth-child(n+8),.activity-list>*:nth-child(n+8){animation-delay:.21s}
  .progress-fill{transform-origin:left;animation:nm-grow-x 1s var(--nm-out) .3s backwards}
  .nav-link.active::before{transform-origin:center;animation:nm-grow-y .45s var(--nm-spring) .15s backwards}
  .notification-count{animation:nm-badge .5s var(--nm-spring) .3s backwards}
  .alert{animation:nm-pop .5s var(--nm-out) backwards}
  .changelog-entry.nm-r,.legal-document .panel-card.nm-r{transition-delay:0s}
}

/* Print: always show final state, no reveal layer, no delays */
@media print{
  .nm-r,.nm-js .nm-r{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;transition:none!important}
  *,*::before,*::after{animation:none!important}
  .nm-progress,.nm-tab-ind{display:none!important}
  .np-product-preview{transform:none!important}
}
@media (prefers-reduced-motion:reduce){.np-lightbox::backdrop{animation:none!important;transition:none!important}}