/* Proposed animation layer for the FBDL preview site - REVIEW ONLY, not deployed.
   Restrained, GPU-friendly (transform/opacity only), reduced-motion safe. */

/* 1. Paste button: calm attention pulse, springy press, shine on hover */
@keyframes paste-pulse{
 0%,100%{box-shadow:0 0 0 0 rgba(24,188,156,0)}
 50%{box-shadow:0 0 0 5px rgba(24,188,156,.18)}}
#p{animation:paste-pulse 3.2s ease-in-out infinite;border-radius:0;transition:transform .16s cubic-bezier(.34,1.56,.64,1),color .15s ease,box-shadow .3s ease}
#p:hover{color:#18bc9c;transform:scale(1.06)}
#p:active{transform:scale(.94)}
@keyframes paste-pop{0%{background-color:#e7f8f4}100%{background-color:transparent}}
#u.pasted{animation:paste-pop .9s ease-out}

/* 2. All download buttons: hover lift, soft shadow, crisp press */
.btn-dark,.btn-teal,.btn-gray,.btn-sky{transition:transform .16s ease-out,box-shadow .2s ease,background-color .15s ease}
.btn-dark:hover,.btn-teal:hover,.btn-gray:hover,.btn-sky:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(44,62,80,.22)}
.btn-dark:active,.btn-teal:active,.btn-gray:active,.btn-sky:active{transform:translateY(0) scale(.97);box-shadow:0 1px 4px rgba(44,62,80,.18)}

/* 3. Result card: staggered fade-and-rise entrance */
@keyframes rise-in{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
#out>*{animation:rise-in .45s cubic-bezier(.22,1,.36,1) both}
#out>*:nth-child(2){animation-delay:.06s}
#out>*:nth-child(3){animation-delay:.12s}
#out>*:nth-child(4){animation-delay:.18s}
#out>*:nth-child(5){animation-delay:.24s}
#out>*:nth-child(6){animation-delay:.3s}
#out img{animation:rise-in .5s ease both}

/* 4. Progress bar: smooth fill plus a soft moving shine */
.prog__bar{transition:width .45s cubic-bezier(.22,1,.36,1)}
.prog__bar::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);background-size:220% 100%;animation:prog-shine 1.6s linear infinite}
@keyframes prog-shine{0%{background-position:130% 0}100%{background-position:-90% 0}}
.prog__txt{transition:color .2s ease}

/* 5. Language toggle: gentle fade on swap */
@keyframes lang-fade{0%{opacity:.35}100%{opacity:1}}
.lang-swap body>*,.lang-swap nav,.lang-swap header,.lang-swap main,.lang-swap footer{animation:lang-fade .22s ease-out}
.lang-btn{transition:background-color .15s ease,transform .16s cubic-bezier(.34,1.56,.64,1)}
.lang-btn:active{transform:scale(.93)}

/* 6. Nav links: underline grows on hover */
nav a[href^="#"]{position:relative}
nav a[href^="#"]::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:#18bc9c;border-radius:1px;transform:scaleX(0);transform-origin:left;transition:transform .18s ease-out}
nav a[href^="#"]:hover::after{transform:scaleX(1)}

/* 7. Updates entries: soft entrance stagger */
@keyframes upd-in{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
#updlist>div{animation:upd-in .4s ease-out both}
#updlist>div:nth-child(2){animation-delay:.08s}
#updlist>div:nth-child(3){animation-delay:.16s}

/* 8. FAQ answers: gentle reveal */
.faq-row[open]>div{animation:rise-in .3s ease-out}

/* Reduced motion: everything off */
@media(prefers-reduced-motion:reduce){
 #p{animation:none}
 #out>*,#out img,#updlist>div,.faq-row[open]>div{animation:none}
 .prog__bar::after{animation:none}
 .btn-dark,.btn-teal,.btn-gray,.btn-sky,#p,.lang-btn{transition:none}
}