@keyframes arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes panel-arrive{from{opacity:0;transform:perspective(1400px) translateY(32px) rotateX(5deg)}to{opacity:1;transform:perspective(1400px) translateY(0) rotateX(0)}}
@keyframes ambient-breathe{0%,100%{opacity:.5;transform:scale(.98)}50%{opacity:1;transform:scale(1.035)}}
@keyframes symbol-drift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-4deg)}}
@keyframes status-pulse{0%,100%{box-shadow:0 0 0 0 #98c0ff00}50%{box-shadow:0 0 0 5px #98c0ff12}}
@media(prefers-reduced-motion:no-preference){
 .hero>.eyebrow{animation:arrive .6s ease-out both}
 .hero h1{animation:arrive .85s cubic-bezier(.2,.7,.2,1) .08s both}
 .hero .intro{animation:arrive .8s ease-out .18s both}
 .hero .actions{animation:arrive .75s ease-out .28s both}
 .hero-note{animation:arrive .75s ease-out .36s both}
 .dashboard-rim{animation:panel-arrive 1.1s cubic-bezier(.2,.7,.2,1) .25s both;transform-origin:center bottom}
 .hero:before{animation:ambient-breathe 9s ease-in-out infinite}
 .dash-symbol img{animation:symbol-drift 7s ease-in-out infinite}
 .hero>.eyebrow i,.side-bottom i{animation:status-pulse 3.5s ease-in-out infinite}
 .motion-reveal{transition:opacity .75s ease var(--reveal-delay,0ms),transform .75s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms),border-color .25s,box-shadow .25s,background .25s}
 .motion-pending{opacity:0;transform:translateY(25px)}
 .button,.preview-action,.steps>a,.feature,.dash-stages>div,.dashboard-side>a{transition:transform .25s ease,border-color .25s,background .25s,box-shadow .25s}
 .steps>a.motion-reveal,.feature.motion-reveal{transition:opacity .75s ease var(--reveal-delay,0ms),transform .5s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms),border-color .25s,box-shadow .25s}
 .button span,.step-link,.text-link,.brand img,.faq summary span,.art-tile{transition:transform .3s ease,color .3s}
 .button:hover span{transform:translate(2px,-2px)}
 .button:active{transform:translateY(0) scale(.98)}
 .button.primary:hover{box-shadow:0 4px 24px #80b4ff22,0 2px 0 #ffffff44 inset}
 .brand:hover img{transform:rotate(-8deg)}
 .faq details[open] summary span{transform:rotate(45deg)}
 .faq details[open] p{animation:arrive .3s ease-out}
 #workspace:not([hidden])>.workspace-title,#workspace:not([hidden])>.studio-grid,#workspace:not([hidden])>.drafts-grid{animation:arrive .4s ease-out both}
 @media(hover:hover) and (pointer:fine){
  .steps>a:not(.motion-pending):hover,.feature:not(.motion-pending):hover{transform:translateY(-5px);border-color:#486183;box-shadow:0 16px 30px #0003}
  .dash-stages>div:hover{transform:translateY(-3px);border-color:#486183}
  .preview-action:hover{transform:translateY(-2px);background:#25364d}
  .feature:hover .t1{transform:rotate(-20deg) translateX(12px)}
  .feature:hover .t2{transform:translateY(-19px)}
  .feature:hover .t3{transform:rotate(20deg) translateX(-12px)}
 }
}
@media(prefers-reduced-motion:reduce){.motion-pending{opacity:1;transform:none}}