/* THE WINE CLUB / Bewegung. Animationen laufen einmal für die ausgelöste Aktion (Klassen setzt app.js → applyFx),
   Pop-ups nur beim Öffnen und Schließen. Bei „Bewegung reduzieren“ ist alles aus. */
:root{--ease-out:cubic-bezier(.2,.8,.2,1);--ease-spring:cubic-bezier(.34,1.56,.64,1)}

/* Frühere Dauer-Animationen nur noch bei der Aktion selbst */
.cheers-action.liked .ico{animation:none}
.modal-layer .modal-box{animation:none}

/* ---------- Pop-ups ---------- */
.layer-enter{animation:fxFade .22s ease-out both}
.modal-box.modal-enter{animation:fxPanelIn .32s var(--ease-out) both}
.modal-layer-sheet .modal-box.modal-enter,.modal-layer-composer .modal-box.modal-enter{animation:fxSheetIn .38s var(--ease-out) both}
.modal-ghost{position:fixed!important;inset:0;z-index:60;pointer-events:none!important;animation:fxFadeOut .24s ease-in both}
.modal-ghost .modal-box{animation:fxPanelOut .24s ease-in both!important}
.modal-ghost.modal-layer-sheet .modal-box,.modal-ghost.modal-layer-composer .modal-box{animation:fxSheetOut .24s ease-in both!important}
@keyframes fxFade{from{opacity:0}to{opacity:1}}
@keyframes fxFadeOut{from{opacity:1}to{opacity:0}}
@keyframes fxPanelIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fxPanelOut{to{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes fxSheetIn{from{transform:translateY(100%)}to{transform:none}}
@keyframes fxSheetOut{to{transform:translateY(100%)}}
@media(min-width:801px){
 .modal-layer-sheet .modal-box.modal-enter,.modal-layer-composer .modal-box.modal-enter{animation:fxPanelIn .3s var(--ease-out) both}
 .modal-ghost.modal-layer-sheet .modal-box,.modal-ghost.modal-layer-composer .modal-box{animation:fxPanelOut .22s ease-in both!important}
}

/* ---------- Anstoßen: Gläser klirren, kleiner Funkenring, Zahl springt ---------- */
.action-line.fx-cheers{position:relative}
.action-line.fx-cheers .ico{animation:fxClink .55s var(--ease-spring)}
.action-line.fx-cheers::after{content:'';position:absolute;left:14px;top:50%;width:26px;height:26px;margin:-13px 0 0 -3px;border-radius:50%;
 border:2px solid var(--wine,#8f2338);opacity:0;animation:fxRing .55s ease-out;pointer-events:none}
.action-line.fx-cheers.liked{animation:fxBump .45s var(--ease-spring)}
@keyframes fxClink{0%{transform:rotate(0) scale(1)}25%{transform:rotate(-14deg) scale(1.25)}50%{transform:rotate(12deg) scale(1.15)}75%{transform:rotate(-5deg)}100%{transform:none}}
@keyframes fxRing{0%{opacity:.7;transform:scale(.4)}100%{opacity:0;transform:scale(1.8)}}
@keyframes fxBump{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}

/* ---------- Merken und Favorit ---------- */
.fx-pop .ico,.fx-pop svg{animation:fxPop .45s var(--ease-spring)}
.fx-heart{animation:fxHeart .5s var(--ease-spring)}
@keyframes fxPop{0%{transform:scale(1)}35%{transform:scale(1.35) translateY(-2px)}100%{transform:none}}
@keyframes fxHeart{0%{transform:scale(1)}30%{transform:scale(1.3)}55%{transform:scale(.92)}100%{transform:scale(1)}}

/* ---------- Folgen / Entfolgen ---------- */
.fx-follow{animation:fxFollow .45s var(--ease-spring)}
.fx-follow:not(.is-following){animation:fxUnfollow .35s ease-out}
@keyframes fxFollow{0%{transform:scale(1)}35%{transform:scale(1.08)}65%{transform:scale(.97)}100%{transform:scale(1)}}
@keyframes fxUnfollow{0%{transform:scale(1);opacity:1}40%{transform:scale(.94);opacity:.6}100%{transform:scale(1);opacity:1}}

/* ---------- Seitenwechsel über die Tab-Leiste ---------- */
.main.fx-view{animation:fxView .34s var(--ease-out) both}
.main.fx-view :is(.post-card,.home-hero,.home-section,.product-card,.friend-row,.activity-row,.club-card):nth-child(-n+6){animation:fxRise .45s var(--ease-out) both}
.main.fx-view :is(.post-card,.home-section,.product-card,.friend-row,.activity-row,.club-card):nth-child(2){animation-delay:.04s}
.main.fx-view :is(.post-card,.home-section,.product-card,.friend-row,.activity-row,.club-card):nth-child(3){animation-delay:.08s}
.main.fx-view :is(.post-card,.home-section,.product-card,.friend-row,.activity-row,.club-card):nth-child(4){animation-delay:.12s}
.main.fx-view :is(.post-card,.home-section,.product-card,.friend-row,.activity-row,.club-card):nth-child(5){animation-delay:.16s}
.main.fx-view :is(.post-card,.home-section,.product-card,.friend-row,.activity-row,.club-card):nth-child(6){animation-delay:.2s}
.main.fx-tab :is(.post-card,.product-card,.profile-post-tile,.review-card,.friend-row){animation:fxRise .35s var(--ease-out) both}
@keyframes fxView{from{opacity:0}to{opacity:1}}
@keyframes fxRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- Hinweise federn herein ---------- */
.toast{transition:opacity .22s ease,transform .38s var(--ease-spring)!important;transform:translate(-50%,24px) scale(.96)}
.toast.show{transform:translate(-50%,0) scale(1)}

/* ---------- Knöpfe geben beim Drücken nach ---------- */
:is(.btn,.home-pill,.action-line,.quiet-btn,.category-pill,.tab,.icon-btn,.close-btn,.fav-mini,.quick-cellar,.composer-add,.login-btn,.mod-tab){transition:transform .12s ease}
:is(.btn,.home-pill,.action-line,.quiet-btn,.category-pill,.tab,.icon-btn,.close-btn,.fav-mini,.quick-cellar,.composer-add,.login-btn,.mod-tab):active{transform:scale(.96)}

@media(prefers-reduced-motion:reduce){
 .layer-enter,.modal-box.modal-enter,.modal-ghost,.modal-ghost .modal-box,.fx-cheers,.fx-cheers .ico,.fx-cheers::after,.fx-pop .ico,.fx-heart,.fx-follow,.main.fx-view,.main.fx-view *,.main.fx-tab *{animation:none!important}
 .modal-ghost{display:none}
 :is(.btn,.home-pill,.action-line,.quiet-btn,.category-pill,.tab,.icon-btn,.close-btn,.fav-mini,.quick-cellar,.composer-add,.login-btn,.mod-tab):active{transform:none}
}