/* Motion & micro-interactions (site-wide, restrained in the editor).
   Everything here is decoration: it switches off for prefers-reduced-motion. */
:root{ --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); }

/* page change: the new page rises in */
#site-main.page-enter > *{ animation:bp-rise .42s var(--ease-out) both; }
#site-main.page-enter > *:nth-child(2){ animation-delay:.04s; } #site-main.page-enter > *:nth-child(3){ animation-delay:.08s; }
@keyframes bp-rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* home: sections reveal as they scroll in; cards stagger */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal.in .feature-card{ animation:bp-rise .5s var(--ease-out) both; }
.reveal.in .feature-card:nth-child(2){ animation-delay:.05s; } .reveal.in .feature-card:nth-child(3){ animation-delay:.1s; }
.reveal.in .feature-card:nth-child(4){ animation-delay:.15s; } .reveal.in .feature-card:nth-child(5){ animation-delay:.2s; }
.reveal.in .feature-card:nth-child(6){ animation-delay:.25s; } .reveal.in .feature-card:nth-child(n+7){ animation-delay:.3s; }

/* cards: lift, a soft accent glow, the preview leans in */
.feature-card{ transition:border-color .2s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.feature-card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px -14px rgba(0,0,0,.55), 0 0 0 1px var(--accent-border); }
.feature-card .feature-preview{ transition:transform .5s var(--ease-out), filter .3s; transform-origin:50% 60%; }
.feature-card:hover .feature-preview{ transform:scale(1.035); filter:saturate(1.15); }
.feature-card:active{ transform:translateY(-1px) scale(.995); }

/* buttons: pressed feel and clear keyboard focus */
.btn-primary-link, button.primary, .primary{ transition:transform .12s var(--ease-spring), box-shadow .2s var(--ease-out), background .15s; }
.btn-primary-link:hover, button.primary:hover{ box-shadow:0 8px 22px -10px var(--accent); }
.btn-primary-link:active, button.primary:active, button.ghost:active, .seg-btn:active{ transform:scale(.97); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.seg-btn{ transition:background .18s var(--ease-out), color .18s, box-shadow .18s; }

/* menus and modals open with a short ease, not a jump */
.menu.open .menu-panel, .menu[aria-expanded="true"] .menu-panel{ animation:bp-pop .16s var(--ease-out) both; transform-origin:top left; }
@keyframes bp-pop{ from{ opacity:0; transform:translateY(-4px) scale(.98); } to{ opacity:1; transform:none; } }

/* editor: panels slide, quickly */
#palette, #inspector{ transition:transform .18s var(--ease-out), opacity .18s var(--ease-out); }

/* the hero canvas floats gently */
.hero-visual canvas{ animation:bp-float 7s ease-in-out infinite; }
@keyframes bp-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}