/* SOLID motion system — lightweight, GPU-friendly, no layout-jank */
:root{
  --sm-ease:cubic-bezier(.22,1,.36,1);
  --sm-fast:260ms;
  --sm-med:560ms;
  --sm-slow:760ms;
}

/* Reveal system uses individual transform properties so it won't overwrite existing transform rules. */
html.sm-motion .sm-reveal{
  opacity:0;
  translate:0 22px;
  scale:1;
  transition:
    opacity var(--sm-med) var(--sm-ease),
    translate var(--sm-slow) var(--sm-ease),
    scale var(--sm-slow) var(--sm-ease);
  transition-delay:var(--sm-delay,0ms);
  will-change:opacity,translate,scale;
}
html.sm-motion .sm-reveal[data-sm-dir="left"]{translate:-26px 0}
html.sm-motion .sm-reveal[data-sm-dir="right"]{translate:26px 0}
html.sm-motion .sm-reveal[data-sm-dir="scale"]{translate:0 10px;scale:.975}
html.sm-motion .sm-reveal.sm-visible{
  opacity:1;
  translate:0 0;
  scale:1;
}
html.sm-motion .sm-reveal.sm-visible.sm-settled{will-change:auto}

/* Top navigation enters once, then stays static. */
html.sm-motion .sc-navbar{
  animation:sm-nav-in 620ms var(--sm-ease) both;
}
@keyframes sm-nav-in{
  from{opacity:0;translate:0 -14px}
  to{opacity:1;translate:0 0}
}

/* Hero gets a deliberate first-screen sequence. */
html.sm-motion .sc-kicker.sm-reveal{transition-delay:60ms}
html.sm-motion .sc-hero-copy h1.sm-reveal{transition-delay:120ms}
html.sm-motion .sc-hero-copy>p.sm-reveal{transition-delay:180ms}
html.sm-motion .sc-hero-actions.sm-reveal{transition-delay:240ms}
html.sm-motion .sc-proof-row.sm-reveal{transition-delay:300ms}
html.sm-motion .sc-separated-scene.sm-reveal{transition-delay:130ms}

/* Soft, premium hover responses. */
@media (hover:hover) and (pointer:fine){
  .sc-btn,.su-submit,.su-main-action,.su-secondary-action,.static-btn,
  .sc-account-btn,.sc-theme-toggle,.su-plan-switch,.su-payment-select-trigger{
    transition:translate var(--sm-fast) var(--sm-ease),box-shadow var(--sm-fast) var(--sm-ease),border-color var(--sm-fast) ease,background-color var(--sm-fast) ease,opacity var(--sm-fast) ease!important;
  }
  .sc-btn:hover,.su-submit:hover,.su-main-action:hover,.static-btn:hover{translate:0 -2px}
  .sc-account-btn:hover,.sc-theme-toggle:hover,.su-plan-switch:hover,.su-payment-select-trigger:hover{translate:0 -1px}

  .sc-feature-card,.sc-price-card,.sc-update-card,.sc-process-grid>article,
  .su-product-card,.su-buy-card,.su-checkout-card,.su-info-card,.su-dashboard-panel,.static-card{
    transition:translate 320ms var(--sm-ease),scale 320ms var(--sm-ease),box-shadow 320ms var(--sm-ease),border-color 320ms ease!important;
  }
  .sc-feature-card:hover,.sc-price-card:hover,.sc-update-card:hover,.sc-process-grid>article:hover,
  .su-product-card:hover,.su-buy-card:hover,.su-info-card:hover,.static-card:hover{
    translate:0 -4px;
    scale:1.006;
  }
}

/* A small shine on primary actions, only on hover. */
.sc-btn-primary,.su-submit,.su-main-action,.su-buy-primary{position:relative;overflow:hidden}
.sc-btn-primary::after,.su-submit::after,.su-main-action::after,.su-buy-primary::after{
  content:"";
  position:absolute;
  inset:-40% auto -40% -45%;
  width:34%;
  rotate:14deg;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
  translate:-180% 0;
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .sc-btn-primary:hover::after,.su-submit:hover::after,.su-main-action:hover::after,.su-buy-primary:hover::after{
    animation:sm-shine 720ms var(--sm-ease) both;
  }
}
@keyframes sm-shine{to{translate:540% 0}}

/* FAQ feels responsive without animating expensive layout properties. */
.sc-faq-list details summary i{transition:rotate 260ms var(--sm-ease),color 260ms ease}
.sc-faq-list details[open] summary i{rotate:45deg}
.sc-faq-list details[open] p{animation:sm-faq-in 360ms var(--sm-ease) both}
@keyframes sm-faq-in{from{opacity:0;translate:0 -5px}to{opacity:1;translate:0 0}}

/* Subtle status pulse; tiny element only, so it stays cheap. */
.sc-scene-status-dot,.su-status-pill>span,.static-status::before{
  animation:sm-status-pulse 2.8s ease-in-out infinite;
}
@keyframes sm-status-pulse{
  0%,100%{scale:1;opacity:1}
  50%{scale:1.13;opacity:.76}
}

/* Modal/card entrances. */
.solid-auth-modal:not([hidden]) .solid-auth-modal__card,
.su-download-modal:not([hidden]) .su-download-modal-card{
  animation:sm-modal-in 360ms var(--sm-ease) both;
}
.solid-auth-modal:not([hidden]) .solid-auth-modal__backdrop,
.su-download-modal:not([hidden]) .su-download-modal-backdrop{
  animation:sm-fade-in 260ms ease both;
}
@keyframes sm-modal-in{from{opacity:0;translate:0 12px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
@keyframes sm-fade-in{from{opacity:0}to{opacity:1}}

/* Theme/icon micro-motion. */
.sc-theme-toggle i,.sc-account-btn i,.sc-proof-discord i,.su-info-icon i,.su-panel-icon i{
  transition:translate var(--sm-fast) var(--sm-ease),rotate var(--sm-fast) var(--sm-ease),scale var(--sm-fast) var(--sm-ease)!important;
}
@media (hover:hover) and (pointer:fine){
  .sc-theme-toggle:hover i{rotate:10deg;scale:1.06}
  .sc-account-btn:hover i,.sc-proof-discord:hover i{translate:0 -1px;scale:1.06}
}

/* Motion remains enabled regardless of prefers-reduced-motion. */


/* =========================================================
   SINGLE SCROLL ROOT FIX
   Prevents html/body from becoming separate vertical scrollers
   when the desktop body zoom is active.
========================================================= */
html{
  overflow-x:clip!important;
  overflow-y:auto!important;
}
body.sc-body{
  overflow-x:clip!important;
  overflow-y:visible!important;
  height:auto!important;
}
.sc-site-shell{
  overflow:visible!important;
  height:auto!important;
}
@media (min-width:1100px){
  html{overflow-x:clip!important;overflow-y:auto!important}
  body,body.sc-body{overflow-x:clip!important;overflow-y:visible!important}
}