/* Motion is opt-in through JS; the complete page works without it. */
.aurora-colors{isolation:isolate;background:linear-gradient(125deg,#cbb5ff 0%,#a6dfff 52%,#ffd3b8 100%)}
.aurora-colors::before,.aurora-colors::after{content:'';position:absolute;inset:-50%;pointer-events:none}
.aurora-colors::before{background:radial-gradient(ellipse at 28% 24%,#b18bff 0,transparent 48%),radial-gradient(ellipse at 86% 22%,#ffa47b 0,transparent 48%);opacity:.95}
.aurora-colors::after{background:radial-gradient(ellipse at 26% 70%,#79d9f8 0,transparent 50%),radial-gradient(ellipse at 72% 66%,#b2c6ff 0,transparent 46%);opacity:.8}
body .hero-demo:hover{transform:rotateY(-10deg) rotateX(5deg) rotateZ(3deg)}
body[data-motion=off] .hero-demo,body[data-motion=off] .hero-demo:hover{transform:rotateY(-10deg) rotateX(5deg) rotateZ(3deg);transition:none}
[data-reveal]{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){
  body[data-motion=on] .aurora-colors{animation:flow-base 17s ease-in-out infinite alternate}
  body[data-motion=on] .aurora-colors::before{animation:flow-warm 11s ease-in-out infinite alternate}
  body[data-motion=on] .aurora-colors::after{animation:flow-cool 13s ease-in-out infinite alternate}
  body[data-motion=on] .hero-demo{animation:document-float 7s ease-in-out infinite;transform:rotateY(calc(-10deg + var(--pointer-x,0deg))) rotateX(calc(5deg + var(--pointer-y,0deg))) rotateZ(3deg);transition:transform .4s ease-out}
  body[data-motion=on] .stage-note{animation:note-float 6s ease-in-out infinite}
  body[data-motion=on] [data-reveal]{transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}
  body[data-motion=on] [data-reveal=pending]{opacity:0;transform:translateY(26px)}
  body[data-motion=on] [data-reveal]:focus-within{opacity:1;transform:none;transition:none}
  body[data-motion=on] .hero-demo:focus-within{animation-play-state:paused;transform:none;transition:none}
}
@keyframes flow-base{0%{transform:translate3d(-3%,-2%,0) rotate(-4deg) scale(1.02)}100%{transform:translate3d(4%,3%,0) rotate(6deg) scale(1.09)}}
@keyframes flow-warm{0%{transform:translate3d(-9%,-5%,0) rotate(-12deg) scale(1.1)}100%{transform:translate3d(13%,8%,0) rotate(17deg) scale(1.03)}}
@keyframes flow-cool{0%{transform:translate3d(11%,5%,0) rotate(8deg) scale(1.02)}100%{transform:translate3d(-12%,-8%,0) rotate(-15deg) scale(1.1)}}
@keyframes document-float{0%,100%{translate:0 0}50%{translate:0 -11px}}
@keyframes note-float{0%,100%{translate:0 -3px}50%{translate:0 6px}}
body[data-hero-visible=false] .aurora-colors,body[data-hero-visible=false] .aurora-colors::before,body[data-hero-visible=false] .aurora-colors::after,body[data-hero-visible=false] .hero-demo,body[data-hero-visible=false] .stage-note,body[data-page-hidden=true] .aurora-colors,body[data-page-hidden=true] .aurora-colors::before,body[data-page-hidden=true] .aurora-colors::after,body[data-page-hidden=true] .hero-demo,body[data-page-hidden=true] .stage-note{animation-play-state:paused!important}
@media(max-width:760px){
  body .hero-demo:hover,body[data-motion=off] .hero-demo,body[data-motion=off] .hero-demo:hover{transform:rotateY(-5deg) rotateZ(2deg)}
  body[data-motion=on] .hero-demo{transform:rotateY(-5deg) rotateZ(2deg);animation-name:document-float-mobile;animation-duration:8s}
  body[data-motion=on] .aurora-colors{animation-duration:22s}
  body[data-motion=on] .aurora-colors::before{animation-duration:16s}
  body[data-motion=on] .aurora-colors::after{animation-duration:18s}
  body[data-motion=on] [data-reveal=pending]{transform:translateY(16px)}
}
@keyframes document-float-mobile{0%,100%{translate:0 0}50%{translate:0 -5px}}
@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .aurora-colors,.aurora-colors::before,.aurora-colors::after,.hero-demo,.stage-note{animation:none!important;translate:none!important;transition:none!important}
  body .hero-demo,body .hero-demo:hover{transform:none!important}
}
@media print{[data-reveal]{opacity:1!important;transform:none!important;transition:none!important}.hero-demo,.stage-note{animation:none!important;translate:none!important}}