/* Motion for the whole site. Only transform and opacity (cheap on phones); no heavy effects.
   Everything is switched off for people who asked for reduced motion (see the end of this file). */

/* 1. Hero demo: see demo.css (generated by scripts/gen_demo_css.py) */
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.demo .stt .t2,.demo .skel b{animation:shimmer 1.4s linear infinite}

/* 2. Hero ribbons drift slowly */
@keyframes drift1{from{transform:rotate(-24deg) translate3d(0,0,0)}to{transform:rotate(-24deg) translate3d(-26px,18px,0)}}
@keyframes drift2{from{transform:rotate(-24deg) translate3d(0,0,0)}to{transform:rotate(-24deg) translate3d(20px,-16px,0)}}
.r1{animation:drift1 24s ease-in-out infinite alternate}
.r2{animation:drift2 30s ease-in-out infinite alternate}
.r3{animation:drift1 27s ease-in-out infinite alternate-reverse}

/* 3. Blocks fade in when scrolled to. Hidden only if the script is running (page stays readable without it) */
.js-reveal [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .4s ease}
.js-reveal [data-reveal].in{opacity:1;transform:none}

/* 4. Small reactions */
.btn{transition:background-color .15s,transform .15s,box-shadow .15s,border-color .15s}
.btn:hover{background:var(--btn-hover);border-color:var(--btn-hover);transform:translateY(-1px);box-shadow:0 6px 14px -6px rgba(0,113,227,.55)}
.btn.ghost:hover{background:var(--soft);border-color:var(--muted);box-shadow:none}
.btn:active{transform:none}
.nav a,.fgrid a,.langmenu summary{transition:color .15s}
.card{transition:border-color .2s,transform .2s,box-shadow .2s}
.card:hover{border-color:var(--bd2);transform:translateY(-2px);box-shadow:0 14px 28px -18px var(--shadow)}
.drop{transition:background-color .2s,border-color .2s}.drop:hover{background:var(--accsoft);border-color:var(--acc);color:var(--acc)}
.chips span{transition:border-color .15s,color .15s}.chips span:hover{border-color:var(--bd2);color:var(--ink)}
.signup{transition:box-shadow .2s,border-color .2s}.signup:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px rgba(0,113,227,.18)}
@keyframes menuin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.langmenu[open] .menu{animation:menuin .15s ease-out}

/* 5. Reduced motion: no movement at all, everything shown in its final state */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js-reveal [data-reveal]{opacity:1;transform:none}
  .btn:hover,.card:hover{transform:none}
}